feat(badge): add notification variant (#3993)

* feat(badge): notifications counter wip * chore(badge): update styling * feat(badge): use new design tokens for notification * feat(badge): changeset * feat(badge): typeocs * feat(badge): lint for variant naming * feat(docs/badge): add variant to docs page * feat(docs/badge): merged counter and notification counter * feat(docs/badge): added notifications in first example
twilio-labs · Jul 18, 2024 · 7ee9772 · 7ee9772
1 parent b04532d
commit 7ee9772
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 71 deletions.
diff --git a/.changeset/smooth-gorillas-care.md b/.changeset/smooth-gorillas-care.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/badge": minor
+"@twilio-paste/core": minor
+---
+
+[Badge] Added a new notification variant
diff --git a/.eslintrc.js b/.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

diff --git a/packages/paste-core/components/badge/src/constants.ts b/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;
diff --git a/packages/paste-core/components/badge/src/styles.ts b/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",

diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/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";
diff --git a/packages/paste-core/components/badge/type-docs.json b/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

diff --git a/packages/paste-core/components/menu/type-docs.json b/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

diff --git a/packages/paste-core/components/popover/type-docs.json b/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

diff --git a/packages/paste-core/components/side-panel/type-docs.json b/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