feat: add onboarding state in pills (#205)

artsy · Mar 11, 2024 · 4516d0b · 4516d0b
1 parent d7ca644
commit 4516d0b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/elements/Pill/Pill.stories.tsx b/src/elements/Pill/Pill.stories.tsx
@@ -106,5 +106,17 @@ storiesOf("Pill", module)
       </List>
     )
   })
+  .add("Onboarding", () => {
+    return (
+      <List contentContainerStyle={{ marginHorizontal: 20 }}>
+        <Pill variant="onboarding" selected>
+          Yes, I love collecting art
+        </Pill>
+        <Pill variant="onboarding" ml={1}>
+          No, I'm just starting out
+        </Pill>
+      </List>
+    )
+  })
 
 const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg"
diff --git 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<PillVariant, "default" | "filter" | "badge" | "search" | "dotted">
+        variant?: Extract<
+          PillVariant,
+          "default" | "filter" | "badge" | "search" | "dotted" | "onboarding"
+        >
         src?: never
       }
     | { variant: Extract<PillVariant, "profile">; src?: string }
@@ -126,6 +130,15 @@ const PILL_STATES = {
 
 const PILL_VARIANTS: Record<PillVariant, Record<PillState, FlattenInterpolation<any>>> = {
   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<PillState, Color> = {
 }
 const TEXT_COLOR: Record<PillVariant, Record<PillState, Color>> = {
   default: defaultColors,
+  onboarding: defaultColors,
   dotted: {
     ...defaultColors,
     selected: "black100",