@khanacademy/wonder-blocks-cell 1.0.0

package/src/components/__tests__/basic-cell.test.js

@@ -0,0 +1,98 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+
+import BasicCell from "../basic-cell.js";
+
+describe("BasicCell", () => {
+    it("should render the default BasicCell component", () => {
+        // Arrange
+
+        // Act
+        render(<BasicCell title="Basic cell" />);
+
+        // Assert
+        expect(screen.getByText("Basic cell")).toBeInTheDocument();
+    });
+
+    it("should render the title using a Typography element", () => {
+        // Arrange
+
+        // Act
+        render(<BasicCell title={<HeadingMedium>Basic cell</HeadingMedium>} />);
+
+        // Assert
+        expect(
+            screen.getByRole("heading", {name: "Basic cell"}),
+        ).toBeInTheDocument();
+    });
+
+    it("should render the leftAccessory", () => {
+        // Arrange
+
+        // Act
+        render(
+            <BasicCell
+                title="Basic cell"
+                leftAccessory={
+                    <Icon icon={icons.caretRight} aria-label="Caret icon" />
+                }
+            />,
+        );
+
+        // Assert
+        expect(screen.getByLabelText("Caret icon")).toBeInTheDocument();
+    });
+
+    it("should render the rightAccessory", () => {
+        // Arrange
+
+        // Act
+        render(
+            <BasicCell
+                title="Basic cell"
+                rightAccessory={
+                    <Icon icon={icons.caretRight} aria-label="Caret icon" />
+                }
+            />,
+        );
+
+        // Assert
+        expect(screen.getByLabelText("Caret icon")).toBeInTheDocument();
+    });
+
+    it("should add testId to the content wrapper", () => {
+        // Arrange
+
+        // Act
+        render(<BasicCell title="Basic cell" testId="cellId" />);
+
+        // Assert
+        expect(screen.getByTestId("cellId")).toHaveTextContent("Basic cell");
+    });
+
+    it("should add a button if onClick is set", () => {
+        // Arrange
+
+        // Act
+        render(<BasicCell title="Basic cell" onClick={jest.fn()} />);
+
+        // Assert
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("should allow clicking the cell if onClick is set", () => {
+        // Arrange
+        const onClickMock = jest.fn();
+        render(<BasicCell title="Basic cell" onClick={onClickMock} />);
+
+        // Act
+        screen.getByRole("button").click();
+
+        // Assert
+        expect(onClickMock).toHaveBeenCalled();
+    });
+});

package/src/components/__tests__/detail-cell.test.js

@@ -0,0 +1,103 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+
+import DetailCell from "../detail-cell.js";
+
+describe("DetailCell", () => {
+    it("should render the default DetailCell component", () => {
+        // Arrange
+
+        // Act
+        render(<DetailCell title="Detail cell" />);
+
+        // Assert
+        expect(screen.getByText("Detail cell")).toBeInTheDocument();
+    });
+
+    it("should render the title using a Typography element", () => {
+        // Arrange
+
+        // Act
+        render(
+            <DetailCell
+                title={<HeadingMedium>Detail cell title</HeadingMedium>}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("heading", {name: "Detail cell title"}),
+        ).toBeInTheDocument();
+    });
+
+    it("should render the subtitle1 using a plain text", () => {
+        // Arrange
+
+        // Act
+        render(
+            <DetailCell
+                title="Detail cell"
+                subtitle1="Detail cell subtitle 1"
+            />,
+        );
+
+        // Assert
+        expect(screen.getByText("Detail cell subtitle 1")).toBeInTheDocument();
+    });
+
+    it("should render the subtitle1 using a Typography element", () => {
+        // Arrange
+
+        // Act
+        render(
+            <DetailCell
+                title="Detail cell"
+                subtitle1={
+                    <HeadingMedium>Detail cell subtitle 1</HeadingMedium>
+                }
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("heading", {name: "Detail cell subtitle 1"}),
+        ).toBeInTheDocument();
+    });
+
+    it("should render the subtitle2 using a plain text", () => {
+        // Arrange
+
+        // Act
+        render(
+            <DetailCell
+                title="Detail cell"
+                subtitle2="Detail cell subtitle 2"
+            />,
+        );
+
+        // Assert
+        expect(screen.getByText("Detail cell subtitle 2")).toBeInTheDocument();
+    });
+
+    it("should render the subtitle2 using a Typography element", () => {
+        // Arrange
+
+        // Act
+        render(
+            <DetailCell
+                title="Detail cell"
+                subtitle2={
+                    <HeadingMedium>Detail cell subtitle 2</HeadingMedium>
+                }
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("heading", {name: "Detail cell subtitle 2"}),
+        ).toBeInTheDocument();
+    });
+});

package/src/components/basic-cell.js

@@ -0,0 +1,40 @@
+// @flow
+import * as React from "react";
+
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+
+import CellCore from "./internal/cell-core.js";
+
+import type {CellProps} from "../util/types.js";
+
+/**
+ * BasicCell is the simplest form of the Cell. It is a compacted-height Cell
+ * with limited subviews and accessories, to be used for simple lists, like
+ * dropdown option items, navigation items, settings dialogs, etc.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {BasicCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <BasicCell
+ *  title="Basic cell"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+function BasicCell(props: CellProps): React.Node {
+    const {title, ...coreProps} = props;
+
+    return (
+        <CellCore {...coreProps}>
+            {typeof title === "string" ? (
+                <LabelMedium>{title}</LabelMedium>
+            ) : (
+                title
+            )}
+        </CellCore>
+    );
+}
+
+export default BasicCell;

package/src/components/detail-cell.js

@@ -0,0 +1,100 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+
+import CellCore from "./internal/cell-core.js";
+
+import type {CellProps, TypographyText} from "../util/types.js";
+
+type SubtitleProps = {|
+    subtitle?: TypographyText,
+    /**
+     * If true, the subtitle will use the alpha color defined in the parent
+     * component/element.
+     */
+    disabled?: boolean,
+|};
+
+const Subtitle = ({subtitle, disabled}: SubtitleProps): React.Node => {
+    if (!subtitle) {
+        return null;
+    }
+
+    if (typeof subtitle === "string") {
+        return (
+            <LabelSmall style={!disabled && styles.subtitle}>
+                {subtitle}
+            </LabelSmall>
+        );
+    }
+
+    return subtitle;
+};
+
+type DetailCellProps = {|
+    ...CellProps,
+
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle1” area of the Cell.
+     */
+    subtitle1?: TypographyText,
+
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle2” area of the Cell.
+     */
+    subtitle2?: TypographyText,
+|};
+
+/**
+ * This is a variant of BasicCell that allows adding subtitles, before and after
+ * the cell title.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <DetailCell
+ *  leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+ *  subtitle1="Subtitle 1"
+ *  title="Detail cell"
+ *  subtitle1="Subtitle 2"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+function DetailCell(props: DetailCellProps): React.Node {
+    const {title, subtitle1, subtitle2, ...coreProps} = props;
+
+    return (
+        <CellCore {...coreProps}>
+            <Subtitle subtitle={subtitle1} disabled={coreProps.disabled} />
+            {subtitle1 && <Strut size={Spacing.xxxxSmall_2} />}
+            {typeof title === "string" ? (
+                <LabelLarge>{title}</LabelLarge>
+            ) : (
+                title
+            )}
+            {/* Add a vertical spacing between the title and the subtitle */}
+            {subtitle2 && <Strut size={Spacing.xxxxSmall_2} />}
+            <Subtitle subtitle={subtitle2} disabled={coreProps.disabled} />
+        </CellCore>
+    );
+}
+
+const styles = StyleSheet.create({
+    subtitle: {
+        color: Color.offBlack64,
+    },
+});
+
+export default DetailCell;

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

@@ -0,0 +1,95 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import CellCore from "../cell-core.js";
+
+describe("CellCore", () => {
+    it("should render the CellCore component", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore>
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(screen.getByText("cell core content")).toBeInTheDocument();
+    });
+
+    it("should NOT add a button by default", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore>
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("should add a button if onClick is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore onClick={jest.fn()}>
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("should add aria-label to the button", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore onClick={jest.fn()} aria-label="some description">
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("button", {name: "some description"}),
+        ).toBeInTheDocument();
+    });
+
+    it("should add aria-disabled if disabled is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore onClick={jest.fn()} disabled={true}>
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("should add aria-current if active is set", () => {
+        // Arrange
+
+        // Act
+        const {container} = render(
+            <CellCore active={true}>
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        // Verify that the root element has the aria-current attribute
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(container.firstChild).toHaveAttribute("aria-current", "true");
+    });
+});

package/src/components/internal/__tests__/common.test.js

@@ -0,0 +1,47 @@
+// @flow
+
+import {getHorizontalRuleStyles} from "../common.js";
+
+describe("getHorizontalRuleStyles", () => {
+    it("should get 'inset' styles as an array", () => {
+        // Arrange
+
+        // Act
+        const styles = getHorizontalRuleStyles("inset");
+
+        // Assert
+        // Verify that both classes are injected
+        expect(styles).toMatchObject([
+            {
+                _name: /horizontalRule/,
+            },
+            {
+                _name: /horizontalRuleInset/,
+            },
+        ]);
+    });
+
+    it("should get 'full-width' styles as an object", () => {
+        // Arrange
+
+        // Act
+        const styles = getHorizontalRuleStyles("full-width");
+
+        // Assert
+        // Verify that only one class is injected
+        expect(styles).toMatchObject({
+            _name: /horizontalRule/,
+        });
+    });
+
+    it("should not inject styles with 'none'", () => {
+        // Arrange
+
+        // Act
+        const styles = getHorizontalRuleStyles("none");
+
+        // Assert
+        // Verify that we don't inject any styles
+        expect(styles).toMatchObject({});
+    });
+});