@khanacademy/wonder-blocks-breadcrumbs 3.2.28 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-breadcrumbs
 
+## 3.3.0
+
+### Minor Changes
+
+- f7eef63: Breadcrumbs' default `aria-label` and the TabsDropdown and NavigationTabsDropdown default opener label now read translated strings from `WonderBlocksConfigProvider`. The `aria-label` and `labels.defaultOpenerLabel` props override the built-in translations.
+
+### Patch Changes
+
+- Updated dependencies [f7eef63]
+    - @khanacademy/wonder-blocks-config@0.3.0
+
+## 3.2.29
+
+### Patch Changes
+
+- Updated dependencies [04522d4]
+- Updated dependencies [5b4fed3]
+    - @khanacademy/wonder-blocks-tokens@18.0.0
+    - @khanacademy/wonder-blocks-core@12.5.0
+
 ## 3.2.28
 
 ### Patch Changes

package/dist/components/breadcrumbs.d.ts

@@ -45,7 +45,8 @@ declare const Breadcrumbs: React.ForwardRefExoticComponent<Readonly<import("@kha
      */
     children: Array<React.ReactElement<React.ComponentProps<typeof BreadcrumbsItem>>> | React.ReactElement<React.ComponentProps<typeof BreadcrumbsItem>>;
     /**
-     * Accessible label for the breadcrumbs.
+     * Accessible label for the breadcrumbs. This overrides the default label
+     * provided by `WonderBlocksConfigProvider`.
      */
     "aria-label"?: string;
     /**

package/dist/es/index.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { sizing, font, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 
-const StyledOl=addStyle("ol");const Breadcrumbs=React.forwardRef(function Breadcrumbs(props,ref){const{"aria-label":ariaLabel="Breadcrumbs",children,testId,...otherProps}=props;const lastChildIndex=React.Children.count(children)-1;return jsx("nav",{...otherProps,"aria-label":ariaLabel,"data-testid":testId,ref:ref,children:jsx(StyledOl,{style:styles$1.container,children:React.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
+const StyledOl=addStyle("ol");const Breadcrumbs=React.forwardRef(function Breadcrumbs(props,ref){const{strings}=useWonderBlocksI18n();const{"aria-label":ariaLabel,children,testId,...otherProps}=props;const lastChildIndex=React.Children.count(children)-1;return jsx("nav",{...otherProps,"aria-label":ariaLabel||strings.breadcrumbs,"data-testid":testId,ref:ref,children:jsx(StyledOl,{style:styles$1.container,children:React.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
 
 const StyledLi=addStyle("li");const StyledSvg=addStyle("svg");const BreadcrumbsItem=React.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginInlineEnd:sizing.size_040,lineHeight:"inherit",fontFamily:font.family.sans},separator:{marginInlineStart:sizing.size_040,fill:semanticColor.core.foreground.neutral.default}});
 

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var aphrodite = require('aphrodite');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
@@ -28,7 +29,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const StyledOl=wonderBlocksCore.addStyle("ol");const Breadcrumbs=React__namespace.forwardRef(function Breadcrumbs(props,ref){const{"aria-label":ariaLabel="Breadcrumbs",children,testId,...otherProps}=props;const lastChildIndex=React__namespace.Children.count(children)-1;return jsxRuntime.jsx("nav",{...otherProps,"aria-label":ariaLabel,"data-testid":testId,ref:ref,children:jsxRuntime.jsx(StyledOl,{style:styles$1.container,children:React__namespace.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React__namespace.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=aphrodite.StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
+const StyledOl=wonderBlocksCore.addStyle("ol");const Breadcrumbs=React__namespace.forwardRef(function Breadcrumbs(props,ref){const{strings}=wonderBlocksConfig.useWonderBlocksI18n();const{"aria-label":ariaLabel,children,testId,...otherProps}=props;const lastChildIndex=React__namespace.Children.count(children)-1;return jsxRuntime.jsx("nav",{...otherProps,"aria-label":ariaLabel||strings.breadcrumbs,"data-testid":testId,ref:ref,children:jsxRuntime.jsx(StyledOl,{style:styles$1.container,children:React__namespace.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React__namespace.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=aphrodite.StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
 
 const StyledLi=wonderBlocksCore.addStyle("li");const StyledSvg=wonderBlocksCore.addStyle("svg");const BreadcrumbsItem=React__namespace.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsxRuntime.jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsxRuntime.jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxRuntime.jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=aphrodite.StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginInlineEnd:wonderBlocksTokens.sizing.size_040,lineHeight:"inherit",fontFamily:wonderBlocksTokens.font.family.sans},separator:{marginInlineStart:wonderBlocksTokens.sizing.size_040,fill:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}});
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.2.28",
+  "version": "3.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,8 +20,9 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-tokens": "17.3.0"
+    "@khanacademy/wonder-blocks-config": "0.3.0",
+    "@khanacademy/wonder-blocks-tokens": "18.0.0",
+    "@khanacademy/wonder-blocks-core": "12.5.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",