@khanacademy/wonder-blocks-banner 5.1.17 → 5.2.0
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.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +19 -0
- package/dist/components/banner.d.ts +2 -2
- package/dist/es/index.js +2 -1
- package/dist/index.js +2 -1
- package/package.json +3 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-banner@5.
|
|
2
|
+
> @khanacademy/wonder-blocks-banner@5.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-banner
|
|
2
2
|
|
|
3
|
+
## 5.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 88c9897: Banner now reads its default strings from `WonderBlocksConfigProvider`. The `dismissAriaLabel` prop overrides the built-in translation for the dismiss button. Note: the kind icon's accessible name changes from the raw `kind` value (e.g. "info") to a capitalized, translated string (e.g. "Info"), and the default dismiss button label changes from "Dismiss banner." to "Dismiss banner".
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [88c9897]
|
|
12
|
+
- @khanacademy/wonder-blocks-config@0.6.0
|
|
13
|
+
- @khanacademy/wonder-blocks-link@10.5.1
|
|
14
|
+
|
|
15
|
+
## 5.1.18
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [ace2d2b]
|
|
20
|
+
- @khanacademy/wonder-blocks-link@10.5.0
|
|
21
|
+
|
|
3
22
|
## 5.1.17
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -63,8 +63,8 @@ type Props = {
|
|
|
63
63
|
*/
|
|
64
64
|
onDismiss?: () => void | null | undefined;
|
|
65
65
|
/**
|
|
66
|
-
* The accessible label for the dismiss button.
|
|
67
|
-
*
|
|
66
|
+
* The accessible label for the dismiss button. This overrides the default
|
|
67
|
+
* label provided by `WonderBlocksConfigProvider`.
|
|
68
68
|
*/
|
|
69
69
|
dismissAriaLabel?: string;
|
|
70
70
|
/**
|
package/dist/es/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { StyleSheet } from 'aphrodite';
|
|
4
4
|
import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
|
|
5
5
|
import Button from '@khanacademy/wonder-blocks-button';
|
|
6
|
+
import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
|
|
6
7
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
7
8
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
8
9
|
import IconButton from '@khanacademy/wonder-blocks-icon-button';
|
|
@@ -17,6 +18,6 @@ const theme$1={root:{border:{radius:border.radius.radius_040,width:{inlineStart:
|
|
|
17
18
|
|
|
18
19
|
var theme = mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
19
20
|
|
|
20
|
-
const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon,role:"status"};case"warning":return {icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon,role:"alert"};default:return {icon:infoIcon,role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel
|
|
21
|
+
const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon,role:"status"};case"warning":return {icon:warningIcon,role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon,role:"alert"};default:return {icon:infoIcon,role:"status"}}};const getIconAltForKind=(kind,strings)=>{switch(kind){case"success":return strings.iconAltStatusSuccess;case"warning":return strings.iconAltStatusWarning;case"critical":return strings.iconAltStatusCritical;default:return strings.iconAltStatusInfo}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel,onDismiss,kind="info",text,testId,icon,styles:stylesProp}=props;const{strings}=useWonderBlocksI18n();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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);let iconElement=jsx(React.Fragment,{});if(icon!=="none"){if(icon!==undefined&&typeof icon!=="string"){iconElement=React.cloneElement(icon,{style:styles.icon,testId:"banner-kind-icon"});}else {iconElement=jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"aria-label":getIconAltForKind(kind,strings),testId:"banner-kind-icon",role:"img"});}}return jsx(View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxs(View,{style:styles.containerInner,children:[iconElement,jsxs(View,{style:styles.labelAndButtonsContainer,children:[jsx(View,{style:styles.labelContainer,children:jsx(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsx(View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsx(View,{children:jsx(IconButton,{icon:xIcon,kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel||strings.iconAltDismissBanner,size:"xsmall"})}):null]})})};const styles=StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,fontFamily:font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:font.family.sans,fontSize:font.body.size.small,fontWeight:font.weight.semi,lineHeight:font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
|
|
21
22
|
|
|
22
23
|
export { Banner as default };
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var aphrodite = require('aphrodite');
|
|
6
6
|
var xIcon = require('@phosphor-icons/core/bold/x-bold.svg');
|
|
7
7
|
var Button = require('@khanacademy/wonder-blocks-button');
|
|
8
|
+
var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
|
|
8
9
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
9
10
|
var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
10
11
|
var IconButton = require('@khanacademy/wonder-blocks-icon-button');
|
|
@@ -49,6 +50,6 @@ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040,
|
|
|
49
50
|
|
|
50
51
|
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
51
52
|
|
|
52
|
-
const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon__default["default"],role:"status"};case"warning":return {icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon__default["default"],role:"alert"};default:return {icon:infoIcon__default["default"],role:"status"}}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=wonderBlocksCore.addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel
|
|
53
|
+
const getValuesForKind=kind=>{switch(kind){case"success":return {icon:successIcon__default["default"],role:"status"};case"warning":return {icon:warningIcon__default["default"],role:"alert",ariaLive:"polite"};case"critical":return {icon:criticalIcon__default["default"],role:"alert"};default:return {icon:infoIcon__default["default"],role:"status"}}};const getIconAltForKind=(kind,strings)=>{switch(kind){case"success":return strings.iconAltStatusSuccess;case"warning":return strings.iconAltStatusWarning;case"critical":return strings.iconAltStatusCritical;default:return strings.iconAltStatusInfo}};const getBannerKindStyle=kind=>{switch(kind){case"success":return styles.successBanner;case"info":return styles.infoBanner;case"warning":return styles.warningBanner;case"critical":return styles.criticalBanner}};const getBannerIconKindStyle=kind=>{switch(kind){case"success":return styles.successIcon;case"info":return styles.infoIcon;case"warning":return styles.warningIcon;case"critical":return styles.criticalIcon}};const StyledDiv=wonderBlocksCore.addStyle("div");const Banner=props=>{const{actions,"aria-label":ariaLabel,dismissAriaLabel,onDismiss,kind="info",text,testId,icon,styles:stylesProp}=props;const{strings}=wonderBlocksConfig.useWonderBlocksI18n();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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);let iconElement=jsxRuntime.jsx(React__namespace.Fragment,{});if(icon!=="none"){if(icon!==undefined&&typeof icon!=="string"){iconElement=React__namespace.cloneElement(icon,{style:styles.icon,testId:"banner-kind-icon"});}else {iconElement=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"aria-label":getIconAltForKind(kind,strings),testId:"banner-kind-icon",role:"img"});}}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.containerOuter,bannerKindStyle,stylesProp?.root],role:valuesForKind.role,"aria-label":ariaLabel,"aria-live":valuesForKind.ariaLive,testId:testId,children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.containerInner,children:[iconElement,jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelAndButtonsContainer,children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.labelContainer,children:jsxRuntime.jsx(StyledDiv,{style:styles.labelTypography,children:text})}),actions&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles.actionsContainer,children:renderActions()})]}),onDismiss?jsxRuntime.jsx(wonderBlocksCore.View,{children:jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],kind:"tertiary",actionType:"neutral",onClick:onDismiss,style:styles.dismiss,"aria-label":dismissAriaLabel||strings.iconAltDismissBanner,size:"xsmall"})}):null]})})};const styles=aphrodite.StyleSheet.create({containerOuter:{borderInlineStartWidth:theme.root.border.width.inlineStart,borderInlineEndWidth:theme.root.border.width.inlineEnd,borderBlockStartWidth:theme.root.border.width.blockStart,borderBlockEndWidth:theme.root.border.width.blockEnd,width:"100%",borderRadius:theme.root.border.radius,overflow:"hidden",padding:wonderBlocksTokens.sizing.size_160,paddingInlineStart:theme.root.layout.paddingInlineStart},containerInner:{flexDirection:"row",gap:theme.root.layout.gap},icon:{alignSelf:"flex-start",width:theme.icon.sizing.width,height:theme.icon.sizing.height},labelAndButtonsContainer:{flex:1,flexDirection:"row",alignItems:"center",alignContent:"center",flexWrap:"wrap",justifyContent:"space-between",gap:theme.root.layout.gap},labelContainer:{flexShrink:1,textAlign:"start",overflowWrap:"break-word"},labelTypography:{fontSize:theme.label.font.size,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,fontFamily:wonderBlocksTokens.font.family.sans},actionsContainer:{flexDirection:"row",justifyContent:"flex-start",height:wonderBlocksTokens.sizing.size_180,alignItems:"center",gap:theme.root.layout.gap},action:{justifyContent:"center"},link:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.small,fontWeight:wonderBlocksTokens.font.weight.semi,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,textDecoration:theme.link.font.decoration,textUnderlineOffset:theme.link.font.underlineOffset},button:{marginInline:theme.button.layout.marginInline},dismiss:{flexShrink:1,marginBlock:theme.dismiss.layout.marginBlock},successBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.success.subtle.background,borderColor:theme.root.color.border.success,color:wonderBlocksTokens.semanticColor.feedback.success.subtle.text},infoBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.info.subtle.background,borderColor:theme.root.color.border.info,color:wonderBlocksTokens.semanticColor.feedback.info.subtle.text},warningBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.warning.subtle.background,borderColor:theme.root.color.border.warning,color:wonderBlocksTokens.semanticColor.feedback.warning.subtle.text},criticalBanner:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.critical.subtle.background,borderColor:theme.root.color.border.critical,color:wonderBlocksTokens.semanticColor.feedback.critical.subtle.text},successIcon:{color:theme.icon.color.success},infoIcon:{color:theme.icon.color.info},warningIcon:{color:theme.icon.color.warning},criticalIcon:{color:theme.icon.color.critical}});
|
|
53
54
|
|
|
54
55
|
module.exports = Banner;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Banner components for Wonder Blocks.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "5.
|
|
6
|
+
"version": "5.2.0",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -29,10 +29,11 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@khanacademy/wonder-blocks-button": "11.7.13",
|
|
32
|
+
"@khanacademy/wonder-blocks-config": "0.6.0",
|
|
32
33
|
"@khanacademy/wonder-blocks-core": "12.5.0",
|
|
33
34
|
"@khanacademy/wonder-blocks-icon": "6.0.3",
|
|
34
35
|
"@khanacademy/wonder-blocks-icon-button": "12.0.2",
|
|
35
|
-
"@khanacademy/wonder-blocks-link": "10.
|
|
36
|
+
"@khanacademy/wonder-blocks-link": "10.5.1",
|
|
36
37
|
"@khanacademy/wonder-blocks-tokens": "18.1.0",
|
|
37
38
|
"@khanacademy/wonder-blocks-typography": "5.0.6"
|
|
38
39
|
},
|