@khanacademy/wonder-blocks-clickable 2.2.5 → 2.3.0

package/src/components/clickable.js

@@ -33,13 +33,13 @@ type CommonProps = {|
     onClick?: (e: SyntheticEvent<>) => mixed,
 
     /**
-     * Optinal href which Clickable should direct to, uses client-side routing
+     * Optional href which Clickable should direct to, uses client-side routing
      * by default if react-router is present
      */
     href?: string,
 
     /**
-     * Styles to apply to the Clickable compoenent
+     * Styles to apply to the Clickable component
      */
     style?: StyleType,
 
@@ -111,6 +111,8 @@ type Props =
 
           /**
            * A target destination window for a link to open in.
+           *
+           * TODO(WB-1262): only allow this prop when `href` is also set.t
            */
           target?: "_blank",
       |}
@@ -143,6 +145,8 @@ type Props =
 
           /**
            * A target destination window for a link to open in.
+           *
+           * TODO(WB-1262): only allow this prop when `href` is also set.t
            */
           target?: "_blank",
       |}
@@ -182,11 +186,20 @@ const StyledLink = addStyle<typeof Link>(Link);
 /**
  * A component to turn any custom component into a clickable one.
  *
- * Works by wrapping ClickableBehavior around the child element and styling the
- * child appropriately and encapsulates routing logic which can be customized.
- * Expects a function which returns an element as it's child.
+ * Works by wrapping `ClickableBehavior` around the child element and styling
+ * the child appropriately and encapsulates routing logic which can be
+ * customized. Expects a function which returns an element as its child.
+ *
+ * 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.
+ *
+ * ### Usage
  *
- * Example usage:
  * ```jsx
  * <Clickable onClick={() => alert("You clicked me!")}>
  *     {({hovered, focused, pressed}) =>
@@ -289,6 +302,7 @@ export default class Clickable extends React.Component<Props> {
             !hideDefaultFocusRing &&
                 state.focused &&
                 (light ? styles.focusedLight : styles.focused),
+            disabled && styles.disabled,
             style,
         ];
 
@@ -383,9 +397,21 @@ const styles = StyleSheet.create({
         cursor: "pointer",
     },
     focused: {
-        outline: `solid 2px ${Color.blue}`,
+        ":focus": {
+            outline: `solid 2px ${Color.blue}`,
+        },
     },
     focusedLight: {
         outline: `solid 2px ${Color.white}`,
     },
+    disabled: {
+        color: Color.offBlack32,
+        cursor: "not-allowed",
+        ":focus": {
+            outline: "none",
+        },
+        ":focus-visible": {
+            outline: `solid 2px ${Color.blue}`,
+        },
+    },
 });

package/src/components/clickable.stories.js

@@ -1,127 +0,0 @@
-// @flow
-import * as React from "react";
-
-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 {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-
-import type {StoryComponentType} from "@storybook/react";
-
-export default {
-    title: "Navigation/Clickable",
-};
-
-export const Basic: StoryComponentType = () => (
-    <View>
-        <View style={styles.centerText}>
-            <Clickable
-                href="https://www.khanacademy.org/about/tos"
-                skipClientNav={true}
-            >
-                {({hovered, focused, pressed}) => (
-                    <View
-                        style={[
-                            hovered && styles.hovered,
-                            pressed && styles.pressed,
-                        ]}
-                    >
-                        <Body>This text is clickable!</Body>
-                    </View>
-                )}
-            </Clickable>
-        </View>
-        <Strut size={Spacing.xLarge_32} />
-        <View style={[styles.centerText, styles.dark]}>
-            <Clickable
-                href="https://www.khanacademy.org/about/tos"
-                skipClientNav={true}
-                light={true}
-            >
-                {({hovered, focused, pressed}) => (
-                    <View
-                        style={[
-                            hovered && styles.hovered,
-                            pressed && styles.pressed,
-                        ]}
-                    >
-                        <Body>This text is clickable!</Body>
-                    </View>
-                )}
-            </Clickable>
-        </View>
-    </View>
-);
-
-export const KeyboardNavigation: StoryComponentType = () => (
-    <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>
-);
-
-KeyboardNavigation.parameters = {
-    chromatic: {
-        // we don't need screenshots because this story only tests behavior.
-        disableSnapshot: true,
-    },
-};
-
-export const KeyboardNavigationTab: StoryComponentType = () => (
-    <View>
-        <Clickable role="tab" aria-controls="panel-1" id="tab-1">
-            {({hovered, focused, pressed}) => (
-                <View
-                    style={[
-                        hovered && styles.hovered,
-                        focused && styles.focused,
-                        pressed && styles.pressed,
-                    ]}
-                >
-                    <Body>Open School Info</Body>
-                </View>
-            )}
-        </Clickable>
-        <View id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
-            This is the information for the school.
-        </View>
-    </View>
-);
-
-const styles = StyleSheet.create({
-    hovered: {
-        textDecoration: "underline",
-        backgroundColor: Color.teal,
-    },
-    pressed: {
-        color: Color.blue,
-    },
-    focused: {
-        outline: `solid 4px ${Color.lightBlue}`,
-    },
-    centerText: {
-        textAlign: "center",
-    },
-    dark: {
-        backgroundColor: Color.darkBlue,
-        color: Color.white,
-        padding: Spacing.xSmall_8,
-    },
-});