diff --git a/src/elements/Pill/Pill.stories.tsx b/src/elements/Pill/Pill.stories.tsx index ead06291..d4487b0e 100644 --- a/src/elements/Pill/Pill.stories.tsx +++ b/src/elements/Pill/Pill.stories.tsx @@ -106,5 +106,17 @@ storiesOf("Pill", module) ) }) + .add("Onboarding", () => { + return ( + + + Yes, I love collecting art + + + No, I'm just starting out + + + ) + }) const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" diff --git a/src/elements/Pill/Pill.tsx b/src/elements/Pill/Pill.tsx index 1430f7ed..67b2d658 100644 --- a/src/elements/Pill/Pill.tsx +++ b/src/elements/Pill/Pill.tsx @@ -16,6 +16,7 @@ export const PILL_VARIANT_NAMES = [ "filter", "profile", "search", + "onboarding", ] as const export type PillState = "default" | "selected" | "disabled" export type PillVariant = typeof PILL_VARIANT_NAMES[number] @@ -28,7 +29,10 @@ export type PillProps = (FlexProps & { }) & ( | { - variant?: Extract + variant?: Extract< + PillVariant, + "default" | "filter" | "badge" | "search" | "dotted" | "onboarding" + > src?: never } | { variant: Extract; src?: string } @@ -126,6 +130,15 @@ const PILL_STATES = { const PILL_VARIANTS: Record>> = { default: PILL_STATES, + onboarding: { + ...PILL_STATES, + default: css` + ${PILL_STATES.default} + border-radius: 20px; + height: 40px; + border-color: ${themeGet("colors.black60")}; + `, + }, dotted: { ...PILL_STATES, default: css` @@ -193,6 +206,7 @@ const defaultColors: Record = { } const TEXT_COLOR: Record> = { default: defaultColors, + onboarding: defaultColors, dotted: { ...defaultColors, selected: "black100",