Add Chromatic (#719)

.github/workflows/chromatic.yml

@@ -0,0 +1,41 @@
+---
+name: Chromatic
+
+on: push
+
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Set up Node
+        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
+        with:
+          node-version: "16"
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
+        with:
+          fetch-depth: 0
+
+      - name: Cache npm
+        id: npm-cache
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        with:
+          path: "~/.npm"
+          key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Node dependencies
+        run: npm ci
+        working-directory: ./components
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@c72f0b48c8887c0ef0abe18ad865a6c1e01e73c6
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: ./components
+          exitOnceUploaded: true
+          onlyChanged: true
+          externals: "[\"components/**/*.scss\", \"components/tailwind.config*.js\"]"

components/.storybook/main.js

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

components/package.json

@@ -9,7 +9,8 @@
     "test": "ng test",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "storybook": "npm run docs:json && start-storybook -p 6006",
-    "build-storybook": "npm run docs:json && build-storybook"
+    "build-storybook": "npm run docs:json && build-storybook",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "private": true,
   "dependencies": {
@@ -22,6 +23,7 @@
     "@angular/platform-browser": "^12.2.13",
     "@angular/platform-browser-dynamic": "^12.2.13",
     "@bitwarden/jslib-angular": "file:../angular",
+    "bootstrap": "4.6.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "@angular/elements": "^12.2.13",
     "@babel/core": "^7.16.10",
     "@compodoc/compodoc": "^1.1.16",
+    "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
@@ -42,6 +45,7 @@
     "@webcomponents/custom-elements": "^1.5.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
+    "chromatic": "^6.5.2",
     "jasmine-core": "~3.10.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",

components/src/stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Jslib/Introduction" />
+<Meta title="Common/Introduction" />
 
 <style>{`
   .subheading {
@@ -77,36 +77,9 @@ import { Meta } from "@storybook/addon-docs";
     font-size: 14px;
     line-height: 20px;
   }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-
 `}</style>
 
-# Welcome to Storybook
+# Bitwarden Component Library
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
 That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
@@ -188,8 +161,3 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     </span>
   </a>
 </div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{" "}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>