@khanacademy/wonder-blocks-clickable 2.2.6 → 2.2.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.2.7
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+
 ## 2.2.6
 
 ### Patch Changes

package/dist/es/index.js

@@ -453,7 +453,7 @@ class Clickable extends React.Component {
 
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
 
     if (beforeNav) {
       return React.createElement(ClickableBehavior, {
@@ -517,10 +517,22 @@ 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/dist/index.js

@@ -200,18 +200,19 @@ const startState = {
  * 3. Keyup (spacebar/enter) -> focus state
  *
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
- * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
- * that has the ClickableBehavior. You cannot override these handlers without
- * potentially breaking the functionality of ClickableBehavior.
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
+ * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
+ * component that has the ClickableBehavior. You cannot override these handlers
+ * without potentially breaking the functionality of ClickableBehavior.
  *
- * There are internal props triggerOnEnter and triggerOnSpace that can be set
- * to false if one of those keys shouldn't count as a click on this component.
- * Be careful about setting those to false -- make certain that the component
+ * There are internal props triggerOnEnter and triggerOnSpace that can be set to
+ * false if one of those keys shouldn't count as a click on this component. Be
+ * careful about setting those to false -- make certain that the component
  * shouldn't process that key.
  *
- * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
- * for a more thorough explanation of expected behaviors and potential cavaets.
+ * See [this
+   document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
+   for a more thorough explanation of expected behaviors and potential cavaets.
  *
  * `ClickableBehavior` accepts a function as `children` which is passed state
  * and an object containing event handlers and some other props. The `children`
@@ -219,32 +220,30 @@ const startState = {
  *
  * Example:
  *
- * ```js
- * class MyClickableComponent extends React.Component<Props> {
- *     render(): React.Node {
- *         const ClickableBehavior = getClickableBehavior();
- *         return <ClickableBehavior
- *             disabled={this.props.disabled}
- *             onClick={this.props.onClick}
- *         >
- *             {({hovered}, childrenProps) =>
- *                 <RoundRect
- *                      textcolor='white'
- *                      backgroundColor={hovered ? 'red' : 'blue'}}
- *                      {...childrenProps}
- *                 >
- *                      {this.props.children}
- *                 </RoundRect>
- *             }
- *         </ClickableBehavior>
- *     }
+ * ```jsx
+ * function MyClickableComponent(props: Props) {
+ *   const ClickableBehavior = getClickableBehavior();
+ *
+ *   return (
+ *       <ClickableBehavior disabled={props.disabled} onClick={props.onClick}>
+ *           {({hovered}, childrenProps) => (
+ *               <RoundRect
+ *                   textcolor="white"
+ *                   backgroundColor={hovered ? "red" : "blue"}
+ *                   {...childrenProps}
+ *               >
+ *                   {props.children}
+ *               </RoundRect>
+ *           )}
+ *      </ClickableBehavior>
+ *   );
  * }
  * ```
  *
- * This follows a pattern called [Function as Child Components]
- * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
+ * This follows a pattern called [Function as Child
+ * Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
  *
- * WARNING: Do not use this component directly, use getClickableBehavior
+ * **WARNING:** Do not use this component directly, use getClickableBehavior
  * instead. getClickableBehavior takes three arguments (href, directtNav, and
  * router) and returns either the default ClickableBehavior or a react-router
  * aware version.
@@ -252,9 +251,9 @@ const startState = {
  * 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 __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.
+ * 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.
  */
 
 class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -619,69 +618,6 @@ ClickableBehavior.defaultProps = {
 
 /***/ }),
 /* 3 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getClickableBehavior; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var _is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
-/**
- * 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 __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.
- */
-
-
-
-
-const ClickableBehaviorWithRouter = Object(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["withRouter"])(_components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"]);
-function getClickableBehavior(
-/**
- * The URL to navigate to.
- */
-href,
-/**
- * Should we skip using the react router and go to the page directly.
- */
-skipClientNav,
-/**
- * router object added to the React context object by react-router-dom.
- */
-router) {
-  if (router && skipClientNav !== true && href && Object(_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__[/* isClientSideUrl */ "a"])(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;
-  }
-
-  return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"];
-}
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 6 */
 /***/ (function(module, exports) {
 
 module.exports =
@@ -1135,6 +1071,69 @@ function (module, __webpack_exports__, __webpack_require__) {
 /******/
 ]);
 
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getClickableBehavior; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+/**
+ * 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 __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.
+ */
+
+
+
+
+const ClickableBehaviorWithRouter = Object(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["withRouter"])(_components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"]);
+function getClickableBehavior(
+/**
+ * The URL to navigate to.
+ */
+href,
+/**
+ * Should we skip using the react router and go to the page directly.
+ */
+skipClientNav,
+/**
+ * router object added to the React context object by react-router-dom.
+ */
+router) {
+  if (router && skipClientNav !== true && href && Object(_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__[/* isClientSideUrl */ "a"])(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;
+  }
+
+  return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"];
+}
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router-dom");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
 /***/ }),
 /* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1145,15 +1144,15 @@ function (module, __webpack_exports__, __webpack_require__) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
 /* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -1171,11 +1170,20 @@ const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODU
 /**
  * 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}) =>
@@ -1244,7 +1252,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     } = this.props;
     const ClickableBehavior = Object(_util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"])(href, skipClientNav, router);
 
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
 
     if (beforeNav) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
@@ -1321,10 +1329,22 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     cursor: "pointer"
   },
   focused: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+    ":focus": {
+      outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+    }
   },
   focusedLight: {
     outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.white}`
+  },
+  disabled: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.offBlack32,
+    cursor: "not-allowed",
+    ":focus": {
+      outline: "none"
+    },
+    ":focus-visible": {
+      outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
+    }
   }
 });
 
@@ -1352,7 +1372,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ClickableBehavior", function() { return _components_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
-/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getClickableBehavior", function() { return _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
 /* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.1"
+    "@khanacademy/wonder-blocks-core": "^4.3.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/__docs__/accessibility.stories.mdx

@@ -0,0 +1,152 @@
+import {Meta, Story, Canvas} from "@storybook/addon-docs";
+import {StyleSheet} from "aphrodite";
+
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+<Meta
+    title="Clickable / Clickable / Accessibility"
+    component={Clickable}
+    parameters={{
+        previewTabs: {
+            canvas: {hidden: true},
+        },
+        viewMode: "docs",
+        chromatic: {
+            // Disables chromatic testing for these stories.
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Accessibility
+
+## Keyboard interactions
+
+| Key | Action |
+| --- | --- |
+| Enter or Space | Activates the clickable element |
+
+
+## Roles
+
+| Component | Role | Usage |
+| --- | --- | --- |
+| `<Clickable onClick={} />`  | button | A clickable button element |
+| `<Clickable href="/math" skipClientNav={true} />`  | link | A clickable anchor element |
+| `<Clickable href="/math" />`  | link | A clickable anchor element (using `react-router`'s Link) |
+
+## Attributes
+| Attribute | Usage |
+| --- | --- |
+| tabindex="0" | Includes the clickable element in the tab sequence. |
+| aria-disabled="true" | Indicates that the element is perceivable but disabled. |
+| aria-label="value" | Defines a string value that labels the clickable element. Use it in case the clickable element doesn't include any descriptive text (e.g. Icons, images) |
+
+## Examples
+
+### Labeling
+
+`Clickable` has an `ariaLabel` prop that sets the component's accessible name.
+ariaLabel should be passed when using graphical elements to let screen reader
+users know the purpose of the clickable element.
+
+_NOTE:_ If the clickable element is not graphical, it's best to avoid using `ariaLabel` as the text content of the element itself, which is read by default, should ideally be descriptive enough to not need to manually pass in the label.
+
+This is an example of a component with an accessible label:
+
+<Canvas>
+    <Story name="Labeling">
+        <View>
+            <Clickable onClick={()=>{}} aria-label="More information about this subject">
+                {({hovered, focused, pressed}) => (
+                    <Icon icon={icons.info} />
+                )}
+            </Clickable>
+        </View>
+    </Story>
+</Canvas>
+
+### Disabled state
+
+Clickable does not need an `aria-disabled` attribute, if it also has a
+`disabled` component prop. We internally take care of defining the behavior so
+users can use these type of controls (including Screen Readers). By defining the
+internal behavior we can ensure that the component is accessible via Keyboard
+but not interactable/operatable.
+
+<Canvas>
+    <Story name="Disabled state">
+        <Clickable
+            onClick={(e) => console.log("Hello, world!")}
+            disabled={true}
+        >
+            {({hovered, focused, pressed}) => (
+                "This is a disabled clickable element"
+            )}
+        </Clickable>
+    </Story>
+</Canvas>
+
+### Keyboard navigation
+
+Clickable adds support to keyboard navigation and setting ARIA attributes. 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}.
+
+<Canvas>
+    <Story name="Keyboard navigation">
+        <View>
+            <Clickable role="tab" aria-controls="panel-1" id="tab-1">
+                {({hovered, focused, pressed}) => (
+                    <View
+                        style={[
+                            styles.resting,
+                            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"
+                style={styles.panel}
+            >
+                This is the information for the school.
+            </View>
+        </View>
+    </Story>
+</Canvas>
+
+export const styles = StyleSheet.create({
+    resting: {
+        boxShadow: `inset 0px 0px 1px 1px ${Color.lightBlue}`,
+        padding: Spacing.xSmall_8,
+    },
+    hovered: {
+        textDecoration: "underline",
+        backgroundColor: Color.blue,
+        color: Color.white,
+    },
+    pressed: {
+        color: Color.darkBlue,
+    },
+    focused: {
+        outline: `solid 4px ${Color.lightBlue}`,
+    },
+    panel: {
+        padding: Spacing.medium_16,
+        boxShadow: `inset 0px 0px 0 1px ${Color.offBlack8}`,
+    }
+});

package/src/components/__docs__/clickable-behavior.argtypes.js

@@ -0,0 +1,55 @@
+import clickableArgtypes from "./clickable.argtypes.js";
+
+export default {
+    children: {
+        description:
+            "A function that returns the a React `Element`. The function is passed an object with three boolean properties: hovered, focused, and pressed, and a `childrenProps` argument that contains all the event handlers that should be passed to the React `Element` itself.",
+        type: {
+            required: true,
+        },
+        table: {
+            type: {
+                summary:
+                    "(state: ClickableState, childrenProps: ChildrenProps) => React.Node",
+            },
+        },
+    },
+    /**
+     * States
+     */
+    disabled: {
+        ...clickableArgtypes.disabled,
+        description:
+            "Whether the component is disabled.\n\n" +
+            "If the component is disabled, this component will return handlers that do nothing.",
+    },
+    /**
+     * Events
+     */
+    onClick: {
+        ...clickableArgtypes.onClick,
+        description:
+            "An onClick function which ClickableBehavior can execute when clicked.",
+    },
+    onkeyDown: clickableArgtypes.onkeyDown,
+    onKeyUp: clickableArgtypes.onKeyUp,
+    /**
+     * Navigation
+     */
+    skipClientNav: clickableArgtypes.skipClientNav,
+    rel: clickableArgtypes.rel,
+    target: clickableArgtypes.target,
+    href: {
+        ...clickableArgtypes.href,
+        description:
+            "Optional `href` which `ClickableBehavior` should direct to, uses client-side routing by default if react-router is present.\n\n" +
+            "For keyboard navigation, the default is that both an enter and space press would also navigate to this location. See the triggerOnEnter and triggerOnSpace props for more details",
+    },
+    beforeNav: clickableArgtypes.beforeNav,
+    safeWithNav: clickableArgtypes.safeWithNav,
+
+    /**
+     * Accessibility
+     */
+    role: clickableArgtypes.role,
+};