@khanacademy/wonder-blocks-cell 2.0.2 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.1
+
+### Patch Changes
+
+-   eadd9c0d: Fix top vertical alignment between accessories and content
+
+## 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

package/dist/es/index.js

@@ -16,7 +16,7 @@ const CellMeasurements = {
    * The cell wrapper's gap.
    */
   cellPadding: {
-    paddingVertical: Spacing.xSmall_8,
+    paddingVertical: Spacing.small_12,
     paddingHorizontal: Spacing.medium_16
   },
 
@@ -24,15 +24,10 @@ const CellMeasurements = {
    * The DetailCell wrapper's gap.
    */
   detailCellPadding: {
-    paddingVertical: Spacing.small_12,
+    paddingVertical: Spacing.medium_16,
     paddingHorizontal: Spacing.medium_16
   },
 
-  /**
-   * The extra vertical spacing added to the title/content wrapper.
-   */
-  contentVerticalSpacing: Spacing.xxxSmall_4,
-
   /**
    * The horizontal spacing between the left and right accessory.
    */
@@ -134,6 +129,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -143,7 +139,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -176,12 +173,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.
 
@@ -203,8 +202,7 @@ const styles$1 = StyleSheet.create({
   },
   content: {
     alignSelf: "center",
-    overflowWrap: "break-word",
-    padding: `${CellMeasurements.contentVerticalSpacing}px 0`
+    overflowWrap: "break-word"
   },
   accessory: {
     // Use content width by default.

package/dist/index.js

@@ -126,7 +126,7 @@ const CellMeasurements = {
    * The cell wrapper's gap.
    */
   cellPadding: {
-    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xSmall_8,
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
     paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
   },
 
@@ -134,15 +134,10 @@ const CellMeasurements = {
    * The DetailCell wrapper's gap.
    */
   detailCellPadding: {
-    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16,
     paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
   },
 
-  /**
-   * The extra vertical spacing added to the title/content wrapper.
-   */
-  contentVerticalSpacing: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxSmall_4,
-
   /**
    * The horizontal spacing between the left and right accessory.
    */
@@ -299,6 +294,7 @@ const CellCore = props => {
     active,
     children,
     disabled,
+    href,
     horizontalRule = "inset",
     leftAccessory = undefined,
     leftAccessoryStyle = undefined,
@@ -308,7 +304,8 @@ const CellCore = props => {
     style,
     testId,
     "aria-label": ariaLabel,
-    innerStyle
+    innerStyle,
+    target
   } = props;
 
   const renderCell = eventState => {
@@ -341,12 +338,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.
 
@@ -368,8 +367,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   content: {
     alignSelf: "center",
-    overflowWrap: "break-word",
-    padding: `${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].contentVerticalSpacing}px 0`
+    overflowWrap: "break-word"
   },
   accessory: {
     // Use content width by default.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.0.2",
+  "version": "2.2.1",
   "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";
@@ -109,6 +110,7 @@ export const DetailCellWithCustomStyles: StoryComponentType = () => (
         leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
         leftAccessoryStyle={{
             minWidth: Spacing.xxLarge_48,
+            alignSelf: "flex-start",
         }}
         rightAccessory={<Icon icon={icons.caretRight} size="small" />}
         rightAccessoryStyle={{
@@ -145,10 +147,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>
@@ -225,7 +229,6 @@ const styles = StyleSheet.create({
     content: {
         alignSelf: "center",
         overflowWrap: "break-word",
-        padding: `${CellMeasurements.contentVerticalSpacing}px 0`,
     },
 
     accessory: {

package/src/components/internal/common.js

@@ -14,7 +14,7 @@ export const CellMeasurements = {
      * The cell wrapper's gap.
      */
     cellPadding: {
-        paddingVertical: Spacing.xSmall_8,
+        paddingVertical: Spacing.small_12,
         paddingHorizontal: Spacing.medium_16,
     },
 
@@ -22,15 +22,10 @@ export const CellMeasurements = {
      * The DetailCell wrapper's gap.
      */
     detailCellPadding: {
-        paddingVertical: Spacing.small_12,
+        paddingVertical: Spacing.medium_16,
         paddingHorizontal: Spacing.medium_16,
     },
 
-    /**
-     * The extra vertical spacing added to the title/content wrapper.
-     */
-    contentVerticalSpacing: Spacing.xxxSmall_4,
-
     /**
      * The horizontal spacing between the left and right accessory.
      */

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