feature/UIDS-251 update pill sizing (#268)

* default font-type-20 + update padding

* add Pill with link

* add PILL_COLORS constant

* remove Large pill variant

* update documentation

* update snapshots

* fix Pill prop issue in failing test

* update Pill to accept children, adjust props

* keep text and children props for backwards compatibility

* update docs

* update to use FontAwesome for close icon + blue color update

Author: jasonbasuil

spec/__snapshots__/Storyshots.test.js.snap

@@ -2446,21 +2446,6 @@ exports[`Storyshots Design System/Pill Default 1`] = `
     >
       Text
     </span>
-    <h4
-      style={
-        Object {
-          "marginBottom": "2rem",
-          "marginTop": "2rem",
-        }
-      }
-    >
-      Large
-    </h4>
-    <span
-      className="Pill Pill--blue Pill--large"
-    >
-      Text
-    </span>
     <h4
       style={
         Object {
@@ -2522,7 +2507,23 @@ exports[`Storyshots Design System/Pill With Close 1`] = `
       onClick={[Function]}
       type="button"
     >
-       ×
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-times fa-w-11 "
+        data-icon="times"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 352 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
     </button>
   </span>
 </div>
@@ -2561,6 +2562,28 @@ exports[`Storyshots Design System/Pill With Leading Icon 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/Pill With Link 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <span
+    className="Pill Pill--blue"
+  >
+    <a
+      href="https://www.userinterviews.com/"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Visit our site
+    </a>
+  </span>
+</div>
+`;
+
 exports[`Storyshots Design System/Popper Dark 1`] = `
 <div
   style={

src/Pill/Pill.jsx

@@ -2,52 +2,60 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import './Pill.scss';
 
-const colors = ['blue', 'orange', 'yellow', 'green', 'gray', 'silver'];
+export const PILL_COLORS = {
+ BLUE: 'blue', ORANGE: 'orange', YELLOW: 'yellow', GREEN: 'green', GRAY: 'gray', SILVER: 'silver',
+};
 
 const Pill = ({
+  children,
   color,
   icon,
   id,
-  large,
   onClose,
   text,
+  ...props
 }) => (
   <span
     className={
-      classNames(
-        'Pill',
-        { [`Pill--${color}`]: !!color },
-        { [`Pill--large`]: !!large },
-      )
-    }
+        classNames(
+          'Pill',
+          { [`Pill--${color}`]: !!color },
+        )
+      }
+    {...props}
   >
     { icon && (
-      <FontAwesomeIcon className="Pill__icon--lead" icon={icon} />
-    )}
-    {text}
-    { onClose && (
-    <button className="Pill__button--close" type="button" onClick={() => onClose(id)}> &times;</button>
+    <FontAwesomeIcon className="Pill__icon--lead" icon={icon} />
       )}
+    { children }
+    { text }
+    { onClose && (
+      <button className="Pill__button--close" type="button" onClick={() => onClose(id)}>
+        <FontAwesomeIcon icon={faTimes} />
+      </button>
+        )}
   </span>
-);
+  );
 
 Pill.propTypes = {
-  color: PropTypes.oneOf(colors),
+  children: PropTypes.node,
+  color: PropTypes.oneOf(Object.values(PILL_COLORS)),
   icon: PropTypes.any,
   id: PropTypes.string,
-  large: PropTypes.bool,
-  text: PropTypes.node.isRequired,
+  text: PropTypes.node,
   onClose: PropTypes.func,
 };
 
 Pill.defaultProps = {
-  color: 'blue',
+  children: undefined,
+  color: PILL_COLORS.BLUE,
   icon: undefined,
   id: undefined,
-  large: undefined,
+  text: undefined,
   onClose: undefined,
 };
 

src/Pill/Pill.mdx

@@ -2,7 +2,7 @@ import { ArgsTable, Story, Preview } from '@storybook/addon-docs/blocks';
 import Pill from './Pill';
 
 # Pill
-Represents an object that can be viewed with or without an icon
+Represents an object that can be viewed with or without an icon. Useful when describing or categorizing a property.
 
 <Preview>
   <Story id="design-system-pill--default" />
@@ -12,17 +12,24 @@ Represents an object that can be viewed with or without an icon
 
 ## Anatomy
 
-- **Text: ** main descriptor of the pill
-- **Icon: ** relevant icon that makes it easier for users to identify (always placed left of the Text)
+- **Content: ** main content area of the Pill. Can be provided plain text or a link (`<a>`) as `children`
+- **Icon: ** relevant icon that makes it easier for users to identify (always placed left of the Content)
 - **Close: ** users have the option to clear the pill (provided by default with the presence of the `onClose` function)
 
 ## Best practices 
 
-- TBD
+- Use to label, categorize, or organize items using keywords that describe them
+- Help users search for and find related content quickly and easily
+- Use to highlight an item's status for quick recognition 
+- Ideal to indicate meanings that users can learn and recognize across the app
 
 ## Stories
 
 ### Default
+- The default Pill and available colors
+- Use the `PILL_COLORS` constant when setting the `color` prop
+- Can use either the `text` prop or provide an element via `children` for content. (Note: the `text` prop is planned to be retired in favor of `children` in a future release)
+- If using plain text or an element as the content via `children`, do not wrap in block-level elements (e.g. `<p>` or `div`) 
 
 <Preview>
   <Story id="design-system-pill--default" />
@@ -41,3 +48,11 @@ Represents an object that can be viewed with or without an icon
 <Preview>
   <Story id="design-system-pill--with-close" />
 </Preview>
+
+### With Link
+- For Pills that link to more information
+- The Pill accepts an `<a>` tag as a child
+
+<Preview>
+  <Story id="design-system-pill--with-link" />
+</Preview>

src/Pill/Pill.scss

@@ -2,14 +2,14 @@
 @import '../../scss/theme';
 
 .Pill {
-  @include font-type-30;
+  @include font-type-20;
   font-weight: $font-weight-normal;
   display: inline;
   background-color: $ux-blue-100;
   color: $ux-blue-700;
   border: 0.06rem solid $ux-blue-300;
   border-radius: $ux-border-radius;
-  padding: $ux-spacing-10 $ux-spacing-20;
+  padding: $ux-spacing-10 $ux-spacing-30;
 
   &--blue {
     background-color: $ux-blue-100;
@@ -24,7 +24,7 @@
     .Pill__button--close {
       background-color: unset; 
       border: none;
-      color: $ux-blue;
+      color: $ux-blue-300;
       margin-left: $ux-spacing-20;
       margin-right: 0;
       padding: 0;
@@ -129,10 +129,4 @@
       padding: 0;
     }
   }
-
-  &--large {
-    @include font-type-40;
-    border-radius: 0.5rem;
-    padding: $ux-spacing-10 $ux-spacing-20;
-  }
 }

src/Pill/Pill.stories.jsx

@@ -4,11 +4,10 @@ import {
   withKnobs,
   text,
   select,
-  boolean,
 } from '@storybook/addon-knobs';
 import { faUsers } from '@fortawesome/free-solid-svg-icons';
 
-import Pill from 'src/Pill';
+import { Pill, PILL_COLORS } from 'src/Pill';
 import mdx from './Pill.mdx';
 
 export default {
@@ -22,8 +21,6 @@ export default {
   },
 };
 
-const colors = ['blue', 'orange', 'yellow', 'green', 'gray', 'silver'];
-
 const handleClose = (id) => {
   action('handle close')(id);
 };
@@ -32,61 +29,70 @@ export const Default = () => (
   <div>
     <h4 style={{ marginBottom: '2rem' }}>Test Pill</h4>
     <Pill
-      color={select('Color', colors, 'blue')}
+      color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
       id="1"
-      large={boolean('Large', false)}
-      text={text('Text', 'Text')}
-    />
-    <h4 style={{ marginBottom: '2rem', marginTop: '2rem' }}>Large</h4>
-    <Pill
-      color="blue"
-      large
-      text="Text"
-    />
+    >
+      {text('Text', 'Text')}
+    </Pill>
     <h4 style={{ marginBottom: '2rem', marginTop: '2rem' }}>Colors</h4>
     <Pill
-      color="blue"
-      text="blue"
-    />
+      color={PILL_COLORS.BLUE}
+    >
+      blue
+    </Pill>
     <Pill
-      color="orange"
-      text="orange"
-    />
+      color={PILL_COLORS.ORANGE}
+    >
+      orange
+    </Pill>
     <Pill
-      color="yellow"
-      text="yellow"
-    />
+      color={PILL_COLORS.YELLOW}
+    >
+      yellow
+    </Pill>
     <Pill
-      color="green"
-      text="green"
-    />
+      color={PILL_COLORS.GREEN}
+    >
+      green
+    </Pill>
     <Pill
-      color="gray"
-      text="gray"
-    />
+      color={PILL_COLORS.GRAY}
+    >
+      gray
+    </Pill>
     <Pill
-      color="silver"
-      text="silver"
-    />
+      color={PILL_COLORS.SILVER}
+    >
+      silver
+    </Pill>
   </div>
 );
 
 export const WithLeadingIcon = () => (
   <Pill
-    color={select('Color', colors, 'blue')}
+    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
     icon={faUsers}
     id="2"
-    large={boolean('Large', false)}
-    text={text('Text', 'Text')}
-  />
+  >
+    {text('Text', 'Text')}
+  </Pill>
 );
 
 export const WithClose = () => (
   <Pill
-    color={select('Color', colors, 'blue')}
+    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
     id="3"
-    large={boolean('Large', false)}
-    text={text('Text', 'Text')}
     onClose={handleClose}
-  />
+  >
+    {text('Text', 'Text')}
+  </Pill>
+);
+
+export const WithLink = () => (
+  <Pill
+    color={select('Color', Object.values(PILL_COLORS), PILL_COLORS.BLUE)}
+    id="3"
+  >
+    <a href="https://www.userinterviews.com/" rel="noreferrer" target="_blank">{text('Link text', 'Visit our site')}</a>
+  </Pill>
 );

src/Pill/index.js

@@ -1 +1,6 @@
-export { default } from './Pill';
+import Pill, { PILL_COLORS } from './Pill';
+
+export {
+  Pill,
+  PILL_COLORS,
+};

src/index.js

@@ -18,7 +18,7 @@ import {
   ModalFooter,
   ModalHeader,
 } from 'src/Modal';
-import Pill from 'src/Pill';
+import { Pill, PILL_COLORS } from 'src/Pill';
 import Popper from 'src/Popper';
 import ProfileCell from 'src/ProfileCell';
 import RadioButton from 'src/RadioButton';
@@ -68,6 +68,7 @@ export {
   ModalFooter,
   ModalHeader,
   Pill,
+  PILL_COLORS,
   Popper,
   ProfileCell,
   RadioButton,