feat: add brand badges (#3798)

twilio-labs · Mar 6, 2024 · dc599ce · dc599ce
1 parent 72027af
commit dc599ce
Show file tree

Hide file tree

Showing 23 changed files with 1,824 additions and 86 deletions.
diff --git a/.changeset/bright-steaks-rhyme.md b/.changeset/bright-steaks-rhyme.md
@@ -0,0 +1,13 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design tokens] add 6 new shadow border tokens for brand badges:
+
+- shadow-border-brand-10
+- shadow-border-brand-20
+- shadow-border-brand-30
+- shadow-border-bottom-brand-10-strong
+- shadow-border-bottom-brand-20-strong
+- shadow-border-bottom-brand-30-strong
diff --git a/.changeset/soft-files-film.md b/.changeset/soft-files-film.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/badge": minor
+"@twilio-paste/core": minor
+---
+
+[Badge] add 3 new badge variants: brand10, brand20, and brand30
diff --git a/.storybook/static/card/marketing1.png b/.storybook/static/card/marketing1.png
diff --git a/packages/paste-core/components/badge/src/constants.ts b/packages/paste-core/components/badge/src/constants.ts
@@ -9,6 +9,9 @@ export const BadgeVariants = [
   "decorative20",
   "decorative30",
   "decorative40",
+  "brand10",
+  "brand20",
+  "brand30",
   "neutral_counter",
   "error_counter",
   "default",

diff --git a/packages/paste-core/components/badge/src/styles.ts b/packages/paste-core/components/badge/src/styles.ts
@@ -78,6 +78,21 @@ export const badgeVariantStyles: {
     color: "colorTextDecorative40",
     boxShadow: "shadowBorderDecorative40Weaker",
   },
+  brand10: {
+    backgroundColor: "colorBackgroundBrand10",
+    color: "colorTextBrand",
+    boxShadow: "shadowBorderBrand10",
+  },
+  brand20: {
+    backgroundColor: "colorBackgroundBrand20",
+    color: "colorTextBrand",
+    boxShadow: "shadowBorderBrand20",
+  },
+  brand30: {
+    backgroundColor: "colorBackgroundBrand30",
+    color: "colorTextBrand",
+    boxShadow: "shadowBorderBrand30",
+  },
   neutral_counter: {
     backgroundColor: "colorBackgroundNeutralWeakest",
     color: "colorTextNeutral",
@@ -140,6 +155,15 @@ export const badgeButtonStyles: {
   decorative40: {
     boxShadow: "shadowBorderBottomDecorative40Weaker",
   },
+  brand10: {
+    boxShadow: "shadowBorderBottomBrand10Strong",
+  },
+  brand20: {
+    boxShadow: "shadowBorderBottomBrand20Strong",
+  },
+  brand30: {
+    boxShadow: "shadowBorderBottomBrand30Strong",
+  },
   neutral_counter: {
     boxShadow: "shadowBorderBottomNeutralWeaker",
   },

diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/packages/paste-core/components/badge/stories/index.stories.tsx
@@ -2,6 +2,9 @@ import { Heading } from "@twilio-paste/heading";
 import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon";
 import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
 import { NewIcon } from "@twilio-paste/icons/esm/NewIcon";
+import { ProductCommsIcon } from "@twilio-paste/icons/esm/ProductCommsIcon";
+import { ProductEmailAPIIcon } from "@twilio-paste/icons/esm/ProductEmailAPIIcon";
+import { ProductSegmentIcon } from "@twilio-paste/icons/esm/ProductSegmentIcon";
 import { SuccessIcon } from "@twilio-paste/icons/esm/SuccessIcon";
 import { UsersIcon } from "@twilio-paste/icons/esm/UsersIcon";
 import { WarningIcon } from "@twilio-paste/icons/esm/WarningIcon";
@@ -59,6 +62,15 @@ export const AllBadges = (): JSX.Element => (
     <Badge as="span" variant="decorative40">
       Decorative40
     </Badge>
+    <Badge as="span" variant="brand10">
+      Brand10
+    </Badge>
+    <Badge as="span" variant="brand20">
+      Brand20
+    </Badge>
+    <Badge as="span" variant="brand30">
+      Brand30
+    </Badge>
     <Badge as="span" variant="neutral_counter">
       1
     </Badge>
@@ -99,6 +111,15 @@ export const SmallBadges = (): JSX.Element => (
     <Badge as="span" size="small" variant="decorative40">
       Decorative40
     </Badge>
+    <Badge as="span" size="small" variant="brand10">
+      Brand10
+    </Badge>
+    <Badge as="span" size="small" variant="brand20">
+      Brand20
+    </Badge>
+    <Badge as="span" size="small" variant="brand30">
+      Brand30
+    </Badge>
     <Badge as="span" size="small" variant="neutral_counter">
       1
     </Badge>
@@ -646,6 +667,164 @@ export const Decorative40Badge = (): JSX.Element => (
   </>
 );
 
+export const Brand10Badge = (): JSX.Element => (
+  <>
+    <Heading as="h2" variant="heading40">
+      Span
+    </Heading>
+    <Wrapper>
+      <Badge as="span" variant="brand10">
+        Brand 10
+      </Badge>
+      <Badge as="span" variant="brand10">
+        <ProductCommsIcon decorative />
+        Brand 10
+      </Badge>
+      <Badge as="span" variant="brand10">
+        Brand 10
+        <ProductCommsIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Anchor
+    </Heading>
+    <Wrapper>
+      <Badge as="a" href="#" variant="brand10">
+        Brand 10
+      </Badge>
+      <Badge as="a" href="#" variant="brand10">
+        <ProductCommsIcon decorative />
+        Brand 10
+      </Badge>
+      <Badge as="a" href="#" variant="brand10">
+        Brand 10
+        <ProductCommsIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Button
+    </Heading>
+    <Wrapper>
+      <Badge as="button" onClick={() => {}} variant="brand10">
+        Brand 10
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand10">
+        <ProductCommsIcon decorative />
+        Brand 10
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand10">
+        Brand 10
+        <ProductCommsIcon decorative />
+      </Badge>
+    </Wrapper>
+  </>
+);
+
+export const Brand20Badge = (): JSX.Element => (
+  <>
+    <Heading as="h2" variant="heading40">
+      Span
+    </Heading>
+    <Wrapper>
+      <Badge as="span" variant="brand20">
+        Brand 20
+      </Badge>
+      <Badge as="span" variant="brand20">
+        <ProductEmailAPIIcon decorative />
+        Brand 20
+      </Badge>
+      <Badge as="span" variant="brand20">
+        Brand 20
+        <ProductEmailAPIIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Anchor
+    </Heading>
+    <Wrapper>
+      <Badge as="a" href="#" variant="brand20">
+        Brand 20
+      </Badge>
+      <Badge as="a" href="#" variant="brand20">
+        <ProductEmailAPIIcon decorative />
+        Brand 20
+      </Badge>
+      <Badge as="a" href="#" variant="brand20">
+        Brand 20
+        <ProductEmailAPIIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Button
+    </Heading>
+    <Wrapper>
+      <Badge as="button" onClick={() => {}} variant="brand20">
+        Brand 20
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand20">
+        <ProductEmailAPIIcon decorative />
+        Brand 20
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand20">
+        Brand 20
+        <ProductEmailAPIIcon decorative />
+      </Badge>
+    </Wrapper>
+  </>
+);
+export const Brand30Badge = (): JSX.Element => (
+  <>
+    <Heading as="h2" variant="heading40">
+      Span
+    </Heading>
+    <Wrapper>
+      <Badge as="span" variant="brand30">
+        Brand 30
+      </Badge>
+      <Badge as="span" variant="brand30">
+        <ProductSegmentIcon decorative />
+        Brand 30
+      </Badge>
+      <Badge as="span" variant="brand30">
+        Brand 30
+        <ProductSegmentIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Anchor
+    </Heading>
+    <Wrapper>
+      <Badge as="a" href="#" variant="brand30">
+        Brand 30
+      </Badge>
+      <Badge as="a" href="#" variant="brand30">
+        <ProductSegmentIcon decorative />
+        Brand 30
+      </Badge>
+      <Badge as="a" href="#" variant="brand30">
+        Brand 30
+        <ProductSegmentIcon decorative />
+      </Badge>
+    </Wrapper>
+    <Heading as="h2" variant="heading40">
+      Button
+    </Heading>
+    <Wrapper>
+      <Badge as="button" onClick={() => {}} variant="brand30">
+        Brand 30
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand30">
+        <ProductSegmentIcon decorative />
+        Brand 30
+      </Badge>
+      <Badge as="button" onClick={() => {}} variant="brand30">
+        Brand 30
+        <ProductSegmentIcon decorative />
+      </Badge>
+    </Wrapper>
+  </>
+);
+
 export const NeutralCounterBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">

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  | \"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  | \"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  | \"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  | \"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
@@ -2476,7 +2476,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  | \"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  | \"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
@@ -3559,7 +3559,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  | \"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  | \"info\"",
       "defaultValue": "null",
       "required": true,
       "externalProp": false

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomDecorative10Weaker\" | \"shadowBorderBottomDecorative20Weaker\" | \"shadowBorderBottomDecorative30Weaker\" | \"shadowBorderBottomDecorative40Weaker\" | ... 59 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,