@khanacademy/wonder-blocks-cell - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-cell
 
+## 2.1.0
+
+### Minor Changes
+
+-   9819c13f: Add href prop for client-side navigation
+
 ## 2.0.2
@@ -4,0 +10,0 @@

dist/es/index.js

@@ -137,2 +137,3 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
     disabled,
+    href,
     horizontalRule = "inset",
@@ -180,6 +181,7 @@ leftAccessory = undefined,
 
-  if (onClick) {
+  if (onClick || href) {
     return /*#__PURE__*/React.createElement(Clickable, {
       disabled: disabled,
       onClick: onClick,
+      href: href,
       hideDefaultFocusRing: true,
@@ -186,0 +188,0 @@ "aria-label": ariaLabel ? ariaLabel : undefined

dist/index.js

@@ -302,2 +302,3 @@ module.exports =
     disabled,
+    href,
     horizontalRule = "inset",
@@ -345,6 +346,7 @@ leftAccessory = undefined,
 
-  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,
@@ -351,0 +353,0 @@ "aria-label": ariaLabel ? ariaLabel : undefined

package.json

 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "design": "v1",
@@ -5,0 +5,0 @@ "publishConfig": {

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

@@ -30,3 +30,3 @@ // @flow
     withImage: ((
-        <img src="/avatar.png" alt="ItemAvatar" width={48} height={48} />
+        <img src="./avatar.png" alt="ItemAvatar" width={48} height={48} />
     ): React$Element<"img">),
@@ -125,2 +125,13 @@ };
     },
+    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: {
@@ -127,0 +138,0 @@ action: "clicked",

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

 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
+import {MemoryRouter, Route, Switch} from "react-router-dom";
 
@@ -148,2 +149,48 @@ import {View} from "@khanacademy/wonder-blocks-core";
 
+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({
@@ -155,2 +202,7 @@ example: {
     },
+    navigation: {
+        border: `1px dashed ${Color.lightBlue}`,
+        marginTop: Spacing.large_24,
+        padding: Spacing.large_24,
+    },
 });

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

@@ -50,2 +50,16 @@ // @flow
 
+    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", () => {
@@ -52,0 +66,0 @@ // Arrange

src/components/internal/cell-core.js

@@ -122,2 +122,3 @@ // @flow
         disabled,
+        href,
         horizontalRule = "inset",
@@ -195,3 +196,3 @@ leftAccessory = undefined,
     // Pressable cell.
-    if (onClick) {
+    if (onClick || href) {
         return (
@@ -201,2 +202,3 @@ <Clickable
                 onClick={onClick}
+                href={href}
                 hideDefaultFocusRing={true}
@@ -203,0 +205,0 @@ aria-label={ariaLabel ? ariaLabel : undefined}

src/util/types.js

@@ -129,2 +129,8 @@ // @flow
     "aria-label"?: string,
+
+    /**
+     * Optinal href which Cell should direct to, uses client-side routing
+     * by default if react-router is present.
+     */
+    href?: string,
 |};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93930

increased by3.29%

Lines of code

2419

increased by3.46%

No dependency changes