@khanacademy/wonder-blocks-card 0.0.0-PR2902-20251211165942 → 0.0.0-PR2904-20251211205241

package/src/__tests__/components/dismiss-button.test.tsx

@@ -1,158 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import {DismissButton} from "../../components/dismiss-button";
-
-describe("DismissButton", () => {
-    describe("Basic rendering", () => {
-        it("should render as a button", () => {
-            // Arrange & Act
-            render(<DismissButton />);
-
-            // Assert
-            expect(screen.getByRole("button")).toBeInTheDocument();
-        });
-    });
-
-    describe("Accessibility", () => {
-        it("should use default aria-label when not provided", () => {
-            // Arrange & Act
-            render(<DismissButton />);
-
-            // Assert
-            expect(
-                screen.getByRole("button", {name: "Close"}),
-            ).toBeInTheDocument();
-        });
-
-        it("should use custom aria-label when provided", () => {
-            // Arrange & Act
-            render(<DismissButton aria-label="Dismiss notification" />);
-
-            // Assert
-            expect(
-                screen.getByRole("button", {name: "Dismiss notification"}),
-            ).toBeInTheDocument();
-        });
-
-        it("should use custom aria-describedby when provided", () => {
-            // Arrange & Act
-            render(
-                <DismissButton aria-describedby="dismiss-button-describedby" />,
-            );
-
-            // Assert
-            expect(screen.getByRole("button")).toHaveAttribute(
-                "aria-describedby",
-                "dismiss-button-describedby",
-            );
-        });
-
-        it("should be keyboard accessible", () => {
-            // Arrange
-            render(<DismissButton aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button");
-            button.focus();
-
-            // Assert
-            expect(button).toHaveFocus();
-        });
-    });
-
-    describe("Event handling", () => {
-        it("should call onClick when button is clicked", async () => {
-            // Arrange
-            const mockOnClick = jest.fn();
-            render(<DismissButton onClick={mockOnClick} aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button", {name: "Close"});
-            await userEvent.click(button);
-
-            // Assert
-            expect(mockOnClick).toHaveBeenCalledTimes(1);
-        });
-
-        it("should call onClick with event parameter", async () => {
-            // Arrange
-            const mockOnClick = jest.fn();
-            render(<DismissButton onClick={mockOnClick} aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button", {name: "Close"});
-            await userEvent.click(button);
-
-            // Assert
-            expect(mockOnClick).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "click",
-                }),
-            );
-        });
-
-        it("should handle missing onClick prop gracefully", async () => {
-            // Arrange
-            render(<DismissButton aria-label="Close" />);
-
-            // Act & Assert
-            const button = screen.getByRole("button", {name: "Close"});
-            await expect(userEvent.click(button)).resolves.not.toThrow();
-        });
-
-        it("should support keyboard activation with Enter", async () => {
-            // Arrange
-            const mockOnClick = jest.fn();
-            render(<DismissButton onClick={mockOnClick} aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button", {name: "Close"});
-            button.focus();
-            await userEvent.keyboard("{Enter}");
-
-            // Assert
-            expect(mockOnClick).toHaveBeenCalledTimes(1);
-        });
-
-        it("should support keyboard activation with Space", async () => {
-            // Arrange
-            const mockOnClick = jest.fn();
-            render(<DismissButton onClick={mockOnClick} aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button", {name: "Close"});
-            button.focus();
-            await userEvent.keyboard(" ");
-
-            // Assert
-            expect(mockOnClick).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe("Test ID support", () => {
-        it("should set data-testid attribute when testId is provided", () => {
-            // Arrange
-            const testId = "dismiss-button-test";
-            render(<DismissButton testId={testId} aria-label="Close" />);
-
-            // Act
-            const button = screen.getByTestId(testId);
-
-            // Assert
-            expect(button).toHaveAttribute("data-testid", testId);
-        });
-
-        it("should not have data-testid attribute when testId is not provided", () => {
-            // Arrange
-            render(<DismissButton aria-label="Close" />);
-
-            // Act
-            const button = screen.getByRole("button");
-
-            // Assert
-            expect(button).not.toHaveAttribute("data-testid");
-        });
-    });
-});

package/src/components/card.tsx

@@ -1,308 +0,0 @@
-import * as React from "react";
-
-import {StyleSheet} from "aphrodite";
-import {StyleType, View} from "@khanacademy/wonder-blocks-core";
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
-
-import {
-    boxShadow,
-    border,
-    semanticColor,
-    sizing,
-    font,
-} from "@khanacademy/wonder-blocks-tokens";
-
-import {DismissButton} from "./dismiss-button";
-
-/**
- * Base props that are shared across all Card configurations
- */
-type BaseCardProps = {
-    /**
-     * Optional styles to be applied to the root element and the dismiss button.
-     */
-    styles?: {
-        root?: StyleType;
-        dismissButton?: StyleType;
-    };
-    /**
-     * A ref that will be passed to the root element (i.e. the card container).
-     */
-    ref?: React.Ref<HTMLElement>;
-    /**
-     * The content for the card.
-     */
-    children: React.ReactNode;
-    /**
-     * An optional attribute to remove this component from the accessibility tree
-     * and keyboard tab order, such as for inactive cards in a stack.
-     */
-    inert?: boolean;
-    /**
-     * The test ID used to locate this component in automated tests.
-     *
-     * The test ID will also be passed to the dismiss button as
-     * `{testId}-dismiss-button` if the `onDismiss` prop is provided.
-     */
-    testId?: string;
-} & StyleProps;
-
-/**
- * A callback function to handle dismissing the card. When this prop is present,
- * a dismiss button with an X icon will be rendered.
- *
- * When `onDismiss` is provided, `labels.dismissButtonAriaLabel` must also be
- * provided for accessibility and localization. `labels.dismissButtonAriaDescribedBy`
- * can be provided to pass an aria-describedby attribute to the dismiss button if
- * more context is needed for the dismiss button.
- */
-type DismissProps =
-    | {
-          onDismiss: (e?: React.SyntheticEvent) => void;
-          labels: {
-              dismissButtonAriaLabel: string;
-              dismissButtonAriaDescribedBy?: string;
-          } & Record<string, any>;
-      }
-    | {
-          onDismiss?: never;
-          labels?: Record<string, any>;
-      };
-
-/**
- * Valid HTML tags for the Card component.
- * Excludes button and anchor tags which should use Wonder Blocks Button and Link components instead.
- */
-
-/**
- * Accessibility props for the Card.
- *
- * Labeling methods (in order of preference):
- * 1. `labels.cardAriaLabel` - For translatable strings, automatically applied to `aria-label`
- * 2. `aria-labelledby` - For ID references to existing elements
- *
- * Only one labeling mechanism can be used at a time. The type system enforces this
- * by using discriminated unions.
- */
-type LabelingProps =
-    | {
-          /** Translatable label string for aria-label */
-          labels?: {
-              cardAriaLabel?: string;
-              dismissButtonAriaLabel?: string;
-          };
-          "aria-labelledby"?: never;
-      }
-    | {
-          /** ID reference for aria-labelledby */
-          "aria-labelledby"?: string;
-          labels?: {
-              cardAriaLabel?: never;
-              dismissButtonAriaLabel?: string;
-          };
-      };
-
-type AccessibilityProps = LabelingProps & {
-    "aria-busy"?: AriaProps["aria-busy"];
-    "aria-roledescription"?: AriaProps["aria-roledescription"];
-    role?: AriaProps["role"];
-};
-
-/**
- * Tag and accessibility props combined.
- */
-type TagProps = {
-    tag?: Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
-} & AccessibilityProps;
-
-type StyleProps = {
-    /**
-     * The background style of the card, as a string identifier that matches a semanticColor token.
-     * This can be one of:
-     * - `"base-subtle"` (color), `semanticColor.core.background.base.subtle`: a light gray background.
-     * - `"base-default"` (color), `semanticColor.core.background.base.default`: a white background.
-     * - `Image` (image), a URL string for a background image. Can be an imported image file or a URL string.
-     *
-     * For additional background styling such as repeat or size, use the `styles.root` prop to pass in custom styles.
-     *
-     * Default: `"base-default"`
-     */
-    background?: "base-subtle" | "base-default" | typeof Image | null;
-    /**
-     * The border radius of the card, as a string identifier that matches a border.radius token.
-     * This can be one of:
-     * - `"radius_080"`, matching `border.radius.radius_080`.
-     * - `"radius_120"`, matching `border.radius.radius_120`.
-     *
-     * Default: `"radius_080"`
-     */
-    borderRadius?: "small" | "medium";
-    /**
-     * The padding inside the card, as a string identifier that matches a sizing token.
-     * This can be one of:
-     * - `"none"`: no padding.
-     * - `"small"`, matching `sizing.size_160`.
-     * - `"medium"`, matching `sizing.size_240`.
-     *
-     * Default: `"size_160"`
-     */
-    paddingSize?: "none" | "small" | "medium";
-    /**
-     * The box-shadow for the card, as a string identifier that matches a sizing token.
-     * This can be one of:
-     * - `"none"`: no elevation.
-     * - `"low"`, matching `boxShadow.low`.
-     *
-     * Default: `"none"`
-     */
-    elevation?: "none" | "low";
-};
-
-type CardProps = BaseCardProps & TagProps & DismissProps;
-/**
- * The Card component is a flexible, reusable UI building block designed to
- * encapsulate content within a structured, visually distinct container.
- * Its primary goal is to present grouped or related information in a way that
- * is visually consistent, easily scannable, and modular across different
- * parts of the application.
- *
- * Cards provide a defined surface area with clear visual boundaries
- * (via border-radius and box-shadow elevation tokens), making them ideal for
- * use cases that involve displaying comparable content items side-by-side or
- * in structured layouts such as grids, lists, or dashboards.
- *
- * Note: cards do not set a default width. Width styles should be set by the consumer
- * with the `styles.root` prop, or a parent flex or grid container.
- *
- * ### Usage
- *
- * ```jsx
- * import {Card} from "@khanacademy/wonder-blocks-card";
- *
- * <Card>
- *   <Heading>This is a basic card.</Heading>
- * </Card>
- * ```
- *
- * ### Accessibility
- *
- * When the `onDismiss` prop is provided, a dismiss button will be rendered.
- * In this case, the `labels.dismissButtonAriaLabel` prop is required to provide
- * a translatable screen reader label for the dismiss button.
- *
- * See additional Accessibility docs.
- */
-
-const Card = React.forwardRef(function Card(
-    props: CardProps,
-    ref: React.ForwardedRef<HTMLElement>,
-) {
-    const {
-        styles,
-        labels,
-        tag,
-        testId,
-        background = "base-default",
-        borderRadius = "small",
-        paddingSize = "small",
-        elevation = "none",
-        children,
-        onDismiss,
-        inert,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-busy": ariaBusy,
-        role,
-    } = props;
-
-    const isBackgroundToken =
-        background === "base-default" || background === "base-subtle";
-    const componentStyles = getComponentStyles({
-        background: isBackgroundToken ? background : null,
-        borderRadius,
-        paddingSize,
-        elevation,
-    });
-
-    return (
-        <View
-            aria-busy={ariaBusy}
-            aria-label={labels?.cardAriaLabel}
-            aria-labelledby={ariaLabelledBy}
-            style={[
-                componentStyles.root,
-                !isBackgroundToken && {
-                    background: `url(${background})`,
-                    backgroundSize: "cover",
-                },
-                styles?.root,
-            ]}
-            ref={ref}
-            role={role}
-            tag={tag}
-            testId={testId}
-            {...{inert: inert ? "" : undefined}}
-        >
-            {onDismiss ? (
-                <DismissButton
-                    aria-label={labels?.dismissButtonAriaLabel || "Close"}
-                    aria-describedby={labels?.dismissButtonAriaDescribedBy}
-                    onClick={(e) => onDismiss?.(e)}
-                    testId={testId && `${testId}-dismiss-button`}
-                />
-            ) : null}
-            {children}
-        </View>
-    );
-});
-
-// Map prop values to tokens
-const styleMap = {
-    backgroundColor: {
-        "base-subtle": semanticColor.core.background.base.subtle,
-        "base-default": semanticColor.core.background.base.default,
-    },
-    borderRadius: {
-        small: border.radius.radius_080,
-        medium: border.radius.radius_120,
-    },
-    padding: {
-        none: sizing.size_0,
-        small: sizing.size_160,
-        medium: sizing.size_240,
-    },
-    elevation: {
-        none: "none",
-        low: boxShadow.low,
-    },
-} as const;
-
-/**
- * Gets the styles for the card based on its props
- */
-const getComponentStyles = ({
-    background = "base-default",
-    borderRadius = "small",
-    paddingSize = "small",
-    elevation = "none",
-}: StyleProps) => {
-    const bgColor = background as keyof typeof styleMap.backgroundColor;
-    return StyleSheet.create({
-        root: {
-            backgroundColor: bgColor && styleMap.backgroundColor[bgColor],
-            // Common styles
-            borderColor: semanticColor.core.border.neutral.subtle,
-            borderStyle: "solid",
-            borderWidth: border.width.thin,
-            // Apply the system font to cards by default
-            fontFamily: font.family.sans,
-            minInlineSize: sizing.size_280,
-            position: "relative",
-            // Optional styles based on props
-            borderRadius: styleMap.borderRadius[borderRadius],
-            boxShadow: styleMap.elevation[elevation],
-            padding: styleMap.padding[paddingSize],
-        },
-    });
-};
-
-export default Card;

package/src/components/dismiss-button.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import xIcon from "@phosphor-icons/core/bold/x-bold.svg";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {focusStyles} from "@khanacademy/wonder-blocks-styles";
-import {sizing} from "@khanacademy/wonder-blocks-tokens";
-
-type Props = {
-    /** Optional click handler */
-    onClick?: (e?: React.SyntheticEvent) => unknown;
-    /** Screen reader label for close button */
-    "aria-label"?: string;
-    /** Optional aria-describedby attribute */
-    "aria-describedby"?: string;
-    /** Optional custom styles. */
-    style?: StyleType;
-    /** Test ID used for e2e testing, passed down from its parent card.*/
-    testId?: string;
-};
-
-export const DismissButton = (props: Props) => {
-    const {onClick, style, testId, "aria-describedby": ariaDescribedBy} = props;
-    return (
-        <IconButton
-            icon={xIcon}
-            aria-label={props["aria-label"] || "Close"}
-            aria-describedby={ariaDescribedBy}
-            onClick={onClick}
-            kind="tertiary"
-            actionType="neutral"
-            style={[componentStyles.root, style]}
-            testId={testId}
-        />
-    );
-};
-
-const componentStyles = StyleSheet.create({
-    root: {
-        position: "absolute",
-        // insetInlineEnd supports both RTL and LTR layouts
-        insetInlineEnd: sizing.size_080,
-        top: sizing.size_080,
-        // This is to allow the button to be tab-ordered before the component
-        // content but still be above the content.
-        zIndex: 1,
-
-        // NOTE: IconButton uses :focus-visible, which is not supported for
-        // programmatic focus. This is a workaround to make sure the focus
-        // outline is visible when this control is focused.
-        ":focus": focusStyles.focus[":focus-visible"],
-    },
-});

package/src/index.ts

@@ -1,3 +0,0 @@
-import Card from "./components/card";
-
-export {Card};

package/tsconfig-build.json

@@ -1,16 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon-button/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-        {"path": "../wonder-blocks-button/tsconfig-build.json"},
-        {"path": "../wonder-blocks-link/tsconfig-build.json"},
-    ]
-}