Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add brand badges #3798

Merged
merged 9 commits into from Mar 6, 2024
Merged

feat: add brand badges #3798

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d901b14
feat(design-tokens): add new brand shadow tokens
nkrantz Feb 28, 2024
c7ce54e
feat(badge): add brand variants
nkrantz Feb 28, 2024
9d2ccbe
docs(badge): add brand badges to docs
nkrantz Feb 28, 2024
cb231ff
docs(card): add marketing card guidance
nkrantz Feb 28, 2024
35c4005
chore: finish card docs content
nkrantz Mar 5, 2024
b2e3f28
chore: add images and touch up card docs
nkrantz Mar 5, 2024
ecfa2e2
chore: fix images
nkrantz Mar 5, 2024
6a5baef
chore: sarah pr feedback
nkrantz Mar 6, 2024
f9b1149
chore: fix typo and replace png
nkrantz Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions .changeset/bright-steaks-rhyme.md
View file
Open in desktop
@@ -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
6 changes: 6 additions & 0 deletions .changeset/soft-files-film.md
View file
Open in desktop
@@ -0,0 +1,6 @@
---
"@twilio-paste/badge": minor
"@twilio-paste/core": minor
---

[Badge] add 3 new badge variants: brand10, brand20, and brand30
Binary file added .storybook/static/card/marketing1.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/card/marketing2.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/paste-core/components/badge/src/constants.ts
View file
Open in desktop
Expand Up @@ -9,6 +9,9 @@ export const BadgeVariants = [
"decorative20",
"decorative30",
"decorative40",
"brand10",
"brand20",
"brand30",
"neutral_counter",
"error_counter",
"default",
Expand Down
24 changes: 24 additions & 0 deletions packages/paste-core/components/badge/src/styles.ts
View file
Open in desktop
Expand Up @@ -78,6 +78,21 @@ export const badgeVariantStyles: {
color: "colorTextDecorative40",
boxShadow: "shadowBorderDecorative40Weaker",
},
brand10: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Why are using brand10/20/30 instead of brandTwilio/Segment/Sendgrid? I don't think we will ever have brands in between Twilio and SendGrid, so we don't need the 10gap to fill in missed values. Each brand is unique and probably doesn't need to be guessable, since they are known entities.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another thought:

image
This may be more clear as brandConsole/Segment/SendGrid so people don't just use them as new color options, but instead as semantically necessary to illustrate a brand color. It would be unideal if they were used a brand colors and Console made heavy use of Segment's brand color.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @serifluous

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The brand team wants to move away from having brand colors map to specific products, which makes sense since Email is going to be moved into Console soon. The brand10/20/30 naming makes it a little more flexible to whatever happens when the products are more unified.

See this example on twilio.com. Blue is used for Flex:
Screenshot 2024-03-06 at 9 25 37 AM

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",
Expand Down Expand Up @@ -140,6 +155,15 @@ export const badgeButtonStyles: {
decorative40: {
boxShadow: "shadowBorderBottomDecorative40Weaker",
},
brand10: {
boxShadow: "shadowBorderBottomBrand10Strong",
},
brand20: {
boxShadow: "shadowBorderBottomBrand20Strong",
},
brand30: {
boxShadow: "shadowBorderBottomBrand30Strong",
},
neutral_counter: {
boxShadow: "shadowBorderBottomNeutralWeaker",
},
Expand Down
179 changes: 179 additions & 0 deletions packages/paste-core/components/badge/stories/index.stories.tsx
View file
Open in desktop
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/components/badge/type-docs.json
View file
Open in desktop
@@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/menu/type-docs.json
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/popover/type-docs.json
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/primitives/box/type-docs.json
View file
Open in desktop
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/primitives/sibling-box/type-docs.json
View file
Open in desktop
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/primitives/text/type-docs.json
View file
Open in desktop
Expand Up @@ -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,
Expand Down