Add withTouchProps and withMouseDownProps example

src/example/WithHoverPropsExample.js

@@ -20,12 +20,12 @@ export default withHoverProps({ hovered: true })(function Focusable({ hovered, .
  return (
  <article {...props}>
  <h1>withHoverProps</h1>
- {hovered ? 'hovered!' : 'not hovered'}
+ {hovered ? 'hovered!' : 'hover the example to see it change'}
  </article>
  )
 })`}</pre>
  </code>
- {hovered ? 'hovered!' : 'not hovered'}
+ {hovered ? 'hovered!' : 'hover the example to see it change'}
  </article>
  )
 })

src/example/WithMouseDownPropsExample.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { withMouseDownProps } from '../'
+
+export default withMouseDownProps({ pressed: true })(function Pressable({ pressed, ...props }) {
+ return (
+ <article {...props}>
+ <h1>withMouseDownProps</h1>
+ <code>
+ <pre
+ style={{
+ color: 'lightgreen',
+ backgroundColor: 'black',
+ padding: 10,
+ overflowX: 'scroll',
+ }}
+ >{`import React from 'react'
+import { withMouseDownProps } from '@klarna/higher-order-components'
+
+export default withMouseDownProps({ pressed: true })(function Pressable({ pressed, ...props }) {
+ return (
+ <article {...props}>
+ <h1>withMouseDownProps</h1>
+ {pressed ? 'pressed!' : 'press anywhere to see it change'}
+ </article>
+ )
+})`}</pre>
+ </code>
+ {pressed ? 'pressed!' : 'press anywhere to see it change'}
+ </article>
+ )
+})

src/example/WithTouchPropsExample.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { withTouchProps } from '../'
+
+export default withTouchProps({ touched: true })(function Touchable({ touched, ...props }) {
+ return (
+ <article {...props}>
+ <h1>withTouchProps</h1>
+ <code>
+ <pre
+ style={{
+ color: 'lightgreen',
+ backgroundColor: 'black',
+ padding: 10,
+ overflowX: 'scroll',
+ }}
+ >{`import React from 'react'
+import { withTouchProps } from '@klarna/higher-order-components'
+
+export default withTouchProps({ touched: true })(function Touchable({ touched, ...props }) {
+ return (
+ <article {...props}>
+ <h1>withTouchProps</h1>
+ {touched ? 'touched!' : 'tap anywhere to see it change'}
+ </article>
+ )
+})`}</pre>
+ </code>
+ {touched ? 'touched!' : 'tap anywhere to see it change'}
+ </article>
+ )
+})

src/example/index.js

@@ -6,6 +6,8 @@ import WithDeprecationWarningExample from './WithDeprecationWarningExample'
 import WithDisplayNameExample from './WithDisplayNameExample'
 import WithFocusPropsExample from './WithFocusPropsExample'
 import WithHoverPropsExample from './WithHoverPropsExample'
+import WithMouseDownPropsExample from './WithMouseDownPropsExample'
+import WithTouchPropsExample from './WithTouchPropsExample'
 
 const Example = ({ children }) => (
  <div
@@ -56,6 +58,12 @@ const Page = componentQueries(
  <Example>
  <WithHoverPropsExample />
  </Example>
+ <Example>
+ <WithMouseDownPropsExample />
+ </Example>
+ <Example>
+ <WithTouchPropsExample />
+ </Example>
  </section>
  </main>
 ))