@khanacademy/wonder-blocks-card 0.0.0-PR2816-20251007223425 → 0.0.0-PR2817-20251007222151

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2816-20251007223425
+## 0.0.0-PR2817-20251007222151
 
-### Minor Changes
+### Patch Changes
 
-- be020e9: Adds support for image backgrounds via the background prop
+- @khanacademy/wonder-blocks-icon-button@0.0.0-PR2817-20251007222151
 
 ## 1.1.0
 

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 componentStyles=getComponentStyles({background,borderRadius,paddingSize,elevation});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 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 dynamicStyles={};const getStyleKey=({background,borderRadius,paddingSize,elevation})=>{return `${background||"default"}-${borderRadius||"small"}-${paddingSize||"small"}-${elevation||"none"}`};const getComponentStyles=props=>{const styleKey=getStyleKey(props);if(dynamicStyles[styleKey]){return dynamicStyles[styleKey]}const{background,borderRadius,paddingSize,elevation}=props;const isBackgroundColorStyle=background==="base-subtle"||background==="base-default";const newStyles=StyleSheet.create({root:{...isBackgroundColorStyle&&{backgroundColor:styleMap.backgroundColor[background]},...!isBackgroundColorStyle&&background&&{background:`url(${background})`,backgroundSize:"cover"},borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:border.width.thin,minInlineSize:sizing.size_280,position:"relative",borderRadius:borderRadius&&styleMap.borderRadius[borderRadius],boxShadow:elevation&&styleMap.elevation[elevation],padding:paddingSize&&styleMap.padding[paddingSize]}});dynamicStyles[styleKey]=newStyles;return newStyles};
+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 componentStyles=getComponentStyles({background,borderRadius,paddingSize,elevation});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=({background,borderRadius,paddingSize,elevation})=>{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}};return StyleSheet.create({root:{backgroundColor:background&&styleMap.backgroundColor[background],borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&styleMap.borderRadius[borderRadius],borderWidth:border.width.thin,boxShadow:elevation&&styleMap.elevation[elevation],padding:paddingSize&&styleMap.padding[paddingSize],minInlineSize:sizing.size_280,position:"relative"}})};
 
 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 componentStyles=getComponentStyles({background,borderRadius,paddingSize,elevation});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 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 dynamicStyles={};const getStyleKey=({background,borderRadius,paddingSize,elevation})=>{return `${background||"default"}-${borderRadius||"small"}-${paddingSize||"small"}-${elevation||"none"}`};const getComponentStyles=props=>{const styleKey=getStyleKey(props);if(dynamicStyles[styleKey]){return dynamicStyles[styleKey]}const{background,borderRadius,paddingSize,elevation}=props;const isBackgroundColorStyle=background==="base-subtle"||background==="base-default";const newStyles=aphrodite.StyleSheet.create({root:{...isBackgroundColorStyle&&{backgroundColor:styleMap.backgroundColor[background]},...!isBackgroundColorStyle&&background&&{background:`url(${background})`,backgroundSize:"cover"},borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative",borderRadius:borderRadius&&styleMap.borderRadius[borderRadius],boxShadow:elevation&&styleMap.elevation[elevation],padding:paddingSize&&styleMap.padding[paddingSize]}});dynamicStyles[styleKey]=newStyles;return newStyles};
+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 componentStyles=getComponentStyles({background,borderRadius,paddingSize,elevation});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=({background,borderRadius,paddingSize,elevation})=>{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}};return aphrodite.StyleSheet.create({root:{backgroundColor:background&&styleMap.backgroundColor[background],borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadius&&styleMap.borderRadius[borderRadius],borderWidth:wonderBlocksTokens.border.width.thin,boxShadow:elevation&&styleMap.elevation[elevation],padding:paddingSize&&styleMap.padding[paddingSize],minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative"}})};
 
 exports.Card = Card;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-card",
-  "version": "0.0.0-PR2816-20251007223425",
+  "version": "0.0.0-PR2817-20251007222151",
   "design": "v1",
   "description": "Card component for Wonder Blocks.",
   "main": "dist/index.js",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-tokens": "14.0.0",
-    "@khanacademy/wonder-blocks-icon-button": "10.5.2"
+    "@khanacademy/wonder-blocks-icon-button": "0.0.0-PR2817-20251007222151",
+    "@khanacademy/wonder-blocks-tokens": "14.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

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

@@ -1,12 +1,6 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
-import {
-    boxShadow,
-    border,
-    semanticColor,
-    sizing,
-} from "@khanacademy/wonder-blocks-tokens";
 
 import Card from "../../components/card";
 
@@ -197,180 +191,4 @@ describe("Card", () => {
             expect(secondChild).toBeInTheDocument();
         });
     });
-
-    describe("Style application", () => {
-        it("should apply default styles", () => {
-            // Arrange
-            const testId = "test-card";
-
-            // Act
-            render(<Card testId={testId}>Content</Card>);
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                position: "relative",
-                borderStyle: "solid",
-            });
-        });
-
-        it("should apply base-subtle background", () => {
-            // Arrange
-            const testId = "test-card";
-
-            // Act
-            render(
-                <Card testId={testId} background="base-subtle">
-                    Content
-                </Card>,
-            );
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                backgroundColor: semanticColor.core.background.base.subtle,
-            });
-        });
-
-        it("should apply medium border radius", () => {
-            // Arrange
-            const testId = "test-card";
-
-            // Act
-            render(
-                <Card testId={testId} borderRadius="medium">
-                    Content
-                </Card>,
-            );
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                borderRadius: border.radius.radius_120,
-            });
-        });
-
-        it("should apply medium padding", () => {
-            // Arrange
-            const testId = "test-card";
-
-            // Act
-            render(
-                <Card testId={testId} paddingSize="medium">
-                    Content
-                </Card>,
-            );
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                padding: sizing.size_240,
-            });
-        });
-
-        it("should apply low elevation", () => {
-            // Arrange
-            const testId = "test-card";
-
-            // Act
-            render(
-                <Card testId={testId} elevation="low">
-                    Content
-                </Card>,
-            );
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                boxShadow: boxShadow.low,
-            });
-        });
-
-        it("should apply image background", () => {
-            // Arrange
-            const testId = "test-card";
-            const testImage = Image;
-
-            // Act
-            render(
-                <Card testId={testId} background={testImage}>
-                    Content
-                </Card>,
-            );
-            const card = screen.getByTestId(testId);
-
-            // Assert
-            expect(card).toHaveStyle({
-                backgroundSize: "cover",
-            });
-        });
-    });
-
-    describe("Style application", () => {
-        it("should apply custom margin style", () => {
-            // Arrange
-            const testId = "test-card";
-            const customStyle = {marginTop: "10px"};
-
-            // Act
-            render(
-                <Card testId={testId} styles={{root: customStyle}}>
-                    Content
-                </Card>,
-            );
-
-            // Assert
-            expect(screen.getByTestId(testId)).toHaveStyle(customStyle);
-        });
-
-        it("should apply custom padding style", () => {
-            // Arrange
-            const testId = "test-card";
-            const customStyle = {padding: "20px"};
-
-            // Act
-            render(
-                <Card testId={testId} styles={{root: customStyle}}>
-                    Content
-                </Card>,
-            );
-
-            // Assert
-            expect(screen.getByTestId(testId)).toHaveStyle(customStyle);
-        });
-
-        it("should apply custom background color", () => {
-            // Arrange
-            const testId = "test-card";
-            const customStyle = {backgroundColor: "rgb(255, 0, 0)"};
-
-            // Act
-            render(
-                <Card testId={testId} styles={{root: customStyle}}>
-                    Content
-                </Card>,
-            );
-
-            // Assert
-            expect(screen.getByTestId(testId)).toHaveStyle(customStyle);
-        });
-
-        it("should maintain default styles with custom styles", () => {
-            // Arrange
-            const testId = "test-card";
-            const customStyle = {marginTop: "10px"};
-
-            // Act
-            render(
-                <Card testId={testId} styles={{root: customStyle}}>
-                    Content
-                </Card>,
-            );
-
-            // Assert
-            const element = screen.getByTestId(testId);
-            expect(element).toHaveStyle(customStyle);
-            expect(element).toHaveStyle({position: "relative"}); // A default style
-        });
-    });
 });

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

@@ -64,9 +64,6 @@ import Card from "../../components/card";
     Content
 </Card>;
 
-// @ts-expect-error - onClick is not allowed on Card wrapper
-<Card onClick={() => {}}>Content</Card>;
-
 /**
  * Card with different HTML tags
  */

package/src/components/card.tsx

@@ -79,13 +79,10 @@ type StyleProps = {
      * This can be one of:
      * - `"base-subtle"` (color), `semanticColor.core.background.base.subtle`: a light gray background.
      * - `"base-default"` (color), `semanticColor.core.background.base.default`: a white background.
-     * - `Image` (image), a URL string for a background image. Can be an imported image file or a URL string.
-     *
-     * For additional background styling such as repeat or size, use the `styles.root` prop to pass in custom styles.
      *
      * Default: `"base-default"`
      */
-    background?: "base-subtle" | "base-default" | typeof Image;
+    background?: "base-subtle" | "base-default";
     /**
      * The border radius of the card, as a string identifier that matches a border.radius token.
      * This can be one of:
@@ -144,7 +141,7 @@ type Props = BaseCardProps & TagProps & DismissProps;
  *
  * 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.
  *
- * See additional Accessibility docs.
+ * See additional [Accessibility docs](./?path=/docs/packages-card-card-accessibility--docs).
  */
 
 const Card = React.forwardRef(function Card(
@@ -191,87 +188,46 @@ const Card = React.forwardRef(function Card(
     );
 });
 
-// Map prop values to tokens
-const styleMap = {
-    backgroundColor: {
-        "base-subtle": semanticColor.core.background.base.subtle,
-        "base-default": semanticColor.core.background.base.default,
-    },
-    borderRadius: {
-        small: border.radius.radius_080,
-        medium: border.radius.radius_120,
-    },
-    padding: {
-        none: sizing.size_0,
-        small: sizing.size_160,
-        medium: sizing.size_240,
-    },
-    elevation: {
-        none: "none",
-        low: boxShadow.low,
-    },
-} as const;
-
-// Cache for dynamically generated styles
-const dynamicStyles: Record<string, any> = {};
-
-/**
- * Generates a unique key for caching styles based on prop combinations
- */
-const getStyleKey = ({
+const getComponentStyles = ({
     background,
     borderRadius,
     paddingSize,
     elevation,
-}: StyleProps): string => {
-    return `${background || "default"}-${borderRadius || "small"}-${
-        paddingSize || "small"
-    }-${elevation || "none"}`;
-};
-
-/**
- * Generates the component styles with caching for better performance
- */
-const getComponentStyles = (props: StyleProps) => {
-    const styleKey = getStyleKey(props);
-    // Return cached styles if they exist
-    if (dynamicStyles[styleKey]) {
-        return dynamicStyles[styleKey];
-    }
-
-    const {background, borderRadius, paddingSize, elevation} = props;
-    const isBackgroundColorStyle =
-        background === "base-subtle" || background === "base-default";
+}: StyleProps) => {
+    // Map prop values to tokens
+    const styleMap = {
+        backgroundColor: {
+            "base-subtle": semanticColor.core.background.base.subtle,
+            "base-default": semanticColor.core.background.base.default,
+        },
+        borderRadius: {
+            small: border.radius.radius_080,
+            medium: border.radius.radius_120,
+        },
+        padding: {
+            none: sizing.size_0,
+            small: sizing.size_160,
+            medium: sizing.size_240,
+        },
+        elevation: {
+            none: "none",
+            low: boxShadow.low,
+        },
+    } as const;
 
-    // Generate new styles
-    const newStyles = StyleSheet.create({
+    return StyleSheet.create({
         root: {
-            // Background styles
-            ...(isBackgroundColorStyle && {
-                backgroundColor: styleMap.backgroundColor[background],
-            }),
-            // Background image styles
-            ...(!isBackgroundColorStyle &&
-                background && {
-                    background: `url(${background})`,
-                    backgroundSize: "cover",
-                }),
-            // Common styles
+            backgroundColor: background && styleMap.backgroundColor[background],
             borderColor: semanticColor.core.border.neutral.subtle,
             borderStyle: "solid",
-            borderWidth: border.width.thin,
-            minInlineSize: sizing.size_280,
-            position: "relative",
-            // Optional styles based on props
             borderRadius: borderRadius && styleMap.borderRadius[borderRadius],
+            borderWidth: border.width.thin,
             boxShadow: elevation && styleMap.elevation[elevation],
             padding: paddingSize && styleMap.padding[paddingSize],
+            minInlineSize: sizing.size_280,
+            position: "relative",
         },
     });
-
-    // Cache the styles
-    dynamicStyles[styleKey] = newStyles;
-    return newStyles;
 };
 
 export default Card;