@khanacademy/wonder-blocks-badge 0.1.1 → 0.1.2

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/es/index.js +3 -3
  3. package/dist/index.js +3 -3
  4. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @khanacademy/wonder-blocks-badge
2
2
 
3
+ ## 0.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - cbf58b0: Updates badge components to use the new learning tokens
8
+ - Updated dependencies [1ac2ba7]
9
+ - Updated dependencies [0cb7a69]
10
+ - Updated dependencies [cbf58b0]
11
+ - Updated dependencies [cbf58b0]
12
+ - @khanacademy/wonder-blocks-tokens@11.0.0
13
+ - @khanacademy/wonder-blocks-icon@5.2.2
14
+ - @khanacademy/wonder-blocks-styles@0.2.15
15
+ - @khanacademy/wonder-blocks-typography@4.2.3
16
+
3
17
  ## 0.1.1
4
18
 
5
19
  ### 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.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}});
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.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}});
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.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}});
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.learning.background.streaks.subtle,border:semanticColor.learning.background.streaks.subtle,foreground:semanticColor.learning.foreground.streaks.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.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}});
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.learning.background.due.subtle,border:semanticColor.learning.background.due.subtle,foreground:semanticColor.learning.foreground.due.strong}},icon:{color:{foreground:semanticColor.learning.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.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}});
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.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}});
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.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}});
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.learning.background.streaks.subtle,border:wonderBlocksTokens.semanticColor.learning.background.streaks.subtle,foreground:wonderBlocksTokens.semanticColor.learning.foreground.streaks.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.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}});
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.learning.background.due.subtle,border:wonderBlocksTokens.semanticColor.learning.background.due.subtle,foreground:wonderBlocksTokens.semanticColor.learning.foreground.due.strong}},icon:{color:{foreground:wonderBlocksTokens.semanticColor.learning.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.1.1",
3
+ "version": "0.1.2",
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": "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"
16
+ "@khanacademy/wonder-blocks-icon": "5.2.2",
17
+ "@khanacademy/wonder-blocks-styles": "0.2.15",
18
+ "@khanacademy/wonder-blocks-tokens": "11.0.0",
19
+ "@khanacademy/wonder-blocks-typography": "4.2.3"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "aphrodite": "^1.2.5",