@khanacademy/wonder-blocks-cell 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-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
+
+-   166ecc97: Use `aria-disabled` instead of disabled, fix focused + disabled styles.
+-   Updated dependencies [166ecc97]
+    -   @khanacademy/wonder-blocks-clickable@2.2.4
+
 ## 2.0.0
 
 ### Major 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));
@@ -255,7 +257,10 @@ const styles$1 = StyleSheet.create({
     background: fade(Color.blue, 0.24)
   },
   disabled: {
-    color: Color.offBlack32
+    color: Color.offBlack32,
+    ":hover": {
+      cursor: "not-allowed"
+    }
   },
   accessoryActive: {
     color: Color.blue

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));
@@ -420,7 +422,10 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.24)
   },
   disabled: {
-    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack32
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack32,
+    ":hover": {
+      cursor: "not-allowed"
+    }
   },
   accessoryActive: {
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.3",
+    "@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
 
@@ -74,7 +88,10 @@ describe("CellCore", () => {
         );
 
         // Assert
-        expect(screen.getByRole("button")).toBeDisabled();
+        expect(screen.getByRole("button")).toHaveAttribute(
+            "aria-disabled",
+            "true",
+        );
     });
 
     it("should add aria-current if active is set", () => {

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}
             >
@@ -285,6 +287,9 @@ const styles = StyleSheet.create({
 
     disabled: {
         color: Color.offBlack32,
+        ":hover": {
+            cursor: "not-allowed",
+        },
     },
 
     accessoryActive: {

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,
 |};