@khanacademy/wonder-blocks-badge 1.0.12 → 1.1.0
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 +27 -0
- package/dist/components/badge.d.ts +7 -1
- package/dist/components/neutral-badge.d.ts +17 -0
- package/dist/components/status-badge.d.ts +4 -0
- package/dist/es/index.js +8 -6
- package/dist/index.d.ts +1 -0
- package/dist/index.js +8 -5
- package/package.json +19 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-badge
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 284c969: Add `showBorder` prop (defaults to true) to Badge and StatusBadge components
|
|
8
|
+
- 272bf31: Add NeutralBadge component
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies [272bf31]
|
|
13
|
+
- @khanacademy/wonder-blocks-tokens@14.1.0
|
|
14
|
+
- @khanacademy/wonder-blocks-icon@5.3.2
|
|
15
|
+
- @khanacademy/wonder-blocks-styles@0.2.34
|
|
16
|
+
- @khanacademy/wonder-blocks-typography@4.2.24
|
|
17
|
+
|
|
18
|
+
## 1.0.13
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- 6d5c485: Include provenance information when publishing to npmjs
|
|
23
|
+
- Updated dependencies [6d5c485]
|
|
24
|
+
- @khanacademy/wonder-blocks-core@12.4.1
|
|
25
|
+
- @khanacademy/wonder-blocks-icon@5.3.1
|
|
26
|
+
- @khanacademy/wonder-blocks-styles@0.2.33
|
|
27
|
+
- @khanacademy/wonder-blocks-tokens@14.0.1
|
|
28
|
+
- @khanacademy/wonder-blocks-typography@4.2.23
|
|
29
|
+
|
|
3
30
|
## 1.0.12
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { BaseBadgeProps, IconLabelProps } from "../types";
|
|
3
|
-
type
|
|
3
|
+
type BadgeProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Whether to show the border. Defaults to `true`.
|
|
6
|
+
*/
|
|
7
|
+
showBorder?: boolean;
|
|
8
|
+
};
|
|
9
|
+
type Props = IconLabelProps & BaseBadgeProps & BadgeProps;
|
|
4
10
|
/**
|
|
5
11
|
* Badges are visual indicators used to display concise information, such as
|
|
6
12
|
* a status, label, or count.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { BaseBadgeProps, IconLabelProps } from "../types";
|
|
3
|
+
type Props = {
|
|
4
|
+
/**
|
|
5
|
+
* Whether to show the border. Defaults to `true`.
|
|
6
|
+
*/
|
|
7
|
+
showBorder?: boolean;
|
|
8
|
+
} & BaseBadgeProps & IconLabelProps;
|
|
9
|
+
/**
|
|
10
|
+
* A badge that represents information without conveying additional meaning
|
|
11
|
+
* through its visual presentation
|
|
12
|
+
*
|
|
13
|
+
* `NeutralBadge` uses the `Badge` component and applies the appropriate styles
|
|
14
|
+
* for the neutral styling. For more details, see the `Badge` docs.
|
|
15
|
+
*/
|
|
16
|
+
declare const NeutralBadge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
export { NeutralBadge };
|
|
@@ -5,6 +5,10 @@ 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;
|
|
8
12
|
} & BaseBadgeProps & IconLabelProps;
|
|
9
13
|
/**
|
|
10
14
|
* A badge that represents a status.
|
package/dist/es/index.js
CHANGED
|
@@ -8,14 +8,16 @@ 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$
|
|
11
|
+
const StyledSpan=addStyle("span");const Badge=React.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",showBorder=true,...otherProps}=props;const StyledTag=React.useMemo(()=>addStyle(tag,styles$5.default),[tag]);if(!label&&!icon){return jsx(React.Fragment,{})}return jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$5.badge,styles$5.badgeTypography,styles$5.defaultBadgeStyling,icon&&!label?styles$5.iconOnly:{},stylesProp?.root,!showBorder&&styles$5.transparentBorder],...otherProps,children:[icon&&jsx(StyledSpan,{style:[styles$5.icon,styles$5.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsx(StyledSpan,{style:[styles$5.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$5=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},transparentBorder:{borderColor:semanticColor.core.transparent}});
|
|
12
12
|
|
|
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$
|
|
13
|
+
const StatusBadge=React.forwardRef((props,ref)=>{const{kind="info",showBorder,...otherProps}=props;return jsx(Badge,{ref:ref,showBorder:showBorder,...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$4.info;case"success":return styles$4.success;case"warning":return styles$4.warning;case"critical":return styles$4.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$4.infoIcon;case"success":return styles$4.successIcon;case"warning":return styles$4.warningIcon;case"critical":return styles$4.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$4=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
|
-
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$
|
|
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$3.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$3=StyleSheet.create({gemBadge:{backgroundColor:gemBadgeTokens.root.color.background,border:gemBadgeTokens.root.color.border,color:gemBadgeTokens.root.color.foreground}});
|
|
16
16
|
|
|
17
|
-
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$
|
|
17
|
+
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$2.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$2=StyleSheet.create({streakBadge:{backgroundColor:streakBadgeTokens.root.color.background,border:streakBadgeTokens.root.color.border,color:streakBadgeTokens.root.color.foreground}});
|
|
18
18
|
|
|
19
|
-
const DueBadge=React.forwardRef((props,ref)=>{const{kind="due",showIcon=false,label,iconAriaLabel,...otherProps}=props;let icon;switch(kind){case"due":icon=DateIcon;break;case"overdue":icon=WarningCircle;break}return jsx(Badge,{ref:ref,...otherProps,label:label||"",icon:showIcon?jsx(PhosphorIcon,{icon:icon,"aria-label":iconAriaLabel}):undefined,styles:{...otherProps.styles,root:[kind==="due"&&styles.dueBadge,kind==="overdue"&&styles.overdueBadge,otherProps.styles?.root],icon:[kind==="due"&&styles.dueIcon,kind==="overdue"&&styles.overdueIcon,otherProps.styles?.icon]}})});const styles=StyleSheet.create({dueBadge:{backgroundColor:semanticColor.learning.background.due.subtle,borderColor:semanticColor.learning.background.due.subtle,color:semanticColor.learning.foreground.due.strong},dueIcon:{color:semanticColor.learning.foreground.due.default},overdueBadge:{backgroundColor:semanticColor.core.background.critical.subtle,borderColor:semanticColor.core.background.critical.subtle,color:semanticColor.core.foreground.critical.strong},overdueIcon:{color:semanticColor.core.foreground.critical.default}});
|
|
19
|
+
const DueBadge=React.forwardRef((props,ref)=>{const{kind="due",showIcon=false,label,iconAriaLabel,...otherProps}=props;let icon;switch(kind){case"due":icon=DateIcon;break;case"overdue":icon=WarningCircle;break}return jsx(Badge,{ref:ref,...otherProps,label:label||"",icon:showIcon?jsx(PhosphorIcon,{icon:icon,"aria-label":iconAriaLabel}):undefined,styles:{...otherProps.styles,root:[kind==="due"&&styles$1.dueBadge,kind==="overdue"&&styles$1.overdueBadge,otherProps.styles?.root],icon:[kind==="due"&&styles$1.dueIcon,kind==="overdue"&&styles$1.overdueIcon,otherProps.styles?.icon]}})});const styles$1=StyleSheet.create({dueBadge:{backgroundColor:semanticColor.learning.background.due.subtle,borderColor:semanticColor.learning.background.due.subtle,color:semanticColor.learning.foreground.due.strong},dueIcon:{color:semanticColor.learning.foreground.due.default},overdueBadge:{backgroundColor:semanticColor.core.background.critical.subtle,borderColor:semanticColor.core.background.critical.subtle,color:semanticColor.core.foreground.critical.strong},overdueIcon:{color:semanticColor.core.foreground.critical.default}});
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const NeutralBadge=React.forwardRef((props,ref)=>{const{showBorder,...otherProps}=props;return jsx(Badge,{ref:ref,showBorder:showBorder,...otherProps,styles:{...otherProps.styles,root:[styles.neutral,otherProps.styles?.root],icon:[styles.neutralIcon,otherProps.styles?.icon]}})});const styles=StyleSheet.create({neutral:{backgroundColor:semanticColor.feedback.neutral.subtle.background,color:semanticColor.feedback.neutral.subtle.text,borderColor:semanticColor.feedback.neutral.subtle.border},neutralIcon:{color:semanticColor.feedback.neutral.subtle.icon}});
|
|
22
|
+
|
|
23
|
+
export { Badge, DueBadge, GemBadge, NeutralBadge, StatusBadge, StreakBadge };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export { StatusBadge } from "./components/status-badge";
|
|
|
3
3
|
export { GemBadge } from "./components/gem-badge";
|
|
4
4
|
export { StreakBadge } from "./components/streak-badge";
|
|
5
5
|
export { DueBadge } from "./components/due-badge";
|
|
6
|
+
export { NeutralBadge } from "./components/neutral-badge";
|
package/dist/index.js
CHANGED
|
@@ -36,18 +36,21 @@ 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$
|
|
39
|
+
const StyledSpan=wonderBlocksCore.addStyle("span");const Badge=React__namespace.forwardRef(function Badge(props,ref){const{icon,label,id,testId,styles:stylesProp,tag="div",showBorder=true,...otherProps}=props;const StyledTag=React__namespace.useMemo(()=>wonderBlocksCore.addStyle(tag,styles$5.default),[tag]);if(!label&&!icon){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledTag,{id:id,"data-testid":testId,ref:ref,style:[styles$5.badge,styles$5.badgeTypography,styles$5.defaultBadgeStyling,icon&&!label?styles$5.iconOnly:{},stylesProp?.root,!showBorder&&styles$5.transparentBorder],...otherProps,children:[icon&&jsxRuntime.jsx(StyledSpan,{style:[styles$5.icon,styles$5.defaultIconStyling,stylesProp?.icon],children:icon}),label&&jsxRuntime.jsx(StyledSpan,{style:[styles$5.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$5=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},transparentBorder:{borderColor:wonderBlocksTokens.semanticColor.core.transparent}});
|
|
40
40
|
|
|
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$
|
|
41
|
+
const StatusBadge=React__namespace.forwardRef((props,ref)=>{const{kind="info",showBorder,...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,showBorder:showBorder,...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$4.info;case"success":return styles$4.success;case"warning":return styles$4.warning;case"critical":return styles$4.critical;default:return {}}}function getIconKindStyle(kind){switch(kind){case"info":return styles$4.infoIcon;case"success":return styles$4.successIcon;case"warning":return styles$4.warningIcon;case"critical":return styles$4.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$4=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
|
-
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$
|
|
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$3.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$3=aphrodite.StyleSheet.create({gemBadge:{backgroundColor:gemBadgeTokens.root.color.background,border:gemBadgeTokens.root.color.border,color:gemBadgeTokens.root.color.foreground}});
|
|
44
44
|
|
|
45
|
-
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$
|
|
45
|
+
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$2.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$2=aphrodite.StyleSheet.create({streakBadge:{backgroundColor:streakBadgeTokens.root.color.background,border:streakBadgeTokens.root.color.border,color:streakBadgeTokens.root.color.foreground}});
|
|
46
46
|
|
|
47
|
-
const DueBadge=React__namespace.forwardRef((props,ref)=>{const{kind="due",showIcon=false,label,iconAriaLabel,...otherProps}=props;let icon;switch(kind){case"due":icon=DateIcon__default["default"];break;case"overdue":icon=WarningCircle__default["default"];break}return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,label:label||"",icon:showIcon?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon,"aria-label":iconAriaLabel}):undefined,styles:{...otherProps.styles,root:[kind==="due"&&styles.dueBadge,kind==="overdue"&&styles.overdueBadge,otherProps.styles?.root],icon:[kind==="due"&&styles.dueIcon,kind==="overdue"&&styles.overdueIcon,otherProps.styles?.icon]}})});const styles=aphrodite.StyleSheet.create({dueBadge:{backgroundColor:wonderBlocksTokens.semanticColor.learning.background.due.subtle,borderColor:wonderBlocksTokens.semanticColor.learning.background.due.subtle,color:wonderBlocksTokens.semanticColor.learning.foreground.due.strong},dueIcon:{color:wonderBlocksTokens.semanticColor.learning.foreground.due.default},overdueBadge:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.critical.subtle,borderColor:wonderBlocksTokens.semanticColor.core.background.critical.subtle,color:wonderBlocksTokens.semanticColor.core.foreground.critical.strong},overdueIcon:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default}});
|
|
47
|
+
const DueBadge=React__namespace.forwardRef((props,ref)=>{const{kind="due",showIcon=false,label,iconAriaLabel,...otherProps}=props;let icon;switch(kind){case"due":icon=DateIcon__default["default"];break;case"overdue":icon=WarningCircle__default["default"];break}return jsxRuntime.jsx(Badge,{ref:ref,...otherProps,label:label||"",icon:showIcon?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:icon,"aria-label":iconAriaLabel}):undefined,styles:{...otherProps.styles,root:[kind==="due"&&styles$1.dueBadge,kind==="overdue"&&styles$1.overdueBadge,otherProps.styles?.root],icon:[kind==="due"&&styles$1.dueIcon,kind==="overdue"&&styles$1.overdueIcon,otherProps.styles?.icon]}})});const styles$1=aphrodite.StyleSheet.create({dueBadge:{backgroundColor:wonderBlocksTokens.semanticColor.learning.background.due.subtle,borderColor:wonderBlocksTokens.semanticColor.learning.background.due.subtle,color:wonderBlocksTokens.semanticColor.learning.foreground.due.strong},dueIcon:{color:wonderBlocksTokens.semanticColor.learning.foreground.due.default},overdueBadge:{backgroundColor:wonderBlocksTokens.semanticColor.core.background.critical.subtle,borderColor:wonderBlocksTokens.semanticColor.core.background.critical.subtle,color:wonderBlocksTokens.semanticColor.core.foreground.critical.strong},overdueIcon:{color:wonderBlocksTokens.semanticColor.core.foreground.critical.default}});
|
|
48
|
+
|
|
49
|
+
const NeutralBadge=React__namespace.forwardRef((props,ref)=>{const{showBorder,...otherProps}=props;return jsxRuntime.jsx(Badge,{ref:ref,showBorder:showBorder,...otherProps,styles:{...otherProps.styles,root:[styles.neutral,otherProps.styles?.root],icon:[styles.neutralIcon,otherProps.styles?.icon]}})});const styles=aphrodite.StyleSheet.create({neutral:{backgroundColor:wonderBlocksTokens.semanticColor.feedback.neutral.subtle.background,color:wonderBlocksTokens.semanticColor.feedback.neutral.subtle.text,borderColor:wonderBlocksTokens.semanticColor.feedback.neutral.subtle.border},neutralIcon:{color:wonderBlocksTokens.semanticColor.feedback.neutral.subtle.icon}});
|
|
48
50
|
|
|
49
51
|
exports.Badge = Badge;
|
|
50
52
|
exports.DueBadge = DueBadge;
|
|
51
53
|
exports.GemBadge = GemBadge;
|
|
54
|
+
exports.NeutralBadge = NeutralBadge;
|
|
52
55
|
exports.StatusBadge = StatusBadge;
|
|
53
56
|
exports.StreakBadge = StreakBadge;
|
package/package.json
CHANGED
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-badge",
|
|
3
|
-
"version": "1.0.12",
|
|
4
|
-
"design": "v1",
|
|
5
3
|
"description": "Badges are used to display information",
|
|
6
|
-
"
|
|
7
|
-
"module": "dist/es/index.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"author": "",
|
|
4
|
+
"author": "Khan Academy",
|
|
10
5
|
"license": "MIT",
|
|
6
|
+
"version": "1.1.0",
|
|
11
7
|
"publishConfig": {
|
|
12
8
|
"access": "public"
|
|
13
9
|
},
|
|
10
|
+
"design": "v1",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/Khan/wonder-blocks.git",
|
|
14
|
+
"directory": "packages/wonder-blocks-badge"
|
|
15
|
+
},
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/Khan/wonder-blocks/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "dist/index.js",
|
|
20
|
+
"module": "dist/es/index.js",
|
|
21
|
+
"types": "dist/index.d.ts",
|
|
14
22
|
"dependencies": {
|
|
15
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
16
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
17
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
18
|
-
"@khanacademy/wonder-blocks-tokens": "14.
|
|
19
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
23
|
+
"@khanacademy/wonder-blocks-core": "12.4.1",
|
|
24
|
+
"@khanacademy/wonder-blocks-icon": "5.3.2",
|
|
25
|
+
"@khanacademy/wonder-blocks-styles": "0.2.34",
|
|
26
|
+
"@khanacademy/wonder-blocks-tokens": "14.1.0",
|
|
27
|
+
"@khanacademy/wonder-blocks-typography": "4.2.24"
|
|
20
28
|
},
|
|
21
29
|
"peerDependencies": {
|
|
22
30
|
"@phosphor-icons/core": "^2.0.2",
|