@khanacademy/wonder-blocks-clickable 2.1.2 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.1.2",
+  "version": "2.2.2",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -15,18 +15,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-core": "^3.1.4"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-core": "^4.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.0"
-  },
-  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }

package/src/components/__tests__/clickable-behavior.test.js

@@ -1,8 +1,10 @@
 /* eslint-disable max-lines */
 // @flow
 import * as React from "react";
+import {render, screen} from "@testing-library/react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import getClickableBehavior from "../../util/get-clickable-behavior.js";
 import ClickableBehavior from "../clickable-behavior.js";
@@ -22,8 +24,9 @@ const wait = (delay: number = 0) =>
 describe("ClickableBehavior", () => {
     beforeEach(() => {
         // Note: window.location.assign and window.open need mock functions in
-        // the testing environment.
-        window.location.assign = jest.fn();
+        // the testing environment
+        delete window.location;
+        window.location = {assign: jest.fn()};
         window.open = jest.fn();
     });
 
@@ -274,6 +277,46 @@ describe("ClickableBehavior", () => {
         expect(button.state("focused")).toEqual(false);
     });
 
+    test("tabIndex should be 0", () => {
+        // Arrange
+        // Act
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => {}}>
+                {(state, childrenProps) => {
+                    return (
+                        <button data-test-id="test-button-1" {...childrenProps}>
+                            Label
+                        </button>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Assert
+        const button = screen.getByTestId("test-button-1");
+        expect(button).toHaveAttribute("tabIndex", "0");
+    });
+
+    test("tabIndex should be 0 even for disabled components", () => {
+        // Arrange
+        // Act
+        render(
+            <ClickableBehavior disabled={true} onClick={(e) => {}}>
+                {(state, childrenProps) => {
+                    return (
+                        <button data-test-id="test-button-2" {...childrenProps}>
+                            Label
+                        </button>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Assert
+        const button = screen.getByTestId("test-button-2");
+        expect(button).toHaveAttribute("tabIndex", "0");
+    });
+
     it("does not change state if disabled", () => {
         const onClick = jest.fn();
         const button = shallow(
@@ -566,6 +609,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });
@@ -1052,6 +1096,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });

package/src/components/__tests__/clickable.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Clickable from "../clickable.js";
@@ -13,6 +14,11 @@ const wait = (delay: number = 0) =>
     });
 
 describe("Clickable", () => {
+    beforeEach(() => {
+        delete window.location;
+        window.location = {assign: jest.fn()};
+    });
+
     test("client-side navigation", () => {
         // Arrange
         const wrapper = mount(
@@ -129,8 +135,6 @@ describe("Clickable", () => {
 
     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>}
@@ -276,7 +280,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -309,7 +312,6 @@ describe("Clickable", () => {
 
     test("beforeNav resolution and safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -336,8 +338,6 @@ describe("Clickable", () => {
         buttonWrapper.simulate("click", {button: 0});
         await wait(0);
         buttonWrapper.update();
-        await wait(0);
-        buttonWrapper.update();
 
         // Assert
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
@@ -345,7 +345,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -376,9 +375,8 @@ describe("Clickable", () => {
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
     });
 
-    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
+    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -406,12 +404,16 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
     });
 
     test("safeWithNav with beforeNav resolution and skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -442,7 +444,12 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
     });
 
     describe("raw events", () => {

package/src/components/clickable-behavior.js

@@ -223,7 +223,9 @@ const disabledHandlers = {
     onKeyUp: () => void 0,
     onFocus: () => void 0,
     onBlur: () => void 0,
-    tabIndex: -1,
+    // Clickable components should still be tabbable so they can
+    // be used as anchors.
+    tabIndex: 0,
 };
 
 const keyCodes = {
@@ -312,8 +314,8 @@ const startState: ClickableState = {
  * The react-router aware version is returned if `router` is a react-router-dom
  * router, `skipClientNav` is not `true`, and `href` is an internal URL.
  *
- * The `router` can be accessed via this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
  */
 export default class ClickableBehavior extends React.Component<
@@ -558,9 +560,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)
@@ -585,9 +586,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)

package/src/components/clickable.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import * as PropTypes from "prop-types";
 import {Link} from "react-router-dom";
+import {__RouterContext} from "react-router";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
@@ -169,10 +169,6 @@ type Props =
           safeWithNav: () => Promise<mixed>,
       |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     light: $PropertyType<Props, "light">,
     disabled: $PropertyType<Props, "disabled">,
@@ -208,8 +204,6 @@ const StyledLink = addStyle<typeof Link>(Link);
  * ```
  */
 export default class Clickable extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
     static defaultProps: DefaultProps = {
         light: false,
         disabled: false,
@@ -218,11 +212,12 @@ export default class Clickable extends React.Component<Props> {
 
     getCorrectTag: (
         clickableState: ClickableState,
+        router: any,
         commonProps: {[string]: any, ...},
-    ) => React.Node = (clickableState, commonProps) => {
+    ) => React.Node = (clickableState, router, commonProps) => {
         const activeHref = this.props.href && !this.props.disabled;
         const useClient =
-            this.context.router &&
+            router &&
             !this.props.skipClientNav &&
             isClientSideUrl(this.props.href || "");
 
@@ -265,7 +260,7 @@ export default class Clickable extends React.Component<Props> {
         }
     };
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
             href,
             onClick,
@@ -285,7 +280,7 @@ export default class Clickable extends React.Component<Props> {
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            this.context.router,
+            router,
         );
 
         const getStyle = (state: ClickableState): StyleType => [
@@ -309,7 +304,7 @@ export default class Clickable extends React.Component<Props> {
                     disabled={disabled}
                 >
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, {
+                        this.getCorrectTag(state, router, {
                             ...restProps,
                             "data-test-id": testId,
                             style: getStyle(state),
@@ -330,7 +325,7 @@ export default class Clickable extends React.Component<Props> {
                     disabled={disabled}
                 >
                     {(state, childrenProps) =>
-                        this.getCorrectTag(state, {
+                        this.getCorrectTag(state, router, {
                             ...restProps,
                             "data-test-id": testId,
                             style: getStyle(state),
@@ -341,6 +336,14 @@ export default class Clickable extends React.Component<Props> {
             );
         }
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 // Source:  https://gist.github.com/MoOx/9137295

package/src/components/clickable.md

@@ -145,6 +145,13 @@ const styles = StyleSheet.create({
 </MemoryRouter>
 ```
 
+### Running callbacks on navigation
+
+When using the `href` prop, the `onClick`, `beforeNav`, and `safeWithNav` props
+can be used to run callbacks when navigating to the new URL. Which prop to use
+depends on the use case. See the [Button](#section-button) documentation for
+details.
+
 ### Navigating with the Keyboard
 
 Clickable adds support to keyboard navigation. This way, your components are

package/src/components/clickable.stories.js

@@ -12,10 +12,10 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 import type {StoryComponentType} from "@storybook/react";
 
 export default {
-    title: "Clickable",
+    title: "Navigation/Clickable",
 };
 
-export const basic: StoryComponentType = () => (
+export const Basic: StoryComponentType = () => (
     <View>
         <View style={styles.centerText}>
             <Clickable
@@ -56,7 +56,7 @@ export const basic: StoryComponentType = () => (
     </View>
 );
 
-export const keyboardNavigation: StoryComponentType = () => (
+export const KeyboardNavigation: StoryComponentType = () => (
     <View>
         <Clickable
             href="https://www.khanacademy.org/about/tos"
@@ -77,16 +77,14 @@ export const keyboardNavigation: StoryComponentType = () => (
     </View>
 );
 
-keyboardNavigation.story = {
-    parameters: {
-        chromatic: {
-            // we don't need screenshots because this story only tests behavior.
-            disable: true,
-        },
+KeyboardNavigation.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only tests behavior.
+        disableSnapshot: true,
     },
 };
 
-export const keyboardNavigationTab: StoryComponentType = () => (
+export const KeyboardNavigationTab: StoryComponentType = () => (
     <View>
         <Clickable role="tab" aria-controls="panel-1" id="tab-1">
             {({hovered, focused, pressed}) => (

package/src/util/get-clickable-behavior.js

@@ -5,8 +5,8 @@
  * The react-router aware version is returned if `router` is a react-router-dom
  * router, `skipClientNav` is not `true`, and `href` is an internal URL.
  *
- * The `router` can be accessed via this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
  */
 import * as React from "react";

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.