@khanacademy/wonder-blocks-clickable - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

components/clickable.js

		@@ -15,6 +15,7 @@ // @flow
		/**
		* The child of Clickable must be a funciton which returns the component
		* which should be made Clickable.
		* The child of Clickable must be a function which returns the component
		* which should be made Clickable. The function is passed an object with
		* three boolean properties: hovered, focused, and pressed.
		*/
		children: (eventState: ClickableState) => React.Node,
		children: (ClickableState) => React.Node,

		@@ -77,3 +78,13 @@ /**
		* <Clickable onClick={() => alert("You clicked me!")}>
		* {(eventState) => <h1> Click Me! </h1>}
		* {({hovered, focused, pressed}) =>
		* <div
		* style={[
		* hovered && styles.hovered,
		* focused && styles.focused,
		* pressed && styles.pressed,
		* ]}
		* >
		* Click Me!
		* </div>
		* }
		* </Clickable>
		@@ -80,0 +91,0 @@ * ```

components/clickable.md

		@@ -20,2 +20,5 @@ ### Creating a Clickable component
		},
		focused: {
		outline: `solid 4px ${Color.offBlack64}`,
		},
		});
		@@ -26,8 +29,9 @@
		{
		eventState =>
		<View style={[eventState.hovered && styles.hovered]}>
		<Body style={[
		eventState.hovered && styles.hovered,
		eventState.pressed && styles.pressed
		]}>
		({hovered, focused, pressed}) =>
		<View style={[
		hovered && styles.hovered,
		focused && styles.focused,
		pressed && styles.pressed,
		]}>
		<Body>
		This text is clickable!
		@@ -34,0 +38,0 @@ </Body>

dist/es/index.js

		@@ -156,3 +156,13 @@ import { createElement, Component } from 'react';
		* <Clickable onClick={() => alert("You clicked me!")}>
		* {(eventState) => <h1> Click Me! </h1>}
		* {({hovered, focused, pressed}) =>
		* <div
		* style={[
		* hovered && styles.hovered,
		* focused && styles.focused,
		* pressed && styles.pressed,
		* ]}
		* >
		* Click Me!
		* </div>
		* }
		* </Clickable>
		@@ -159,0 +169,0 @@ * ```

dist/index.js

		@@ -1390,3 +1390,13 @@ module.exports =
		* <Clickable onClick={() => alert("You clicked me!")}>
		* {(eventState) => <h1> Click Me! </h1>}
		* {({hovered, focused, pressed}) =>
		* <div
		* style={[
		* hovered && styles.hovered,
		* focused && styles.focused,
		* pressed && styles.pressed,
		* ]}
		* >
		* Click Me!
		* </div>
		* }
		* </Clickable>
		@@ -1393,0 +1403,0 @@ * ```

generated-snapshot.test.js

		@@ -29,2 +29,5 @@ // This file is auto-generated by gen-snapshot-tests.js
		},
		focused: {
		outline: `solid 4px ${Color.offBlack64}`,
		},
		});
		@@ -34,12 +37,11 @@ const example = (
		<Clickable onClick={() => alert("You clicked some text!")}>
		{(eventState) => (
		<View style={[eventState.hovered && styles.hovered]}>
		<Body
		style={[
		eventState.hovered && styles.hovered,
		eventState.pressed && styles.pressed,
		]}
		>
		This text is clickable!
		</Body>
		{({hovered, focused, pressed}) => (
		<View
		style={[
		hovered && styles.hovered,
		focused && styles.focused,
		pressed && styles.pressed,
		]}
		>
		<Body>This text is clickable!</Body>
		</View>
		@@ -46,0 +48,0 @@ )}

package.json

		{
		"name": "@khanacademy/wonder-blocks-clickable",
		"version": "1.0.4",
		"version": "1.0.5",
		"design": "v1",
		@@ -32,3 +32,3 @@ "description": "Clickable component for Wonder-Blocks.",
		},
		"gitHead": "e80922dd847385d5b3baa19250a29188e4a6b353"
		"gitHead": "9ce272758e112a23de91af6f8e70f61843ea5b5b"
		}

New alerts