diff --git a/.changeset/bright-steaks-rhyme.md b/.changeset/bright-steaks-rhyme.md new file mode 100644 index 0000000000..5295217072 --- /dev/null +++ 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 \ No newline at end of file diff --git a/.changeset/soft-files-film.md b/.changeset/soft-files-film.md new file mode 100644 index 0000000000..c037bb92c5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..dbda643a57 Binary files /dev/null and b/.storybook/static/card/marketing1.png differ diff --git a/packages/paste-core/components/badge/src/constants.ts b/packages/paste-core/components/badge/src/constants.ts index b7f464ad1a..33f6678e8e 100644 --- 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 index 47b8e77c3e..b6b86cce76 100644 --- 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 index 75e6d07084..f80b8b01a2 100644 --- 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 => ( Decorative40 + + Brand10 + + + Brand20 + + + Brand30 + 1 @@ -99,6 +111,15 @@ export const SmallBadges = (): JSX.Element => ( Decorative40 + + Brand10 + + + Brand20 + + + Brand30 + 1 @@ -646,6 +667,164 @@ export const Decorative40Badge = (): JSX.Element => ( ); +export const Brand10Badge = (): JSX.Element => ( + <> + + Span + + + + Brand 10 + + + + Brand 10 + + + Brand 10 + + + + + Anchor + + + + Brand 10 + + + + Brand 10 + + + Brand 10 + + + + + Button + + + {}} variant="brand10"> + Brand 10 + + {}} variant="brand10"> + + Brand 10 + + {}} variant="brand10"> + Brand 10 + + + + +); + +export const Brand20Badge = (): JSX.Element => ( + <> + + Span + + + + Brand 20 + + + + Brand 20 + + + Brand 20 + + + + + Anchor + + + + Brand 20 + + + + Brand 20 + + + Brand 20 + + + + + Button + + + {}} variant="brand20"> + Brand 20 + + {}} variant="brand20"> + + Brand 20 + + {}} variant="brand20"> + Brand 20 + + + + +); +export const Brand30Badge = (): JSX.Element => ( + <> + + Span + + + + Brand 30 + + + + Brand 30 + + + Brand 30 + + + + + Anchor + + + + Brand 30 + + + + Brand 30 + + + Brand 30 + + + + + Button + + + {}} variant="brand30"> + Brand 30 + + {}} variant="brand30"> + + Brand 30 + + {}} variant="brand30"> + Brand 30 + + + + +); + export const NeutralCounterBadge = (): JSX.Element => ( <> diff --git a/packages/paste-core/components/badge/type-docs.json b/packages/paste-core/components/badge/type-docs.json index 8539d9fe40..536d21d30a 100644 --- 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 index 18b40041d8..7576cf2dad 100644 --- 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 index 6fff42fcc2..5ae2526435 100644 --- 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 index cc96df5a0a..af0a2c2947 100644 --- 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 index c1e5717671..8c98e8d5df 100644 --- 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 index add379a84e..05a59065a0 100644 --- 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, diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap index 6145825d31..83fd383d54 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -153,6 +153,9 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\", + \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", + \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #1f304c\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -164,16 +167,19 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #0d3a1f\\", \\"shadow-border-primary-strong\\": \\"0 0 0 1px #99cdff\\", + \\"shadow-border-brand-30\\": \\"mint\\", \\"shadow-border-primary-weak\\": \\"0 0 0 1px #394762\\", \\"shadow-focus-shadow-border\\": \\"0 0 0 4px #606b85, 0 0 0 1px #606b85\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\", + \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\", \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border\\": \\"0 0 0 1px #606b85\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\", + \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", @@ -577,6 +583,9 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", + \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", + \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -588,16 +597,19 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #d1fae0\\", \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\", + \\"shadow-border-brand-30\\": \\"mint\\", \\"shadow-border-primary-weak\\": \\"0 0 0 1px #99cdff\\", \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\", \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", + \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", @@ -1001,6 +1013,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", + \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", + \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1012,16 +1027,19 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #d1fae0\\", \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\", + \\"shadow-border-brand-30\\": \\"mint\\", \\"shadow-border-primary-weak\\": \\"0 0 0 1px #99cdff\\", \\"shadow-focus-shadow-border\\": \\"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #e7dcfa\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\", \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\", + \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", @@ -1425,6 +1443,9 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #ebf4ff\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\", + \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", + \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8891aa\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1436,16 +1457,19 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-primary-strong\\": \\"0 0 0 1px #99cdff\\", + \\"shadow-border-brand-30\\": \\"mint\\", \\"shadow-border-primary-weak\\": \\"0 0 0 1px #043cb5\\", \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #5817bd\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #394762\\", + \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #ebf4ff\\", \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border\\": \\"0 0 0 1px #606b85\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #1f304c\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\", @@ -1849,6 +1873,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\", \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\", \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\", + \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\", + \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\", + \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\", \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\", \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #aeb2c1\\", \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\", @@ -1860,16 +1887,19 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"shadow-border-top-primary\\": \\"0px -1px 0 #006dfa\\", \\"shadow-border-bottom-decorative-30-weaker\\": \\"0 1px 0 #7beaa5\\", \\"shadow-border-primary-strong\\": \\"0 0 0 1px #001489\\", + \\"shadow-border-brand-30\\": \\"mint\\", \\"shadow-border-primary-weak\\": \\"0 0 0 1px #99cdff\\", \\"shadow-focus-shadow-border\\": \\"0 0 0 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff\\", \\"shadow-border-bottom-decorative-40-weaker\\": \\"0 1px 0 #c8aff0\\", \\"shadow-border-destructive-weak\\": \\"0 0 0 1px #f6b1b1\\", + \\"shadow-border-brand-20\\": \\"sky\\", \\"shadow-border-top-primary-strongest\\": \\"0px -1px 0 #030b5d\\", \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\", \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border\\": \\"0 0 0 1px #8891aa\\", \\"shadow-border-right-inverse-strong\\": \\"1px 0px #e1e3ea\\", \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\", + \\"shadow-border-brand-10\\": \\"saffron\\", \\"shadow-border-decorative-10-weaker\\": \\"0 0 0 1px #e1e3ea\\", \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\", \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\", diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml index ef89e5917c..48b1b3a3d0 100644 --- a/packages/paste-design-tokens/tokens/global/box-shadow.yml +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -122,6 +122,15 @@ props: shadow-border-decorative-40-weaker: value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}" comment: Weaker shadow border for decorative 40 + shadow-border-brand-10: + value: "saffron" + comment: Shadow border for brand 10 + shadow-border-brand-20: + value: "sky" + comment: Shadow border for brand 20 + shadow-border-brand-30: + value: "mint" + comment: Shadow border for brand 30 shadow-border-inverse-weakest: value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}" comment: Weakest shadow border on interactive elements on inverse backgrounds. @@ -194,6 +203,15 @@ props: shadow-border-bottom-decorative-40-weaker: value: "{!offset-0} 1px {!offset-0} {!palette-purple-20}" comment: Weaker bottom shadow border for decorative 40 + shadow-border-bottom-brand-10-strong: + value: "{!offset-0} 1px {!offset-0} {!palette-yellow-80}" + comment: Strong bottom shadow border for brand 10 + shadow-border-bottom-brand-20-strong: + value: "{!offset-0} 1px {!offset-0} {!palette-blue-70}" + comment: Strong bottom shadow border for brand 20 + shadow-border-bottom-brand-30-strong: + value: "{!offset-0} 1px {!offset-0} {!palette-green-70}" + comment: Strong bottom shadow border for brand 30 shadow-border-bottom-subaccount: value: "{!offset-0} 1px {!offset-0} {!palette-yellow-40}" comment: Bottom shadow border for subaccount badge diff --git a/packages/paste-website/public/images/card/Marketing2.tsx b/packages/paste-website/public/images/card/Marketing2.tsx new file mode 100644 index 0000000000..3a1cf5e04f --- /dev/null +++ b/packages/paste-website/public/images/card/Marketing2.tsx @@ -0,0 +1,205 @@ +export const Marketing2 = (): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/paste-website/public/images/card/Marketing3.tsx b/packages/paste-website/public/images/card/Marketing3.tsx new file mode 100644 index 0000000000..9680893e97 --- /dev/null +++ b/packages/paste-website/public/images/card/Marketing3.tsx @@ -0,0 +1,169 @@ +export const Marketing3 = (): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/paste-website/public/images/card/Marketing4.tsx b/packages/paste-website/public/images/card/Marketing4.tsx new file mode 100644 index 0000000000..b04d2713e8 --- /dev/null +++ b/packages/paste-website/public/images/card/Marketing4.tsx @@ -0,0 +1,249 @@ +export const Marketing4 = (): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/paste-website/src/assets/illustrations/AlertsAndNotifications.tsx b/packages/paste-website/src/assets/illustrations/AlertsAndNotifications.tsx new file mode 100644 index 0000000000..ccd914f0e0 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/AlertsAndNotifications.tsx @@ -0,0 +1,94 @@ +export const AlertsAndNotifications = (): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/paste-website/src/component-examples/BadgeExamples.ts b/packages/paste-website/src/component-examples/BadgeExamples.ts index 136c1c62ac..8f34f4f497 100644 --- a/packages/paste-website/src/component-examples/BadgeExamples.ts +++ b/packages/paste-website/src/component-examples/BadgeExamples.ts @@ -103,7 +103,6 @@ export const settingsAndProducts = `const SettingsAndProducts = () => { flexDirection="row" alignItems="flex-start" columnGap="space40" - minWidth="size100" > { - + SIP Trunking diff --git a/packages/paste-website/src/component-examples/CardExamples.ts b/packages/paste-website/src/component-examples/CardExamples.ts new file mode 100644 index 0000000000..c46a857d59 --- /dev/null +++ b/packages/paste-website/src/component-examples/CardExamples.ts @@ -0,0 +1,320 @@ +export const DefaultExample = `const CardExample = () => { + return ( + + + Parable of the Talents + + + Choose your leaders with wisdom and forethought. To be led by a coward is to be controlled by all that the + coward fears. To be led by a fool is to be led by the opportunists who control the fool. To be led by a thief is + to offer up your most precious treasures to be stolen. To be led by a liar is to ask to be lied to. To be led by + a tyrant is to sell yourself and those you love into slavery. + + + — + Octavia Butler + + + ); +}; + +render();`.trim(); + +export const AdjustingPaddingExample = `const CardExample = () => { + return ( + + + + + + + + + Alerts and notifications + + + Inform, engage, and drive customers to take action. Deliver reliable multichannel notifications through + Twilio. + + + + + + ); +}; + +render();`.trim(); + +export const TitleBodyButtonExample = `const CardExample = () => { + return ( + + + + The Transgender District + + + The mission of the Transgender District is to create an urban environment that fosters the rich history, + culture, legacy, and empowerment of transgender people and its deep roots in the southeastern Tenderloin + neighborhood. The transgender district aims to stabilize and economically empower the transgender community + through ownership of homes, businesses, historic and cultural sites, and safe community spaces. + + + + + + Inside Out + + + Inside Out empowers, educates, and advocates for LGBTQ+ of youth from the Pikes Peak Region in Southern + Colorado. Inside Out does this by creating safe spaces, support systems and teaching life skills to all youth + in the community and working to make the community safer and more accepting of gender and sexual orientation + diversity. + + + + + + The Audre Lorde Project + + + The Audre Lorde Project is a Lesbian, Gay, Bisexual, Two Spirit, Trans and Gender Non Conforming People of + Color center for community organizing, focusing on the New York City area. Through mobilization, education and + capacity-building, they work for community wellness and progressive social and economic justice. Committed to + struggling across differences, they seek to responsibly reflect, represent and serve their various + communities. + + + + + ); +}; + +render();`.trim(); + +export const MarketingOneExample = `const CardExample = () => { + return ( + + + + + + + + Transform your unstructured voice data into actionable insights + + Get accurate transcriptions, and use AI-powered language operators. + + + + + ); +}; + +render();`.trim(); + +export const MarketingTwoExample = `const CardExample = () => { + return ( + + + + + + + + Multi-channel user verification + + + Verify is a fully managed API for multichannel user verification. And it now includes guaranteed protection + from SMS pumping fraud with Fraud Guard. + + + + + + + + + ); +}; + +render();`.trim(); + +export const MarketingThreeExample = `const CardExample = () => { + return ( + + + + + + + + + + Twilio Segment CDP + + + + Know your customers personally with Twilio Segment + + + You can now use your Twilio credentials to log in and explore Segment, our customer data platform. Combine + data across the customer lifecycle into a single, golden profile with our CDP. + + + + + + ); +}; + +render();`.trim(); + +export const MarketingFourExample = `const CardExample = () => { + return ( + + + + + + + Turn your recordings into transcriptions + + + Next steps: Turn your voice recordings into transcripts and extra insights such as key phrases and compliance + issues with Voice Intelligence. + + + + + ); +}; + +render();`.trim(); + +export const PricingExample = `const CardExample = () => { + return ( + + + + Current plan + + + + + + + + Free + + + $0 / month + + + + + + + + + 10 seats + + + + + + 3 sources + + + + + + 1 warehouse destination + + + + + + 10,000 MTU + + + + + + + + + Exclusively available to you + + + + + + + + + + + Twilio Developer + + + $0 / month + + + + + + + + + 10 seats + + + + + + 3 sources + + + + + + 1 warehouse destination + + + + + + 10,000 MTU + + + + + + + ); +}; + +render();`.trim(); diff --git a/packages/paste-website/src/pages/components/badge/index.mdx b/packages/paste-website/src/pages/components/badge/index.mdx index f514ba1d67..98ce1d893d 100644 --- a/packages/paste-website/src/pages/components/badge/index.mdx +++ b/packages/paste-website/src/pages/components/badge/index.mdx @@ -27,6 +27,9 @@ import {MMSCapableIcon} from '@twilio-paste/icons/esm/MMSCapableIcon'; import {VoiceCapableIcon} from '@twilio-paste/icons/esm/VoiceCapableIcon'; import {FaxCapableIcon} from '@twilio-paste/icons/esm/FaxCapableIcon'; import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon'; +import { ProductCommsIcon } from "@twilio-paste/icons/esm/ProductCommsIcon"; +import { ProductSendGridIcon } from "@twilio-paste/icons/esm/ProductSendGridIcon"; +import { ProductSegmentIcon } from "@twilio-paste/icons/esm/ProductSegmentIcon"; import {Grid, Column} from '@twilio-paste/grid'; import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@twilio-paste/tabs'; import {DisplayPill} from '@twilio-paste/display-pill-group'; @@ -109,6 +112,15 @@ export const getStaticProps = async () => { Decorative 40 + + Brand 10 + + + Brand 20 + + + Brand 30 + 1 @@ -279,6 +291,28 @@ but would benefit from the visual affordance of differently-colored Badges. Icon `.trim()} +### Brand + +Use the brand Badge for cross-selling opportunities across platforms (e.g., Segment, SendGrid, Communications, Flex) and pricing plans. Use these sparingly. + + + {` + + + Twilio CPaaS + + + + Twilio SendGrid + + + + Twilio Segment CDP + + +`.trim()} + + ### Counter Use the counter Badge should be used to visually highlight a count in a UI. diff --git a/packages/paste-website/src/pages/components/card/index.mdx b/packages/paste-website/src/pages/components/card/index.mdx index fb1094621c..2b3631f6b2 100644 --- a/packages/paste-website/src/pages/components/card/index.mdx +++ b/packages/paste-website/src/pages/components/card/index.mdx @@ -9,11 +9,13 @@ import Image from 'next/image'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; +import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {Card} from '@twilio-paste/card'; import {Heading} from '@twilio-paste/heading'; import {Text} from '@twilio-paste/text'; import {Paragraph} from '@twilio-paste/paragraph'; import {Stack} from '@twilio-paste/stack'; +import {Separator} from '@twilio-paste/separator' import Changelog from '@twilio-paste/card/CHANGELOG.md'; import {DoDont, Do, Dont} from '../../../components/DoDont'; @@ -25,6 +27,7 @@ import MultipleDont from '../../../assets/images/dont2-multiple-primary.png'; import packageJson from '@twilio-paste/card/package.json'; import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; +import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample, PricingExample} from '../../../component-examples/CardExamples' export default ComponentPageLayout; @@ -48,17 +51,12 @@ export const getStaticProps = async () => { }; }; - - {` - Parable of the Talents - - Choose your leaders with wisdom and forethought. To be led by a coward is to be controlled by all that the coward fears. To be led by a fool is to be led - by the opportunists who control the fool. To be led by a thief is to offer up your most precious treasures to be stolen. To be led by a liar is to ask to be - lied to. To be led by a tyrant is to sell yourself and those you love into slavery. - - — Octavia Butler -`} - + ## Guidelines @@ -81,79 +79,111 @@ to Design System Office Hours to see if another component or pattern could fit y ### Examples -#### Basic Card +#### Default Card -An example of a Card with default padding. +By default, a Card has `space100` padding, which can be adjusted with [padding props](/components/card/api#card) and [spacing tokens](/tokens/list#spacings). - - {` - Parable of the Talents - - Choose your leaders with wisdom and forethought. To be led by a coward is to be controlled by all that the coward fears. To be led by a fool is to be led - by the opportunists who control the fool. To be led by a thief is to offer up your most precious treasures to be stolen. To be led by a liar is to ask to be - lied to. To be led by a tyrant is to sell yourself and those you love into slavery. - - — Octavia Butler -`} - + + +#### Adjusting padding + +You can set non-default padding on all sides of a Card. + + #### Card with Title, Body and Button One of the most common use cases for a Card is to relate a title ([Heading](/components/heading)), supporting body copy ([Paragraph](/components/paragraph)), and primary action ([Button](/components/button)) together. Relating these three elements together with a Card makes it easy for a user to -digest and provides a clear call to action. Padding surrounding the inner content of a Card can be -adjusted to suit the needs of your implementation. - - - {` - - The Transgender District - - The mission of the Transgender District is to create an urban environment that fosters the rich history, culture, legacy, and empowerment of transgender - people and its deep roots in the southeastern Tenderloin neighborhood. The transgender district aims to stabilize and economically empower the transgender - community through ownership of homes, businesses, historic and cultural sites, and safe community spaces. - - - - - Inside Out - - Inside Out empowers, educates, and advocates for LGBTQ+ of youth from the Pikes Peak Region in Southern Colorado. Inside Out does this by creating safe spaces, - support systems and teaching life skills to all youth in the community and working to make the community safer and more accepting of gender and sexual orientation - diversity. - - - - - The Audre Lorde Project - - The Audre Lorde Project is a Lesbian, Gay, Bisexual, Two Spirit, Trans and Gender Non Conforming People of Color center for community organizing, focusing on - the New York City area. Through mobilization, education and capacity-building, they work for community wellness and progressive social and economic justice. Committed - to struggling across differences, they seek to responsibly reflect, represent and serve their various communities. - - - - `} - - -#### Card with Centered Content - -Your implementation use case may call for a Card with centered content. You can accommodate this by -using the alignment props available on some components, or by creating a custom layout inside your -Card using Box or Flex. - - - {` - - - We want a world where boys can feel, girls can lead, and the rest of us can not only exist but thrive. This is not - about erasing men and women but rather acknowledging that man and woman are two of many—stars in a constellation that - do not compete but amplify one another’s shine. - - — Alok Vaid-Menon - -;`} - +digest and provides a clear call to action. + + + +#### Marketing Card + +Use these layouts when you need to draw customers’ attention to upsell and cross-sell opportunities. Use them sparingly, mainly when they’ll help customers solve immediate problems. + + + Research insight on marketing and cross-selling + + Research from Twilio has shown that cross-sell cards aren’t useful when the developers are in the product focused on urgent problems. They’re likely to ignore these cards, regardless of how they’re presented, until they’re relevant to a current project they’re working on. + + + +To create a marketing Card, start by layering items from the top of this list. Add or remove items as you work your way down to create the right level of emphasis for your card: + +1. Place the content at the top of the page. +2. Add more padding than other text content or Cards around it. Start with `space-130` and size up in 8px increments from there. +3. Add an illustration. +4. If you’re cross-selling across platforms (e.g., Segment, SendGrid, Communications, Flex), add a [brand Badge](/components/badge#brand). + +Most marketing content in the product is a _suggestion_ to customers. As you layer items from the list, make sure you’re not distracting from their main goals on a page. A marketing Card should catch a customer’s attention but not at the expense of everything else in the flow. + +Don’t use everything in the list at once. If your marketing content is not the main content of a page, use 1-2 items. If it is the main content, use no more than 3 items. + +You might even find out that you don’t need to put your content in a Card. To emphasize the content without using Card, use [Box](/primitives/box) and `color-background-weak`. + +Examples that use more padding and illustrations: + + + + +An example that uses illustrations and a marketing Badge: + + + +An example that doesn't use Card at all: + + + +If these options don’t work for your use case and you need to create something custom, [request a creative review with the Brand team](https://library.twilio.com/guidelines/guide/9306890b-4bde-4210-bb35-2a566890e47a/page/db009ba3-57e3-4e04-bfe3-efc5d38860d1) and partner with them to make sure it aligns with Twilio’s brand guidelines. + +#### Pricing Cards + +Use this layout to show a group of Cards with pricing plans. Use a [brand Badge](/components/badge#brand) to highlight a “recommended” plan and [decorative Badges](/components/badge#decorative) for a customer’s current plan. + +The text layout in each Card is a suggestion. Adjust it as needed for your use case. + + ## Composition notes diff --git a/packages/paste-website/stories/Card.stories.tsx b/packages/paste-website/stories/Card.stories.tsx new file mode 100644 index 0000000000..3495f6be69 --- /dev/null +++ b/packages/paste-website/stories/Card.stories.tsx @@ -0,0 +1,365 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Avatar, AvatarGroup } from "@twilio-paste/avatar"; +import { Badge } from "@twilio-paste/badge"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { Card } from "@twilio-paste/card"; +import { Heading } from "@twilio-paste/heading"; +import { AcceptIcon } from "@twilio-paste/icons/esm/AcceptIcon"; +import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; +import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; +import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon"; +import { ProductSegmentIcon } from "@twilio-paste/icons/esm/ProductSegmentIcon"; +import { UserIcon } from "@twilio-paste/icons/esm/UserIcon"; +import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Separator } from "@twilio-paste/separator"; +import { Stack } from "@twilio-paste/stack"; +import * as React from "react"; + +import { Marketing2 } from "../public/images/card/Marketing2"; +import { Marketing3 } from "../public/images/card/Marketing3"; +import { Marketing4 } from "../public/images/card/Marketing4"; +import { AlertsAndNotifications } from "../src/assets/illustrations/AlertsAndNotifications"; + +export default { + title: "Website/CardExamples", +}; + +export const DefaultExample = (): JSX.Element => { + return ( + + + Parable of the Talents + + + Choose your leaders with wisdom and forethought. To be led by a coward is to be controlled by all that the + coward fears. To be led by a fool is to be led by the opportunists who control the fool. To be led by a thief is + to offer up your most precious treasures to be stolen. To be led by a liar is to ask to be lied to. To be led by + a tyrant is to sell yourself and those you love into slavery. + + + — + Octavia Butler + + + ); +}; + +DefaultExample.parameters = { + padding: false, +}; + +export const AdjustingPaddingExample = (): JSX.Element => { + return ( + + + + + + + + + Alerts and notifications + + + Inform, engage, and drive customers to take action. Deliver reliable multichannel notifications through + Twilio. + + + + + + ); +}; + +AdjustingPaddingExample.parameters = { + padding: false, +}; + +export const TitleBodyButtonExample = (): JSX.Element => { + return ( + + + + The Transgender District + + + The mission of the Transgender District is to create an urban environment that fosters the rich history, + culture, legacy, and empowerment of transgender people and its deep roots in the southeastern Tenderloin + neighborhood. The transgender district aims to stabilize and economically empower the transgender community + through ownership of homes, businesses, historic and cultural sites, and safe community spaces. + + + + + + Inside Out + + + Inside Out empowers, educates, and advocates for LGBTQ+ of youth from the Pikes Peak Region in Southern + Colorado. Inside Out does this by creating safe spaces, support systems and teaching life skills to all youth + in the community and working to make the community safer and more accepting of gender and sexual orientation + diversity. + + + + + + The Audre Lorde Project + + + The Audre Lorde Project is a Lesbian, Gay, Bisexual, Two Spirit, Trans and Gender Non Conforming People of + Color center for community organizing, focusing on the New York City area. Through mobilization, education and + capacity-building, they work for community wellness and progressive social and economic justice. Committed to + struggling across differences, they seek to responsibly reflect, represent and serve their various + communities. + + + + + ); +}; + +TitleBodyButtonExample.parameters = { + padding: false, +}; + +export const MarketingOneExample = (): JSX.Element => { + return ( + + + + + + + + Transform your unstructured voice data into actionable insights + + Get accurate transcriptions, and use AI-powered language operators. + + + + + ); +}; + +MarketingOneExample.parameters = { + padding: false, +}; + +export const MarketingTwoExample = (): JSX.Element => { + return ( + + + + + + + + Multi-channel user verification + + + Verify is a fully managed API for multichannel user verification. And it now includes guaranteed protection + from SMS pumping fraud with Fraud Guard. + + + + + + + + + ); +}; + +MarketingTwoExample.parameters = { + padding: false, +}; + +export const MarketingThreeExample = (): JSX.Element => { + return ( + + + + + + + + + + Twilio Segment CDP + + + + Know your customers personally with Twilio Segment + + + You can now use your Twilio credentials to log in and explore Segment, our customer data platform. Combine + data across the customer lifecycle into a single, golden profile with our CDP. + + + + + + ); +}; + +MarketingThreeExample.parameters = { + padding: false, +}; + +export const MarketingFourExample = (): JSX.Element => { + return ( + + + + + + + Turn your recordings into transcriptions + + + Next steps: Turn your voice recordings into transcripts and extra insights such as key phrases and compliance + issues with Voice Intelligence. + + + + + ); +}; + +MarketingFourExample.parameters = { + padding: false, +}; + +export const PricingExample = (): JSX.Element => { + return ( + + + + Current plan + + + + + + + + Free + + + $0 / month + + + + + + + + + 10 seats + + + + + + 3 sources + + + + + + 1 warehouse destination + + + + + + 10,000 MTU + + + + + + + + + Exclusively available to you + + + + + + + + + + + Twilio Developer + + + $0 / month + + + + + + + + + 10 seats + + + + + + 3 sources + + + + + + 1 warehouse destination + + + + + + 10,000 MTU + + + + + + + ); +}; + +PricingExample.parameters = { + padding: false, +};