@khanacademy/wonder-blocks-cell 3.4.3 → 3.4.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-cell
 
+## 3.4.5
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-clickable@4.2.8
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @khanacademy/wonder-blocks-layout@2.2.1
+    -   @khanacademy/wonder-blocks-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
+## 3.4.4
+
+### Patch Changes
+
+-   Updated dependencies [07f7f407]
+    -   @khanacademy/wonder-blocks-core@7.0.0
+    -   @khanacademy/wonder-blocks-layout@2.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.7
+    -   @khanacademy/wonder-blocks-typography@2.1.15
+
 ## 3.4.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import CompactCell from "./components/compact-cell";
 import DetailCell from "./components/detail-cell";
+export type { HorizontalRuleVariant, TypographyText } from "./util/types";
 export { CompactCell, DetailCell };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.6",
-    "@khanacademy/wonder-blocks-core": "^6.4.3",
-    "@khanacademy/wonder-blocks-layout": "^2.1.3",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.14"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.8",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/__tests__/compact-cell.test.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
-import caretRightIcon from "@phosphor-icons/core/regular/caret-right.svg";
-
-import CompactCell from "../compact-cell";
-
-describe("CompactCell", () => {
-    it("should render the default CompactCell component", () => {
-        // Arrange
-
-        // Act
-        render(<CompactCell title="Compact cell" />);
-
-        // Assert
-        expect(screen.getByText("Compact cell")).toBeInTheDocument();
-    });
-
-    it("should render the title using a Typography element", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CompactCell title={<HeadingMedium>Compact cell</HeadingMedium>} />,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("heading", {name: "Compact cell"}),
-        ).toBeInTheDocument();
-    });
-
-    it("should render the leftAccessory", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CompactCell
-                title="Compact cell"
-                leftAccessory={
-                    <PhosphorIcon
-                        icon={caretRightIcon}
-                        aria-label="Caret icon"
-                    />
-                }
-            />,
-        );
-
-        // Assert
-        expect(screen.getByLabelText("Caret icon")).toBeInTheDocument();
-    });
-
-    it("should render the rightAccessory", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CompactCell
-                title="Compact cell"
-                rightAccessory={
-                    <PhosphorIcon
-                        icon={caretRightIcon}
-                        aria-label="Caret icon"
-                    />
-                }
-            />,
-        );
-
-        // Assert
-        expect(screen.getByLabelText("Caret icon")).toBeInTheDocument();
-    });
-
-    it("should add testId to the content wrapper", () => {
-        // Arrange
-
-        // Act
-        render(<CompactCell title="Compact cell" testId="cellId" />);
-
-        // Assert
-        expect(screen.getByTestId("cellId")).toHaveTextContent("Compact cell");
-    });
-
-    it("should add a button if onClick is set", () => {
-        // Arrange
-
-        // Act
-        render(<CompactCell title="Compact 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(<CompactCell title="Compact cell" onClick={onClickMock} />);
-
-        // Act
-        screen.getByRole("button").click();
-
-        // Assert
-        expect(onClickMock).toHaveBeenCalled();
-    });
-});

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

@@ -1,102 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
-
-import DetailCell from "../detail-cell";
-
-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/compact-cell.tsx

@@ -1,43 +0,0 @@
-import * as React from "react";
-
-import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
-
-import CellCore from "./internal/cell-core";
-
-import type {CellProps} from "../util/types";
-
-/**
- * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
- * with limited subviews and accessories. Typically they represent additional
- * info or selection lists. It has a minimum height of 48px and a non-bold
- * title. It does not have subtitles or a progress bar, and in general it has
- * less vertical space around text and accessories.
- *
- * ### Usage
- *
- * ```jsx
- * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
- * import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
- * import caretRightIcon from "@phosphor-icons/core/regular/caret-right.svg";
- *
- * <CompactCell
- *  title="Compact cell"
- *  rightAccessory={<PhosphorIcon icon={caretRightIcon} size="medium" />}
- * />
- * ```
- */
-const CompactCell = function (props: CellProps): React.ReactElement {
-    const {title, ...coreProps} = props;
-
-    return (
-        <CellCore {...coreProps}>
-            {typeof title === "string" ? (
-                <LabelMedium>{title}</LabelMedium>
-            ) : (
-                title
-            )}
-        </CellCore>
-    );
-};
-
-export default CompactCell;

package/src/components/detail-cell.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
-
-import CellCore from "./internal/cell-core";
-import {CellMeasurements} from "./internal/common";
-
-import type {CellProps, TypographyText} from "../util/types";
-
-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.ReactElement => {
-    if (!subtitle) {
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-        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 CompactCell that allows adding subtitles, before and
- * after the cell title. They typically represent an item that can be
- * clicked/tapped to view more complex details. They vary in height depending on
- * the presence or absence of subtitles, and they allow for a wide range of
- * functionality depending on which accessories are active.
- *
- * ### Usage
- *
- * ```jsx
- * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
- * import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
- *
- * <DetailCell
- *  leftAccessory={<PhosphorIcon icon={contentVideo} size="medium" />}
- *  subtitle1="Subtitle 1"
- *  title="Detail cell"
- *  subtitle1="Subtitle 2"
- *  rightAccessory={<PhosphorIcon icon={caretRight} size="medium" />}
- * />
- * ```
- */
-const DetailCell = function (props: DetailCellProps): React.ReactElement {
-    const {title, subtitle1, subtitle2, ...coreProps} = props;
-
-    return (
-        <CellCore {...coreProps} innerStyle={styles.innerWrapper}>
-            <Subtitle subtitle={subtitle1} disabled={coreProps.disabled} />
-            {subtitle1 && <Strut size={spacing.xxxxSmall_2} />}
-            {typeof title === "string" ? (
-                <LabelMedium>{title}</LabelMedium>
-            ) : (
-                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,
-    },
-
-    // This is to override the default padding of the CellCore innerWrapper.
-    innerWrapper: {
-        padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`,
-    },
-});
-
-export default DetailCell;

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

@@ -1,216 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import CellCore from "../cell-core";
-
-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 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
-
-        // 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")).toHaveAttribute(
-            "aria-disabled",
-            "true",
-        );
-    });
-
-    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");
-    });
-
-    it("should allow passing a role", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CellCore onClick={jest.fn()} role="menuitem">
-                <div>cell core content</div>
-            </CellCore>,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("menuitem", {name: "cell core content"}),
-        ).toBeInTheDocument();
-    });
-
-    it("should pass an style to the top node", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CellCore onClick={jest.fn()} rootStyle={{color: "blue"}}>
-                <div>cell core content</div>
-            </CellCore>,
-        );
-
-        // Assert
-        expect(screen.getByRole("button")).toHaveStyle("color: blue");
-    });
-
-    it("should pass an style to the content container", () => {
-        // Arrange
-
-        // Act
-        render(
-            <CellCore
-                onClick={jest.fn()}
-                contentStyle={{alignSelf: "flex-start"}}
-            >
-                <div>cell core content</div>
-            </CellCore>,
-        );
-
-        // Assert
-        const elem = screen.getByText("cell core content");
-        // eslint-disable-next-line testing-library/no-node-access
-        expect(elem.parentElement).toHaveStyle("align-self: flex-start");
-    });
-
-    describe("aria-checked", () => {
-        it("should add aria-checked if aria-checked is set and it is a link", () => {
-            // Arrange
-
-            // Act
-            const {container} = render(
-                <CellCore aria-checked={true} href="#">
-                    <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-checked",
-                "true",
-            );
-        });
-
-        it("should add aria-checked if aria-checked is set and it has an onClick handler", () => {
-            // Arrange
-
-            // Act
-            const {container} = render(
-                <CellCore aria-checked={true} onClick={jest.fn()}>
-                    <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-checked",
-                "true",
-            );
-        });
-
-        it("should not add aria-checked if it is not clickable", () => {
-            // Arrange
-
-            // Act
-            const {container} = render(
-                <CellCore aria-checked={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).not.toHaveAttribute("aria-checked");
-        });
-    });
-});

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

@@ -1,45 +0,0 @@
-import {getHorizontalRuleStyles} from "../common";
-
-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({});
-    });
-});