@khanacademy/wonder-blocks-banner 4.1.18 → 4.1.19

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-banner
 
+## 4.1.19
+
+### Patch Changes
+
+- Updated dependencies [dd76e7c]
+- Updated dependencies [dd76e7c]
+    - @khanacademy/wonder-blocks-typography@4.0.0
+    - @khanacademy/wonder-blocks-tokens@10.3.0
+    - @khanacademy/wonder-blocks-button@10.0.3
+    - @khanacademy/wonder-blocks-core@12.3.0
+    - @khanacademy/wonder-blocks-icon@5.1.4
+    - @khanacademy/wonder-blocks-icon-button@10.1.1
+    - @khanacademy/wonder-blocks-link@9.1.4
+
 ## 4.1.18
 
 ### Patch Changes

package/dist/es/index.js

@@ -14,6 +14,6 @@ import successIcon from '@phosphor-icons/core/regular/smiley.svg';
 import warningIcon from '@phosphor-icons/core/regular/warning.svg';
 import criticalIcon from '@phosphor-icons/core/regular/warning-circle.svg';
 
-const getValuesForKind=kind=>{switch(kind){case"success":return {color:semanticColor.status.success.foreground,icon:successIcon,role:"status"};case"warning":return {color:semanticColor.status.warning.foreground,icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {color:semanticColor.status.critical.foreground,icon:criticalIcon,role:"alert"};default:return {color:semanticColor.status.notice.foreground,icon:infoIcon,role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsx(View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsx(View,{style:styles.action,children:jsx(Link,{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsx(View,{style:styles.action,children:jsx(Button,{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxs(View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsx(View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxs(View,{style:styles.containerInner,children:[jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(LabelSmall,{children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{style:styles.dismissContainer,children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:spacing.xxSmall_6,width:"100%",backgroundColor:semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:spacing.xSmall_8},icon:{marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,marginInlineStart:spacing.xxxxSmall_2,marginInlineEnd:spacing.xSmall_8,alignSelf:"flex-start",color:semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8,justifyContent:"center"},link:{fontSize:font.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8},floatingBorder:{borderRadius:border.radius.radius_040,overflow:"hidden"}});
+const getValuesForKind=kind=>{switch(kind){case"success":return {color:semanticColor.status.success.foreground,icon:successIcon,role:"status"};case"warning":return {color:semanticColor.status.warning.foreground,icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {color:semanticColor.status.critical.foreground,icon:criticalIcon,role:"alert"};default:return {color:semanticColor.status.notice.foreground,icon:infoIcon,role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsx(View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsx(View,{style:styles.action,children:jsx(Link,{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsx(View,{style:styles.action,children:jsx(Button,{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxs(View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsx(View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxs(View,{style:styles.containerInner,children:[jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(LabelSmall,{children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{style:styles.dismissContainer,children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:spacing.xxSmall_6,width:"100%",backgroundColor:semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:spacing.xSmall_8},icon:{marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,marginInlineStart:spacing.xxxxSmall_2,marginInlineEnd:spacing.xSmall_8,alignSelf:"flex-start",color:semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:spacing.xSmall_8,marginBottom:spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8,justifyContent:"center"},link:{fontSize:font.body.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8},floatingBorder:{borderRadius:border.radius.radius_040,overflow:"hidden"}});
 
 export { Banner as default };

package/dist/index.js

@@ -27,6 +27,6 @@ var successIcon__default = /*#__PURE__*/_interopDefaultLegacy(successIcon);
 var warningIcon__default = /*#__PURE__*/_interopDefaultLegacy(warningIcon);
 var criticalIcon__default = /*#__PURE__*/_interopDefaultLegacy(criticalIcon);
 
-const getValuesForKind=kind=>{switch(kind){case"success":return {color:wonderBlocksTokens.semanticColor.status.success.foreground,icon:successIcon__default["default"],role:"status"};case"warning":return {color:wonderBlocksTokens.semanticColor.status.warning.foreground,icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {color:wonderBlocksTokens.semanticColor.status.critical.foreground,icon:criticalIcon__default["default"],role:"alert"};default:return {color:wonderBlocksTokens.semanticColor.status.notice.foreground,icon:infoIcon__default["default"],role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Link__default["default"],{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Button__default["default"],{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelAndButtonsContainer,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.labelContainer,children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.dismissContainer,children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=aphrodite.StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:wonderBlocksTokens.spacing.xxSmall_6,width:"100%",backgroundColor:wonderBlocksTokens.semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:wonderBlocksTokens.spacing.xSmall_8},icon:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,marginInlineStart:wonderBlocksTokens.spacing.xxxxSmall_2,marginInlineEnd:wonderBlocksTokens.spacing.xSmall_8,alignSelf:"flex-start",color:wonderBlocksTokens.semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:wonderBlocksTokens.spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8,justifyContent:"center"},link:{fontSize:wonderBlocksTokens.font.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8},floatingBorder:{borderRadius:wonderBlocksTokens.border.radius.radius_040,overflow:"hidden"}});
+const getValuesForKind=kind=>{switch(kind){case"success":return {color:wonderBlocksTokens.semanticColor.status.success.foreground,icon:successIcon__default["default"],role:"status"};case"warning":return {color:wonderBlocksTokens.semanticColor.status.warning.foreground,icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {color:wonderBlocksTokens.semanticColor.status.critical.foreground,icon:criticalIcon__default["default"],role:"alert"};default:return {color:wonderBlocksTokens.semanticColor.status.notice.foreground,icon:infoIcon__default["default"],role:"status"}}};const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel="Dismiss banner.",onDismiss,kind="info",layout,text,testId,icon}=props;const renderActions=()=>{return actions?.filter(Boolean).map((action,i)=>{if(action.type==="custom"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:action.node},`custom-action-${i}`)}const handleClick=action.onClick;if(action.type==="link"){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Link__default["default"],{href:action.href,onClick:handleClick,"aria-label":action.ariaLabel??action.title,style:styles.link,children:action.title})},action.title)}else {return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.action,children:jsxRuntime.jsx(Button__default["default"],{kind:"tertiary",size:"small","aria-label":action.ariaLabel??action.title,onClick:handleClick,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.containerOuter,layout==="floating"&&styles.floatingBorder,{borderInlineStartColor:valuesForKind.color}],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.backgroundColor,{backgroundColor:valuesForKind.color}]}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,size:"medium",style:styles.icon,"aria-label":kind,testId:"banner-kind-icon",role:"img"}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelAndButtonsContainer,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.labelContainer,children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.dismissContainer,children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel})}):null]})]})};const styles=aphrodite.StyleSheet.create({backgroundColor:{position:"absolute",top:0,bottom:0,left:0,right:0,opacity:.08},containerOuter:{borderInlineStartWidth:wonderBlocksTokens.spacing.xxSmall_6,width:"100%",backgroundColor:wonderBlocksTokens.semanticColor.surface.primary},containerInner:{flexDirection:"row",padding:wonderBlocksTokens.spacing.xSmall_8},icon:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,marginInlineStart:wonderBlocksTokens.spacing.xxxxSmall_2,marginInlineEnd:wonderBlocksTokens.spacing.xSmall_8,alignSelf:"flex-start",color:wonderBlocksTokens.semanticColor.icon.primary},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between"},labelContainer:{flexShrink:1,margin:wonderBlocksTokens.spacing.xSmall_8,textAlign:"start",overflowWrap:"break-word"},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:wonderBlocksTokens.spacing.xSmall_8,height:18,alignItems:"center"},action:{marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8,justifyContent:"center"},link:{fontSize:wonderBlocksTokens.font.body.size.small},dismiss:{flexShrink:1},dismissContainer:{height:40,width:40,justifyContent:"center",alignItems:"center",marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8},floatingBorder:{borderRadius:wonderBlocksTokens.border.radius.radius_040,overflow:"hidden"}});
 
 module.exports = Banner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "4.1.18",
+  "version": "4.1.19",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -12,13 +12,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-button": "10.0.2",
+    "@khanacademy/wonder-blocks-button": "10.0.3",
     "@khanacademy/wonder-blocks-core": "12.3.0",
     "@khanacademy/wonder-blocks-icon": "5.1.4",
-    "@khanacademy/wonder-blocks-icon-button": "10.1.0",
-    "@khanacademy/wonder-blocks-link": "9.1.3",
-    "@khanacademy/wonder-blocks-tokens": "10.2.1",
-    "@khanacademy/wonder-blocks-typography": "3.2.4"
+    "@khanacademy/wonder-blocks-icon-button": "10.1.1",
+    "@khanacademy/wonder-blocks-link": "9.1.4",
+    "@khanacademy/wonder-blocks-tokens": "10.3.0",
+    "@khanacademy/wonder-blocks-typography": "4.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +26,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "3.1.0"
+    "@khanacademy/wb-dev-build-settings": "3.2.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"