integrated Storybook and added an initial set of story files for reus…

…able components

.storybook/main.js

@@ -0,0 +1,35 @@
+module.exports = {
+  stories: [
+    "../src/components/**/*.stories.(js|jsx|mdx)",
+    "../stories/**/*.stories.(js|jsx|mdx)",
+  ],
+  addons: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
+    "@storybook/addon-storysource",
+    "@storybook/addon-knobs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-viewport",
+  ],
+  webpackFinal: async config => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
+    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
+    config.module.rules[0].use[0].loader = require.resolve("babel-loader")
+    // use @babel/preset-react for JSX and env (instead of staged presets)
+    config.module.rules[0].use[0].options.presets = [
+      require.resolve("@babel/preset-react"),
+      require.resolve("@babel/preset-env"),
+    ]
+    config.module.rules[0].use[0].options.plugins = [
+      // use @babel/plugin-proposal-class-properties for class arrow functions
+      require.resolve("@babel/plugin-proposal-class-properties"),
+      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+      require.resolve("babel-plugin-remove-graphql-queries"),
+    ]
+    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
+    config.resolve.mainFields = ["browser", "module", "main"]
+    return config
+  },
+}

.storybook/preview.js

@@ -0,0 +1,18 @@
+import { addDecorator } from "@storybook/react"
+import { withA11y } from "@storybook/addon-a11y"
+import { action } from "@storybook/addon-actions"
+
+// Gatsby's Link overrides:
+// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+}
+// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
+global.__PATH_PREFIX__ = ""
+// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
+window.___navigate = pathname => {
+  action("NavigateTo:")(pathname)
+}
+
+addDecorator(withA11y)

README.md

@@ -23,3 +23,9 @@ For deployments, you can run:
 ```
 yarn run deploy:github
 ```
+
+To run Storybook locally, first start local development server (`yarn start`), then run:
+
+```
+yarn storybook
+```

package.json

@@ -31,6 +31,17 @@
     "sharp": "^0.22.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@storybook/addon-a11y": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-storysource": "^5.3.17",
+    "@storybook/addon-viewport": "^5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
+    "babel-loader": "^8.1.0",
     "gh-pages": "^2.0.1",
     "prettier": "^1.17.0",
     "tailwindcss": "^1.0.3"
@@ -46,7 +57,9 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
-    "deploy:github": "npm run build && node ./scripts/deploy-github"
+    "deploy:github": "npm run build && node ./scripts/deploy-github",
+    "storybook": "NODE_ENV=production start-storybook -s public -p 6006",
+    "build-storybook": "NODE_ENV=production build-storybook -s public"
   },
   "repository": {
     "type": "git",

stories/Block.stories.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { text } from "@storybook/addon-knobs"
+import Block from "../src/components/block"
+
+export default {
+  title: "Block",
+  component: Block,
+}
+
+export const BlockContent = () => (
+  <Block title={text("title", "Title")}>
+    <p>This is some block Block Content</p>
+  </Block>
+)

stories/Break.stories.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { boolean } from "@storybook/addon-knobs"
+import Break from "../src/components/break"
+
+export default {
+  title: "Break",
+  component: Break,
+}
+
+export const HorizontalBreak = () => (
+  <>
+    <p>content above</p>
+    <Break noMargin={boolean("noMargin", false)} />
+    <p>content below</p>
+  </>
+)

stories/CTA.stories.js

@@ -0,0 +1,17 @@
+import React from "react"
+import { text } from "@storybook/addon-knobs"
+import CTA from "../src/components/cta"
+
+export default {
+  title: "Call To Action",
+  component: CTA,
+}
+
+export const CallToAction = () => (
+  <CTA
+    title={text("title", "Title")}
+    description={text("description", "Description")}
+    label={text("label", "Link Label")}
+    url={text("url", "https://agile6.com")}
+  />
+)

stories/Color.stories.js

@@ -0,0 +1,23 @@
+import React from "react"
+
+export default {
+  title: "Color",
+}
+
+const colorCard = "w-full h-10 pt-2 m-1"
+
+export const ColorPalette = () => (
+  <div style={{ width: "200px" }}>
+    <div className="flex flex-col p-2 text-center">
+      <div className={`bg-white text-black ${colorCard}`}>white</div>
+      <div className={`bg-red text-white ${colorCard}`}>red</div>
+      <div className={`bg-blue-light text-black ${colorCard}`}>blue-light</div>
+      <div className={`bg-blue-dark text-white ${colorCard}`}>blue-dark</div>
+      <div className={`bg-grey text-black ${colorCard}`}>grey</div>
+      <div className={`bg-grey-light text-black ${colorCard}`}>grey-light</div>
+      <div className={`bg-grey-medium text-white ${colorCard}`}>
+        grey-medium
+      </div>
+    </div>
+  </div>
+)

stories/Hero.stories.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Hero from "../src/components/hero"
+import { pageQuery } from "../src/templates/work"
+import exampleHeroImage from "../static/img/cloud.png"
+
+export default {
+  title: "Hero",
+  component: Hero,
+}
+
+export const ExampleHero = () => (
+  <Hero
+    title="Title"
+    subtitle="This is an example subtitle"
+    hero={exampleHeroImage}
+  />
+)

stories/Layout.stories.js

@@ -0,0 +1,19 @@
+import React from "react"
+import Layout from "../src/components/layout"
+import Header from "../src/components/header"
+import Footer from "../src/components/footer"
+
+export default {
+  title: "Layout",
+  component: Layout,
+}
+
+export const AppLayout = () => (
+  <Layout>
+    <p>Example Content</p>
+  </Layout>
+)
+
+export const AppHeader = () => <Header />
+
+export const AppFooter = () => <Footer />

stories/Prose.stories.js

@@ -0,0 +1,34 @@
+import React from "react"
+import Prose from "../src/components/prose"
+
+export default {
+  title: "Prose",
+}
+
+export const ProseText = () => (
+  <Prose>This is some text inside a Prose component container.</Prose>
+)
+
+export const ProseHeading2 = () => (
+  <Prose>
+    <h2>Heading 2</h2>
+  </Prose>
+)
+
+export const ProseHeading3 = () => (
+  <Prose>
+    <h3>Heading 3</h3>
+  </Prose>
+)
+
+export const ProseParagraph = () => (
+  <Prose>
+    <p>Paragraph</p>
+  </Prose>
+)
+
+export const ProseLink = () => (
+  <Prose>
+    <a href="https://https://agile6.com/">Link to Agile6.com</a>
+  </Prose>
+)

stories/SectionTitle.stories.js

@@ -0,0 +1,24 @@
+import React from "react"
+import { select } from "@storybook/addon-knobs"
+import SectionTitle from "../src/components/section-title"
+
+export default {
+  title: "SectionTitle",
+  component: SectionTitle,
+}
+
+const colors = {
+  white: "text-white",
+  red: "text-red",
+  grey: "text-grey",
+  "Light Grey": "text-grey-light",
+  "Medium Grey": "text-grey-medium",
+  "Dark Blue": "text-blue-dark",
+  "Light Blue": "text-blue-light",
+}
+
+export const ExampleSectionTitle = () => (
+  <SectionTitle textColor={select("textColor", colors, "text-red")}>
+    Section Title
+  </SectionTitle>
+)

stories/TeamMembers.stories.js

@@ -0,0 +1,9 @@
+import React from "react"
+import TeamMembers from "../src/components/team-members"
+
+export default {
+  title: "Team Members",
+  component: TeamMembers,
+}
+
+export const TeamMembersList = () => <TeamMembers />