add branding

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@yext/slapshot/typescript-react', 'plugin:storybook/recommended']
+  extends: ['@yext/eslint-config', 'plugin:storybook/recommended']
 };

.storybook/main.js

@@ -1,15 +1,24 @@
-const path = require('path');
 module.exports = {
-  "stories": [
+  stories: [
     "../tests/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['src/components/**']
+        }
+      }
+    },
   ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  staticDirs: ['./public'],
 }

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" href="./yextIcon.svg">

.storybook/manager.cjs

@@ -0,0 +1,5 @@
+const { addons } = require('@storybook/addons');
+
+addons.setConfig({
+  theme: require('./yextTheme.cjs')
+});

.storybook/preview.js

@@ -1,3 +1,5 @@
+import { runOnly } from './wcagConfig';
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +8,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  a11y: {
+    options: {
+      runOnly
+    }
+  },
+  options: {
+    storySort: {
+      order: [
+        'Address'
+      ],
+    },
+  },
 }

.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+import { Page } from 'playwright-core';
+import { runOnly } from './wcagConfig';
+
+/**
+ * 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 = {
+  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,
+      },
+    });
+  },
+};
+
+export default renderFunctions;

.storybook/wcagConfig.ts

@@ -0,0 +1,6 @@
+import { axeOptionsConfig } from 'axe-playwright';
+
+export const runOnly: axeOptionsConfig['axeOptions']['runOnly'] = {
+  type: 'tag',
+  values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
+};

.storybook/yextTheme.cjs

@@ -0,0 +1,33 @@
+
+const { create } = require('@storybook/theming');
+
+module.exports = create({
+  base: 'light',
+  colorPrimary: '#eeeff0',
+  colorSecondary: '#2563eb',
+
+  // UI
+  appBg: '#fafafa',
+  appContentBg: 'white',
+  appBorderColor: '#eeeff0',
+  appBorderRadius: 6,
+
+  // Text colors
+  textColor: 'black',
+  textMutedColor: '#4b5563',
+
+  // Toolbar colors
+  barTextColor: '#4b5563',
+  barBg: '#eeeff0',
+
+  // Form
+  inputBg: 'white',
+  inputTextColor: 'black',
+  inputBorder: '#9ca3af',
+  inputBorderRadius: 4,
+
+  // Brand logo
+  brandTitle: 'Yext Component Library',
+  brandUrl: 'https://github.com/yext/search-ui-react',
+  brandImage: './logo.png'
+});