use snapshot tests for ui-component stories

scm-ui/ui-components/src/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Colors 1`] = `
+<div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-primary"
+      onClick={[Function]}
+      type="button"
+    >
+      primary
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-success"
+      onClick={[Function]}
+      type="button"
+    >
+      success
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-info"
+      onClick={[Function]}
+      type="button"
+    >
+      info
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-warning"
+      onClick={[Function]}
+      type="button"
+    >
+      warning
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-danger"
+      onClick={[Function]}
+      type="button"
+    >
+      danger
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-black"
+      onClick={[Function]}
+      type="button"
+    >
+      black
+       
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots DateFromNow Default 1`] = `
+<div>
+  <p>
+    <time
+      className="sc-bdVaJa dkavpQ"
+      title="2009-06-30 18:30:00"
+    >
+      over 10 years ago
+    </time>
+  </p>
+  <p>
+    <time
+      className="sc-bdVaJa dkavpQ"
+      title="2019-06-30 18:30:00"
+    >
+      3 months ago
+    </time>
+  </p>
+</div>
+`;

scm-ui/ui-components/src/buttons/Button.stories.js

@@ -4,7 +4,19 @@ import { storiesOf } from "@storybook/react";
 import StoryRouter from "storybook-react-router";
 import styled from "styled-components";
 
-const colors = ["primary", "success", "info", "warning", "danger", "black"];
+const colors = [
+  "primary",
+  "link",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "white",
+  "light",
+  "dark",
+  "black",
+  "text"
+];
 
 const Spacing = styled.div`
   padding: 1em;
@@ -15,7 +27,7 @@ storiesOf("Button", module)
   .add("Colors", () => (
     <div>
       {colors.map(color => (
-        <Spacing>
+        <Spacing key={color}>
           <Button color={color} label={color} />
         </Spacing>
       ))}

scm-ui/ui-components/src/storyshots.test.js

@@ -1,12 +1,5 @@
-/*import initStoryshots from "@storybook/addon-storyshots";
+import initStoryshots from "@storybook/addon-storyshots";
 
 initStoryshots({
-});*/
-
-describe("noop", () => {
-
-  it("is all good", () => {
-
-  });
-
+  /* configuration options */
 });