feat(Pill): add new variant

project44 · Aug 28, 2024 · 471ba6a · 471ba6a
1 parent 1ae33ed
commit 471ba6a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/.changeset/lemon-plants-fix.md b/.changeset/lemon-plants-fix.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': major
+---
+
+Add a new pill variant
diff --git a/packages/react/src/components/Pill/Pill.styles.ts b/packages/react/src/components/Pill/Pill.styles.ts
@@ -57,6 +57,17 @@ export const useStyles = css({
           backgroundColor: '$palette-red-600',
         },
       },
+      yellow: {
+        $$backgroundColor: '$colors$palette-yellow-100',
+
+        '.manifest-pill__text': {
+          color: '#BF7000',
+        },
+
+        '.manifest-pill__icon': {
+          backgroundColor: '#BF7000',
+        },
+      },
     },
     isCollapsible: {
       true: {

diff --git a/packages/react/src/components/Pill/Pill.tsx b/packages/react/src/components/Pill/Pill.tsx
@@ -17,7 +17,7 @@ export interface PillOptions<T extends As = PillElement> extends Options<T>, Sty
    *
    * @default 'indigo'
    */
-  colorScheme?: 'indigo' | 'red';
+  colorScheme?: 'indigo' | 'red' | 'yellow';
   /**
    * The icon to render in the pill.
    */

diff --git a/packages/react/src/components/Pill/story/Pill.stories.tsx b/packages/react/src/components/Pill/story/Pill.stories.tsx
@@ -1,4 +1,4 @@
-import { AirplaneFilled, Clock } from '@project44-manifest/react-icons';
+import { AirplaneFilled, Boat, Clock } from '@project44-manifest/react-icons';
 import type { StoryFn } from '@storybook/react';
 import { Flex, Pill } from '../../..';
 
@@ -23,6 +23,7 @@ ColorScheme.decorators = [
     <Flex align="center" css={{ gap: '$small' }}>
       <Pill colorScheme="indigo" icon={<AirplaneFilled />} label="In Transit" />
       <Pill colorScheme="red" icon={<Clock />} label="On Hold" />
+      <Pill colorScheme="yellow" icon={<Boat />} label="Held" />
     </Flex>
   ),
 ];
@@ -34,6 +35,7 @@ Collapsible.decorators = [
     <Flex align="center" css={{ gap: '$small' }}>
       <Pill isCollapsible colorScheme="indigo" icon={<AirplaneFilled />} label="In Transit" />
       <Pill isCollapsible colorScheme="red" icon={<Clock />} label="On Hold" />
+      <Pill isCollapsible colorScheme="yellow" icon={<Boat />} label="Held" />
     </Flex>
   ),
 ];