@khanacademy/wonder-blocks-card 0.0.0-PR2903-20251211204408 → 0.0.0-PR2904-20251211205241

package/CHANGELOG.md

@@ -1,14 +1,13 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2903-20251211204408
-
-### Minor Changes
-
-- 0a5444d: Expose aria-describedby attribute of the Dismiss button
+## 0.0.0-PR2904-20251211205241
 
 ### Patch Changes
 
-- @khanacademy/wonder-blocks-core@12.4.2
+- Updated dependencies [169a6bf]
+    - @khanacademy/wonder-blocks-core@0.0.0-PR2904-20251211205241
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2904-20251211205241
+    - @khanacademy/wonder-blocks-tokens@14.1.3
 
 ## 1.3.2
 

package/dist/components/card.d.ts

@@ -121,7 +121,6 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     onDismiss: (e?: React.SyntheticEvent) => void;
     labels: {
         dismissButtonAriaLabel: string;
-        dismissButtonAriaDescribedBy?: string;
     } & Record<string, any>;
 }, "ref"> | Omit<{
     /**
@@ -212,7 +211,6 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     onDismiss: (e?: React.SyntheticEvent) => void;
     labels: {
         dismissButtonAriaLabel: string;
-        dismissButtonAriaDescribedBy?: string;
     } & Record<string, any>;
 }, "ref"> | Omit<{
     /**

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

@@ -5,8 +5,6 @@ type Props = {
     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.*/

package/dist/es/index.js

@@ -7,8 +7,8 @@ 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,"aria-describedby":ariaDescribedBy}=props;return jsx(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:sizing.size_080,top:sizing.size_080,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
+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,"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","aria-describedby":labels?.dismissButtonAriaDescribedBy,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]}})};
+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

@@ -35,8 +35,8 @@ 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,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||"Close","aria-describedby":ariaDescribedBy,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 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,"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","aria-describedby":labels?.dismissButtonAriaDescribedBy,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]}})};
+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-PR2903-20251211204408",
+  "version": "0.0.0-PR2904-20251211205241",
   "publishConfig": {
     "access": "public"
   },
@@ -21,8 +21,8 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "12.4.2",
-    "@khanacademy/wonder-blocks-icon-button": "11.0.1",
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2904-20251211205241",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2904-20251211205241",
     "@khanacademy/wonder-blocks-tokens": "14.1.3"
   },
   "peerDependencies": {
@@ -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-PR2904-20251211205241"
   },
   "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,301 +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("Test IDs", () => {
-        it("should apply a custom testId for card", () => {
-            // Arrange
-            render(
-                <Card testId="my-card">
-                    <div>Content</div>
-                </Card>,
-            );
-
-            // Act
-            const card = screen.getByTestId("my-card");
-
-            // Assert
-            expect(card).toBeInTheDocument();
-        });
-
-        it("should append -dismiss-button to testId for dismiss button", () => {
-            // Arrange
-            render(
-                <Card
-                    testId="my-card"
-                    onDismiss={() => {}}
-                    labels={{dismissButtonAriaLabel: "Close"}}
-                >
-                    <div>Content</div>
-                </Card>,
-            );
-
-            // Act
-            const dismissButton = screen.getByTestId("my-card-dismiss-button");
-
-            // Assert
-            expect(dismissButton).toBeInTheDocument();
-        });
-    });
-
-    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 pass custom aria-describedby to dismiss button", () => {
-            // Arrange
-            render(
-                <Card
-                    onDismiss={() => {}}
-                    labels={{
-                        dismissButtonAriaLabel: "Custom Close",
-                        dismissButtonAriaDescribedBy:
-                            "dismiss-button-describedby",
-                    }}
-                >
-                    <div>Content</div>
-                </Card>,
-            );
-
-            // Act
-            const dismissButton = screen.getByRole("button", {
-                name: "Custom Close",
-            });
-
-            // Assert
-            expect(dismissButton).toHaveAttribute(
-                "aria-describedby",
-                "dismiss-button-describedby",
-            );
-        });
-
-        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 (preferred)", () => {
-            // 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 aria-labelledby for a custom tag", () => {
-            // Arrange
-            render(
-                <div>
-                    <h2 id="card-heading">My Card Title</h2>
-                    <Card tag="section" aria-labelledby="card-heading">
-                        <p>Description</p>
-                    </Card>
-                </div>,
-            );
-
-            // Act
-            const section = screen.getByRole("region", {
-                name: "My Card Title",
-            });
-
-            // Assert
-            expect(section).toBeInTheDocument();
-        });
-
-        it("should only apply aria-labelledby", () => {
-            // Arrange
-            render(
-                <div>
-                    <h2 id="card-heading">My Card Title</h2>
-                    <Card
-                        tag="section"
-                        aria-labelledby="card-heading"
-                        aria-label="Fallback label"
-                    >
-                        <p>Description</p>
-                    </Card>
-                </div>,
-            );
-
-            // Act
-            const section = screen.getByRole("region", {
-                name: "My Card Title",
-            });
-
-            // 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,207 +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>;
-
-<Card tag="section" aria-label="Card section">
-    Content
-</Card>;
-
-<Card tag="figure" aria-label="Card figure">
-    Content
-</Card>;
-
-<Card tag="section" aria-labelledby="someId">
-    <h2 id="someId">Card title</h2>
-</Card>;
-
-<Card tag="figure" aria-labelledby="someId2">
-    <h2 id="someId2">Card title</h2>
-</Card>;
-
-// @ts-expect-error - aria-labelledby cannot be used with labels.cardAriaLabel
-<Card
-    tag="figure"
-    aria-labelledby="someId2"
-    labels={{cardAriaLabel: "preferred label"}}
->
-    <h2 id="someId2">Card title</h2>
-</Card>;
-
-// @ts-expect-error - aria-labelledby cannot be used with labels.cardAriaLabel
-<Card
-    tag="section"
-    aria-labelledby="someId2"
-    labels={{cardAriaLabel: "preferred label"}}
->
-    <h2 id="someId2">Card title</h2>
-</Card>;
-
-<Card tag="figure" aria-labelledby="someId2" aria-label="fallback label">
-    <h2 id="someId2">Card title</h2>
-</Card>;
-
-<Card tag="section">Content</Card>;
-
-<Card tag="figure">Content</Card>;
-
-<Card tag="section" labels={{}}>
-    Content
-</Card>;
-
-<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
-    tag="section"
-    onDismiss={() => {}}
-    labels={{
-        cardAriaLabel: "Card section",
-        dismissButtonAriaLabel: "Close card",
-    }}
->
-    Content
-</Card>;
-
-/**
- * Card with all props
- */
-
-<Card
-    aria-busy={true}
-    aria-roledescription="A custom 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>()}
-    role="status"
->
-    <div>Complex content</div>
-</Card>;