Add iconography page to styleguide

globals/breakpoints.css

@@ -16,4 +16,7 @@
   /* style-guide */
   @custom-media --colors-3up (min-width: 50rem);
   @custom-media --colors-4up (min-width: 64rem);
+  @custom-media --iconography-3up (min-width: 25rem);
+  @custom-media --iconography-4up (min-width: 50rem);
+  @custom-media --iconography-5up (min-width: 64rem);
 }

styleguide/Styleguide.js

@@ -4,7 +4,6 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import SiteHeader from './components/SiteHeader/SiteHeader';
 import Navigation from './components/Navigation/Navigation';
 import OffCanvasPanel from './components/OffCanvasPanel/OffCanvasPanel';
-
 import BtnContainer from '../components/BtnContainer/BtnContainer';
 import Icon from '../components/Icon/Icon';
 import ScreenReadable from '../components/ScreenReadable/ScreenReadable';
@@ -15,6 +14,7 @@ import Introduction from './screens/Overview/Introduction';
 import Goals from './screens/Overview/Goals';
 import Faq from './screens/Overview/Faq';
 import Colors from './screens/Design/Colors';
+import Iconography from './screens/Design/Iconography';
 import FourOhFour from './404';
 
 import css from './Styleguide.css';
@@ -75,6 +75,7 @@ export default class Styleguide extends Component {
                 <Route path="/faq" component={ Faq } />
 
                 <Route path="/design/colors" component={ Colors } />
+                <Route path="/design/iconography" component={ Iconography } />
 
                 <Route component={ FourOhFour } />
               </Switch>

styleguide/components/IconShowcase/IconShowcase.css

@@ -0,0 +1,46 @@
+.root {
+  width: 100%;
+  text-align: center;
+}
+
+.container {
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  background-color: #f8f8f8;
+  position: relative;
+}
+
+.container svg {
+  font-size: var(--size-lg-i);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.brand svg {
+  font-size: var(--size-lg-iii);
+}
+
+.attributes {
+  text-align: left;
+  margin-left: 0;
+  padding: 0;
+  margin-top: var(--size-regular);
+  list-style-type: none;
+}
+
+.attribute {
+  composes: fontRegular from '../../../globals/typography.css';
+  color: var(--color-grey);
+}
+
+.attribute + .attribute {
+  margin-top: var(--size-sm-iii);
+}
+
+.name {
+  font-weight: var(--fontweight-demi);
+  color: var(--color-black);
+}

styleguide/components/IconShowcase/IconShowcase.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+
+import Icon from '../../../components/Icon/Icon';
+
+import css from './IconShowcase.css';
+
+const IconShowcase = ({ name, value, brandIcon }) => (
+  <div className={ css.root }>
+    <div
+      className={ cx(
+        css.container,
+        brandIcon ? css.brand : null,
+      ) }
+    >
+      { !brandIcon ? <Icon name={ value } /> : brandIcon }
+    </div>
+    <ul className={ css.attributes }>
+      <li
+        className={ cx(
+          css.attribute,
+          css.name
+        ) }
+      >
+        { name }
+      </li>
+      <li
+        className={ cx(
+          css.attribute,
+          css.value
+        ) }
+      >
+        { value }
+      </li>
+    </ul>
+  </div>
+);
+
+IconShowcase.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  brandIcon: PropTypes.node,
+};
+
+export default IconShowcase;

styleguide/components/IconShowcase/IconShowcase.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import IconShowcase from './IconShowcase';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(<IconShowcase name="Appear Here" value="appearhere" />, div);
+});

styleguide/components/Navigation/Navigation.js

@@ -38,6 +38,15 @@ const Navigation = ({ className, onLinkClick }) => (
           >
             Colors
           </NavLink>
+          <NavLink
+            exact
+            activeClassName={ css.linkActive }
+            className={ css.link }
+            to="/design/iconography"
+            onClick={ onLinkClick }
+          >
+            Iconography
+          </NavLink>
         </li>
       </ul>
     </div>

styleguide/components/Navigation/Navigation.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Navigation from './Navigation';
+
+jest.mock('react-router-dom', () => ({
+  // eslint-disable-next-line react/prop-types
+  NavLink: ({ children }) => <div>{ children }</div>,
+}));
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(<Navigation />, div);
+});

styleguide/screens/Design/Iconography.css

@@ -0,0 +1,28 @@
+@lost gutter 1rem;
+
+.iconGroup {
+  lost-utility: clearfix;
+}
+
+.icon {
+  display: inline-block;
+  lost-column: 1/2;
+}
+
+@media(--iconography-3up) {
+  .icon {
+    lost-column: 1/3;
+  }
+}
+
+@media(--iconography-4up) {
+  .icon {
+    lost-column: 1/4;
+  }
+}
+
+@media(--iconography-5up) {
+  .icon {
+    lost-column: 1/5;
+  }
+}

styleguide/screens/Design/Iconography.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import IconShowcase from '../../components/IconShowcase/IconShowcase';
+
+import { uiIcons, brandIcons } from './icons';
+
+import type from '../../typography.css';
+import css from './Iconography.css';
+
+const Iconography = () => (
+  <div>
+    <h1 className={ type.h1 }>Icons</h1>
+    <h2 className={ type.h2 }>UI Icons</h2>
+    <div className={ css.iconGroup }>
+      { uiIcons.map(icon => (
+        <div key={ icon.value } className={ css.icon }>
+          <IconShowcase
+            name={ icon.name }
+            value={ icon.value }
+          />
+        </div>
+      )) }
+    </div>
+    <h2 className={ type.h2 }>Brand Icons</h2>
+    <div className={ css.iconGroup }>
+      { brandIcons.map(icon => (
+        <div key={ icon.value } className={ css.icon }>
+          <IconShowcase
+            name={ icon.name }
+            value={ icon.value }
+            brandIcon={ <icon.valueIcon /> }
+          />
+        </div>
+      )) }
+    </div>
+  </div>
+);
+
+export default Iconography;

styleguide/components/Navigation/Navigation.tests.js → styleguide/screens/Design/Iconography.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from 'react-dom';
 
-import Navigation from './Navigation';
+import Iconography from './Iconography';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  render(<Navigation />, div);
+  render(<Iconography />, div);
 });