@khanacademy/wonder-blocks-badge 0.0.0-PR2830-20251023231836 → 0.0.0-PR2833-20251024195044
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 +7 -3
- package/dist/components/badge.d.ts +1 -7
- package/dist/components/status-badge.d.ts +0 -4
- package/dist/es/index.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-badge
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-PR2833-20251024195044
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- Updated dependencies [520b50f]
|
|
8
|
+
- @khanacademy/wonder-blocks-tokens@0.0.0-PR2833-20251024195044
|
|
9
|
+
- @khanacademy/wonder-blocks-icon@0.0.0-PR2833-20251024195044
|
|
10
|
+
- @khanacademy/wonder-blocks-styles@0.0.0-PR2833-20251024195044
|
|
11
|
+
- @khanacademy/wonder-blocks-typography@0.0.0-PR2833-20251024195044
|
|
8
12
|
|
|
9
13
|
## 1.0.12
|
|
10
14
|
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { BaseBadgeProps, IconLabelProps } from "../types";
|
|
3
|
-
type
|
|
4
|
-
/**
|
|
5
|
-
* Whether to show the border. Defaults to `true`.
|
|
6
|
-
*/
|
|
7
|
-
showBorder?: boolean;
|
|
8
|
-
};
|
|
9
|
-
type Props = IconLabelProps & BaseBadgeProps & BadgeProps;
|
|
3
|
+
type Props = IconLabelProps & BaseBadgeProps;
|
|
10
4
|
/**
|
|
11
5
|
* Badges are visual indicators used to display concise information, such as
|
|
12
6
|
* a status, label, or count.
|
|
@@ -5,10 +5,6 @@ type Props = {
|
|
|
5
5
|
* The kind of badge to display. Defaults to `info`.
|
|
6
6
|
*/
|
|
7
7
|
kind?: "info" | "success" | "warning" | "critical";
|
|
8
|
-
/**
|
|
9
|
-
* Whether to show the border. Defaults to `true`.
|
|
10
|
-
*/
|
|
11
|
-
showBorder?: boolean;
|
|
12
8
|
} & BaseBadgeProps & IconLabelProps;
|
|
13
9
|
/**
|
|
14
10
|
* A badge that represents a status.
|
package/dist/es/index.js
CHANGED
|
@@ -8,9 +8,9 @@ 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"
|
|
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.core.background.neutral.subtle,foreground:semanticColor.core.foreground.neutral.strong,border:semanticColor.core.border.neutral.subtle}},icon:{sizing:{width:sizing.size_160,height:sizing.size_160},color:{foreground:semanticColor.core.foreground.neutral.default}}};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
|
-
const StatusBadge=React.forwardRef((props,ref)=>{const{kind="info"
|
|
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
|
|
|
15
15
|
const GemBadge=React.forwardRef((props,ref)=>{const{label,showIcon=false,iconAriaLabel,...otherProps}=props;return jsx(Badge,{...otherProps,label:label||"",icon:showIcon?jsx(Icon,{children:jsx(GemIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$2.gemBadge,otherProps.styles?.root]}})});const gemBadgeTokens={root:{color:{background:semanticColor.learning.background.gems.default,border:semanticColor.learning.background.gems.default,foreground:semanticColor.learning.foreground.gems.strong}}};const styles$2=StyleSheet.create({gemBadge:{backgroundColor:gemBadgeTokens.root.color.background,border:gemBadgeTokens.root.color.border,color:gemBadgeTokens.root.color.foreground}});
|
|
16
16
|
|
package/dist/index.js
CHANGED
|
@@ -36,9 +36,9 @@ 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"
|
|
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.core.background.neutral.subtle,foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}},icon:{sizing:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}}};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
|
-
const StatusBadge=React__namespace.forwardRef((props,ref)=>{const{kind="info"
|
|
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
|
|
|
43
43
|
const GemBadge=React__namespace.forwardRef((props,ref)=>{const{label,showIcon=false,iconAriaLabel,...otherProps}=props;return jsxRuntime.jsx(Badge,{...otherProps,label:label||"",icon:showIcon?jsxRuntime.jsx(wonderBlocksIcon.Icon,{children:jsxRuntime.jsx(wonderBlocksIcon.GemIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$2.gemBadge,otherProps.styles?.root]}})});const gemBadgeTokens={root:{color:{background:wonderBlocksTokens.semanticColor.learning.background.gems.default,border:wonderBlocksTokens.semanticColor.learning.background.gems.default,foreground:wonderBlocksTokens.semanticColor.learning.foreground.gems.strong}}};const styles$2=aphrodite.StyleSheet.create({gemBadge:{backgroundColor:gemBadgeTokens.root.color.background,border:gemBadgeTokens.root.color.border,color:gemBadgeTokens.root.color.foreground}});
|
|
44
44
|
|
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-PR2833-20251024195044",
|
|
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.4.0",
|
|
16
|
-
"@khanacademy/wonder-blocks-icon": "
|
|
17
|
-
"@khanacademy/wonder-blocks-
|
|
18
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
19
|
-
"@khanacademy/wonder-blocks-
|
|
16
|
+
"@khanacademy/wonder-blocks-icon": "0.0.0-PR2833-20251024195044",
|
|
17
|
+
"@khanacademy/wonder-blocks-styles": "0.0.0-PR2833-20251024195044",
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "0.0.0-PR2833-20251024195044",
|
|
19
|
+
"@khanacademy/wonder-blocks-typography": "0.0.0-PR2833-20251024195044"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@phosphor-icons/core": "^2.0.2",
|