Add chromatic workflow

.github/workflows/chromatic.yml

@@ -0,0 +1,32 @@
+name: Chromatic
+on:
+  pull_request:
+    branches:
+      - master
+jobs:
+  snapshot:
+    name: Run visual regression tests with chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Read .nvmrc
+        run: echo ::set-output name=nvmrc::$(cat .nvmrc)
+        id: nvm
+      - name: Setup node
+        uses: actions/[email protected]
+        with:
+          node-version: '${{ steps.nvm.outputs.nvmrc }}'
+      - uses: actions/cache@v1
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-v1-
+      - name: Install
+        run: yarn install --frozen-lockfile && yarn bootstrap
+      - uses: chromaui/action@v1
+        with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

netlify.toml

@@ -1,4 +1,4 @@
 [build]
-  command = "yarn build:storybook"
+  command = "yarn build-storybook"
   publish = "storybook-static"
   environment = { YARN_VERSION = "1.17.3" }

package.json

@@ -22,7 +22,7 @@
     "dev": "yarn && concurrently --kill-others 'yarn dev:tokens' 'yarn dev:themes' 'yarn start-storybook -p 6006'",
     "dev:themes": "chokidar './packages/flame/themes/**/*.ts' -c 'lerna run --scope @lightspeed/flame build:themes'",
     "dev:tokens": "chokidar './packages/flame-tokens/src/*.ts' -c 'lerna run --scope @lightspeed/flame-tokens prepublish'",
-    "build:storybook": "yarn bootstrap && build-storybook -c .storybook",
+    "build-storybook": "yarn bootstrap && build-storybook -c .storybook",
     "lerna:version": "lerna version --no-push",
     "lerna:version:revert": "./scripts/revert-lerna-version",
     "version": "node ./scripts/prepare-release",
@@ -36,8 +36,8 @@
   "dependencies": {
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.9",
-    "@styled-system/theme-get": "5.0.16",
     "@styled-system/css": "^5.1.5",
+    "@styled-system/theme-get": "5.0.16",
     "emotion-theming": "^10.0.7",
     "polished": "^2.3.0",
     "prop-types": "^15.6.0",
@@ -63,8 +63,8 @@
     "@storybook/addon-docs": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
-    "@testing-library/react": "^10.0.5",
     "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.0.5",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.123",
@@ -79,6 +79,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "child-process-promise": "^2.2.1",
     "chokidar-cli": "^1.2.0",
+    "chromatic": "^5.0.0",
     "codecov": "^3.6.1",
     "concurrently": "^3.5.1",
     "eslint": "^5.14.1",
@@ -100,8 +101,8 @@
     "react-test-renderer": "^16.8.6",
     "sass": "^1.14.3",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.21.0",
     "storybook-readme": "^5.0.8",
+    "style-loader": "^0.21.0",
     "typescript": "^3.5.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^2.1.3",

packages/flame/src/Alert/story.tsx

@@ -25,7 +25,7 @@ const Alerts = () => (
           title={`${type[0].toUpperCase().concat(type.slice(1))}`}
           mb={2}
         >
-          Description of alert.
+          Description of an alert.
         </Alert>
       );
     })}
@@ -40,7 +40,7 @@ const Alerts = () => (
           mb={2}
           noCloseBtn
         >
-          Description of alert with no close button.
+          Description of an alert with no close button.
         </Alert>
       );
     })}