@khanacademy/wonder-blocks-card 0.0.0-PR2904-20251211224227 → 0.0.0-PR2905-20251212160058

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2904-20251211224227
+## 0.0.0-PR2905-20251212160058
 
 ### Minor Changes
 
@@ -8,10 +8,9 @@
 
 ### Patch Changes
 
-- Updated dependencies [19e4c20]
-    - @khanacademy/wonder-blocks-core@0.0.0-PR2904-20251211224227
-    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2904-20251211224227
-    - @khanacademy/wonder-blocks-tokens@14.1.3
+- Updated dependencies [2a46e5e]
+- Updated dependencies [01198de]
+    - @khanacademy/wonder-blocks-icon-button@0.0.0-PR2905-20251212160058
 
 ## 1.3.2
 

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

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

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

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

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

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Card component for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.0.0-PR2904-20251211224227",
+  "version": "0.0.0-PR2905-20251212160058",
   "publishConfig": {
     "access": "public"
   },
@@ -21,8 +21,8 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2904-20251211224227",
-    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2904-20251211224227",
+    "@khanacademy/wonder-blocks-core": "12.4.2",
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2905-20251212160058",
     "@khanacademy/wonder-blocks-tokens": "14.1.3"
   },
   "peerDependencies": {
@@ -31,7 +31,7 @@
     "@phosphor-icons/core": "^2.0.2"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2904-20251211224227"
+    "@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,301 @@
+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

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