Merge pull request #30 from uswds/mh/add-gh-actions

Add storybook testing and CI

.github/workflows/ui-test.yml

@@ -0,0 +1,17 @@
+name: Storybook Tests
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install playwright
+        run: npx playwright install
+      - name: Run Storybook tests
+        run: npm run test:storybook:ci

web-components/.gitignore → .gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
+*storybook.log
+_site
+storybook-static

.nvmrc

@@ -0,0 +1 @@
+lts/*

web-components/.storybook/main.js → .storybook/main.js

@@ -1,13 +1,14 @@
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
   stories: [
-    "../src/**/*.mdx",
+    "../storybook/**/*.mdx",
     "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/web-components-vite",

web-components/.storybook/preview.js → .storybook/preview.js

@@ -1,7 +1,7 @@
 import UswdsTheme from "./UswdsTheme";
 
 // Global component styles.
-import "../src/index.css";
+import "../storybook/index.css";
 // Theme overrides.
 import "./index.css";
 

.storybook/test-runner.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y, configureAxe } from "axe-playwright";
+import { getStoryContext } from "@storybook/test-runner";
+
+const config = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    const storyContext = await getStoryContext(page, context);
+
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+    await checkA11y(page, "#storybook-root", {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;