@khanacademy/wonder-blocks-banner 4.1.18 → 4.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/es/index.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,42 @@
1
1
  # @khanacademy/wonder-blocks-banner
2
2
 
3
+ ## 4.1.20
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [fa3e433]
8
+ - Updated dependencies [b1ee2b4]
9
+ - Updated dependencies [7abcccf]
10
+ - Updated dependencies [ec3c80c]
11
+ - Updated dependencies [63ad56e]
12
+ - Updated dependencies [9bacc1a]
13
+ - Updated dependencies [1c3c335]
14
+ - Updated dependencies [9bacc1a]
15
+ - Updated dependencies [7abcccf]
16
+ - Updated dependencies [15ac1e6]
17
+ - Updated dependencies [1c3c335]
18
+ - Updated dependencies [689f5d3]
19
+ - Updated dependencies [7d2a646]
20
+ - @khanacademy/wonder-blocks-icon-button@10.2.0
21
+ - @khanacademy/wonder-blocks-tokens@10.4.0
22
+ - @khanacademy/wonder-blocks-button@10.0.4
23
+ - @khanacademy/wonder-blocks-link@9.1.5
24
+ - @khanacademy/wonder-blocks-typography@4.1.0
25
+
26
+ ## 4.1.19
27
+
28
+ ### Patch Changes
29
+
30
+ - Updated dependencies [dd76e7c]
31
+ - Updated dependencies [dd76e7c]
32
+ - @khanacademy/wonder-blocks-typography@4.0.0
33
+ - @khanacademy/wonder-blocks-tokens@10.3.0
34
+ - @khanacademy/wonder-blocks-button@10.0.3
35
+ - @khanacademy/wonder-blocks-core@12.3.0
36
+ - @khanacademy/wonder-blocks-icon@5.1.4
37
+ - @khanacademy/wonder-blocks-icon-button@10.1.1
38
+ - @khanacademy/wonder-blocks-link@9.1.4
39
+
3
40
  ## 4.1.18
4
41
 
5
42
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -14,6 +14,6 @@ import successIcon from '@phosphor-icons/core/regular/smiley.svg';
14
14
  import warningIcon from '@phosphor-icons/core/regular/warning.svg';
15
15
  import criticalIcon from '@phosphor-icons/core/regular/warning-circle.svg';
16
16
 
17
- 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"}});
17
+ 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"}});
18
18
 
19
19
  export { Banner as default };
package/dist/index.js CHANGED
@@ -27,6 +27,6 @@ var successIcon__default = /*#__PURE__*/_interopDefaultLegacy(successIcon);
27
27
  var warningIcon__default = /*#__PURE__*/_interopDefaultLegacy(warningIcon);
28
28
  var criticalIcon__default = /*#__PURE__*/_interopDefaultLegacy(criticalIcon);
29
29
 
30
- 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"}});
30
+ 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"}});
31
31
 
32
32
  module.exports = Banner;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-banner",
3
- "version": "4.1.18",
3
+ "version": "4.1.20",
4
4
  "design": "v1",
5
5
  "description": "Banner components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -12,13 +12,13 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@khanacademy/wonder-blocks-button": "10.0.2",
15
+ "@khanacademy/wonder-blocks-button": "10.0.4",
16
16
  "@khanacademy/wonder-blocks-core": "12.3.0",
17
17
  "@khanacademy/wonder-blocks-icon": "5.1.4",
18
- "@khanacademy/wonder-blocks-icon-button": "10.1.0",
19
- "@khanacademy/wonder-blocks-link": "9.1.3",
20
- "@khanacademy/wonder-blocks-tokens": "10.2.1",
21
- "@khanacademy/wonder-blocks-typography": "3.2.4"
18
+ "@khanacademy/wonder-blocks-icon-button": "10.2.0",
19
+ "@khanacademy/wonder-blocks-link": "9.1.5",
20
+ "@khanacademy/wonder-blocks-tokens": "10.4.0",
21
+ "@khanacademy/wonder-blocks-typography": "4.1.0"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +26,7 @@
26
26
  "react": "18.2.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@khanacademy/wb-dev-build-settings": "3.1.0"
29
+ "@khanacademy/wb-dev-build-settings": "3.2.0"
30
30
  },
31
31
  "scripts": {
32
32
  "test": "echo \"Error: no test specified\" && exit 1"