[CHORE] Add green pill component (#53)

Also adds a 'squared' prop to make the pill have sharper corners.

Author: SMaxOwok

src/Pill/Pill.jsx

@@ -4,11 +4,12 @@ import classNames from 'classnames';
 
 import './Pill.scss';
 
-const Pill = ({ color, size, text }) => (
+const Pill = ({ color, size, squared, text }) => (
   <div
     className={
       classNames(
         'Pill',
+        { 'Pill--squared': squared },
         { [`Pill--${color}`]: !!color },
         { [`Pill--${size}`]: !!size },
       )
@@ -21,12 +22,14 @@ const Pill = ({ color, size, text }) => (
 Pill.propTypes = {
   color: PropTypes.string,
   size: PropTypes.string,
-  text: PropTypes.string.isRequired,
+  squared: PropTypes.bool,
+  text: PropTypes.node.isRequired,
 };
 
 Pill.defaultProps = {
   color: undefined,
   size: undefined,
+  squared: false
 };
 
 export default Pill;

src/Pill/Pill.scss

@@ -1,3 +1,4 @@
+@import '../../scss/borders';
 @import '../../scss/theme';
 
 .Pill {
@@ -19,6 +20,11 @@
     color: $ux-orange-600;
   }
 
+  &--green {
+    background-color: $ux-green-100;
+    color: $ux-green-700;
+  }
+
   /////// SIZES
   // Seems like a fine default size
   border-radius: 2rem;
@@ -30,4 +36,8 @@
     font-size: .625rem;
     padding: .25rem .5rem;
   }
+
+  &--squared {
+    border-radius: $ux-border-radius;
+  }
 }

stories/Pill.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 
 import Pill from 'src/Pill';
 
@@ -9,10 +9,14 @@ export default {
   decorators: [withKnobs],
 };
 
-export const Default = () => <Pill text={text('Pill Text', 'Test pill')} />;
+const colors = ['', 'blue', 'orange', 'green'];
+const sizes = ['', 'sm'];
 
-export const Blue = () => <Pill color="blue" text={text('Pill Text', 'Test pill')} />;
-
-export const Orange = () => <Pill color="orange" text={text('Pill Text', 'Test pill')} />;
-
-export const Small = () => <Pill size="sm" text={text('Pill Text', 'Test pill')} />;
+export const Default = () => (
+  <Pill
+    text={text('Pill Text', 'Test pill')}
+    color={select('Color', colors, '')}
+    size={select('Size', sizes, '')}
+    squared={boolean('Squared', false)}
+  />
+);