Update Swatch component to use Specimen component

globals/breakpoints.css

@@ -15,7 +15,6 @@
 
   /* 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/components/Swatch/Swatch.css

@@ -3,47 +3,9 @@
   text-align: center;
 }
 
-.colorContainer {
+.color {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
-  /**
-   * Deviates from our colour palette to ensure there is constrast between
-   * each colour and the background. Specifically required rendering
-   * our greys with this component
-   */
-  background-color: #f8f8f8;
   position: relative;
 }
-
-.color {
-  width: var(--size-lg-iii);
-  height: var(--size-lg-iii);
-  border-radius: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.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/Swatch/Swatch.js

@@ -1,56 +1,26 @@
 import React, { PropTypes } from 'react';
-import cx from 'classnames';
 
+import Specimen from '../Specimen/Specimen';
 import css from './Swatch.css';
 
-const Swatch = ({ name, hex, rgb, variable }) => (
-  <div className={ css.root }>
-    <div className={ css.colorContainer }>
-      <div
-        className={ css.color }
-        style={ {
-          backgroundColor: rgb,
-        } }
-      />
-    </div>
-    <ul className={ css.attributes }>
-      <li
-        className={ cx(
-          css.attribute,
-          css.name
-        ) }
-      >
-        { name }
-      </li>
-      <li
-        className={ cx(
-          css.attribute,
-          css.hex
-        ) }
-      >
-        { hex }
-      </li>
-      <li
-        className={ cx(
-          css.attribute,
-          css.rgb
-        ) }
-      >
-        { rgb }
-      </li>
-      <li
-        className={ cx(
-          css.attribute,
-          css.variable
-        ) }
-      >
-        { variable }
-      </li>
-    </ul>
-  </div>
+const Swatch = ({ className, name, hex, rgb, variable }) => (
+  <Specimen
+    classNames={ {
+      root: className,
+    } }
+    attributes={ [
+      name,
+      hex,
+      rgb,
+      variable,
+    ] }
+  >
+    <div className={ css.color } style={ { backgroundColor: rgb } } />
+  </Specimen>
 );
 
 Swatch.propTypes = {
+  className: PropTypes.string,
   name: PropTypes.string,
   hex: PropTypes.string,
   rgb: PropTypes.string,

styleguide/screens/Design/Colors.css

@@ -1,12 +1,14 @@
 @lost gutter 1rem;
+@lost flexbox flex;
 
 .colorGroup {
-  lost-utility: clearfix;
   margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
 }
 
 .color {
-  display: inline-block;
   lost-column: 1/2;
   margin-top: var(--size-lg-i);
 }
@@ -16,9 +18,3 @@
     lost-column: 1/3;
   }
 }
-
-@media(--colors-4up) {
-  .color {
-    lost-column: 1/4;
-  }
-}

styleguide/screens/Design/Colors.js

@@ -12,40 +12,40 @@ const Colors = () => (
     <h2 className={ type.h2 }>Brand</h2>
     <div className={ css.colorGroup }>
       { brand.map(color => (
-        <div key={ color.id } className={ css.color }>
-          <Swatch
-            name={ color.name }
-            hex={ color.hex }
-            rgb={ color.rgb }
-            variable={ color.variable }
-          />
-        </div>
+        <Swatch
+          key={ color.id }
+          className={ css.color }
+          name={ color.name }
+          hex={ color.hex }
+          rgb={ color.rgb }
+          variable={ color.variable }
+        />
       )) }
     </div>
     <h2 className={ type.h2 }>Greys</h2>
     <div className={ css.colorGroup }>
       { greys.map(color => (
-        <div key={ color.id } className={ css.color }>
-          <Swatch
-            name={ color.name }
-            hex={ color.hex }
-            rgb={ color.rgb }
-            variable={ color.variable }
-          />
-        </div>
+        <Swatch
+          key={ color.id }
+          className={ css.color }
+          name={ color.name }
+          hex={ color.hex }
+          rgb={ color.rgb }
+          variable={ color.variable }
+        />
       )) }
     </div>
     <h2 className={ type.h2 }>UI</h2>
     <div className={ css.colorGroup }>
       { ui.map(color => (
-        <div key={ color.id } className={ css.color }>
-          <Swatch
-            name={ color.name }
-            hex={ color.hex }
-            rgb={ color.rgb }
-            variable={ color.variable }
-          />
-        </div>
+        <Swatch
+          key={ color.id }
+          className={ css.color }
+          name={ color.name }
+          hex={ color.hex }
+          rgb={ color.rgb }
+          variable={ color.variable }
+        />
       )) }
     </div>
   </div>