Feature: Added custom css loading to storybook

.storybook/addons.js

@@ -1,3 +1,3 @@
-
+import '@storybook/addon-options/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';

.storybook/config.js

@@ -1,11 +1,22 @@
-import { configure } from "@storybook/react";
+import { configure } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
 
 // automatically import all files ending in *.stories.js
 // https://webpack.js.org/guides/dependency-management/
 const components = require.context('../packages/components/', true, /.stories.js$/);
 const demo = require.context('../demo/', true, /.stories.js$/);
+const styles = require.context('./styles', true, /\.scss$/);
 
-configure(() => {
-  components.keys().forEach(filename => components(filename));
-  demo.keys().forEach(filename => demo(filename));
-}, module);
+function loadStories() {
+  demo.keys().forEach((filename) => demo(filename));
+  components.keys().forEach((filename) => components(filename));
+  styles.keys().forEach((filename) => styles(filename));
+}
+
+setOptions({
+  name: 'react-transcript-editor',
+  url: 'https://github.com/bbc/react-transcript-editor',
+  addonPanelInRight: true
+});
+
+configure(loadStories, module);

.storybook/styles/fonts.scss

@@ -0,0 +1 @@
+@import url('https://gel.files.bbci.co.uk/r2.302/bbc-reith.css');

.storybook/styles/main.scss

@@ -0,0 +1,4 @@
+body * {
+  // font-family: ReithSans, Helvetica, sans-serif !important;
+  font-family: ReithSerif, Fallback, sans-serif;
+}

.storybook/webpack.config.js

@@ -18,6 +18,26 @@ module.exports = {
             }
           }
         ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sourcemap: true
+            }
+          }
+        ]
       }
     ]
   }