@khanacademy/wonder-blocks-clickable 2.1.2

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";

package/docs.md

@@ -0,0 +1,7 @@
+The Clickable component allows you to turn any custom component into a clickable one with consistent behavior and accesibility features.
+
+**Clickable allows your components to:**
+- Handle mouse / touch / keyboard events
+- Match the standard behavior of the given role
+- Apply custom styles based on pressed / focused / hovered state
+- Perform Client Side Navigation when `href` is passed and the component is a descendent of a react-router `Router`

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@khanacademy/wonder-blocks-clickable",
+  "version": "2.1.2",
+  "design": "v1",
+  "description": "Clickable component for Wonder-Blocks.",
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "source": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@khanacademy/wonder-blocks-core": "^3.1.4"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "wb-dev-build-settings": "^0.1.0"
+  },
+  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+}

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -0,0 +1,426 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wonder-blocks-clickable example 1 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <button
+    aria-label=""
+    className=""
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    role="tab"
+    style={
+      Object {
+        "::MozFocusInner": Object {
+          "border": 0,
+        },
+        "MozOsxFontSmoothing": "inherit",
+        "WebkitFontSmoothing": "inherit",
+        "background": "transparent",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "inherit",
+        "cursor": "pointer",
+        "font": "inherit",
+        "lineHeight": "normal",
+        "margin": 0,
+        "outline": "none",
+        "overflow": "visible",
+        "padding": 0,
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+        "width": "auto",
+      }
+    }
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <span
+        className=""
+        style={
+          Object {
+            "MozOsxFontSmoothing": "grayscale",
+            "WebkitFontSmoothing": "antialiased",
+            "display": "block",
+            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": "22px",
+          }
+        }
+      >
+        This text is clickable!
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`wonder-blocks-clickable example 2 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "backgroundColor": "#0a2a66",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "color": "#ffffff",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 12,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <button
+    aria-label=""
+    className=""
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    role="tab"
+    style={
+      Object {
+        "::MozFocusInner": Object {
+          "border": 0,
+        },
+        "MozOsxFontSmoothing": "inherit",
+        "WebkitFontSmoothing": "inherit",
+        "background": "transparent",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "inherit",
+        "cursor": "pointer",
+        "font": "inherit",
+        "lineHeight": "normal",
+        "margin": 0,
+        "outline": "none",
+        "overflow": "visible",
+        "padding": 0,
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+        "width": "auto",
+      }
+    }
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <span
+        className=""
+        style={
+          Object {
+            "MozOsxFontSmoothing": "grayscale",
+            "WebkitFontSmoothing": "antialiased",
+            "display": "block",
+            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": "22px",
+          }
+        }
+      >
+        This text is clickable!
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`wonder-blocks-clickable example 3 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "center",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "row",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <a
+    aria-label=""
+    className=""
+    href="/foo"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    style={
+      Object {
+        "MozOsxFontSmoothing": "inherit",
+        "WebkitFontSmoothing": "inherit",
+        "background": "transparent",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "inherit",
+        "cursor": "pointer",
+        "font": "inherit",
+        "lineHeight": "normal",
+        "margin": 0,
+        "marginRight": 24,
+        "outline": "none",
+        "overflow": "visible",
+        "padding": 0,
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+        "width": "auto",
+      }
+    }
+    tabIndex={0}
+  >
+    <h1>
+      Uses Client-side Nav
+    </h1>
+  </a>
+  <a
+    aria-label=""
+    className=""
+    href="/foo"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    style={
+      Object {
+        "MozOsxFontSmoothing": "inherit",
+        "WebkitFontSmoothing": "inherit",
+        "background": "transparent",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "inherit",
+        "cursor": "pointer",
+        "font": "inherit",
+        "lineHeight": "normal",
+        "margin": 0,
+        "marginRight": 24,
+        "outline": "none",
+        "overflow": "visible",
+        "padding": 0,
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+        "width": "auto",
+      }
+    }
+    tabIndex={0}
+  >
+    <h1>
+      Avoids Client-side Nav
+    </h1>
+  </a>
+</div>
+`;
+
+exports[`wonder-blocks-clickable example 4 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <a
+    aria-label=""
+    className=""
+    href="https://www.khanacademy.org/about/tos"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    style={
+      Object {
+        "MozOsxFontSmoothing": "inherit",
+        "WebkitFontSmoothing": "inherit",
+        "background": "transparent",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "inherit",
+        "cursor": "pointer",
+        "font": "inherit",
+        "lineHeight": "normal",
+        "margin": 0,
+        "outline": "none",
+        "overflow": "visible",
+        "padding": 0,
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+        "width": "auto",
+      }
+    }
+    tabIndex={0}
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <span
+        className=""
+        style={
+          Object {
+            "MozOsxFontSmoothing": "grayscale",
+            "WebkitFontSmoothing": "antialiased",
+            "display": "block",
+            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": "22px",
+          }
+        }
+      >
+        This text should navigate using the keyboard
+      </span>
+    </div>
+  </a>
+</div>
+`;

package/src/__tests__/generated-snapshot.test.js

@@ -0,0 +1,176 @@
+// This file is auto-generated by gen-snapshot-tests.js
+// Do not edit this file.  To make changes to these snapshot tests:
+//   1. edit the markdown documentation files in the package,
+//        packages/wonder-blocks-clickable
+//   2. Run `yarn run gen-snapshot-tests`.
+import React from "react";
+import renderer from "react-test-renderer";
+
+// Mock react-dom as jest doesn't like findDOMNode.
+jest.mock("react-dom");
+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";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {MemoryRouter, Route, Switch} from "react-router-dom";
+
+import ClickableBehavior from "./../components/clickable-behavior.js";
+
+describe("wonder-blocks-clickable", () => {
+    it("example 1", () => {
+        const styles = StyleSheet.create({
+            hovered: {
+                textDecoration: "underline",
+                backgroundColor: Color.teal,
+            },
+            pressed: {
+                color: Color.blue,
+            },
+            focused: {
+                outline: `solid 4px ${Color.offBlack64}`,
+            },
+        });
+        const example = (
+            <View>
+                <Clickable
+                    onClick={() => alert("You clicked some text!")}
+                    hideDefaultFocusRing={true}
+                    role="tab"
+                >
+                    {({hovered, focused, pressed}) => (
+                        <View
+                            style={[
+                                hovered && styles.hovered,
+                                focused && styles.focused,
+                                pressed && styles.pressed,
+                            ]}
+                        >
+                            <Body>This text is clickable!</Body>
+                        </View>
+                    )}
+                </Clickable>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 2", () => {
+        const styles = StyleSheet.create({
+            background: {
+                backgroundColor: Color.darkBlue,
+                color: Color.white,
+                padding: Spacing.small_12,
+            },
+            hovered: {
+                textDecoration: "underline",
+                backgroundColor: Color.purple,
+            },
+            pressed: {
+                color: Color.blue,
+            },
+        });
+        const example = (
+            <View style={styles.background}>
+                <Clickable
+                    onClick={() => alert("You clicked some text!")}
+                    role="tab"
+                    light={true}
+                >
+                    {({hovered, focused, pressed}) => (
+                        <View
+                            style={[
+                                hovered && styles.hovered,
+                                pressed && styles.pressed,
+                            ]}
+                        >
+                            <Body>This text is clickable!</Body>
+                        </View>
+                    )}
+                </Clickable>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 3", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+                alignItems: "center",
+            },
+            h1: {
+                marginRight: Spacing.large_24,
+            },
+        }); // NOTE: In actual code you would use BrowserRouter instead
+
+        const example = (
+            <MemoryRouter>
+                <View style={styles.row}>
+                    <Clickable
+                        href="/foo"
+                        style={styles.h1}
+                        onClick={() =>
+                            console.log("I'm still on the same page!")
+                        }
+                    >
+                        {(eventState) => <h1>Uses Client-side Nav</h1>}
+                    </Clickable>
+                    <Clickable href="/foo" style={styles.h1} skipClientNav>
+                        {(eventState) => <h1>Avoids Client-side Nav</h1>}
+                    </Clickable>
+                    <Switch>
+                        <Route path="/foo">
+                            <View id="foo">Hello, world!</View>
+                        </Route>
+                    </Switch>
+                </View>
+            </MemoryRouter>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 4", () => {
+        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}
+                    hideDefaultFocusRing={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();
+    });
+});