Merge branch 'master' into alec/TFAC-612

.babelrc

@@ -23,5 +23,7 @@
         "regenerator": true
       }
     ],
+    ["@babel/plugin-proposal-class-properties"],
+    ["react-require"],
   ]
 }

.gitignore

@@ -10,4 +10,7 @@ yarn-error.log
 coverage
 .env
 .yalc
-yalc.lock
+yalc.lock
+
+# Storybook
+build-storybook.log

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-addon-gatsby",
+  ],
+  "core": {
+    "builder": "webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,27 @@
+import { ThemeProvider } from '@material-ui/core/styles'
+import { action } from "@storybook/addon-actions"
+import theme from 'src/themes/theme'
+
+// Gatsby's Link overrides:
+// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
+// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
+// so Gatsby Link doesn't throw errors.
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+}
+// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
+global.__BASE_PATH__ = "/"
+// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
+// In Storybook, it makes more sense to log an action than doing an actual navigate. Check out the actions addon docs for more info: https://storybook.js.org/docs/react/essentials/actions
+window.___navigate = pathname => {
+  action("NavigateTo:")(pathname)
+}
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  ),
+]

codecov.yml

@@ -0,0 +1,2 @@
+ignore:
+  - "**/*.stories.jsx"

package.json

@@ -11,7 +11,9 @@
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.10.0",
     "@reach/router": "^1.3.4",
+    "@storybook/cli": "^6.3.9",
     "@use-it/interval": "^1.0.0",
+    "babel-plugin-react-require": "^3.1.3",
     "bowser": "^2.11.0",
     "clsx": "^1.1.1",
     "common-tags": "^1.8.0",
@@ -59,17 +61,27 @@
     "test": "yarn run lint && jest --env=jsdom --coverage --testPathIgnorePatterns=e2e-tests",
     "test:e2e": "dotenv-extended --defaults=./.env yarn jest --testPathPattern=e2e-tests.test --watchAll=false",
     "test:watch": "jest --env=jsdom --testPathIgnorePatterns=e2e-tests --watch",
-    "deploy": "gatsby-plugin-s3 deploy"
+    "deploy": "gatsby-plugin-s3 deploy",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.1",
     "@material-ui/codemod": "^4.5.0",
+    "@storybook/addon-actions": "^6.3.9",
+    "@storybook/addon-essentials": "^6.3.9",
+    "@storybook/addon-links": "^6.3.9",
+    "@storybook/builder-webpack5": "^6.3.9",
+    "@storybook/manager-webpack5": "^6.3.9",
+    "@storybook/react": "^6.3.9",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-gatsby": "^1.14.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
@@ -85,7 +97,9 @@
     "jsdom": "^16.4.0",
     "prettier": "^2.1.2",
     "react-test-renderer": "^16.14.0",
-    "tab-e2e": "^1.1.0"
+    "storybook-addon-gatsby": "^0.0.2",
+    "tab-e2e": "^2.0.1",
+    "webpack": "^5.57.1"
   },
   "jest": {
     "collectCoverageFrom": [

src/components/Header.stories.jsx

@@ -0,0 +1,17 @@
+import Header from './Header'
+
+export default {
+  title: 'Components/Header',
+  component: Header,
+}
+
+const Template = (args) => <Header {...args} />
+export const standard = Template.bind({})
+standard.args = {
+  brand: 'tab',
+}
+
+export const full = Template.bind({})
+full.args = {
+  brand: 'search',
+}