v1.1.0

.github/workflows/coverage.yml

@@ -15,6 +15,7 @@ jobs:
       test_script: npm run test
     secrets:
       caller_github_token: ${{ secrets.GITHUB_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
   individual_coverage_percentages:
     if: ${{ github.event_name == 'pull_request' }}
     runs-on: ubuntu-latest

.github/workflows/percy-snapshots.yml

@@ -13,3 +13,4 @@ jobs:
       percy_script: npx percy storybook ./storybook-static
     secrets:
       PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/run-linting.yml

@@ -2,9 +2,8 @@ name: Run Linter
 
 on:
   pull_request:
-    branches:
-      - main
+    branches: [main, develop, feature/*]
 
 jobs:
   linting:
-    uses: yext/slapshot-reusable-workflows/.github/workflows/run-linting.yml@v1
+    uses: yext/slapshot-reusable-workflows/.github/workflows/run-linting.yml@v1

.github/workflows/run-tests.yml

@@ -6,15 +6,29 @@ name: Run Tests
 on: [push, pull_request]
 
 jobs:
+  call_run_tests-react-18:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
+    with:
+      build_script: |
+        npm i -D react@18 react-dom@18
+        npm run build
+      node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
+
   call_run_tests-react-17:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
       node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
   call_run_tests-react-16:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
       build_script: |
         npm i -D react@16.14 react-dom@16.14
         npm run build
-      node_matrix: '["14.x", "16.x", "18.x"]'
+      node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/sync-sites-branch.yml

@@ -4,20 +4,23 @@ on:
   push:
     branches:
       - main
+
 jobs:
   sync-branches:
     runs-on: ubuntu-latest
     name: Syncing branches
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - uses: mtanzi/action-automerge@v1
+        uses: actions/checkout@v3
+      - uses: devmasx/merge-branch@v1.4.0
         with:
-          source: "${{ github.event.repository.default_branch }}"
-          target: "storybook-site"
+          type: now
+          from_branch: ${{ github.event.repository.default_branch }}
+          target_branch: storybook-site
           github_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: mtanzi/action-automerge@v1
+      - uses: devmasx/merge-branch@v1.4.0
         with:
-          source: "${{ github.event.repository.default_branch }}"
-          target: "test-site"
+          type: now
+          from_branch: ${{ github.event.repository.default_branch }}
+          target_branch: test-site
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sync_develop_and_main.yml

@@ -0,0 +1,11 @@
+name: Create PR from main to develop
+
+on:
+  push:
+    branches: main
+
+jobs:
+  call_sync_develop_and_main:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/sync_develop_and_main.yml@v1
+    secrets:
+      caller_github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/version_update.yml

@@ -0,0 +1,11 @@
+name: Update package version for release & hotfix branches
+
+on:
+  push:
+    branches: [release/*, hotfix/*]
+
+jobs:
+  call_version_update:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/version_update.yml@v1
+    secrets:
+      caller_github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/wcag_test.yml

@@ -2,13 +2,13 @@ name: WCAG tests
 
 on:
   pull_request:
-    branches:
-      - main
+    branches: [main, develop, feature/*]
 
 jobs:
   call_wcag_test:
     uses: yext/slapshot-reusable-workflows/.github/workflows/wcag_test.yml@v1
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
     with:
       build_script: ./tests/scripts/start-storybook.sh

.gitignore

@@ -7,3 +7,6 @@ lib/
 # testing
 /coverage
 /storybook-static
+
+.env
+test-site/.env

.storybook/main.js

@@ -30,8 +30,16 @@ module.exports = {
   framework: '@storybook/react',
   staticDirs: ['./public'],
   webpackFinal: async (config) => {
+    //use commonjs entry point for "@reach" packages
+    config.resolve.alias['@reach/auto-id'] = require.resolve('@reach/auto-id');
+    config.resolve.alias['@reach/utils'] = require.resolve('@reach/utils');
+
     config.resolve.alias['./SearchCore'] = require.resolve('../tests/__fixtures__/core/SearchCore.ts');
     config.resolve.alias['../utils/location-operations'] = require.resolve('../tests/__fixtures__/utils/location-operations.ts');
     return config;
-  }
+  },
+  env: (config) => ({
+    ...config,
+    REACT_APP_MAPBOX_API_KEY: process.env.MAPBOX_API_KEY || process.env.REACT_APP_MAPBOX_API_KEY,
+  }),
 };

.storybook/preview.js

@@ -1,4 +1,5 @@
 import './index.css';
+import 'mapbox-gl/dist/mapbox-gl.css';
 import { SearchCoreDecorator } from '../tests/__fixtures__/core/SearchCore';
 import { runOnly } from './wcagConfig';
 
@@ -22,6 +23,7 @@ export const parameters = {
         'SearchBar',
         'UniversalResults',
         'VerticalResults',
+        'MapboxMap',
         'DirectAnswer',
         'FilterSearch',
         'StaticFilters',
@@ -42,4 +44,4 @@ export const parameters = {
 };
 
 // Add the decorator to all stories
-export const decorators = [SearchCoreDecorator];
+export const decorators = [SearchCoreDecorator];

.storybook/tailwind.config.cjs

@@ -4,5 +4,14 @@ module.exports = {
   ...tailwindConfig,
   content: [
     './src/**/*.{ts,tsx}'
-  ]
+  ],
+  theme: {
+    ...tailwindConfig.theme,
+    extend: {
+      ...tailwindConfig.theme.extend,
+      borderColor: {
+        DEFAULT: 'black'
+      }
+    }
+  }
 };

.storybook/test-runner.ts

@@ -1,28 +1,36 @@
 import { injectAxe, checkA11y } from 'axe-playwright';
 import { Page } from 'playwright-core';
 import { runOnly } from './wcagConfig';
+import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
  */
-const renderFunctions = {
+const renderFunctions: TestRunnerConfig = {
   async preRender(page: Page) {
     await injectAxe(page);
   },
-  async postRender(page: Page, context) {
-    await checkA11y(page, '#root', {
-      axeOptions: {
-        runOnly,
-        rules: {
-          'color-contrast': { enabled: context.name !== 'Loading' }
-        },
-      },
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
+  async postRender(page: Page, context: TestContext) {
+    await checkA11y(
+      page,
+      {
+        include: ['#root'],
+        exclude: ['#root .mapboxgl-canvas-container'],
       },
-    });
+      {
+        axeOptions: {
+          runOnly,
+          rules: {
+            'color-contrast': { enabled: context.name !== 'Loading' },
+          },
+        },
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      }
+    );
   },
 };