@khanacademy/wonder-blocks-card 0.0.0-PR2860-20251112235619 → 0.0.0-PR2876-20251209213809

package/CHANGELOG.md

@@ -1,16 +1,47 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2860-20251112235619
+## 0.0.0-PR2876-20251209213809
 
 ### Patch Changes
 
-- 4cca00d: Re-publish to publish with Trusted Publishing
+- Updated dependencies [ad430d7]
+    - @khanacademy/wonder-blocks-core@0.0.0-PR2876-20251209213809
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2876-20251209213809
+    - @khanacademy/wonder-blocks-tokens@14.1.3
+
+## 1.3.2
+
+### Patch Changes
+
+- Updated dependencies [70d6c08]
+    - @khanacademy/wonder-blocks-tokens@14.1.3
+    - @khanacademy/wonder-blocks-icon-button@11.0.1
+
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies [0fd41cc]
+- Updated dependencies [d36860e]
+    - @khanacademy/wonder-blocks-icon-button@11.0.0
+
+## 1.3.0
+
+### Minor Changes
+
+- d36c492: Updates labeling requirements and adds testId to dismiss button
+
+## 1.2.5
+
+### Patch Changes
+
+- 8a36c70: Re-publish to publish with Trusted Publishing
 - 3e0d137: Re-publishing via Trusted Publishing
-- Updated dependencies [4cca00d]
+- Updated dependencies [8a36c70]
 - Updated dependencies [3e0d137]
-    - @khanacademy/wonder-blocks-core@0.0.0-PR2860-20251112235619
-    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2860-20251112235619
-    - @khanacademy/wonder-blocks-tokens@0.0.0-PR2860-20251112235619
+    - @khanacademy/wonder-blocks-core@12.4.2
+    - @khanacademy/wonder-blocks-icon-button@10.5.7
+    - @khanacademy/wonder-blocks-tokens@14.1.2
 
 ## 1.2.4
 

package/dist/components/card.d.ts

@@ -1,15 +1,6 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
-/**
- * Provide a specific HTML tag that overrides the default (`div`).
- *
- * Notes:
- * - When `tag="section"` or `"figure"`, `cardAriaLabel` is required for accessibility.
- * - `button` and `a` tags are not allowed - use Wonder Blocks Button and Link components as children instead.
- * Valid HTML tags for the Card component.
- * Excludes button and anchor tags which should use Wonder Blocks Button and Link components instead.
- */
-type ValidCardTags = Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
+import type { AriaProps } from "@khanacademy/wonder-blocks-core";
 type StyleProps = {
     /**
      * The background style of the card, as a string identifier that matches a semanticColor token.
@@ -77,7 +68,11 @@ type StyleProps = {
  * </Card>
  * ```
  *
- * When the `onDismiss` prop is provided, a dismiss button will be rendered. In this case, the `labels.dismissButtonAriaLabel` prop is required to provide an accessible label for the dismiss button.
+ * ### 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.
  */
@@ -104,13 +99,24 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     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 & {
-    tag: "section" | "figure";
-    labels: {
-        cardAriaLabel: string;
-    } & Record<string, any>;
+    tag?: Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
+} & {
+    /** Translatable label string for aria-label */
+    labels?: {
+        cardAriaLabel?: string;
+        dismissButtonAriaLabel?: string;
+    };
+    "aria-labelledby"?: never;
+} & {
+    "aria-busy"?: AriaProps["aria-busy"];
+    "aria-roledescription"?: AriaProps["aria-roledescription"];
+    role?: AriaProps["role"];
 } & {
     onDismiss: (e?: React.SyntheticEvent) => void;
     labels: {
@@ -139,13 +145,24 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     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 & {
-    tag: "section" | "figure";
-    labels: {
-        cardAriaLabel: string;
-    } & Record<string, any>;
+    tag?: Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
+} & {
+    /** Translatable label string for aria-label */
+    labels?: {
+        cardAriaLabel?: string;
+        dismissButtonAriaLabel?: string;
+    };
+    "aria-labelledby"?: never;
+} & {
+    "aria-busy"?: AriaProps["aria-busy"];
+    "aria-roledescription"?: AriaProps["aria-roledescription"];
+    role?: AriaProps["role"];
 } & {
     onDismiss?: never;
     labels?: Record<string, any>;
@@ -172,11 +189,24 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     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 & {
-    tag?: Exclude<ValidCardTags, "section" | "figure">;
-    labels?: Record<string, any>;
+    tag?: Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
+} & {
+    /** ID reference for aria-labelledby */
+    "aria-labelledby"?: string;
+    labels?: {
+        cardAriaLabel?: never;
+        dismissButtonAriaLabel?: string;
+    };
+} & {
+    "aria-busy"?: AriaProps["aria-busy"];
+    "aria-roledescription"?: AriaProps["aria-roledescription"];
+    role?: AriaProps["role"];
 } & {
     onDismiss: (e?: React.SyntheticEvent) => void;
     labels: {
@@ -205,11 +235,24 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     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 & {
-    tag?: Exclude<ValidCardTags, "section" | "figure">;
-    labels?: Record<string, any>;
+    tag?: Exclude<keyof JSX.IntrinsicElements, "button" | "a">;
+} & {
+    /** ID reference for aria-labelledby */
+    "aria-labelledby"?: string;
+    labels?: {
+        cardAriaLabel?: never;
+        dismissButtonAriaLabel?: string;
+    };
+} & {
+    "aria-busy"?: AriaProps["aria-busy"];
+    "aria-roledescription"?: AriaProps["aria-roledescription"];
+    role?: AriaProps["role"];
 } & {
     onDismiss?: never;
     labels?: Record<string, any>;

package/dist/components/dismiss-button.d.ts

@@ -7,17 +7,7 @@ type Props = {
     "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`
-     */
+    /** Test ID used for e2e testing, passed down from its parent card.*/
     testId?: string;
 };
 export declare const DismissButton: (props: Props) => React.JSX.Element;

package/dist/es/index.js

@@ -9,6 +9,6 @@ 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,background="base-default",borderRadius="small",paddingSize="small",elevation="none",children,onDismiss,inert}=props;const isBackgroundToken=background==="base-default"||background==="base-subtle";const componentStyles=getComponentStyles({background:isBackgroundToken?background:null,borderRadius,paddingSize,elevation});return jsxs(View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,!isBackgroundToken&&{background:`url(${background})`,backgroundSize:"cover"},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 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}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:border.width.thin,fontFamily:font.family.sans,minInlineSize:sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
+const Card=React.forwardRef(function Card(props,ref){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 jsxs(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,children:[onDismiss?jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e),testId:testId&&`${testId}-dismiss-button`}):null,children]})});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}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:border.width.thin,fontFamily:font.family.sans,minInlineSize:sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
 
 export { Card };

package/dist/index.js

@@ -37,6 +37,6 @@ 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,background="base-default",borderRadius="small",paddingSize="small",elevation="none",children,onDismiss,inert}=props;const isBackgroundToken=background==="base-default"||background==="base-subtle";const componentStyles=getComponentStyles({background:isBackgroundToken?background:null,borderRadius,paddingSize,elevation});return jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-label":labels?.cardAriaLabel,style:[componentStyles.root,!isBackgroundToken&&{background:`url(${background})`,backgroundSize:"cover"},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 styleMap={backgroundColor:{"base-subtle":wonderBlocksTokens.semanticColor.core.background.base.subtle,"base-default":wonderBlocksTokens.semanticColor.core.background.base.default},borderRadius:{small:wonderBlocksTokens.border.radius.radius_080,medium:wonderBlocksTokens.border.radius.radius_120},padding:{none:wonderBlocksTokens.sizing.size_0,small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240},elevation:{none:"none",low:wonderBlocksTokens.boxShadow.low}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return aphrodite.StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,fontFamily:wonderBlocksTokens.font.family.sans,minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
+const Card=React__namespace.forwardRef(function Card(props,ref){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 jsxRuntime.jsxs(wonderBlocksCore.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,children:[onDismiss?jsxRuntime.jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close",onClick:e=>onDismiss?.(e),testId:testId&&`${testId}-dismiss-button`}):null,children]})});const styleMap={backgroundColor:{"base-subtle":wonderBlocksTokens.semanticColor.core.background.base.subtle,"base-default":wonderBlocksTokens.semanticColor.core.background.base.default},borderRadius:{small:wonderBlocksTokens.border.radius.radius_080,medium:wonderBlocksTokens.border.radius.radius_120},padding:{none:wonderBlocksTokens.sizing.size_0,small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240},elevation:{none:"none",low:wonderBlocksTokens.boxShadow.low}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return aphrodite.StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,fontFamily:wonderBlocksTokens.font.family.sans,minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
 
 exports.Card = Card;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Card component for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.0.0-PR2860-20251112235619",
+  "version": "0.0.0-PR2876-20251209213809",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,9 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2860-20251112235619",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2860-20251112235619",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2860-20251112235619"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2876-20251209213809",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2876-20251209213809",
+    "@khanacademy/wonder-blocks-tokens": "14.1.3"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,7 +31,7 @@
     "@phosphor-icons/core": "^2.0.2"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "3.2.0"
+    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2876-20251209213809"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/dist/__tests__/components/card.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/components/card.typestest.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/components/dismiss-button.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,194 +0,0 @@
-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={() => {}}
-                    labels={{dismissButtonAriaLabel: "Close"}}
-                >
-                    <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 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/card.typestest.tsx

@@ -1,174 +0,0 @@
-import * as React from "react";
-
-// Import Button and Link for proper usage examples
-import Button from "@khanacademy/wonder-blocks-button";
-import Link from "@khanacademy/wonder-blocks-link";
-import Card from "../../components/card";
-
-/**
- * Basic Card usage
- */
-
-<Card>Hello, world!</Card>;
-
-<Card>
-    <div>Some content</div>
-</Card>;
-
-/**
- * Card with Button and Link components (correct usage)
- */
-
-<Card>
-    <Button onClick={() => {}}>Click me</Button>
-</Card>;
-
-<Card>
-    <Link href="/foo">Click me</Link>
-</Card>;
-
-/**
- * Card with all style props
- */
-
-<Card
-    background="base-default"
-    borderRadius="small"
-    paddingSize="small"
-    elevation="none"
->
-    Content
-</Card>;
-
-<Card
-    background="base-subtle"
-    borderRadius="medium"
-    paddingSize="medium"
-    elevation="low"
->
-    Content
-</Card>;
-
-<Card paddingSize="none">Content</Card>;
-
-// @ts-expect-error - invalid background value
-<Card background="invalid-background">Content</Card>;
-
-// @ts-expect-error - invalid borderRadius value
-<Card borderRadius="invalid-radius">Content</Card>;
-
-// @ts-expect-error - invalid paddingSize value
-<Card paddingSize="invalid-padding">Content</Card>;
-
-// @ts-expect-error - invalid elevation value
-<Card elevation="invalid-elevation">Content</Card>;
-
-/**
- * Card with dismiss functionality
- */
-
-<Card onDismiss={() => {}} labels={{dismissButtonAriaLabel: "Close card"}}>
-    Content
-</Card>;
-
-// @ts-expect-error - onDismiss requires dismissButtonAriaLabel
-<Card onDismiss={() => {}}>Content</Card>;
-
-// @ts-expect-error - onDismiss requires dismissButtonAriaLabel
-<Card onDismiss={() => {}} labels={{}}>
-    Content
-</Card>;
-
-// @ts-expect-error - onClick is not allowed on Card wrapper
-<Card onClick={() => {}}>Content</Card>;
-
-/**
- * Card with different HTML tags
- */
-
-<Card tag="div">Content</Card>;
-
-// @ts-expect-error - button tag not allowed, use Wonder Blocks Button component instead
-<Card tag="button">Content</Card>;
-
-// @ts-expect-error - anchor tag not allowed, use Wonder Blocks Link component instead
-<Card tag="a">Content</Card>;
-
-<Card tag="section" labels={{cardAriaLabel: "Card section"}}>
-    Content
-</Card>;
-
-<Card tag="figure" labels={{cardAriaLabel: "Card figure"}}>
-    Content
-</Card>;
-
-// @ts-expect-error - section tag requires cardAriaLabel
-<Card tag="section">Content</Card>;
-
-// @ts-expect-error - figure tag requires cardAriaLabel
-<Card tag="figure">Content</Card>;
-
-// @ts-expect-error - section tag requires cardAriaLabel in labels
-<Card tag="section" labels={{}}>
-    Content
-</Card>;
-
-// @ts-expect-error - figure tag requires cardAriaLabel in labels
-<Card tag="figure" labels={{}}>
-    Content
-</Card>;
-
-/**
- * Card with additional props
- */
-
-<Card testId="my-card">Content</Card>;
-
-<Card inert>Content</Card>;
-
-<Card ref={React.createRef<HTMLDivElement>()}>Content</Card>;
-
-<Card styles={{root: {width: 200}, dismissButton: {position: "absolute"}}}>
-    Content
-</Card>;
-
-/**
- * Card with dismiss and section tag (complex case)
- */
-
-<Card
-    tag="section"
-    onDismiss={() => {}}
-    labels={{
-        cardAriaLabel: "Card section",
-        dismissButtonAriaLabel: "Close card",
-    }}
->
-    Content
-</Card>;
-
-/**
- * Card with all props
- */
-
-<Card
-    background="base-subtle"
-    borderRadius="medium"
-    paddingSize="medium"
-    elevation="low"
-    tag="figure"
-    onDismiss={() => {}}
-    labels={{
-        cardAriaLabel: "Card figure",
-        dismissButtonAriaLabel: "Close card",
-    }}
-    testId="complex-card"
-    inert
-    styles={{
-        root: {width: 300},
-        dismissButton: {top: 10, right: 10},
-    }}
-    ref={React.createRef<HTMLElement>()}
->
-    <div>Complex content</div>
-</Card>;