@khanacademy/wonder-blocks-card 0.0.0-PR2799-20250925192443

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @khanacademy/wonder-blocks-card
+
+## 0.0.0-PR2799-20250925192443
+
+### Minor Changes
+
+- 7506aef: Add new Card component

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { StyleSheet } from 'aphrodite';
+import { View } from '@khanacademy/wonder-blocks-core';
+import { sizing, semanticColor, border, boxShadow } from '@khanacademy/wonder-blocks-tokens';
+import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
+
+const DismissButton=props=>{const{onClick,style,testId}=props;return jsx(IconButton,{icon:xIcon,"aria-label":props["aria-label"]||"Close",onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=StyleSheet.create({root:{position:"absolute",insetInlineEnd:sizing.size_080,top:sizing.size_080,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
+
+const Card=React.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxs(View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?semanticColor.core.background.base[backgroundColor]:undefined;return StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&border.radius[borderRadius],borderWidth:border.width.thin,boxShadow:boxShadow.low,padding:padding&&sizing[padding],maxWidth:"295px",position:"relative",width:"100%"}})};
+
+export { Card };

package/dist/index.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var xIcon = require('@phosphor-icons/core/bold/x-bold.svg');
+var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+
+const DismissButton=props=>{const{onClick,style,testId}=props;return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||"Close",onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=aphrodite.StyleSheet.create({root:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_080,top:wonderBlocksTokens.sizing.size_080,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
+
+const Card=React__namespace.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,backgroundColor="default",borderRadius="radius_080",padding="size_160",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColor,borderRadius,padding});return jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,styles?.root],ref:ref,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsxRuntime.jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e)}):null,children]})});const getComponentStyles=({backgroundColor,borderRadius,padding})=>{const backgroundColorStyle=backgroundColor&&backgroundColor==="subtle"||backgroundColor==="default"?wonderBlocksTokens.semanticColor.core.background.base[backgroundColor]:undefined;return aphrodite.StyleSheet.create({root:{backgroundColor:backgroundColorStyle,borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&wonderBlocksTokens.border.radius[borderRadius],borderWidth:wonderBlocksTokens.border.width.thin,boxShadow:wonderBlocksTokens.boxShadow.low,padding:padding&&wonderBlocksTokens.sizing[padding],maxWidth:"295px",position:"relative",width:"100%"}})};
+
+exports.Card = Card;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@khanacademy/wonder-blocks-card",
+  "version": "0.0.0-PR2799-20250925192443",
+  "design": "v1",
+  "description": "Card component for Wonder Blocks.",
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "source": "src/index.js",
+  "types": "dist/index.d.ts",
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@khanacademy/wonder-blocks-core": "12.4.0",
+    "@khanacademy/wonder-blocks-icon-button": "10.5.2",
+    "@khanacademy/wonder-blocks-tokens": "14.0.0"
+  },
+  "peerDependencies": {
+    "aphrodite": "^1.2.5",
+    "react": "18.2.0",
+    "@phosphor-icons/core": "^2.0.2"
+  },
+  "devDependencies": {
+    "@khanacademy/wb-dev-build-settings": "3.2.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/__tests__/components/card.test.tsx

@@ -0,0 +1,206 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+import {userEvent} from "@testing-library/user-event";
+
+import Card from "../../components/card";
+
+describe("Card", () => {
+    describe("Basic rendering", () => {
+        it("should render children correctly", () => {
+            // Arrange
+            render(
+                <Card>
+                    <div data-testid="child-content">Card Content</div>
+                </Card>,
+            );
+
+            // Act
+            const childContent = screen.getByTestId("child-content");
+
+            // Assert
+            expect(childContent).toBeInTheDocument();
+        });
+
+        it("should not render dismiss button by default", () => {
+            // Arrange
+            render(
+                <Card>
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.queryByRole("button");
+
+            // Assert
+            expect(dismissButton).not.toBeInTheDocument();
+        });
+    });
+
+    describe("Dismiss button functionality", () => {
+        it("should render dismiss button when onDismiss is present", () => {
+            // Arrange
+            render(
+                <Card onDismiss={() => {}}>
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.getByRole("button");
+
+            // Assert
+            expect(dismissButton).toBeInTheDocument();
+        });
+
+        it("should not render dismiss button there is no onDismiss prop", () => {
+            // Arrange
+            render(
+                <Card>
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.queryByRole("button");
+
+            // Assert
+            expect(dismissButton).not.toBeInTheDocument();
+        });
+
+        it("should call onDismiss when dismiss button is clicked", async () => {
+            // Arrange
+            const mockOnDismiss = jest.fn();
+            render(
+                <Card
+                    labels={{dismissButtonAriaLabel: "Close it!"}}
+                    onDismiss={mockOnDismiss}
+                >
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.getByRole("button", {
+                name: "Close it!",
+            });
+            await userEvent.click(dismissButton);
+
+            // Assert
+            expect(mockOnDismiss).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe("Accessibility", () => {
+        it("should use default aria-label on dismiss button when dismissButtonAriaLabel is not provided", () => {
+            // Arrange
+            render(
+                <Card onDismiss={() => {}}>
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.getByRole("button", {name: "Close"});
+
+            // Assert
+            expect(dismissButton).toBeInTheDocument();
+        });
+
+        it("should pass custom aria-label to dismiss button", () => {
+            // Arrange
+            render(
+                <Card
+                    onDismiss={() => {}}
+                    labels={{dismissButtonAriaLabel: "Custom Close"}}
+                >
+                    <div>Content</div>
+                </Card>,
+            );
+
+            // Act
+            const dismissButton = screen.getByRole("button", {
+                name: "Custom Close",
+            });
+
+            // Assert
+            expect(dismissButton).toBeInTheDocument();
+        });
+
+        it("should render with a custom tag", () => {
+            // Arrange
+            render(
+                <Card tag="section" labels={{cardAriaLabel: "Card Section"}}>
+                    <h2>Heading</h2>
+                    <p>Description</p>
+                </Card>,
+            );
+
+            // Act
+            const section = screen.getByRole("region");
+
+            // Assert
+            expect(section).toBeInTheDocument();
+        });
+
+        it("should apply labels.cardAriaLabel for a custom tag", () => {
+            // Arrange
+            render(
+                <Card
+                    tag="section"
+                    labels={{cardAriaLabel: "Custom section label"}}
+                >
+                    <h2>Heading</h2>
+                    <p>Description</p>
+                </Card>,
+            );
+
+            // Act
+            const section = screen.getByRole("region", {
+                name: "Custom section label",
+            });
+
+            // Assert
+            expect(section).toBeInTheDocument();
+        });
+
+        it("should apply the inert attribute", () => {
+            // Arrange
+            render(
+                <Card inert testId="card">
+                    <h2>Heading</h2>
+                    <p>Description</p>
+                    <button>Button</button>
+                </Card>,
+            );
+
+            // Act
+            const section = screen.getByTestId("card");
+
+            // Assert
+            expect(section).toHaveAttribute("inert");
+        });
+    });
+
+    describe("Complex content scenarios", () => {
+        it("should work with fragment children", () => {
+            // Arrange
+            render(
+                <Card>
+                    <>
+                        <span data-testid="fragment-child-1">First</span>
+                        <span data-testid="fragment-child-2">Second</span>
+                    </>
+                </Card>,
+            );
+
+            // Act
+            const firstChild = screen.getByTestId("fragment-child-1");
+            const secondChild = screen.getByTestId("fragment-child-2");
+
+            // Assert
+            expect(firstChild).toBeInTheDocument();
+            expect(secondChild).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,145 @@
+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 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

@@ -0,0 +1,181 @@
+import * as React from "react";
+
+import {StyleSheet} from "aphrodite";
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
+
+import {
+    boxShadow,
+    border,
+    semanticColor,
+    sizing,
+} from "@khanacademy/wonder-blocks-tokens";
+
+import {DismissButton} from "./dismiss-button";
+
+type AllowedStyleProps = {
+    /**
+     * The background color of the card, as a string identifier that matches a semanticColor token.
+     * This can be one of:
+     * - `"subtle"`, matching `semanticColor.core.background.base.subtle`: a light gray background, useful for cards that need to stand out from the page background.
+     * - `"default"`, matching `semanticColor.core.background.base.default`: a white background, useful for cards that are placed on a light gray page background.
+     *
+     * Default: `"default"`
+     */
+    backgroundColor?: "subtle" | "default";
+    /**
+     * 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`: a moderate border radius, useful for cards that need to have a slightly rounded appearance.
+     * - `"radius_120"`, matching `border.radius.radius_120`: a more pronounced border radius, useful for cards that need to have a more rounded appearance.
+     *
+     * Default: `"radius_080"`
+     */
+    borderRadius?: "radius_080" | "radius_120";
+    /**
+     * The padding inside the card, as a string identifier that matches a sizing token.
+     * This can be one of:
+     * - `"size_0"`, matching `sizing.size_0`: no padding, useful for cards that need to have content flush with the edges.
+     * - `"size_160"`, matching `sizing.size_160`: moderate padding, useful for cards that need to have some space between the content and the edges.
+     * - `"size_240"`, matching `sizing.size_240`: more padding, useful for cards that need to have more space between the content and the edges.
+     *
+     * Default: `"size_160"`
+     */
+    padding?: "size_0" | "size_160" | "size_240";
+};
+type Props = {
+    /**
+     * 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<any>;
+    /**
+     * The HTML tag to use for the card container. By default, this is a `<div>`, but
+     * if the card is being used as a landmark region, you may want to set this to
+     * `<section>` and provide an appropriate `aria-label` via the `labels` prop.
+     */
+    tag?: keyof JSX.IntrinsicElements;
+    /**
+     * The content for the card.
+     */
+    children: React.ReactNode;
+    /**
+     * A set of localizable labels for this component, including a dismiss button
+     * and the card itself, if marked as an HTML region.
+     */
+    labels?: {
+        dismissButtonAriaLabel?: string;
+        cardAriaLabel?: string;
+    };
+    /**
+     * A callback function to handle dismissing the card. When this prop is present,
+     * a dismiss button with an X icon will be rendered.
+     */
+    onDismiss?: (e?: React.SyntheticEvent) => void;
+    /**
+     * 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.
+     */
+    testId?: string;
+} & AllowedStyleProps;
+
+/**
+ * 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.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Card} from "@khanacademy/wonder-blocks-card";
+ *
+ * <Card>
+ *   <Heading>This is a basic card.</Heading>
+ * </Card>
+ * ```
+ */
+const Card = React.forwardRef(function Card(
+    props: Props,
+    ref: React.ForwardedRef<any>,
+) {
+    const {
+        styles,
+        labels,
+        tag,
+        testId,
+        backgroundColor = "default",
+        borderRadius = "radius_080",
+        padding = "size_160", // TODO: figure out conversion to px
+        children,
+        onDismiss,
+        inert,
+    } = props;
+
+    const componentStyles = getComponentStyles({
+        backgroundColor,
+        borderRadius,
+        padding,
+    });
+    return (
+        <View
+            aria-label={labels?.cardAriaLabel}
+            style={[componentStyles.root, styles?.root]}
+            ref={ref}
+            tag={tag}
+            testId={testId}
+            {...{inert: inert ? "" : undefined}}
+        >
+            {onDismiss ? (
+                <DismissButton
+                    aria-label={labels?.dismissButtonAriaLabel || "Close"}
+                    onClick={(e) => onDismiss?.(e)}
+                />
+            ) : null}
+            {children}
+        </View>
+    );
+});
+
+const getComponentStyles = ({
+    backgroundColor,
+    borderRadius,
+    padding,
+}: AllowedStyleProps) => {
+    const backgroundColorStyle =
+        (backgroundColor && backgroundColor === "subtle") ||
+        backgroundColor === "default"
+            ? semanticColor.core.background.base[backgroundColor]
+            : undefined;
+    return StyleSheet.create({
+        root: {
+            backgroundColor: backgroundColorStyle,
+            borderColor: semanticColor.core.border.neutral.subtle,
+            borderStyle: "solid",
+            borderRadius: borderRadius && border.radius[borderRadius],
+            borderWidth: border.width.thin,
+            boxShadow: boxShadow.low,
+            padding: padding && sizing[padding], // TODO: figure out conversion to px
+            maxWidth: "295px", // TODO: figure out max/min widths
+            position: "relative",
+            width: "100%",
+        },
+    });
+};
+
+export default Card;

package/src/components/dismiss-button.tsx

@@ -0,0 +1,61 @@
+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 custom styles. */
+    style?: StyleType;
+    /**
+     * Test ID used for e2e testing.
+     *
+     * In this case, this component is internal, so `testId` is composed with
+     * the `testId` passed down from the Dialog variant + a suffix to scope it
+     * to this component.
+     *
+     * @example
+     * For testId="some-random-id"
+     * The result will be: `some-random-id-modal-panel`
+     */
+    testId?: string;
+};
+
+// TODO[WB-2090]: Update to shared CloseButton component
+export const DismissButton = (props: Props) => {
+    const {onClick, style, testId} = props;
+    return (
+        <IconButton
+            icon={xIcon}
+            aria-label={props["aria-label"] || "Close"}
+            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

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

package/tsconfig-build.json

@@ -0,0 +1,14 @@
+{
+    "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"},
+    ]
+}