feature/stories

.env

@@ -1,6 +1,3 @@
-# Never put anything secret in this file, this file should only
-# be used for env base env vars that can be overwritten by other
-# .env file. See: https://goo.gl/wzqpbj
-
-# This is to ensure test:coverage runs - react-scripts ^3.0.0
-CI=true
+GH_TOKEN=
+NPM_TOKEN=
+CHROMATIC_PROJECT_TOKEN=

.github/workflows/chromatic.yml

@@ -0,0 +1,22 @@
+# .github/workflows/chromatic.yml
+
+# name of our action
+name: 'Chromatic'
+# the event that will trigger the action
+on: push
+
+# what the action will do
+jobs:
+  test:
+    # the operating system it will run on
+    runs-on: ubuntu-latest
+    # the list of steps that the action will go through
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+      - run: yarn test # adds the test command
+      - uses: chromaui/action@v1
+        # options required to the GitHub chromatic action
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/push.yml

@@ -0,0 +1,42 @@
+# .github/workflows/push.yml
+
+## name of our action
+name: Release
+
+# the event that will trigger the action
+on:
+  push:
+    branches: [master]
+
+# what the action will do
+jobs:
+  release:
+    # the operating system it will run on
+    runs-on: ubuntu-latest
+    # this check needs to be in place to prevent a publish loop with auto and github actions
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    # the list of steps that the action will go through
+    steps:
+      - uses: actions/checkout@v2
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+          yarn release

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.test

package.json

@@ -36,13 +36,14 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "FORCE_COLOR=true react-scripts start",
-    "build": "FORCE_COLOR=true react-scripts build",
+    "build": "cross-env BABEL_ENV=production babel src -d dist",
     "test": "FORCE_COLOR=true react-scripts test test -u --watch --env=jsdom",
     "test:coverage": "FORCE_COLOR=true react-scripts test --coverage -u",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "chromatic": "npx chromatic --exit-once-uploaded --project-token=67pl2emih92"
+    "build-storybook-docs": "build-storybook -s public --docs",
+    "release": "auto shipit --base-branch=master",
+    "chromatic": "npx chromatic --exit-once-uploaded --project-token=CHROMATIC_PROJECT_TOKEN"
   },
   "browserslist": {
     "production": [
@@ -58,14 +59,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-actions": "^6.1.11",
-    "@storybook/addon-docs": "^6.1.11",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/node-logger": "^6.1.11",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-docs": "^6.1.21",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/node-logger": "^6.1.21",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.21",
+    "auto": "^10.18.3",
     "babel-loader": "8.1.0",
+    "cross-env": "^7.0.3",
     "ejs-lint": "^1.1.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-react": "^7.22.0",

src/components/AppBar/__tests__/index.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Box } from 'reflexbox'
+
+import { render } from 'utils/testing/helperRtl'
+import Image from 'components/Image'
+import Logo from 'assets/logo.svg'
+
+import AppBar from '..'
+
+const children = () => (
+  <Box>
+    <Image maxWidth={240} alt="logo" src={Logo} />
+  </Box>
+)
+
+describe('AppBar Component', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(<AppBar />)
+    expect(getByTestId('app-bar')).toBeInTheDocument()
+  })
+
+  it('should render a logo image', () => {
+    const { getByAltText } = render(<AppBar children={children()} />)
+    expect(getByAltText(/logo/i)).toBeInTheDocument()
+  })
+})

src/components/AppBar/index.js

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types'
 
 import StyledAppBar from './style'
 
+/**
+- Use an AppBar for fixed view or section navigation and/or branding.
+**/
+
 const AppBar = ({ children, ...props }) => (
   <StyledAppBar
     flexDirection="row"
@@ -16,7 +20,10 @@ const AppBar = ({ children, ...props }) => (
 )
 
 AppBar.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   The children prop is satisfied when the AppBar is populated with an element node or string.
+  */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 }
 
 export default AppBar

src/components/AppBar/index.stories.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Box } from 'reflexbox'
+
+import Image from 'components/Image'
+import Logo from 'assets/logo.png'
+
+import AppBar from '.'
+
+export default {
+  title: 'UI Library/AppBar',
+  component: AppBar,
+  parameters: {
+    componentSubtitle:
+      'Displays a fixed app bar header for branding, navigation, etc.',
+    docs: { inlineStories: false, iframeHeight: 500 }
+  }
+}
+
+const Template = args => (
+  <AppBar {...args}>
+    <Box>
+      <Image maxWidth={240} alt="logo" src={Logo} />
+    </Box>
+  </AppBar>
+)
+
+export const Default = Template.bind({})