Merge branch 'dev' into test

Author: adamdoe

.github/workflows/backstop-test.yml

@@ -0,0 +1,34 @@
+name: BackstopJS Visual Regression Tests
+
+on:
+  workflow_dispatch:
+
+jobs:
+  backstop-tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build packages
+        run: lerna run build
+
+      - name: Start Storybook
+        run: yarn storybook -p 6006 &
+
+      - name: Wait for Storybook to be available
+        run: npx wait-on http://localhost:6006 --timeout 120000
+
+      - name: Run BackstopJS tests
+        run: yarn backstop:test

.github/workflows/unit-test.yml

@@ -8,7 +8,7 @@ on:
     branches: ['dev']
 
 jobs:
-  build:
+  unit-tests:
     runs-on: ubuntu-latest
 
     steps:
@@ -18,6 +18,6 @@ jobs:
         with:
           node-version: 20.x
           cache: 'npm'
-      - run: npx yarn install
+      - run: yarn install --production=false
       - run: lerna run build
       - run: npm run test --workspaces

.gitignore

@@ -47,3 +47,8 @@ coverage/
 lerna-debug.log
 
 .history/
+
+# BackstopJS - ignore generated test files and reports
+/backstop_data/bitmaps_test/
+/backstop_data/html_report/
+/backstop_data/ci_report/

.storybook/preview-head.html

@@ -19,5 +19,17 @@
   .sbdocs-h3 {
     color: #3a569b !important;
   }
+
+  /* Add 1rem padding when editor isn't visible to mimic DFE */
+  .cove-storybook:not(:has(.isEditor)) {
+    padding: 1rem;
+  }
+
+  /* Remove Storybook's default padding to prevent double padding */
+  #storybook-root,
+  body.sb-main-padded,
+  body.sb-show-main.sb-main-padded {
+    padding: 0 !important;
+  }
 </style>
 <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />