@khanacademy/wonder-blocks-banner 4.1.26 → 4.2.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 +5 -0
- package/CHANGELOG.md +30 -0
- package/dist/components/banner.d.ts +14 -1
- package/dist/css/vars.css +45 -0
- package/dist/es/index.js +13 -10
- package/dist/index.js +10 -7
- package/dist/theme/default.d.ts +59 -0
- package/dist/theme/index.d.ts +59 -0
- package/dist/theme/thunderblocks.d.ts +59 -0
- package/package.json +16 -7
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
> @khanacademy/wonder-blocks-banner@4.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner
|
|
3
|
+
> pnpm exec wonder-blocks-tokens .
|
|
4
|
+
|
|
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,35 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-banner
|
|
2
2
|
|
|
3
|
+
## 4.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [705ee01]
|
|
8
|
+
- @khanacademy/wonder-blocks-typography@4.2.5
|
|
9
|
+
- @khanacademy/wonder-blocks-button@10.2.5
|
|
10
|
+
- @khanacademy/wonder-blocks-icon-button@10.3.4
|
|
11
|
+
|
|
12
|
+
## 4.2.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- 61a010a: Add `styles` prop to `Banner` so that the `root` element can be styled
|
|
17
|
+
- 0f4f771: Banner updates to support Thunderblocks styling.
|
|
18
|
+
- Note: The `layout` prop no longer changes the border radius. All banners will have a border radius by default. `layout` is deprecated and will be removed in a future release.
|
|
19
|
+
- Padding amd margin within the component is simplified
|
|
20
|
+
- Bold icons are used within the Banner
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- b0fa809: Update banner styles (use `sizing` instead of `spacing`, use semantic color tokens, set up banner token structure to support theming)
|
|
25
|
+
- Updated dependencies [0f4f771]
|
|
26
|
+
- @khanacademy/wonder-blocks-tokens@11.1.0
|
|
27
|
+
- @khanacademy/wonder-blocks-button@10.2.4
|
|
28
|
+
- @khanacademy/wonder-blocks-icon@5.2.3
|
|
29
|
+
- @khanacademy/wonder-blocks-icon-button@10.3.3
|
|
30
|
+
- @khanacademy/wonder-blocks-link@9.1.9
|
|
31
|
+
- @khanacademy/wonder-blocks-typography@4.2.4
|
|
32
|
+
|
|
3
33
|
## 4.1.26
|
|
4
34
|
|
|
5
35
|
### Patch Changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
2
3
|
import { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
|
|
3
4
|
type ActionTriggerBase = {
|
|
4
5
|
title: string;
|
|
@@ -56,7 +57,12 @@ type Props = {
|
|
|
56
57
|
*/
|
|
57
58
|
kind?: BannerKind;
|
|
58
59
|
/**
|
|
59
|
-
* Determines the edge style of the Banner.
|
|
60
|
+
* (DEPRECATED) Determines the edge style of the Banner.
|
|
61
|
+
*
|
|
62
|
+
* This prop is deprecated and will be removed in a future release.
|
|
63
|
+
* Currently, it has no effect on the component.
|
|
64
|
+
*
|
|
65
|
+
* @deprecated
|
|
60
66
|
*/
|
|
61
67
|
layout: BannerLayout;
|
|
62
68
|
/**
|
|
@@ -92,6 +98,13 @@ type Props = {
|
|
|
92
98
|
* - `string`: an import referencing an arbitrary SVG file.
|
|
93
99
|
*/
|
|
94
100
|
icon?: PhosphorIconAsset | string;
|
|
101
|
+
/**
|
|
102
|
+
* Custom styles for the elements in the Banner component.
|
|
103
|
+
* - `root`: Styles the root element
|
|
104
|
+
*/
|
|
105
|
+
styles?: {
|
|
106
|
+
root?: StyleType;
|
|
107
|
+
};
|
|
95
108
|
};
|
|
96
109
|
/**
|
|
97
110
|
* Banner. A banner displays a prominent message and related optional actions.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
:root {--wb-c-banner-root-border-radius: var(--wb-border-radius-radius_040);
|
|
2
|
+
--wb-c-banner-root-border-width-inlineStart: var(--wb-sizing-size_060);
|
|
3
|
+
--wb-c-banner-root-border-width-inlineEnd: var(--wb-border-width-none);
|
|
4
|
+
--wb-c-banner-root-border-width-blockStart: var(--wb-border-width-none);
|
|
5
|
+
--wb-c-banner-root-border-width-blockEnd: var(--wb-border-width-none);
|
|
6
|
+
--wb-c-banner-root-color-border-info: var(--wb-semanticColor-core-border-instructive-default);
|
|
7
|
+
--wb-c-banner-root-color-border-success: var(--wb-semanticColor-core-border-success-default);
|
|
8
|
+
--wb-c-banner-root-color-border-warning: var(--wb-semanticColor-core-border-warning-default);
|
|
9
|
+
--wb-c-banner-root-color-border-critical: var(--wb-semanticColor-core-border-critical-default);
|
|
10
|
+
--wb-c-banner-root-layout-paddingInlineStart: var(--wb-sizing-size_080);
|
|
11
|
+
--wb-c-banner-root-layout-gap: var(--wb-sizing-size_160);
|
|
12
|
+
--wb-c-banner-icon-color-info: var(--wb-semanticColor-icon-primary);
|
|
13
|
+
--wb-c-banner-icon-color-success: var(--wb-semanticColor-icon-primary);
|
|
14
|
+
--wb-c-banner-icon-color-warning: var(--wb-semanticColor-icon-primary);
|
|
15
|
+
--wb-c-banner-icon-color-critical: var(--wb-semanticColor-icon-primary);
|
|
16
|
+
--wb-c-banner-icon-sizing-height: var(--wb-sizing-size_240);
|
|
17
|
+
--wb-c-banner-icon-sizing-width: var(--wb-sizing-size_240);
|
|
18
|
+
--wb-c-banner-button-layout-marginInline: var(--wb-sizing-size_0);
|
|
19
|
+
--wb-c-banner-link-font-decoration: none;
|
|
20
|
+
--wb-c-banner-link-font-underlineOffset: 0%;
|
|
21
|
+
--wb-c-banner-label-font-size: var(--wb-font-body-size-small);
|
|
22
|
+
--wb-c-banner-dismiss-layout-marginBlock: var(--wb-sizing-size_0);}
|
|
23
|
+
|
|
24
|
+
[data-wb-theme='thunderblocks'] {--wb-c-banner-root-border-radius: var(--wb-border-radius-radius_080);
|
|
25
|
+
--wb-c-banner-root-border-width-inlineStart: var(--wb-border-width-thin);
|
|
26
|
+
--wb-c-banner-root-border-width-inlineEnd: var(--wb-border-width-thin);
|
|
27
|
+
--wb-c-banner-root-border-width-blockStart: var(--wb-border-width-thin);
|
|
28
|
+
--wb-c-banner-root-border-width-blockEnd: var(--wb-border-width-thin);
|
|
29
|
+
--wb-c-banner-root-color-border-info: var(--wb-semanticColor-feedback-info-subtle-border);
|
|
30
|
+
--wb-c-banner-root-color-border-success: var(--wb-semanticColor-feedback-success-subtle-border);
|
|
31
|
+
--wb-c-banner-root-color-border-warning: var(--wb-semanticColor-feedback-warning-subtle-border);
|
|
32
|
+
--wb-c-banner-root-color-border-critical: var(--wb-semanticColor-feedback-critical-subtle-border);
|
|
33
|
+
--wb-c-banner-root-layout-paddingInlineStart: var(--wb-sizing-size_160);
|
|
34
|
+
--wb-c-banner-root-layout-gap: var(--wb-sizing-size_120);
|
|
35
|
+
--wb-c-banner-icon-color-info: var(--wb-semanticColor-feedback-info-subtle-icon);
|
|
36
|
+
--wb-c-banner-icon-color-success: var(--wb-semanticColor-feedback-success-subtle-icon);
|
|
37
|
+
--wb-c-banner-icon-color-warning: var(--wb-semanticColor-feedback-warning-subtle-icon);
|
|
38
|
+
--wb-c-banner-icon-color-critical: var(--wb-semanticColor-feedback-critical-subtle-icon);
|
|
39
|
+
--wb-c-banner-icon-sizing-height: var(--wb-sizing-size_180);
|
|
40
|
+
--wb-c-banner-icon-sizing-width: var(--wb-sizing-size_180);
|
|
41
|
+
--wb-c-banner-button-layout-marginInline: calc(var(--wb-sizing-size_080) * -1);
|
|
42
|
+
--wb-c-banner-link-font-decoration: underline;
|
|
43
|
+
--wb-c-banner-link-font-underlineOffset: 25%;
|
|
44
|
+
--wb-c-banner-label-font-size: var(--wb-font-body-size-medium);
|
|
45
|
+
--wb-c-banner-dismiss-layout-marginBlock: calc(var(--wb-sizing-size_060) / 2 * -1);}
|
package/dist/es/index.js
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import 'react';
|
|
3
3
|
import { StyleSheet } from 'aphrodite';
|
|
4
|
-
import xIcon from '@phosphor-icons/core/
|
|
4
|
+
import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
|
|
5
5
|
import Button from '@khanacademy/wonder-blocks-button';
|
|
6
|
-
import { View } from '@khanacademy/wonder-blocks-core';
|
|
6
|
+
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
7
7
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
8
8
|
import IconButton from '@khanacademy/wonder-blocks-icon-button';
|
|
9
9
|
import Link from '@khanacademy/wonder-blocks-link';
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import criticalIcon from '@phosphor-icons/core/regular/warning-circle.svg';
|
|
10
|
+
import { border, sizing, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
|
|
11
|
+
import infoIcon from '@phosphor-icons/core/bold/info-bold.svg';
|
|
12
|
+
import successIcon from '@phosphor-icons/core/bold/smiley-bold.svg';
|
|
13
|
+
import warningIcon from '@phosphor-icons/core/bold/warning-bold.svg';
|
|
14
|
+
import criticalIcon from '@phosphor-icons/core/bold/warning-circle-bold.svg';
|
|
16
15
|
|
|
17
|
-
const
|
|
16
|
+
const theme$1={root:{border:{radius:border.radius.radius_040,width:{inlineStart:sizing.size_060,inlineEnd:border.width.none,blockStart:border.width.none,blockEnd:border.width.none}},color:{border:{info:semanticColor.core.border.instructive.default,success:semanticColor.core.border.success.default,warning:semanticColor.core.border.warning.default,critical:semanticColor.core.border.critical.default}},layout:{paddingInlineStart:sizing.size_080,gap:sizing.size_160}},icon:{color:{info:semanticColor.icon.primary,success:semanticColor.icon.primary,warning:semanticColor.icon.primary,critical:semanticColor.icon.primary},sizing:{height:sizing.size_240,width:sizing.size_240}},button:{layout:{marginInline:sizing.size_0}},link:{font:{decoration:"none",underlineOffset:"0%"}},label:{font:{size:font.body.size.small}},dismiss:{layout:{marginBlock:sizing.size_0}}};
|
|
17
|
+
|
|
18
|
+
var theme = mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
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);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:[jsx(PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"aria-label":kind,testId:"banner-kind-icon",role:"img"}),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}});
|
|
18
21
|
|
|
19
22
|
export { Banner as default };
|
package/dist/index.js
CHANGED
|
@@ -3,18 +3,17 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
require('react');
|
|
5
5
|
var aphrodite = require('aphrodite');
|
|
6
|
-
var xIcon = require('@phosphor-icons/core/
|
|
6
|
+
var xIcon = require('@phosphor-icons/core/bold/x-bold.svg');
|
|
7
7
|
var Button = require('@khanacademy/wonder-blocks-button');
|
|
8
8
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
9
9
|
var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
10
10
|
var IconButton = require('@khanacademy/wonder-blocks-icon-button');
|
|
11
11
|
var Link = require('@khanacademy/wonder-blocks-link');
|
|
12
12
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var criticalIcon = require('@phosphor-icons/core/regular/warning-circle.svg');
|
|
13
|
+
var infoIcon = require('@phosphor-icons/core/bold/info-bold.svg');
|
|
14
|
+
var successIcon = require('@phosphor-icons/core/bold/smiley-bold.svg');
|
|
15
|
+
var warningIcon = require('@phosphor-icons/core/bold/warning-bold.svg');
|
|
16
|
+
var criticalIcon = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
|
|
18
17
|
|
|
19
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
19
|
|
|
@@ -27,6 +26,10 @@ var successIcon__default = /*#__PURE__*/_interopDefaultLegacy(successIcon);
|
|
|
27
26
|
var warningIcon__default = /*#__PURE__*/_interopDefaultLegacy(warningIcon);
|
|
28
27
|
var criticalIcon__default = /*#__PURE__*/_interopDefaultLegacy(criticalIcon);
|
|
29
28
|
|
|
30
|
-
const
|
|
29
|
+
const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040,width:{inlineStart:wonderBlocksTokens.sizing.size_060,inlineEnd:wonderBlocksTokens.border.width.none,blockStart:wonderBlocksTokens.border.width.none,blockEnd:wonderBlocksTokens.border.width.none}},color:{border:{info:wonderBlocksTokens.semanticColor.core.border.instructive.default,success:wonderBlocksTokens.semanticColor.core.border.success.default,warning:wonderBlocksTokens.semanticColor.core.border.warning.default,critical:wonderBlocksTokens.semanticColor.core.border.critical.default}},layout:{paddingInlineStart:wonderBlocksTokens.sizing.size_080,gap:wonderBlocksTokens.sizing.size_160}},icon:{color:{info:wonderBlocksTokens.semanticColor.icon.primary,success:wonderBlocksTokens.semanticColor.icon.primary,warning:wonderBlocksTokens.semanticColor.icon.primary,critical:wonderBlocksTokens.semanticColor.icon.primary},sizing:{height:wonderBlocksTokens.sizing.size_240,width:wonderBlocksTokens.sizing.size_240}},button:{layout:{marginInline:wonderBlocksTokens.sizing.size_0}},link:{font:{decoration:"none",underlineOffset:"0%"}},label:{font:{size:wonderBlocksTokens.font.body.size.small}},dismiss:{layout:{marginBlock:wonderBlocksTokens.sizing.size_0}}};
|
|
30
|
+
|
|
31
|
+
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-banner-");
|
|
32
|
+
|
|
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);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:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon||valuesForKind.icon,style:[styles.icon,bannerIconKindStyle],"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(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}});
|
|
31
34
|
|
|
32
35
|
module.exports = Banner;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
declare const theme: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: string;
|
|
5
|
+
width: {
|
|
6
|
+
inlineStart: string;
|
|
7
|
+
inlineEnd: string;
|
|
8
|
+
blockStart: string;
|
|
9
|
+
blockEnd: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
color: {
|
|
13
|
+
border: {
|
|
14
|
+
info: string;
|
|
15
|
+
success: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
critical: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
layout: {
|
|
21
|
+
paddingInlineStart: string;
|
|
22
|
+
gap: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
icon: {
|
|
26
|
+
color: {
|
|
27
|
+
info: string;
|
|
28
|
+
success: string;
|
|
29
|
+
warning: string;
|
|
30
|
+
critical: string;
|
|
31
|
+
};
|
|
32
|
+
sizing: {
|
|
33
|
+
height: string;
|
|
34
|
+
width: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
button: {
|
|
38
|
+
layout: {
|
|
39
|
+
marginInline: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
link: {
|
|
43
|
+
font: {
|
|
44
|
+
decoration: string;
|
|
45
|
+
underlineOffset: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
label: {
|
|
49
|
+
font: {
|
|
50
|
+
size: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
dismiss: {
|
|
54
|
+
layout: {
|
|
55
|
+
marginBlock: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export default theme;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: string;
|
|
5
|
+
width: {
|
|
6
|
+
inlineStart: string;
|
|
7
|
+
inlineEnd: string;
|
|
8
|
+
blockStart: string;
|
|
9
|
+
blockEnd: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
color: {
|
|
13
|
+
border: {
|
|
14
|
+
info: string;
|
|
15
|
+
success: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
critical: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
layout: {
|
|
21
|
+
paddingInlineStart: string;
|
|
22
|
+
gap: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
icon: {
|
|
26
|
+
color: {
|
|
27
|
+
info: string;
|
|
28
|
+
success: string;
|
|
29
|
+
warning: string;
|
|
30
|
+
critical: string;
|
|
31
|
+
};
|
|
32
|
+
sizing: {
|
|
33
|
+
height: string;
|
|
34
|
+
width: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
button: {
|
|
38
|
+
layout: {
|
|
39
|
+
marginInline: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
link: {
|
|
43
|
+
font: {
|
|
44
|
+
decoration: string;
|
|
45
|
+
underlineOffset: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
label: {
|
|
49
|
+
font: {
|
|
50
|
+
size: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
dismiss: {
|
|
54
|
+
layout: {
|
|
55
|
+
marginBlock: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export default _default;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
radius: string;
|
|
5
|
+
width: {
|
|
6
|
+
inlineStart: string;
|
|
7
|
+
inlineEnd: string;
|
|
8
|
+
blockStart: string;
|
|
9
|
+
blockEnd: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
color: {
|
|
13
|
+
border: {
|
|
14
|
+
info: string;
|
|
15
|
+
success: string;
|
|
16
|
+
warning: string;
|
|
17
|
+
critical: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
layout: {
|
|
21
|
+
paddingInlineStart: string;
|
|
22
|
+
gap: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
icon: {
|
|
26
|
+
color: {
|
|
27
|
+
info: string;
|
|
28
|
+
success: string;
|
|
29
|
+
warning: string;
|
|
30
|
+
critical: string;
|
|
31
|
+
};
|
|
32
|
+
sizing: {
|
|
33
|
+
height: string;
|
|
34
|
+
width: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
button: {
|
|
38
|
+
layout: {
|
|
39
|
+
marginInline: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
link: {
|
|
43
|
+
font: {
|
|
44
|
+
decoration: string;
|
|
45
|
+
underlineOffset: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
label: {
|
|
49
|
+
font: {
|
|
50
|
+
size: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
dismiss: {
|
|
54
|
+
layout: {
|
|
55
|
+
marginBlock: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-banner",
|
|
3
|
-
"version": "4.1
|
|
3
|
+
"version": "4.2.1",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Banner components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/es/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/es/index.js",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/css/vars.css"
|
|
16
|
+
},
|
|
9
17
|
"author": "",
|
|
10
18
|
"license": "MIT",
|
|
11
19
|
"publishConfig": {
|
|
12
20
|
"access": "public"
|
|
13
21
|
},
|
|
14
22
|
"dependencies": {
|
|
15
|
-
"@khanacademy/wonder-blocks-button": "10.2.
|
|
23
|
+
"@khanacademy/wonder-blocks-button": "10.2.5",
|
|
16
24
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
17
|
-
"@khanacademy/wonder-blocks-icon": "5.2.
|
|
18
|
-
"@khanacademy/wonder-blocks-icon-button": "10.3.
|
|
19
|
-
"@khanacademy/wonder-blocks-link": "9.1.
|
|
20
|
-
"@khanacademy/wonder-blocks-tokens": "11.
|
|
21
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
25
|
+
"@khanacademy/wonder-blocks-icon": "5.2.3",
|
|
26
|
+
"@khanacademy/wonder-blocks-icon-button": "10.3.4",
|
|
27
|
+
"@khanacademy/wonder-blocks-link": "9.1.9",
|
|
28
|
+
"@khanacademy/wonder-blocks-tokens": "11.1.0",
|
|
29
|
+
"@khanacademy/wonder-blocks-typography": "4.2.5"
|
|
22
30
|
},
|
|
23
31
|
"peerDependencies": {
|
|
24
32
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -29,6 +37,7 @@
|
|
|
29
37
|
"@khanacademy/wb-dev-build-settings": "3.2.0"
|
|
30
38
|
},
|
|
31
39
|
"scripts": {
|
|
40
|
+
"build:css": "pnpm exec wonder-blocks-tokens .",
|
|
32
41
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
33
42
|
}
|
|
34
43
|
}
|