@khanacademy/wonder-blocks-cell 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.1.0
+
+### Minor Changes
+
+-   9819c13f: Add href prop for client-side navigation
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -134,6 +134,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -176,10 +177,11 @@ const CellCore = props => {
   }; // Pressable cell.
 
 
-  if (onClick) {
+  if (onClick || href) {
     return /*#__PURE__*/React.createElement(Clickable, {
       disabled: disabled,
       onClick: onClick,
+      href: href,
       hideDefaultFocusRing: true,
       "aria-label": ariaLabel ? ariaLabel : undefined
     }, eventState => renderCell(eventState));

package/dist/index.js

@@ -299,6 +299,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -341,10 +342,11 @@ const CellCore = props => {
   }; // Pressable cell.
 
 
-  if (onClick) {
+  if (onClick || href) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default.a, {
       disabled: disabled,
       onClick: onClick,
+      href: href,
       hideDefaultFocusRing: true,
       "aria-label": ariaLabel ? ariaLabel : undefined
     }, eventState => renderCell(eventState));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/components/__docs__/compact-cell.argtypes.js

@@ -27,7 +27,7 @@ export const AccessoryMappings = {
         </View>
     ): React.Element<typeof View>),
     withImage: ((
-        <img src="/avatar.png" alt="ItemAvatar" width={48} height={48} />
+        <img src="./avatar.png" alt="ItemAvatar" width={48} height={48} />
     ): React$Element<"img">),
 };
 
@@ -121,6 +121,17 @@ export default {
             },
         },
     },
+    href: {
+        description:
+            "Optional href which Cell should direct to, uses client-side routing by default if react-router is present.",
+        control: {type: "text"},
+        table: {
+            category: "Navigation",
+            type: {
+                summary: "string",
+            },
+        },
+    },
     onClick: {
         action: "clicked",
         description: `Called when the cell is clicked.

package/src/components/__docs__/detail-cell.stories.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
+import {MemoryRouter, Route, Switch} from "react-router-dom";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
@@ -145,10 +146,61 @@ ClickableDetailCell.parameters = {
     },
 };
 
+export const DetailCellNavigation: StoryComponentType = () => (
+    <MemoryRouter>
+        <View>
+            <DetailCell
+                title="Data"
+                subtitle2="Subtitle for article item"
+                leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+                rightAccessory={<Icon icon={icons.caretRight} />}
+                href="/math/algebra"
+                aria-label="Press to navigate to the article"
+            />
+            <DetailCell
+                title="Geometry"
+                subtitle2="Subtitle for article item"
+                leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+                rightAccessory={<Icon icon={icons.caretRight} />}
+                href="/math/geometry"
+                aria-label="Press to navigate to the article"
+                horizontalRule="none"
+            />
+        </View>
+
+        <View style={styles.navigation}>
+            <Switch>
+                <Route path="/math/algebra">Navigates to /math/algebra</Route>
+                <Route path="/math/geometry">Navigates to /math/geometry</Route>
+                <Route path="*">See navigation changes here</Route>
+            </Switch>
+        </View>
+    </MemoryRouter>
+);
+
+DetailCellNavigation.storyName = "Client-side navigation with DetailCell";
+
+DetailCellNavigation.parameters = {
+    chromatic: {
+        // This only includes interactions with the clickable cell, so no need
+        // to capture screenshots.
+        disableSnapshot: true,
+    },
+    docs: {
+        storyDescription:
+            "Cells accept an `href` prop to be able to navigate to a different URL. Note that this will use client-side navigation if the Cell component is within a React-Router environment.",
+    },
+};
+
 const styles = StyleSheet.create({
     example: {
         backgroundColor: Color.offWhite,
         padding: Spacing.large_24,
         width: 376,
     },
+    navigation: {
+        border: `1px dashed ${Color.lightBlue}`,
+        marginTop: Spacing.large_24,
+        padding: Spacing.large_24,
+    },
 });

package/src/components/internal/__tests__/cell-core.test.js

@@ -47,6 +47,20 @@ describe("CellCore", () => {
         expect(screen.getByRole("button")).toBeInTheDocument();
     });
 
+    it("should add an anchor if href is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore href="/math">
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(screen.getByRole("link")).toHaveAttribute("href", "/math");
+    });
+
     it("should add aria-label to the button", () => {
         // Arrange
 

package/src/components/internal/cell-core.js

@@ -119,6 +119,7 @@ const CellCore = (props: CellCoreProps): React.Node => {
         active,
         children,
         disabled,
+        href,
         horizontalRule = "inset",
         leftAccessory = undefined,
         leftAccessoryStyle = undefined,
@@ -191,11 +192,12 @@ const CellCore = (props: CellCoreProps): React.Node => {
     };
 
     // Pressable cell.
-    if (onClick) {
+    if (onClick || href) {
         return (
             <Clickable
                 disabled={disabled}
                 onClick={onClick}
+                href={href}
                 hideDefaultFocusRing={true}
                 aria-label={ariaLabel ? ariaLabel : undefined}
             >

package/src/util/types.js

@@ -126,4 +126,10 @@ export type CellProps = {|
      * Used to announce the cell's content to screen readers.
      */
     "aria-label"?: string,
+
+    /**
+     * Optinal href which Cell should direct to, uses client-side routing
+     * by default if react-router is present.
+     */
+    href?: string,
 |};