@khanacademy/wonder-blocks-badge 0.1.9 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-badge
 
+## 1.0.0
+
+### Major Changes
+
+- 15c999d: DueBadge: Adds new `kind` prop which can be `due` (default) or `overdue`. The `icon` prop has become a `showIcon` prop now since the icon is provided by the component now. A new `iconAriaLabel` prop is supported now too
+
+## 0.1.10
+
+### Patch Changes
+
+- Updated dependencies [7cd0ebf]
+- Updated dependencies [51b6e69]
+- Updated dependencies [51b6e69]
+    - @khanacademy/wonder-blocks-tokens@11.3.1
+    - @khanacademy/wonder-blocks-icon@5.2.9
+    - @khanacademy/wonder-blocks-styles@0.2.22
+    - @khanacademy/wonder-blocks-typography@4.2.11
+
 ## 0.1.9
 
 ### Patch Changes

package/dist/components/due-badge.d.ts

@@ -1,11 +1,22 @@
 import * as React from "react";
-import { BaseBadgeProps, IconLabelProps } from "../types";
-type Props = BaseBadgeProps & IconLabelProps;
+import { BaseBadgeProps, ShowIconProps } from "../types";
+type Props = BaseBadgeProps & ShowIconProps & {
+    /**
+     * The kind of due badge. Defaults to `due`.
+     */
+    kind?: "due" | "overdue";
+};
 /**
  * A badge that communicates when a task is due.
  *
  * `DueBadge` uses the `Badge` component and applies the appropriate styles
- * for the status kinds. For more details, see the `Badge` docs.
+ * for the kinds.
+ *
+ * Note: The `iconAriaLabel` prop can be used to set an `aria-label` on the icon
+ * if `showIcon` is `true`. This is helpful for providing context to screen
+ * readers about what the badge is communicating.
+ *
+ * For more details, see the `Badge` docs.
  */
 declare const DueBadge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export { DueBadge };

package/dist/es/index.js

@@ -4,7 +4,9 @@ import { sizing, border, semanticColor, font } from '@khanacademy/wonder-blocks-
 import { StyleSheet } from 'aphrodite';
 import * as React from 'react';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
-import { Icon, GemIcon, StreakIcon } from '@khanacademy/wonder-blocks-icon';
+import { Icon, GemIcon, StreakIcon, PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
+import DateIcon from '@phosphor-icons/core/bold/calendar-blank-bold.svg';
+import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
 
 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}});
 
@@ -14,6 +16,6 @@ const GemBadge=React.forwardRef((props,ref)=>{const{label,showIcon=false,iconAri
 
 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}});
 
-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}});
+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}});
 
 export { Badge, DueBadge, GemBadge, StatusBadge, StreakBadge };

package/dist/index.js

@@ -9,6 +9,10 @@ var aphrodite = require('aphrodite');
 var React = require('react');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
+var DateIcon = require('@phosphor-icons/core/bold/calendar-blank-bold.svg');
+var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -29,6 +33,8 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var DateIcon__default = /*#__PURE__*/_interopDefaultLegacy(DateIcon);
+var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
 
 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}});
 
@@ -38,7 +44,7 @@ const GemBadge=React__namespace.forwardRef((props,ref)=>{const{label,showIcon=fa
 
 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}});
 
-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}});
+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}});
 
 exports.Badge = Badge;
 exports.DueBadge = DueBadge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-badge",
-  "version": "0.1.9",
+  "version": "1.0.0",
   "design": "v1",
   "description": "Badges are used to display information",
   "main": "dist/index.js",
@@ -13,12 +13,13 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.8",
-    "@khanacademy/wonder-blocks-styles": "0.2.21",
-    "@khanacademy/wonder-blocks-tokens": "11.3.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.10"
+    "@khanacademy/wonder-blocks-icon": "5.2.9",
+    "@khanacademy/wonder-blocks-styles": "0.2.22",
+    "@khanacademy/wonder-blocks-tokens": "11.3.1",
+    "@khanacademy/wonder-blocks-typography": "4.2.11"
   },
   "peerDependencies": {
+    "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
     "react": "18.2.0"
   },