@khanacademy/wonder-blocks-card 0.0.0-PR2799-20250929232634 → 0.0.0-PR2799-20251001174203

package/CHANGELOG.md

@@ -1,7 +1,11 @@
 # @khanacademy/wonder-blocks-card
 
-## 0.0.0-PR2799-20250929232634
+## 0.0.0-PR2799-20251001174203
 
 ### Minor Changes
 
 - 7506aef: Add new Card component
+
+### Patch Changes
+
+- @khanacademy/wonder-blocks-core@12.4.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,backgroundColorStyle="base-default",borderRadiusStyle="small",paddingSize="small",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColorStyle,borderRadiusStyle,paddingSize});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=({backgroundColorStyle,borderRadiusStyle,paddingSize})=>{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}};return StyleSheet.create({root:{backgroundColor:backgroundColorStyle&&styleMap.backgroundColor[backgroundColorStyle],borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadiusStyle&&styleMap.borderRadius[borderRadiusStyle],borderWidth:border.width.thin,boxShadow:boxShadow.low,padding:paddingSize&&styleMap.padding[paddingSize],minInlineSize:sizing.size_280,position:"relative"}})};
+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,backgroundColorStyle="base-default",borderRadiusStyle="small",paddingSize="small",children,onDismiss,inert}=props;const componentStyles=getComponentStyles({backgroundColorStyle,borderRadiusStyle,paddingSize});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=({backgroundColorStyle,borderRadiusStyle,paddingSize})=>{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}};return aphrodite.StyleSheet.create({root:{backgroundColor:backgroundColorStyle&&styleMap.backgroundColor[backgroundColorStyle],borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderRadius:borderRadiusStyle&&styleMap.borderRadius[borderRadiusStyle],borderWidth:wonderBlocksTokens.border.width.thin,boxShadow:wonderBlocksTokens.boxShadow.low,padding:paddingSize&&styleMap.padding[paddingSize],minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative"}})};
+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-PR2799-20250929232634",
+  "version": "0.0.0-PR2799-20251001174203",
   "design": "v1",
   "description": "Card component for Wonder Blocks.",
   "main": "dist/index.js",

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

@@ -0,0 +1,150 @@
+import * as React from "react";
+
+import Card from "../../components/card";
+
+/**
+ * Basic Card usage
+ */
+
+<Card>Hello, world!</Card>;
+
+<Card>
+    <div>Some content</div>
+</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>;
+
+/**
+ * Card with different HTML tags
+ */
+
+<Card tag="div">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>;

package/src/components/card.tsx

@@ -40,7 +40,7 @@ type BaseCardProps = {
      * The test ID used to locate this component in automated tests.
      */
     testId?: string;
-} & StyleOnlyProps;
+} & StyleProps;
 
 /**
  * A callback function to handle dismissing the card. When this prop is present,
@@ -73,21 +73,16 @@ type TagProps =
           labels?: Record<string, any>;
       };
 
-/**
- * Combined props - these two requirements work independently
- */
-type ConditionalProps = BaseCardProps & TagProps & DismissProps;
-
-type StyleOnlyProps = {
+type StyleProps = {
     /**
-     * The background color of the card, as a string identifier that matches a semanticColor token.
+     * The background style of the card, as a string identifier that matches a semanticColor token.
      * This can be one of:
-     * - `"base-subtle"` `semanticColor.core.background.base.subtle`: a light gray background.
-     * - `"base-default"`, matching `semanticColor.core.background.base.default`: a white background.
+     * - `"base-subtle"` (color), `semanticColor.core.background.base.subtle`: a light gray background.
+     * - `"base-default"` (color), `semanticColor.core.background.base.default`: a white background.
      *
      * Default: `"base-default"`
      */
-    backgroundColorStyle?: "base-subtle" | "base-default";
+    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:
@@ -96,7 +91,7 @@ type StyleOnlyProps = {
      *
      * Default: `"radius_080"`
      */
-    borderRadiusStyle?: "small" | "medium";
+    borderRadius?: "small" | "medium";
     /**
      * The padding inside the card, as a string identifier that matches a sizing token.
      * This can be one of:
@@ -107,9 +102,18 @@ type StyleOnlyProps = {
      * Default: `"size_160"`
      */
     paddingSize?: "none" | "small" | "medium";
+    /**
+     * The box-shadow for the card, as a string identifier that matches a sizing token.
+     * This can be one of:
+     * - `"none"`: no elevation.
+     * - `"low"`, matching `boxShadow.low`.
+     *
+     * Default: `"none"`
+     */
+    elevation?: "none" | "low";
 };
-type Props = ConditionalProps;
 
+type Props = BaseCardProps & TagProps & DismissProps;
 /**
  * The Card component is a flexible, reusable UI building block designed to
  * encapsulate content within a structured, visually distinct container.
@@ -139,20 +143,27 @@ type Props = ConditionalProps;
  *
  * Cards can be customized via the following props:
  *
- * **`backgroundColorStyle` prop**
+ * **`background` prop**
  *
  * | value | resolves to |
  * |---|---|
  * | `base-subtle` | `semanticColor.core.background.base.subtle` (light gray) |
  * | `base-default` | `semanticColor.core.background.base.default` (white) |
  *
- * **`borderRadiusStyle` prop**
+ * **`borderRadius` prop**
  *
  * | value | resolves to |
  * |---|---|
  * | `small` | `border.radius.radius_080` |
  * | `medium` | `border.radius.radius_120` |
  *
+ * **`elevation` prop**
+ *
+ * | value | resolves to |
+ * |---|---|
+ * | `none` | `none` |
+ * | `low` | `boxShadow.low` |
+ *
  * **`paddingSize` prop**
  *
  * | value | resolves to |
@@ -178,18 +189,20 @@ const Card = React.forwardRef(function Card(
         labels,
         tag,
         testId,
-        backgroundColorStyle = "base-default",
-        borderRadiusStyle = "small",
+        background = "base-default",
+        borderRadius = "small",
         paddingSize = "small",
+        elevation = "none",
         children,
         onDismiss,
         inert,
     } = props;
 
     const componentStyles = getComponentStyles({
-        backgroundColorStyle,
-        borderRadiusStyle,
+        background,
+        borderRadius,
         paddingSize,
+        elevation,
     });
     return (
         <View
@@ -212,10 +225,11 @@ const Card = React.forwardRef(function Card(
 });
 
 const getComponentStyles = ({
-    backgroundColorStyle,
-    borderRadiusStyle,
+    background,
+    borderRadius,
     paddingSize,
-}: StyleOnlyProps) => {
+    elevation,
+}: StyleProps) => {
     // Map prop values to tokens
     const styleMap = {
         backgroundColor: {
@@ -231,19 +245,20 @@ const getComponentStyles = ({
             small: sizing.size_160,
             medium: sizing.size_240,
         },
+        elevation: {
+            none: "none",
+            low: boxShadow.low,
+        },
     } as const;
 
     return StyleSheet.create({
         root: {
-            backgroundColor:
-                backgroundColorStyle &&
-                styleMap.backgroundColor[backgroundColorStyle],
+            backgroundColor: background && styleMap.backgroundColor[background],
             borderColor: semanticColor.core.border.neutral.subtle,
             borderStyle: "solid",
-            borderRadius:
-                borderRadiusStyle && styleMap.borderRadius[borderRadiusStyle],
+            borderRadius: borderRadius && styleMap.borderRadius[borderRadius],
             borderWidth: border.width.thin,
-            boxShadow: boxShadow.low,
+            boxShadow: elevation && styleMap.elevation[elevation],
             padding: paddingSize && styleMap.padding[paddingSize],
             minInlineSize: sizing.size_280,
             position: "relative",