@khanacademy/wonder-blocks-card 1.4.30 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-card
 
+## 1.5.0
+
+### Minor Changes
+
+- 8e11e83: Card's dismiss button now reads its default `aria-label` ("Close") from `WonderBlocksConfigProvider`. The `labels.dismissButtonAriaLabel` prop overrides the built-in translation, and is now optional when `onDismiss` is set.
+
+### Patch Changes
+
+- Updated dependencies [6bd5d0c]
+- Updated dependencies [8e11e83]
+    - @khanacademy/wonder-blocks-config@0.5.0
+
 ## 1.4.30
 
 ### Patch Changes

package/dist/components/card.d.ts

@@ -71,8 +71,8 @@ type StyleProps = {
  * ### 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.
+ * It has a built-in, translated screen reader label ("Close"), which can be
+ * overridden using the `labels.dismissButtonAriaLabel` prop.
  *
  * See additional Accessibility docs.
  */
@@ -119,8 +119,8 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     role?: AriaProps["role"];
 } & {
     onDismiss: (e?: React.SyntheticEvent) => void;
-    labels: {
-        dismissButtonAriaLabel: string;
+    labels?: {
+        dismissButtonAriaLabel?: string;
         dismissButtonAriaDescribedBy?: string;
     } & Record<string, any>;
 }, "ref"> | Omit<{
@@ -210,8 +210,8 @@ declare const Card: React.ForwardRefExoticComponent<(Omit<{
     role?: AriaProps["role"];
 } & {
     onDismiss: (e?: React.SyntheticEvent) => void;
-    labels: {
-        dismissButtonAriaLabel: string;
+    labels?: {
+        dismissButtonAriaLabel?: string;
         dismissButtonAriaDescribedBy?: string;
     } & Record<string, any>;
 }, "ref"> | Omit<{

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

@@ -3,7 +3,10 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     /** Optional click handler */
     onClick?: (e?: React.SyntheticEvent) => unknown;
-    /** Screen reader label for close button */
+    /**
+     * Screen reader label for close button. This overrides the default label
+     * provided by `WonderBlocksConfigProvider`.
+     */
     "aria-label"?: string;
     /** Optional aria-describedby attribute */
     "aria-describedby"?: string;

package/dist/es/index.js

@@ -4,11 +4,12 @@ import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { sizing, semanticColor, border, boxShadow, font } from '@khanacademy/wonder-blocks-tokens';
 import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 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,insetBlockStart:sizing.size_080,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
+const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;const{strings}=useWonderBlocksI18n();return jsx(IconButton,{icon:xIcon,"aria-label":props["aria-label"]||strings.iconAltClose,"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,insetBlockStart: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,"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]}})};
 
 export { Card };

package/dist/index.js

@@ -8,6 +8,7 @@ var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var xIcon = require('@phosphor-icons/core/bold/x-bold.svg');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 
@@ -35,8 +36,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,insetBlockStart:wonderBlocksTokens.sizing.size_080,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
+const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;const{strings}=wonderBlocksConfig.useWonderBlocksI18n();return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||strings.iconAltClose,"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,insetBlockStart: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,"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]}})};
 
 exports.Card = Card;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Card component for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "1.4.30",
+  "version": "1.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,7 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
+    "@khanacademy/wonder-blocks-config": "0.5.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
     "@khanacademy/wonder-blocks-icon-button": "12.0.2",
     "@khanacademy/wonder-blocks-tokens": "18.1.0"