feat(badge): add notification variant

.changeset/smooth-gorillas-care.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/badge": minor
+"@twilio-paste/core": minor
+---
+
+[Badge] Added a new notification variant

.eslintrc.js

@@ -87,6 +87,7 @@ module.exports = {
           "icon_small",
           "error_counter",
           "neutral_counter",
+          "notification_counter",
           // unstable props are allowed
           "^unstable_",
           // this is a temporary prop, if the console patch is removed from components this can be removed too

packages/paste-core/components/badge/src/constants.ts

@@ -15,6 +15,7 @@ export const BadgeVariants = [
   "neutral_counter",
   "error_counter",
   "default",
+  "notification_counter",
   // the following variants are outdated but still supported to prevent breaking changes
   "info",
 ] as const;

packages/paste-core/components/badge/src/styles.ts

@@ -110,6 +110,12 @@ export const badgeVariantStyles: {
     color: "colorText",
     boxShadow: "shadowBorderWeaker",
   },
+  notification_counter: {
+    borderRadius: "borderRadiusPill",
+    backgroundColor: "colorBackgroundNotification",
+    color: "colorTextInverse",
+    boxShadow: "shadowBorderNotification",
+  },
   /*
    * the following variants are outdated but still supported to prevent breaking changes
    */
@@ -170,6 +176,9 @@ export const badgeButtonStyles: {
   error_counter: {
     boxShadow: "shadowBorderBottomErrorWeaker",
   },
+  notification_counter: {
+    boxShadow: "shadowBorderBottomNotificationStronger",
+  },
   // the following variants are outdated but still supported to prevent breaking changes
   default: {
     boxShadow: "shadowBorderBottomDecorative10Weaker",

packages/paste-core/components/badge/stories/index.stories.tsx

@@ -77,6 +77,9 @@ export const AllBadges = (): JSX.Element => (
     <Badge as="span" variant="error_counter">
       1
     </Badge>
+    <Badge as="span" variant="notification_counter">
+      100
+    </Badge>
   </Wrapper>
 );
 export const SmallBadges = (): JSX.Element => (
@@ -126,6 +129,9 @@ export const SmallBadges = (): JSX.Element => (
     <Badge as="span" size="small" variant="error_counter">
       1
     </Badge>
+    <Badge as="span" size="small" variant="notification_counter">
+      100
+    </Badge>
   </Wrapper>
 );
 
@@ -1031,3 +1037,52 @@ export const LongTextBadge = (): JSX.Element => (
     </Badge>
   </Wrapper>
 );
+
+export const NotificationCounterBadge = (): JSX.Element => (
+  <>
+    <Heading as="h2" variant="heading40">
+      Span
+    </Heading>
+    <Wrapper>
+      <Badge as="span" variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="span" variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="span" variant="notification_counter">
+        100
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Anchor
+    </Heading>
+    <Wrapper>
+      <Badge as="a" href="#" variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="a" href="#" variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="a" href="#" variant="notification_counter">
+        100
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Button
+    </Heading>
+    <Wrapper>
+      <Badge as="button" onClick={() => {}} variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="notification_counter">
+        100
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="notification_counter">
+        100
+      </Badge>
+    </Wrapper>
+  </>
+);
+
+NotificationCounterBadge.storyName = "Notification Counter Badge";

packages/paste-core/components/badge/type-docs.json

@@ -1,7 +1,7 @@
 {
   "BadgeBase": {
     "variant": {
-      "type": "| \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"default\"\n  | \"info\"",
+      "type": "| \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"default\"\n  | \"notification_counter\"\n  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false
@@ -29,7 +29,7 @@
       "description": "Underlying HTML element to render. Can be \"span\", \"button\", or \"a\"."
     },
     "variant": {
-      "type": "| \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"default\"\n  | \"info\"",
+      "type": "| \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"default\"\n  | \"notification_counter\"\n  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false

packages/paste-core/components/menu/type-docs.json

@@ -2477,7 +2477,7 @@
       "description": "Toggles the `visible` state"
     },
     "variant": {
-      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"info\"",
+      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"notification_counter\"\n  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false

packages/paste-core/components/popover/type-docs.json

@@ -3560,7 +3560,7 @@
   },
   "PopoverBadgeButton": {
     "variant": {
-      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"info\"",
+      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"notification_counter\"\n  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false

packages/paste-core/components/side-panel/type-docs.json

@@ -1712,7 +1712,7 @@
   },
   "SidePanelBadgeButton": {
     "variant": {
-      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"info\"",
+      "type": "| \"default\"\n  | \"neutral\"\n  | \"warning\"\n  | \"error\"\n  | \"success\"\n  | \"new\"\n  | \"subaccount\"\n  | \"decorative10\"\n  | \"decorative20\"\n  | \"decorative30\"\n  | \"decorative40\"\n  | \"brand10\"\n  | \"brand20\"\n  | \"brand30\"\n  | \"neutral_counter\"\n  | \"error_counter\"\n  | \"notification_counter\"\n  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false

packages/paste-website/src/pages/components/badge/index.mdx

@@ -315,9 +315,9 @@ Use the brand Badge for cross-selling opportunities across platforms (e.g., Segm
 
 ### Counter
 
-Use the counter Badge should be used to visually highlight a count in a UI.
-For example, the number of pending invitations or the number of errors.
-Counter Badges are limited to Neutral and Error variants, and the error variant should always include an error icon.
+Use the counter Badge to visually highlight a count in a UI, like the number of pending invitations or the number of errors.
+
+Counter Badges have neutral, error, and notification variants. The error variant should always include an error icon. The notification variant informs users of new or unread items, such as messages, notifications, or updates.
 
 <LivePreview scope={{Box, Badge, InformationIcon, ErrorIcon, WarningIcon, SuccessIcon, NewIcon}} language="jsx">
   {`<Box display="flex" columnGap="space80">
@@ -327,6 +327,9 @@ Counter Badges are limited to Neutral and Error variants, and the error variant
   <Badge as="span" variant="error_counter">
     100
   </Badge>
+    <Badge as="span" variant="notification_counter">
+    100
+  </Badge>
 </Box>
 `.trim()}
 </LivePreview>