@khanacademy/wonder-blocks-clickable
Advanced tools
@khanacademy/wonder-blocks-clickable - npm Package Compare versions
Comparing version 1.0.5 to 1.1.0
@@ -139,5 +139,6 @@ // @flow | ||
| render() { | ||
| const {href, onClick, skipClientNav} = this.props; | ||
| const ClickableBehavior = getClickableBehavior( | ||
| this.props.href, | ||
| this.props.skipClientNav, | ||
| href, | ||
| skipClientNav, | ||
| this.context.router, | ||
@@ -147,3 +148,3 @@ ); | ||
| return ( | ||
| <ClickableBehavior onClick={this.props.onClick}> | ||
| <ClickableBehavior href={href} onClick={onClick}> | ||
| {(state, handlers) => | ||
@@ -150,0 +151,0 @@ this.getCorrectTag(state, { |
@@ -91,1 +91,47 @@ ### Creating a Clickable component | ||
| ``` | ||
| ### Navigating with the Keyboard | ||
| Clickable adds support to keyboard navigation. This way, your components are | ||
| accessible and emulate better the browser's behavior. | ||
| *NOTE:* If you want to navigate to an external URL and/or reload the window, make | ||
| sure to use `href` and `skipClientNav={true}`. | ||
| ```jsx | ||
| import {StyleSheet} from "aphrodite"; | ||
| import Clickable from "@khanacademy/wonder-blocks-clickable"; | ||
| import {View} from "@khanacademy/wonder-blocks-core"; | ||
| import Color from "@khanacademy/wonder-blocks-color"; | ||
| import {Body} from "@khanacademy/wonder-blocks-typography"; | ||
| const styles = StyleSheet.create({ | ||
| hovered: { | ||
| textDecoration: "underline", | ||
| backgroundColor: Color.teal, | ||
| }, | ||
| pressed: { | ||
| color: Color.blue, | ||
| }, | ||
| focused: { | ||
| outline: `solid 4px ${Color.lightBlue}`, | ||
| }, | ||
| }); | ||
| <View> | ||
| <Clickable href="https://www.khanacademy.org/about/tos" skipClientNav={true}> | ||
| { | ||
| ({hovered, focused, pressed}) => | ||
| <View style={[ | ||
| hovered && styles.hovered, | ||
| focused && styles.focused, | ||
| pressed && styles.pressed, | ||
| ]}> | ||
| <Body> | ||
| This text should navigate using the keyboard | ||
| </Body> | ||
| </View> | ||
| } | ||
| </Clickable> | ||
| </View> | ||
| ``` |
@@ -115,2 +115,33 @@ // @flow | ||
| }); | ||
| test("should verify if href is passed to Clickablebehavior", () => { | ||
| // Arrange, Act | ||
| const wrapper = mount( | ||
| <Clickable testId="button" href="/foo" skipClientNav={true}> | ||
| {(eventState) => <h1>Click Me!</h1>} | ||
| </Clickable>, | ||
| ); | ||
| // Assert | ||
| expect(wrapper.find("ClickableBehavior")).toHaveProp({href: "/foo"}); | ||
| }); | ||
| test("should navigate to a specific link using the keyboard", () => { | ||
| // Arrange | ||
| window.location.assign = jest.fn(); | ||
| const wrapper = mount( | ||
| <Clickable testId="button" href="/foo" skipClientNav={true}> | ||
| {(eventState) => <h1>Click Me!</h1>} | ||
| </Clickable>, | ||
| ); | ||
| // Act | ||
| const buttonWrapper = wrapper.find(`[data-test-id="button"]`).first(); | ||
| // simulate Enter | ||
| buttonWrapper.simulate("keyup", {keyCode: 13}); | ||
| // Assert | ||
| expect(window.location.assign).toHaveBeenCalledWith("/foo"); | ||
| }); | ||
| }); |
@@ -171,5 +171,3 @@ import { createElement, Component } from 'react'; | ||
| var Clickable = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| var Clickable = /*#__PURE__*/function (_React$Component) { | ||
| _inherits(Clickable, _React$Component); | ||
@@ -222,5 +220,10 @@ | ||
| var ClickableBehavior = getClickableBehavior(this.props.href, this.props.skipClientNav, this.context.router); | ||
| var _this$props = this.props, | ||
| href = _this$props.href, | ||
| onClick = _this$props.onClick, | ||
| skipClientNav = _this$props.skipClientNav; | ||
| var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| return createElement(ClickableBehavior, { | ||
| onClick: this.props.onClick | ||
| href: href, | ||
| onClick: onClick | ||
| }, function (state, handlers) { | ||
@@ -227,0 +230,0 @@ return _this2.getCorrectTag(state, _objectSpread2({ |
@@ -169,4 +169,8 @@ module.exports = | ||
| "use strict"; | ||
| // ESM COMPAT FLAG | ||
| __webpack_require__.r(__webpack_exports__); | ||
| // EXPORTS | ||
| __webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ clickable_Clickable; }); | ||
| // EXTERNAL MODULE: external "react" | ||
@@ -1347,3 +1351,3 @@ var external_react_ = __webpack_require__(1); | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/components/clickable.js | ||
| function clickable_typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clickable_typeof = function _typeof(obj) { return typeof obj; }; } else { clickable_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clickable_typeof(obj); } | ||
| function clickable_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clickable_typeof = function _typeof(obj) { return typeof obj; }; } else { clickable_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clickable_typeof(obj); } | ||
@@ -1407,5 +1411,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
| var clickable_Clickable = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| var clickable_Clickable = /*#__PURE__*/function (_React$Component) { | ||
| clickable_inherits(Clickable, _React$Component); | ||
@@ -1458,5 +1460,10 @@ | ||
| var ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(this.props.href, this.props.skipClientNav, this.context.router); | ||
| var _this$props = this.props, | ||
| href = _this$props.href, | ||
| onClick = _this$props.onClick, | ||
| skipClientNav = _this$props.skipClientNav; | ||
| var ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router); | ||
| return external_react_["createElement"](ClickableBehavior, { | ||
| onClick: this.props.onClick | ||
| href: href, | ||
| onClick: onClick | ||
| }, function (state, handlers) { | ||
@@ -1518,3 +1525,2 @@ return _this2.getCorrectTag(state, _objectSpread({ | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/index.js | ||
| /* concated harmony reexport default */__webpack_require__.d(__webpack_exports__, "default", function() { return clickable_Clickable; }); | ||
@@ -1521,0 +1527,0 @@ |
@@ -91,2 +91,41 @@ // This file is auto-generated by gen-snapshot-tests.js | ||
| }); | ||
| it("example 3", () => { | ||
| const styles = StyleSheet.create({ | ||
| hovered: { | ||
| textDecoration: "underline", | ||
| backgroundColor: Color.teal, | ||
| }, | ||
| pressed: { | ||
| color: Color.blue, | ||
| }, | ||
| focused: { | ||
| outline: `solid 4px ${Color.lightBlue}`, | ||
| }, | ||
| }); | ||
| const example = ( | ||
| <View> | ||
| <Clickable | ||
| href="https://www.khanacademy.org/about/tos" | ||
| skipClientNav={true} | ||
| > | ||
| {({hovered, focused, pressed}) => ( | ||
| <View | ||
| style={[ | ||
| hovered && styles.hovered, | ||
| focused && styles.focused, | ||
| pressed && styles.pressed, | ||
| ]} | ||
| > | ||
| <Body> | ||
| This text should navigate using the keyboard | ||
| </Body> | ||
| </View> | ||
| )} | ||
| </Clickable> | ||
| </View> | ||
| ); | ||
| const tree = renderer.create(example).toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
| }); |
| { | ||
| "name": "@khanacademy/wonder-blocks-clickable", | ||
| "version": "1.0.5", | ||
| "version": "1.1.0", | ||
| "design": "v1", | ||
@@ -18,3 +18,3 @@ "description": "Clickable component for Wonder-Blocks.", | ||
| "dependencies": { | ||
| "@khanacademy/wonder-blocks-core": "^2.5.0" | ||
| "@khanacademy/wonder-blocks-core": "^2.5.1" | ||
| }, | ||
@@ -33,3 +33,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "9ce272758e112a23de91af6f8e70f61843ea5b5b" | ||
| "gitHead": "3c6c92225a4eba049ead8d78e2d3eb648e5b16ab" | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.69%
87814
- Number of package files
- increased by8.33%
13
- Lines of code
- increased by6.59%
1974