@khanacademy/wonder-blocks-clickable 2.1.2

package/src/index.js

@@ -0,0 +1,15 @@
+// @flow
+import type {
+    ChildrenProps,
+    ClickableState,
+    ClickableRole,
+} from "./components/clickable-behavior.js";
+import Clickable from "./components/clickable.js";
+
+export {default as ClickableBehavior} from "./components/clickable-behavior.js";
+export {default as getClickableBehavior} from "./util/get-clickable-behavior.js";
+export {isClientSideUrl} from "./util/is-client-side-url.js";
+
+export {Clickable as default};
+
+export type {ChildrenProps, ClickableState, ClickableRole};

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

@@ -0,0 +1,105 @@
+// @flow
+import * as React from "react";
+import {MemoryRouter} from "react-router-dom";
+import ClickableBehavior from "../../components/clickable-behavior.js";
+import getClickableBehavior from "../get-clickable-behavior.js";
+
+describe("getClickableBehavior", () => {
+    test("Without href, returns ClickableBehavior", () => {
+        // Arrange
+        const url = undefined;
+        const skipClientNav = undefined;
+        const router = undefined;
+        const expectation = ClickableBehavior;
+
+        // Act
+        const result = getClickableBehavior(url, skipClientNav, router);
+
+        // Assert
+        expect(result).toBe(expectation);
+    });
+
+    describe("with href", () => {
+        test("External URL, returns ClickableBehavior", () => {
+            // Arrange
+            const url = "http://google.com";
+            const skipClientNav = undefined;
+            const router = <MemoryRouter />;
+            const expectation = ClickableBehavior;
+
+            // Act
+            const result = getClickableBehavior(url, skipClientNav, router);
+
+            // Assert
+            expect(result).toBe(expectation);
+        });
+
+        describe("Internal URL", () => {
+            describe("skipClientNav is undefined", () => {
+                test("No router, returns ClickableBehavior", () => {
+                    // Arrange
+                    const url = "/prep/lsat";
+                    const skipClientNav = undefined;
+                    const router = undefined;
+                    const expectation = ClickableBehavior;
+
+                    // Act
+                    const result = getClickableBehavior(
+                        url,
+                        skipClientNav,
+                        router,
+                    );
+
+                    // Assert
+                    expect(result).toBe(expectation);
+                });
+
+                test("Router, returns ClickableBehaviorWithRouter", () => {
+                    // Arrange
+                    const url = "/prep/lsat";
+                    const skipClientNav = undefined;
+                    const router = <MemoryRouter />;
+                    const expectation = "withRouter(ClickableBehavior)";
+
+                    // Act
+                    const result = getClickableBehavior(
+                        url,
+                        skipClientNav,
+                        router,
+                    );
+
+                    // Assert
+                    expect(result.displayName).toBe(expectation);
+                });
+            });
+
+            test("skipClientNav is false, returns ClickableBehaviorWithRouter", () => {
+                // Arrange
+                const url = "/prep/lsat";
+                const skipClientNav = false;
+                const router = <MemoryRouter />;
+                const expectation = "withRouter(ClickableBehavior)";
+
+                // Act
+                const result = getClickableBehavior(url, skipClientNav, router);
+
+                // Assert
+                expect(result.displayName).toBe(expectation);
+            });
+
+            test("skipClientNav is true, returns ClickableBehavior", () => {
+                // Arrange
+                const url = "/prep/lsat";
+                const skipClientNav = true;
+                const router = <MemoryRouter />;
+                const expectation = ClickableBehavior;
+
+                // Act
+                const result = getClickableBehavior(url, skipClientNav, router);
+
+                // Assert
+                expect(result).toBe(expectation);
+            });
+        });
+    });
+});

package/src/util/__tests__/is-client-side-url.js.test.js

@@ -0,0 +1,50 @@
+// @flow
+import {isClientSideUrl} from "../is-client-side-url.js";
+
+describe("isClientSideUrl", () => {
+    test("returns boolean based on the url", () => {
+        // external URLs
+        expect(
+            isClientSideUrl(
+                "//khanacademy.zendesk.com/hc/en-us/articles/236355907",
+            ),
+        ).toEqual(false);
+        expect(
+            isClientSideUrl(
+                "https://khanacademy.zendesk.com/hc/en-us/articles/360007253831",
+            ),
+        ).toEqual(false);
+        expect(isClientSideUrl("http://external.com")).toEqual(false);
+        expect(isClientSideUrl("//www.google.com")).toEqual(false);
+        expect(isClientSideUrl("//")).toEqual(false);
+
+        // non-http(s) URLs
+        expect(isClientSideUrl("javascript:void(0);")).toEqual(false);
+        expect(isClientSideUrl("javascript:void(0)")).toEqual(false);
+        expect(isClientSideUrl("mailto:foo@example.com")).toEqual(false);
+        expect(isClientSideUrl("tel:+1234567890")).toEqual(false);
+        expect(isClientSideUrl("tel:+1234567890")).toEqual(false);
+        expect(isClientSideUrl("ms-help://kb12345.htm")).toEqual(false);
+        expect(isClientSideUrl("z39.50s://0.0.0.0")).toEqual(false);
+
+        // HREFs with anchors
+        expect(isClientSideUrl("#")).toEqual(false);
+        expect(isClientSideUrl("#foo")).toEqual(false);
+        expect(isClientSideUrl("/foo#bar")).toEqual(false);
+        expect(isClientSideUrl("foo/bar#baz")).toEqual(false);
+
+        // internal URLs
+        expect(isClientSideUrl("/foo//bar")).toEqual(true);
+        expect(isClientSideUrl("/coach/dashboard")).toEqual(true);
+        expect(isClientSideUrl("/math/early-math/modal/e/addition_1")).toEqual(
+            true,
+        );
+    });
+
+    test("invalid values for 'href' should return false", () => {
+        // $FlowIgnore: testing invalid input
+        expect(isClientSideUrl(null)).toEqual(false);
+        // $FlowIgnore: testing invalid input
+        expect(isClientSideUrl(undefined)).toEqual(false);
+    });
+});

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

@@ -0,0 +1,43 @@
+// @flow
+/**
+ * Returns either the default ClickableBehavior or a react-router aware version.
+ *
+ * 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.
+ * See https://reacttraining.com/react-router/web/guides/basic-components.
+ */
+import * as React from "react";
+import {withRouter} from "react-router-dom";
+
+import ClickableBehavior from "../components/clickable-behavior.js";
+import {isClientSideUrl} from "./is-client-side-url.js";
+
+const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
+
+export default function getClickableBehavior(
+    /**
+     * The URL to navigate to.
+     */
+    href?: string,
+    /**
+     * Should we skip using the react router and go to the page directly.
+     */
+    skipClientNav?: boolean,
+    /**
+     * router object added to the React context object by react-router-dom.
+     */
+    router?: any,
+): React.ComponentType<React.ElementConfig<typeof ClickableBehavior>> {
+    if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+        // We cast to `any` here since the type of ClickableBehaviorWithRouter
+        // is slightly different from the return type of this function.
+        // TODO(WB-1037): Always return the wrapped version once all routes have
+        // been ported to the app-shell in webapp.
+        return (ClickableBehaviorWithRouter: any);
+    }
+
+    return ClickableBehavior;
+}

package/src/util/is-client-side-url.js

@@ -0,0 +1,16 @@
+// @flow
+/**
+ * Returns:
+ * - false for hrefs staring with http://, https://, //.
+ * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
+ * - true for all other values, e.g. /foo/bar
+ */
+export const isClientSideUrl = (href: string): boolean => {
+    if (typeof href !== "string") {
+        return false;
+    }
+    return (
+        !/^(https?:)?\/\//i.test(href) &&
+        !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href)
+    );
+};