@khanacademy/wonder-blocks-banner 4.3.6 → 4.4.1
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 +24 -0
- package/dist/components/banner.d.ts +1 -1
- package/dist/es/index.js +2 -2
- package/dist/index.js +21 -2
- package/package.json +7 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-banner@4.
|
|
2
|
+
> @khanacademy/wonder-blocks-banner@4.4.1 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,29 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-banner
|
|
2
2
|
|
|
3
|
+
## 4.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [6963849]
|
|
8
|
+
- Updated dependencies [f627dca]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@14.0.0
|
|
10
|
+
- @khanacademy/wonder-blocks-button@11.2.2
|
|
11
|
+
- @khanacademy/wonder-blocks-icon@5.2.20
|
|
12
|
+
- @khanacademy/wonder-blocks-icon-button@10.5.1
|
|
13
|
+
- @khanacademy/wonder-blocks-link@9.2.4
|
|
14
|
+
- @khanacademy/wonder-blocks-typography@4.2.22
|
|
15
|
+
|
|
16
|
+
## 4.4.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- c62fd64: Banner: Support custom icons
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [94351f5]
|
|
25
|
+
- @khanacademy/wonder-blocks-icon-button@10.5.0
|
|
26
|
+
|
|
3
27
|
## 4.3.6
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -104,7 +104,7 @@ type Props = {
|
|
|
104
104
|
* conveyed in the text of the banner, since color should not be the only
|
|
105
105
|
* way to convey status information.
|
|
106
106
|
*/
|
|
107
|
-
icon?: PhosphorIconAsset | string | "none";
|
|
107
|
+
icon?: PhosphorIconAsset | string | "none" | React.ReactElement;
|
|
108
108
|
/**
|
|
109
109
|
* Custom styles for the elements in the Banner component.
|
|
110
110
|
* - `root`: Styles the root element
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import 'react';
|
|
2
|
+
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';
|
|
@@ -17,6 +17,6 @@ const theme$1={root:{border:{radius:border.radius.radius_040,width:{inlineStart:
|
|
|
17
17
|
|
|
18
18
|
var theme = mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
19
19
|
|
|
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="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);
|
|
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="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,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":kind,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,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
21
|
|
|
22
22
|
export { Banner as default };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
require('react');
|
|
4
|
+
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');
|
|
@@ -17,6 +17,25 @@ var criticalIcon = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
|
|
|
17
17
|
|
|
18
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
19
|
|
|
20
|
+
function _interopNamespace(e) {
|
|
21
|
+
if (e && e.__esModule) return e;
|
|
22
|
+
var n = Object.create(null);
|
|
23
|
+
if (e) {
|
|
24
|
+
Object.keys(e).forEach(function (k) {
|
|
25
|
+
if (k !== 'default') {
|
|
26
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
27
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () { return e[k]; }
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
n["default"] = e;
|
|
35
|
+
return Object.freeze(n);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
20
39
|
var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
|
|
21
40
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
22
41
|
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
|
|
@@ -30,6 +49,6 @@ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040,
|
|
|
30
49
|
|
|
31
50
|
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
32
51
|
|
|
33
|
-
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="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,style:styles.button,children:action.title})},action.title)}})};const valuesForKind=getValuesForKind(kind);const bannerKindStyle=getBannerKindStyle(kind);const bannerIconKindStyle=getBannerIconKindStyle(kind);
|
|
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="Dismiss banner.",onDismiss,kind="info",text,testId,icon,styles:stylesProp}=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,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":kind,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,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}});
|
|
34
53
|
|
|
35
54
|
module.exports = Banner;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-banner",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.1",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Banner components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
"access": "public"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@khanacademy/wonder-blocks-button": "11.2.
|
|
23
|
+
"@khanacademy/wonder-blocks-button": "11.2.2",
|
|
24
24
|
"@khanacademy/wonder-blocks-core": "12.4.0",
|
|
25
|
-
"@khanacademy/wonder-blocks-icon": "5.2.
|
|
26
|
-
"@khanacademy/wonder-blocks-icon-button": "10.
|
|
27
|
-
"@khanacademy/wonder-blocks-link": "9.2.
|
|
28
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
29
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
25
|
+
"@khanacademy/wonder-blocks-icon": "5.2.20",
|
|
26
|
+
"@khanacademy/wonder-blocks-icon-button": "10.5.1",
|
|
27
|
+
"@khanacademy/wonder-blocks-link": "9.2.4",
|
|
28
|
+
"@khanacademy/wonder-blocks-tokens": "14.0.0",
|
|
29
|
+
"@khanacademy/wonder-blocks-typography": "4.2.22"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@phosphor-icons/core": "^2.0.2",
|