@khanacademy/wonder-blocks-badge 0.0.0-PR2723-20250724161332 → 0.0.0-PR2724-20250725160657
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/CHANGELOG.md +9 -23
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,32 +1,18 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-badge
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- 9533296: Replaces `semanticColor.icon` with `semanticColor.core.foreground` tokens
|
|
8
|
-
- b42b694: Updates CSS variables for badge
|
|
9
|
-
- 956f8bd: Replaces instances of `semanticColor.text` with `semanticColor.core.foreground`
|
|
10
|
-
- Updated dependencies [7183606]
|
|
11
|
-
- Updated dependencies [956f8bd]
|
|
12
|
-
- Updated dependencies [956f8bd]
|
|
13
|
-
- Updated dependencies [3c61a30]
|
|
14
|
-
- Updated dependencies [b42b694]
|
|
15
|
-
- Updated dependencies [956f8bd]
|
|
16
|
-
- @khanacademy/wonder-blocks-tokens@0.0.0-PR2723-20250724161332
|
|
17
|
-
- @khanacademy/wonder-blocks-styles@0.0.0-PR2723-20250724161332
|
|
18
|
-
- @khanacademy/wonder-blocks-icon@0.0.0-PR2723-20250724161332
|
|
19
|
-
- @khanacademy/wonder-blocks-typography@0.0.0-PR2723-20250724161332
|
|
20
|
-
|
|
21
|
-
## 1.0.2
|
|
3
|
+
## 0.0.0-PR2724-20250725160657
|
|
22
4
|
|
|
23
5
|
### Patch Changes
|
|
24
6
|
|
|
25
7
|
- Updated dependencies [03415d1]
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
8
|
+
- Updated dependencies [6a39e39]
|
|
9
|
+
- Updated dependencies [98f4272]
|
|
10
|
+
- Updated dependencies [b3dd28f]
|
|
11
|
+
- Updated dependencies [3c3d8fb]
|
|
12
|
+
- @khanacademy/wonder-blocks-tokens@0.0.0-PR2724-20250725160657
|
|
13
|
+
- @khanacademy/wonder-blocks-icon@0.0.0-PR2724-20250725160657
|
|
14
|
+
- @khanacademy/wonder-blocks-styles@0.0.0-PR2724-20250725160657
|
|
15
|
+
- @khanacademy/wonder-blocks-typography@0.0.0-PR2724-20250725160657
|
|
30
16
|
|
|
31
17
|
## 1.0.1
|
|
32
18
|
|
package/dist/es/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { Icon, GemIcon, StreakIcon, PhosphorIcon } from '@khanacademy/wonder-blo
|
|
|
8
8
|
import DateIcon from '@phosphor-icons/core/bold/calendar-blank-bold.svg';
|
|
9
9
|
import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
|
|
10
10
|
|
|
11
|
-
const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React.useMemo(()=>addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsx(React.Fragment,{})}return jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:sizing.size_040,paddingInline:sizing.size_080,gap:sizing.size_040},iconOnly:{padding:sizing.size_040}},border:{width:border.width.thin,style:"solid",radius:border.radius.radius_080},color:{background:semanticColor.surface.secondary,foreground:semanticColor.
|
|
11
|
+
const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React.useMemo(()=>addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsx(React.Fragment,{})}return jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:sizing.size_040,paddingInline:sizing.size_080,gap:sizing.size_040},iconOnly:{padding:sizing.size_040}},border:{width:border.width.thin,style:"solid",radius:border.radius.radius_080},color:{background:semanticColor.surface.secondary,foreground:semanticColor.text.primary,border:semanticColor.border.subtle}},icon:{sizing:{width:sizing.size_160,height:sizing.size_160},color:{foreground:semanticColor.icon.primary}}};const styles$4=StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...focusStyles.focus},label:{maxWidth:"30ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},badgeTypography:{fontFamily:font.family.sans,fontSize:font.body.size.xsmall,fontWeight:font.weight.bold,lineHeight:font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
|
|
12
12
|
|
|
13
13
|
const StatusBadge=React.forwardRef((props,ref)=>{const{kind="info",...otherProps}=props;return jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[getKindStyle(kind),otherProps.styles?.root],icon:[getIconKindStyle(kind),otherProps.styles?.icon]}})});function getKindStyle(kind){switch(kind){case"info":return styles$3.info;case"success":return styles$3.success;case"warning":return styles$3.warning;case"critical":return styles$3.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$3.infoIcon;case"success":return styles$3.successIcon;case"warning":return styles$3.warningIcon;case"critical":return styles$3.criticalIcon;default:return {}}}const badgeTokens={root:{color:{info:{background:semanticColor.feedback.info.subtle.background,border:semanticColor.feedback.info.subtle.border,foreground:semanticColor.feedback.info.subtle.text},success:{background:semanticColor.feedback.success.subtle.background,border:semanticColor.feedback.success.subtle.border,foreground:semanticColor.feedback.success.subtle.text},warning:{background:semanticColor.feedback.warning.subtle.background,border:semanticColor.feedback.warning.subtle.border,foreground:semanticColor.feedback.warning.subtle.text},critical:{background:semanticColor.feedback.critical.subtle.background,border:semanticColor.feedback.critical.subtle.border,foreground:semanticColor.feedback.critical.subtle.text}}},icon:{color:{info:{foreground:semanticColor.feedback.info.subtle.icon},success:{foreground:semanticColor.feedback.success.subtle.icon},warning:{foreground:semanticColor.feedback.warning.subtle.icon},critical:{foreground:semanticColor.feedback.critical.subtle.icon}}}};const styles$3=StyleSheet.create({info:{backgroundColor:badgeTokens.root.color.info.background,color:badgeTokens.root.color.info.foreground,borderColor:badgeTokens.root.color.info.border},success:{backgroundColor:badgeTokens.root.color.success.background,color:badgeTokens.root.color.success.foreground,borderColor:badgeTokens.root.color.success.border},warning:{backgroundColor:badgeTokens.root.color.warning.background,color:badgeTokens.root.color.warning.foreground,borderColor:badgeTokens.root.color.warning.border},critical:{backgroundColor:badgeTokens.root.color.critical.background,color:badgeTokens.root.color.critical.foreground,borderColor:badgeTokens.root.color.critical.border},infoIcon:{color:badgeTokens.icon.color.info.foreground},successIcon:{color:badgeTokens.icon.color.success.foreground},warningIcon:{color:badgeTokens.icon.color.warning.foreground},criticalIcon:{color:badgeTokens.icon.color.critical.foreground}});
|
|
14
14
|
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
36
36
|
var DateIcon__default = /*#__PURE__*/_interopDefaultLegacy(DateIcon);
|
|
37
37
|
var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
|
|
38
38
|
|
|
39
|
-
const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React__namespace.useMemo(()=>wonderBlocksCore.addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:wonderBlocksTokens.sizing.size_040,paddingInline:wonderBlocksTokens.sizing.size_080,gap:wonderBlocksTokens.sizing.size_040},iconOnly:{padding:wonderBlocksTokens.sizing.size_040}},border:{width:wonderBlocksTokens.border.width.thin,style:"solid",radius:wonderBlocksTokens.border.radius.radius_080},color:{background:wonderBlocksTokens.semanticColor.surface.secondary,foreground:wonderBlocksTokens.semanticColor.
|
|
39
|
+
const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",...otherProps}=props;const StyledTag=React__namespace.useMemo(()=>wonderBlocksCore.addStyle(tag,styles$4.default),[tag]);if(!label&&!icon){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$4.badge,styles$4.badgeTypography,styles$4.defaultBadgeStyling,icon&&!label?styles$4.iconOnly:{},stylesProp?.root],...otherProps,children:[icon&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.icon,styles$4.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsxRuntime.jsx(StyledSpan,{style:[styles$4.label,stylesProp?.label],children:label})]})});const badgeTokens$1={root:{layout:{default:{paddingBlock:wonderBlocksTokens.sizing.size_040,paddingInline:wonderBlocksTokens.sizing.size_080,gap:wonderBlocksTokens.sizing.size_040},iconOnly:{padding:wonderBlocksTokens.sizing.size_040}},border:{width:wonderBlocksTokens.border.width.thin,style:"solid",radius:wonderBlocksTokens.border.radius.radius_080},color:{background:wonderBlocksTokens.semanticColor.surface.secondary,foreground:wonderBlocksTokens.semanticColor.text.primary,border:wonderBlocksTokens.semanticColor.border.subtle}},icon:{sizing:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},color:{foreground:wonderBlocksTokens.semanticColor.icon.primary}}};const styles$4=aphrodite.StyleSheet.create({badge:{display:"inline-flex",alignItems:"center",gap:badgeTokens$1.root.layout.default.gap,width:"fit-content",textWrap:"nowrap",borderWidth:badgeTokens$1.root.border.width,borderStyle:badgeTokens$1.root.border.style,paddingBlock:badgeTokens$1.root.layout.default.paddingBlock,paddingInline:badgeTokens$1.root.layout.default.paddingInline,borderRadius:badgeTokens$1.root.border.radius,...wonderBlocksStyles.focusStyles.focus},label:{maxWidth:"30ch",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},badgeTypography:{fontFamily:wonderBlocksTokens.font.family.sans,fontSize:wonderBlocksTokens.font.body.size.xsmall,fontWeight:wonderBlocksTokens.font.weight.bold,lineHeight:wonderBlocksTokens.font.body.lineHeight.xsmall},defaultBadgeStyling:{backgroundColor:badgeTokens$1.root.color.background,borderColor:badgeTokens$1.root.color.border,color:badgeTokens$1.root.color.foreground},icon:{minWidth:badgeTokens$1.icon.sizing.width,minHeight:badgeTokens$1.icon.sizing.height,display:"flex",alignItems:"center",justifyContent:"center"},defaultIconStyling:{color:badgeTokens$1.icon.color.foreground},iconOnly:{padding:badgeTokens$1.root.layout.iconOnly.padding}});
|
|
40
40
|
|
|
41
41
|
const StatusBadge=React__namespace.forwardRef((props,ref)=>{const{kind="info",...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[getKindStyle(kind),otherProps.styles?.root],icon:[getIconKindStyle(kind),otherProps.styles?.icon]}})});function getKindStyle(kind){switch(kind){case"info":return styles$3.info;case"success":return styles$3.success;case"warning":return styles$3.warning;case"critical":return styles$3.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$3.infoIcon;case"success":return styles$3.successIcon;case"warning":return styles$3.warningIcon;case"critical":return styles$3.criticalIcon;default:return {}}}const badgeTokens={root:{color:{info:{background:wonderBlocksTokens.semanticColor.feedback.info.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.info.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.info.subtle.text},success:{background:wonderBlocksTokens.semanticColor.feedback.success.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.success.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.success.subtle.text},warning:{background:wonderBlocksTokens.semanticColor.feedback.warning.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.warning.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.warning.subtle.text},critical:{background:wonderBlocksTokens.semanticColor.feedback.critical.subtle.background,border:wonderBlocksTokens.semanticColor.feedback.critical.subtle.border,foreground:wonderBlocksTokens.semanticColor.feedback.critical.subtle.text}}},icon:{color:{info:{foreground:wonderBlocksTokens.semanticColor.feedback.info.subtle.icon},success:{foreground:wonderBlocksTokens.semanticColor.feedback.success.subtle.icon},warning:{foreground:wonderBlocksTokens.semanticColor.feedback.warning.subtle.icon},critical:{foreground:wonderBlocksTokens.semanticColor.feedback.critical.subtle.icon}}}};const styles$3=aphrodite.StyleSheet.create({info:{backgroundColor:badgeTokens.root.color.info.background,color:badgeTokens.root.color.info.foreground,borderColor:badgeTokens.root.color.info.border},success:{backgroundColor:badgeTokens.root.color.success.background,color:badgeTokens.root.color.success.foreground,borderColor:badgeTokens.root.color.success.border},warning:{backgroundColor:badgeTokens.root.color.warning.background,color:badgeTokens.root.color.warning.foreground,borderColor:badgeTokens.root.color.warning.border},critical:{backgroundColor:badgeTokens.root.color.critical.background,color:badgeTokens.root.color.critical.foreground,borderColor:badgeTokens.root.color.critical.border},infoIcon:{color:badgeTokens.icon.color.info.foreground},successIcon:{color:badgeTokens.icon.color.success.foreground},warningIcon:{color:badgeTokens.icon.color.warning.foreground},criticalIcon:{color:badgeTokens.icon.color.critical.foreground}});
|
|
42
42
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-badge",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-PR2724-20250725160657",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Badges are used to display information",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
16
|
-
"@khanacademy/wonder-blocks-icon": "0.0.0-
|
|
17
|
-
"@khanacademy/wonder-blocks-styles": "0.0.0-
|
|
18
|
-
"@khanacademy/wonder-blocks-tokens": "0.0.0-
|
|
19
|
-
"@khanacademy/wonder-blocks-typography": "0.0.0-
|
|
16
|
+
"@khanacademy/wonder-blocks-icon": "0.0.0-PR2724-20250725160657",
|
|
17
|
+
"@khanacademy/wonder-blocks-styles": "0.0.0-PR2724-20250725160657",
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "0.0.0-PR2724-20250725160657",
|
|
19
|
+
"@khanacademy/wonder-blocks-typography": "0.0.0-PR2724-20250725160657"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@phosphor-icons/core": "^2.0.2",
|