[wb-1797-cell-color-contrast] Merge branch 'main' into wb-1797-cell-c…

…olor-contrast

.changeset/cold-rivers-travel.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-search-field": major
+---
+
+Remove `light` variant from SearchField as it is no longer needed/used.

.changeset/curly-poems-sin.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": major
+---
+
+Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended.

.changeset/hot-panthers-kneel.md

@@ -0,0 +1,9 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+---
+
+- Reworked semanticColor actions to use a new structure. Every `action` now includes `default`, `hover` and `press` states, and each state includes `border`, `background` and `foreground` tokens.
+
+- Renamed `primary` to `progressive`.
+
+- Added more categories to actions: `filled` and  `outline`.

.changeset/tricky-yaks-mate.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": major
+---
+
+Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`.

.changeset/wet-pigs-end.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": major
+---
+
+Remove `light` variant from LabeledTextField, TextField and TextArea"

.github/workflows/chromatic-build.yml

@@ -98,6 +98,15 @@ jobs:
         # Generate snapshots for only changed stories
         # See: https://www.chromatic.com/docs/turbosnap
         onlyChanged: true
+    # Install Playwright browsers so Vitest browser mode can run story tests
+    - name: Install playwright dependencies
+      if: ${{ inputs.target == 'review' }}
+      run: yarn exec playwright install chromium --with-deps
+    - name: Run Storybook tests
+      if: ${{ inputs.target == 'review' }}
+      run: yarn test:storybook
+      env:
+        SB_URL: '${{ steps.chromatic_publish.outputs.storybookUrl }}'
 
     # (if) Run this step on dependabot or changesets PRs.
     - name: Skip Chromatic builds (dependabot or changesets PRs)

.github/workflows/chromatic-pr.yml

@@ -27,7 +27,7 @@ jobs:
     if: |
       github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' &&
       !startsWith(github.head_ref, 'changeset-release/')
-    name: Chromatic - Build on regular PRs
+    name: Chromatic - Build and test on regular PRs
     uses: ./.github/workflows/chromatic-build.yml
     with:
       target: 'review'

.storybook/main.ts

@@ -1,6 +1,3 @@
-import {resolve, dirname, join} from "path";
-import {mergeConfig} from "vite";
-import turbosnap from "vite-plugin-turbosnap";
 import type {StorybookConfig} from "@storybook/react-vite";
 
 const config: StorybookConfig = {
@@ -9,52 +6,17 @@ const config: StorybookConfig = {
         "../__docs__/**/*.mdx",
     ],
     addons: [
-        getAbsolutePath("@storybook/addon-essentials"),
-        getAbsolutePath("@storybook/addon-a11y"),
-        getAbsolutePath("@storybook/addon-designs"),
-        getAbsolutePath("@storybook/addon-interactions"),
-        getAbsolutePath("@storybook/addon-mdx-gfm"),
-        getAbsolutePath("storybook-addon-pseudo-states"),
+        "@storybook/addon-essentials",
+        "@storybook/addon-a11y",
+        "@storybook/addon-designs",
+        "storybook-addon-pseudo-states",
+        "@storybook/experimental-addon-test",
     ],
     staticDirs: ["../static"],
     core: {
         disableTelemetry: true,
     },
-    framework: getAbsolutePath("@storybook/react-vite"),
-    async viteFinal(config, {configType}) {
-        // Merge custom configuration into the default config
-        const mergedConfig = mergeConfig(config, {
-            resolve: {
-                // Allow us to detect changes from local wonder-blocks packages.
-                alias: [
-                    {
-                        find: /^@khanacademy\/wonder-blocks(-.*)$/,
-                        replacement: resolve(
-                            __dirname,
-                            "../packages/wonder-blocks$1/src",
-                        ),
-                    },
-                ],
-            },
-        });
-
-        // Add turbosnap to production builds so we can let Chromatic take
-        // snapshots only to stories associated with the current PR.
-        if (configType === "PRODUCTION") {
-            config.plugins?.push(
-                turbosnap({rootDir: config.root || process.cwd()}),
-            );
-        }
-
-        return mergedConfig;
-    },
-    docs: {
-        autodocs: true,
-    },
+    framework: "@storybook/react-vite",
 };
 
 export default config;
-
-function getAbsolutePath(value: string): any {
-    return dirname(require.resolve(join(value, "package.json")));
-}

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
-
+import {Decorator} from "@storybook/react";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import Link from "@khanacademy/wonder-blocks-link";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
@@ -95,32 +95,29 @@ const parameters = {
     },
 };
 
-const decorators = [
-    (Story, context) => {
-        const theme = context.globals.theme;
-        const enableRenderStateRootDecorator =
-            context.parameters.enableRenderStateRootDecorator;
-
-        if (enableRenderStateRootDecorator) {
-            return (
-                <RenderStateRoot>
-                    <ThemeSwitcherContext.Provider value={theme}>
-                        <Story />
-                    </ThemeSwitcherContext.Provider>
-                </RenderStateRoot>
-            );
-        }
+const withThemeSwitcher: Decorator = (
+    Story,
+    {globals: {theme}, parameters: {enableRenderStateRootDecorator}},
+) => {
+    if (enableRenderStateRootDecorator) {
         return (
-            <ThemeSwitcherContext.Provider value={theme}>
-                <Story />
-            </ThemeSwitcherContext.Provider>
+            <RenderStateRoot>
+                <ThemeSwitcherContext.Provider value={theme}>
+                    <Story />
+                </ThemeSwitcherContext.Provider>
+            </RenderStateRoot>
         );
-    },
-];
+    }
+    return (
+        <ThemeSwitcherContext.Provider value={theme}>
+            <Story />
+        </ThemeSwitcherContext.Provider>
+    );
+};
 
 const preview: Preview = {
     parameters,
-    decorators,
+    decorators: [withThemeSwitcher],
     globalTypes: {
         // Allow the user to select a theme from the toolbar.
         theme: {
@@ -147,6 +144,8 @@ const preview: Preview = {
             },
         },
     },
+
+    tags: ["autodocs"],
 };
 
 export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);