Merge 2e5f1e8 into 6497dcf

.storybook/addons.js

@@ -1,4 +1,3 @@
-import '@storybook/addon-options/register'
 import '@storybook/addon-knobs/register'
 import '@storybook/addon-actions/register'
 import '@storybook/addon-viewport/register'

.storybook/config.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { addDecorator, configure, addParameters } from '@storybook/react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import { withOptions } from '@storybook/addon-options'
+import { create } from '@storybook/theming'
 import { withKnobs } from '@storybook/addon-knobs'
 import { StatsGraph } from '@helpscout/stats'
+
 import '../src/adapters/app'
 import '../src/styles/blue.scss'
 import './storybook.css'
@@ -17,21 +18,32 @@ const withStats = storyFn => (
 
 addDecorator(withStats)
 addDecorator(withKnobs)
-addDecorator(
-  withOptions({
-    name: 'HSDS: React',
-  })
-)
 
 addParameters({
-  viewports: {
-    ...INITIAL_VIEWPORTS,
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'HSDS: React',
+      brandUrl:
+        'https://github.com/helpscout/hsds-react/tree/master/src/components',
+    }),
+    isFullscreen: false,
+    panelPosition: 'right',
+    isToolshown: true,
+  },
+})
+
+addParameters({
+  viewport: {
+    viewports: {
+      ...INITIAL_VIEWPORTS,
+    },
   },
 })
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.(js|ts|tsx)$/)
 function loadStories() {
+  const req = require.context('../stories', true, /.stories.(js|ts|tsx)$/)
   req.keys().forEach(filename => req(filename))
 }
 

.storybook/webpack.config.js

@@ -3,7 +3,7 @@ const paths = require('../config/paths')
 const harvester = require('seed-harvester')
 const includePaths = harvester(['./src/scss'])
 
-module.exports = (baseConfig, env, config) => {
+module.exports = ({ config }) => {
   // Typescript
   config.module.rules.push({
     test: /\.(ts|tsx)$/,