@khanacademy/wonder-blocks-badge 0.0.0-PR2706-20250703202038 → 0.1.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/CHANGELOG.md +0 -95
- package/dist/es/index.js +3 -3
- package/dist/index.js +3 -3
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,100 +1,5 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-badge
|
|
2
2
|
|
|
3
|
-
## 0.0.0-PR2706-20250703202038
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- Updated dependencies [08634ac]
|
|
8
|
-
- @khanacademy/wonder-blocks-tokens@0.0.0-PR2706-20250703202038
|
|
9
|
-
- @khanacademy/wonder-blocks-icon@0.0.0-PR2706-20250703202038
|
|
10
|
-
- @khanacademy/wonder-blocks-styles@0.0.0-PR2706-20250703202038
|
|
11
|
-
- @khanacademy/wonder-blocks-typography@0.0.0-PR2706-20250703202038
|
|
12
|
-
|
|
13
|
-
## 0.1.9
|
|
14
|
-
|
|
15
|
-
### Patch Changes
|
|
16
|
-
|
|
17
|
-
- Updated dependencies [a98fe6c]
|
|
18
|
-
- Updated dependencies [e21e448]
|
|
19
|
-
- Updated dependencies [e21e448]
|
|
20
|
-
- Updated dependencies [dddbe55]
|
|
21
|
-
- @khanacademy/wonder-blocks-tokens@11.3.0
|
|
22
|
-
- @khanacademy/wonder-blocks-typography@4.2.10
|
|
23
|
-
- @khanacademy/wonder-blocks-icon@5.2.8
|
|
24
|
-
- @khanacademy/wonder-blocks-styles@0.2.21
|
|
25
|
-
|
|
26
|
-
## 0.1.8
|
|
27
|
-
|
|
28
|
-
### Patch Changes
|
|
29
|
-
|
|
30
|
-
- Updated dependencies [d8716ab]
|
|
31
|
-
- @khanacademy/wonder-blocks-tokens@11.2.2
|
|
32
|
-
- @khanacademy/wonder-blocks-icon@5.2.7
|
|
33
|
-
- @khanacademy/wonder-blocks-styles@0.2.20
|
|
34
|
-
- @khanacademy/wonder-blocks-typography@4.2.9
|
|
35
|
-
|
|
36
|
-
## 0.1.7
|
|
37
|
-
|
|
38
|
-
### Patch Changes
|
|
39
|
-
|
|
40
|
-
- Updated dependencies [de9435a]
|
|
41
|
-
- Updated dependencies [f50aafc]
|
|
42
|
-
- @khanacademy/wonder-blocks-tokens@11.2.1
|
|
43
|
-
- @khanacademy/wonder-blocks-icon@5.2.6
|
|
44
|
-
- @khanacademy/wonder-blocks-styles@0.2.19
|
|
45
|
-
- @khanacademy/wonder-blocks-typography@4.2.8
|
|
46
|
-
|
|
47
|
-
## 0.1.6
|
|
48
|
-
|
|
49
|
-
### Patch Changes
|
|
50
|
-
|
|
51
|
-
- Updated dependencies [e457d8c]
|
|
52
|
-
- @khanacademy/wonder-blocks-tokens@11.2.0
|
|
53
|
-
- @khanacademy/wonder-blocks-icon@5.2.5
|
|
54
|
-
- @khanacademy/wonder-blocks-styles@0.2.18
|
|
55
|
-
- @khanacademy/wonder-blocks-typography@4.2.7
|
|
56
|
-
|
|
57
|
-
## 0.1.5
|
|
58
|
-
|
|
59
|
-
### Patch Changes
|
|
60
|
-
|
|
61
|
-
- Updated dependencies [f26858a]
|
|
62
|
-
- @khanacademy/wonder-blocks-tokens@11.1.1
|
|
63
|
-
- @khanacademy/wonder-blocks-icon@5.2.4
|
|
64
|
-
- @khanacademy/wonder-blocks-styles@0.2.17
|
|
65
|
-
- @khanacademy/wonder-blocks-typography@4.2.6
|
|
66
|
-
|
|
67
|
-
## 0.1.4
|
|
68
|
-
|
|
69
|
-
### Patch Changes
|
|
70
|
-
|
|
71
|
-
- Updated dependencies [705ee01]
|
|
72
|
-
- @khanacademy/wonder-blocks-typography@4.2.5
|
|
73
|
-
|
|
74
|
-
## 0.1.3
|
|
75
|
-
|
|
76
|
-
### Patch Changes
|
|
77
|
-
|
|
78
|
-
- Updated dependencies [0f4f771]
|
|
79
|
-
- @khanacademy/wonder-blocks-tokens@11.1.0
|
|
80
|
-
- @khanacademy/wonder-blocks-icon@5.2.3
|
|
81
|
-
- @khanacademy/wonder-blocks-styles@0.2.16
|
|
82
|
-
- @khanacademy/wonder-blocks-typography@4.2.4
|
|
83
|
-
|
|
84
|
-
## 0.1.2
|
|
85
|
-
|
|
86
|
-
### Patch Changes
|
|
87
|
-
|
|
88
|
-
- cbf58b0: Updates badge components to use the new learning tokens
|
|
89
|
-
- Updated dependencies [1ac2ba7]
|
|
90
|
-
- Updated dependencies [0cb7a69]
|
|
91
|
-
- Updated dependencies [cbf58b0]
|
|
92
|
-
- Updated dependencies [cbf58b0]
|
|
93
|
-
- @khanacademy/wonder-blocks-tokens@11.0.0
|
|
94
|
-
- @khanacademy/wonder-blocks-icon@5.2.2
|
|
95
|
-
- @khanacademy/wonder-blocks-styles@0.2.15
|
|
96
|
-
- @khanacademy/wonder-blocks-typography@4.2.3
|
|
97
|
-
|
|
98
3
|
## 0.1.1
|
|
99
4
|
|
|
100
5
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -10,10 +10,10 @@ const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(pr
|
|
|
10
10
|
|
|
11
11
|
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}});
|
|
12
12
|
|
|
13
|
-
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.
|
|
13
|
+
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.core.background.gems.default,border:semanticColor.core.background.gems.default,foreground:semanticColor.core.foreground.gems.strong}}};const styles$2=StyleSheet.create({gemBadge:{backgroundColor:gemBadgeTokens.root.color.background,border:gemBadgeTokens.root.color.border,color:gemBadgeTokens.root.color.foreground}});
|
|
14
14
|
|
|
15
|
-
const StreakBadge=React.forwardRef((props,ref)=>{const{label,showIcon=false,iconAriaLabel,...otherProps}=props;return jsx(Badge,{...otherProps,label:label||"",icon:showIcon?jsx(Icon,{children:jsx(StreakIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$1.streakBadge,otherProps.styles?.root]}})});const streakBadgeTokens={root:{color:{background:semanticColor.
|
|
15
|
+
const StreakBadge=React.forwardRef((props,ref)=>{const{label,showIcon=false,iconAriaLabel,...otherProps}=props;return jsx(Badge,{...otherProps,label:label||"",icon:showIcon?jsx(Icon,{children:jsx(StreakIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$1.streakBadge,otherProps.styles?.root]}})});const streakBadgeTokens={root:{color:{background:semanticColor.core.background.streak.subtle,border:semanticColor.core.background.streak.subtle,foreground:semanticColor.core.foreground.streak.strong}}};const styles$1=StyleSheet.create({streakBadge:{backgroundColor:streakBadgeTokens.root.color.background,border:streakBadgeTokens.root.color.border,color:streakBadgeTokens.root.color.foreground}});
|
|
16
16
|
|
|
17
|
-
const DueBadge=React.forwardRef((props,ref)=>{const{...otherProps}=props;return jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[styles.dueBadge,otherProps.styles?.root],icon:[styles.dueIcon,otherProps.styles?.icon]}})});const dueBadgeTokens={root:{color:{background:semanticColor.
|
|
17
|
+
const DueBadge=React.forwardRef((props,ref)=>{const{...otherProps}=props;return jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[styles.dueBadge,otherProps.styles?.root],icon:[styles.dueIcon,otherProps.styles?.icon]}})});const dueBadgeTokens={root:{color:{background:semanticColor.core.background.due.subtle,border:semanticColor.core.background.due.subtle,foreground:semanticColor.core.foreground.due.strong}},icon:{color:{foreground:semanticColor.core.foreground.due.default}}};const styles=StyleSheet.create({dueBadge:{backgroundColor:dueBadgeTokens.root.color.background,borderColor:dueBadgeTokens.root.color.border,color:dueBadgeTokens.root.color.foreground},dueIcon:{color:dueBadgeTokens.icon.color.foreground}});
|
|
18
18
|
|
|
19
19
|
export { Badge, DueBadge, GemBadge, StatusBadge, StreakBadge };
|
package/dist/index.js
CHANGED
|
@@ -34,11 +34,11 @@ const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.
|
|
|
34
34
|
|
|
35
35
|
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}});
|
|
36
36
|
|
|
37
|
-
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.
|
|
37
|
+
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.core.background.gems.default,border:wonderBlocksTokens.semanticColor.core.background.gems.default,foreground:wonderBlocksTokens.semanticColor.core.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}});
|
|
38
38
|
|
|
39
|
-
const StreakBadge=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.StreakIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$1.streakBadge,otherProps.styles?.root]}})});const streakBadgeTokens={root:{color:{background:wonderBlocksTokens.semanticColor.
|
|
39
|
+
const StreakBadge=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.StreakIcon,{"aria-label":iconAriaLabel})}):undefined,ref:ref,styles:{...otherProps.styles,root:[styles$1.streakBadge,otherProps.styles?.root]}})});const streakBadgeTokens={root:{color:{background:wonderBlocksTokens.semanticColor.core.background.streak.subtle,border:wonderBlocksTokens.semanticColor.core.background.streak.subtle,foreground:wonderBlocksTokens.semanticColor.core.foreground.streak.strong}}};const styles$1=aphrodite.StyleSheet.create({streakBadge:{backgroundColor:streakBadgeTokens.root.color.background,border:streakBadgeTokens.root.color.border,color:streakBadgeTokens.root.color.foreground}});
|
|
40
40
|
|
|
41
|
-
const DueBadge=React__namespace.forwardRef((props,ref)=>{const{...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[styles.dueBadge,otherProps.styles?.root],icon:[styles.dueIcon,otherProps.styles?.icon]}})});const dueBadgeTokens={root:{color:{background:wonderBlocksTokens.semanticColor.
|
|
41
|
+
const DueBadge=React__namespace.forwardRef((props,ref)=>{const{...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,styles:{...otherProps.styles,root:[styles.dueBadge,otherProps.styles?.root],icon:[styles.dueIcon,otherProps.styles?.icon]}})});const dueBadgeTokens={root:{color:{background:wonderBlocksTokens.semanticColor.core.background.due.subtle,border:wonderBlocksTokens.semanticColor.core.background.due.subtle,foreground:wonderBlocksTokens.semanticColor.core.foreground.due.strong}},icon:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.due.default}}};const styles=aphrodite.StyleSheet.create({dueBadge:{backgroundColor:dueBadgeTokens.root.color.background,borderColor:dueBadgeTokens.root.color.border,color:dueBadgeTokens.root.color.foreground},dueIcon:{color:dueBadgeTokens.icon.color.foreground}});
|
|
42
42
|
|
|
43
43
|
exports.Badge = Badge;
|
|
44
44
|
exports.DueBadge = DueBadge;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-badge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.1",
|
|
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": "
|
|
17
|
-
"@khanacademy/wonder-blocks-styles": "0.
|
|
18
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
19
|
-
"@khanacademy/wonder-blocks-typography": "
|
|
16
|
+
"@khanacademy/wonder-blocks-icon": "5.2.1",
|
|
17
|
+
"@khanacademy/wonder-blocks-styles": "0.2.14",
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "10.6.0",
|
|
19
|
+
"@khanacademy/wonder-blocks-typography": "4.2.2"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"aphrodite": "^1.2.5",
|