@khanacademy/wonder-blocks-cell 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.0
+
+### Minor Changes
+
+-   35b9ef9c: Add target prop to cell.
+
+## 2.1.0
+
+### Minor Changes
+
+-   9819c13f: Add href prop for client-side navigation
+
+## 2.0.2
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+    -   @khanacademy/wonder-blocks-clickable@2.2.5
+    -   @khanacademy/wonder-blocks-layout@1.4.8
+    -   @khanacademy/wonder-blocks-typography@1.1.30
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -134,6 +134,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -143,7 +144,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -176,12 +178,14 @@ 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
+      "aria-label": ariaLabel ? ariaLabel : undefined,
+      target: target
     }, eventState => renderCell(eventState));
   } // No click event attached, so just render the cell as-is.
 

package/dist/index.js

@@ -299,6 +299,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -308,7 +309,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -341,12 +343,14 @@ 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
+      "aria-label": ariaLabel ? ariaLabel : undefined,
+      target: target
     }, eventState => renderCell(eventState));
   } // No click event attached, so just render the cell as-is.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.4",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.2.1",
-    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-core": "^4.3.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.8",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.29"
+    "@khanacademy/wonder-blocks-typography": "^1.1.30"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

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,
@@ -129,6 +130,7 @@ const CellCore = (props: CellCoreProps): React.Node => {
         testId,
         "aria-label": ariaLabel,
         innerStyle,
+        target,
     } = props;
 
     const renderCell = (eventState?: ClickableState): React.Node => {
@@ -191,13 +193,15 @@ 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}
+                target={target}
             >
                 {(eventState) => renderCell(eventState)}
             </Clickable>

package/src/util/types.js

@@ -126,4 +126,18 @@ 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,
+
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
 |};