Merge pull request #279 from lifeomic/pill-color

feat: Add negative and positive colors to `<Pill`

src/components/Pill/Pill.test.tsx

@@ -19,14 +19,30 @@ test('it renders a Pill with a label', async () => {
   expect(root).toBeInTheDocument();
 });
 
-test('it renders a Pill with the provided "color"', async () => {
+test('it renders a Pill with primary "color"', async () => {
   const { findByTestId } = renderWithTheme(
     <Pill data-testid={testId} color="primary" />
   );
   const root = await findByTestId(testId);
   expect(root).toHaveClass('ChromaPill-primaryColor');
 });
 
+test('it renders a Pill with negative "color"', async () => {
+  const { findByTestId } = renderWithTheme(
+    <Pill data-testid={testId} color="negative" />
+  );
+  const root = await findByTestId(testId);
+  expect(root).toHaveClass('ChromaPill-negative');
+});
+
+test('it renders a Pill with positive "color"', async () => {
+  const { findByTestId } = renderWithTheme(
+    <Pill data-testid={testId} color="positive" />
+  );
+  const root = await findByTestId(testId);
+  expect(root).toHaveClass('ChromaPill-positive');
+});
+
 test('it renders a Pill with the highlight variant', async () => {
   const { findByTestId } = renderWithTheme(
     <Pill data-testid={testId} variant="highlight" />

src/components/Pill/Pill.tsx

@@ -24,6 +24,12 @@ export const useStyles = makeStyles(
     primaryColor: {
       background: theme.palette.primary.main,
     },
+    negative: {
+      background: theme.palette.negative.main,
+    },
+    positive: {
+      background: theme.palette.positive.main,
+    },
     highlight: {
       background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 40%, rgb(166, 66, 254) 92%)`,
       boxShadow: theme.boxShadows.table,
@@ -51,7 +57,7 @@ export interface PillOwnProps
       'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart' | 'style'
     >,
     MotionProps {
-  color?: 'primary' | 'default';
+  color?: 'default' | 'primary' | 'negative' | 'positive';
   children?: React.ReactNode;
   label?: string;
   variant?: 'default' | 'highlight';
@@ -79,6 +85,8 @@ export const Pill = React.forwardRef<HTMLSpanElement, PillProps>(
           },
           {
             [classes.primaryColor]: color === 'primary',
+            [classes.negative]: color === 'negative',
+            [classes.positive]: color === 'positive',
           },
           className
         )}

stories/components/Pill/Pill.stories.tsx

@@ -12,6 +12,8 @@ const AllPillsStory: React.FC = () => (
       <Pill label="123 Results" />
       <Pill label="1 of 20" />
       <Pill label="3" color="primary" />
+      <Pill label="4" color="negative" />
+      <Pill label="5" color="positive" />
       <Pill label="Beta" variant="highlight" />
     </Container>
   </>
@@ -51,10 +53,40 @@ const HighlightPillStory: React.FC = () => (
   </>
 );
 
+const NegativePillStory: React.FC = () => (
+  <>
+    <Container
+      containerStyles={{ display: 'flex', justifyContent: 'space-around' }}
+    >
+      <Pill label="123 Results" color="negative" />
+      <Pill label="1 of 20" color="negative" />
+      <Pill label="3" color="negative" />
+    </Container>
+  </>
+);
+
+const PositivePillStory: React.FC = () => (
+  <>
+    <Container
+      containerStyles={{ display: 'flex', justifyContent: 'space-around' }}
+    >
+      <Pill label="123 Results" color="positive" />
+      <Pill label="1 of 20" color="positive" />
+      <Pill label="3" color="positive" />
+    </Container>
+  </>
+);
+
 storiesOf('Components/Pill', module)
   .add('Default', () => <AllPillsStory />, {
     readme: { content: md },
   })
   .add('Highlight', () => <HighlightPillStory />, {
     readme: { content: md },
+  })
+  .add('Negative', () => <NegativePillStory />, {
+    readme: { content: md },
+  })
+  .add('Positive', () => <PositivePillStory />, {
+    readme: { content: md },
   });

stories/components/Pill/default.md

@@ -32,6 +32,8 @@ Pill allows for a `color` prop to be defined.
 
 ```jsx
 <Pill label="My Pill" color="primary" />
+<Pill label="My Pill" color="negative" />
+<Pill label="My Pill" color="positive" />
 ```
 
 ### Class Name