Add Storybook backgrounds (#231)

* feat(storybook): Add backgrounds Storybook

I've added the Storybook backgrounds addon which allows users viewing the storybook to change the
background behind components, which will make it easier to see how the main NES.css theme looks in
various contexts.

* feat(storybook): Add backgrounds Storybook

I've added the Storybook backgrounds addon which allows users viewing the storybook to change the
background behind components, which will make it easier to see how the main NES.css theme looks in
various contexts.

.storybook/addons.js

@@ -1 +1,4 @@
-import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies */
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-backgrounds/register';
+/* eslint-enable */

.storybook/config.js

@@ -1,4 +1,10 @@
-import { configure } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  addDecorator,
+  configure,
+} from '@storybook/html';
+import { withBackgrounds } from '@storybook/addon-backgrounds';
+/* eslint-enable */
 
 import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved
 
@@ -8,4 +14,15 @@ function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
+addDecorator(withBackgrounds([
+  { name: 'Blue', value: 'blue' },
+  { name: 'Green', value: 'green' },
+  { name: 'Yellow', value: 'yellow' },
+  { name: 'Orange', value: 'orange' },
+  { name: 'Red', value: 'red' },
+  { name: 'Purple', value: 'purple' },
+  { name: 'Black', value: 'black' },
+  { name: 'White', value: 'white', default: true },
+]));
+
 configure(loadStories, module);

.storybook/preview-head.html

@@ -2,6 +2,7 @@
 <style>
   html, body, #root {
     align-items: center;
+    background-color: transparent !important;
     display: flex;
     height: 100vh;
     justify-content: center;

package-lock.json

@@ -1176,6 +1176,66 @@
         }
       }
     },
+    "@storybook/addon-backgrounds": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-4.1.3.tgz",
+      "integrity": "sha512-cJZw5HYzNooWbp2bOL7kAnbY1Xx4bqB5r6mJoThaVHqQ/utLbbwsWhXNUjSVtmdipck0UJzZ/QaCcOZEAgTM7w==",
+      "dev": true,
+      "requires": {
+        "@emotion/styled": "^0.10.6",
+        "@storybook/addons": "4.1.3",
+        "@storybook/core-events": "4.1.3",
+        "core-js": "^2.5.7",
+        "eventemitter3": "^3.1.0",
+        "global": "^4.3.2",
+        "prop-types": "^15.6.2",
+        "util-deprecate": "^1.0.2"
+      },
+      "dependencies": {
+        "@storybook/addons": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.3.tgz",
+          "integrity": "sha512-6orT1pp0NCfqEABV8iVPkcIn/hIKHd5bA9JC0pQYz50LDIOPsohf1L5dvPwaJzaPVqLNexHUXOxxCRqyxhF21w==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "4.1.3",
+            "@storybook/components": "4.1.3",
+            "global": "^4.3.2",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/channels": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-4.1.3.tgz",
+          "integrity": "sha512-SaxHlNbNO2yXwg7GI4k6TGWhYK+WdXEDLfDp9w2BigZQel5SCDZsuOCYtE3yG6ajrdBq4ehkhnLPE0wQcupp7A==",
+          "dev": true
+        },
+        "@storybook/components": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/@storybook/components/-/components-4.1.3.tgz",
+          "integrity": "sha512-Ik1j04pAw/i9wsxIQLSkbR1B5l7B23kMtzGtcVPRp1seunypxqNdX7o0sxg+xPFWNL7YDsrwP0FIP0HgUuriLQ==",
+          "dev": true,
+          "requires": {
+            "@emotion/core": "^0.13.1",
+            "@emotion/provider": "^0.11.2",
+            "@emotion/styled": "^0.10.6",
+            "global": "^4.3.2",
+            "lodash": "^4.17.11",
+            "prop-types": "^15.6.2",
+            "react-inspector": "^2.3.0",
+            "react-split-pane": "^0.1.84",
+            "react-textarea-autosize": "^7.0.4",
+            "render-fragment": "^0.1.1"
+          }
+        },
+        "@storybook/core-events": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-4.1.3.tgz",
+          "integrity": "sha512-mMHclba/+TCPdz+UXX0TYXN3SVe17p5n9OuZ6h0hZPdUPaqwN5xsi+UmYH6jGutHEzwkiVzw4cs5QvkcxuUzng==",
+          "dev": true
+        }
+      }
+    },
     "@storybook/addon-knobs": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.12.tgz",
@@ -5037,6 +5097,12 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
+      "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
+      "dev": true
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
     "@semantic-release/exec": "^3.3.0",
+    "@storybook/addon-backgrounds": "^4.1.3",
     "@storybook/addon-knobs": "^4.0.11",
     "@storybook/html": "^4.0.11",
     "autoprefixer": "^9.1.5",
@@ -110,9 +111,12 @@
       "@semantic-release/release-notes-generator",
       "@semantic-release/npm",
       "@semantic-release/github",
-      ["@semantic-release/exec", {
+      [
-        "prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}"
+        "@semantic-release/exec",
-      }]
+        {
+          "prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}"
+        }
+      ]
     ]
   },
   "stylelint": {