Some updates

.storybook/pages/WireframeDemo/WireframeDemo.stories.ts

@@ -20,6 +20,6 @@ export const WatchPage: StoryObj<Args> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const nextPageButton = await canvas.findByText('Hogwarts');
-    userEvent.click(nextPageButton);
+    await userEvent.click(nextPageButton);
   },
 };

.stylelintrc

@@ -12,6 +12,7 @@
     "custom-property-empty-line-before": "never",
     "max-nesting-depth": 2,
     "no-descending-specificity": null,
+    "media-query-no-invalid": null,
     "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [
       true,

package.json

@@ -115,7 +115,7 @@
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/story-utils": "^4.0.0",
-    "@commitlint/cli": "^18.4.0",
+    "@commitlint/cli": "^18.4.1",
     "@commitlint/config-conventional": "^18.4.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@omlet/cli": "^1.0.1-beta.38",
@@ -130,7 +130,7 @@
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/react": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
@@ -142,15 +142,15 @@
     "@types/react-dom": "^18.2.15",
     "@types/react-portal": "^4.0.6",
     "axe-core": "4.8.2",
-    "chromatic": "^7.6.0",
+    "chromatic": "^9.0.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-testing-library": "^5.11.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.1.2",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -164,19 +164,18 @@
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.3.0",
+    "rollup": "^4.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
-    "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",
     "storybook": "^7.5.3",
     "style-dictionary": "^3.9.0",
     "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^10.0.1",
+    "stylelint-config-recommended": "^13.0.0",
     "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -134,6 +134,6 @@ export const LongTextMenu: StoryObj<Args> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const dropdownMenuTrigger = await canvas.findByRole('button');
-    userEvent.click(dropdownMenuTrigger);
+    await userEvent.click(dropdownMenuTrigger);
   },
 };

src/components/Card/Card.stories.tsx

@@ -191,6 +191,6 @@ export const InteractiveOnHover: StoryObj<Args> = {
     const canvas = within(canvasElement);
     const cardContents = await canvas.findByText('Card Contents');
 
-    userEvent.hover(cardContents);
+    await userEvent.hover(cardContents);
   },
 };

src/components/FiltersDrawer/FiltersDrawer.stories.tsx

@@ -48,7 +48,7 @@ export const Default: StoryObj<Args> = {
     if (isChromatic()) {
       const canvas = within(canvasElement);
       const filtersTrigger = await canvas.findByRole('button');
-      userEvent.click(filtersTrigger);
+      await userEvent.click(filtersTrigger);
     }
   },
 };
@@ -233,7 +233,7 @@ export const OverflowInteractive: StoryObj<Args> = {
     if (isChromatic()) {
       const canvas = within(canvasElement);
       const filtersTrigger = await canvas.findByRole('button');
-      userEvent.click(filtersTrigger);
+      await userEvent.click(filtersTrigger);
     }
   },
 };

src/components/FiltersPopover/FiltersPopover.stories.tsx

@@ -51,7 +51,7 @@ export const Default: StoryObj<Args> = {
     if (isChromatic()) {
       const canvas = within(canvasElement);
       const filtersTrigger = await canvas.findByRole('button');
-      userEvent.click(filtersTrigger);
+      await userEvent.click(filtersTrigger);
     }
   },
 };
@@ -246,7 +246,7 @@ export const OverflowInteractive: StoryObj<Args> = {
     if (isChromatic()) {
       const canvas = within(canvasElement);
       const filtersTrigger = await canvas.findByRole('button');
-      userEvent.click(filtersTrigger);
+      await userEvent.click(filtersTrigger);
     }
   },
 };

src/components/HorizontalStepper/HorizontalStepper.tsx

@@ -114,8 +114,8 @@ export const HorizontalStepper = ({
       index < activeIndex
         ? 'complete'
         : index === activeIndex
-        ? 'active'
-        : 'incomplete';
+          ? 'active'
+          : 'incomplete';
 
     /**
      * Add step to stepComponents.

src/components/Menu/Menu.stories.tsx

@@ -207,9 +207,9 @@ export const Opened: StoryObj<MenuProps> = {
     // Sets the delay (in milliseconds) for a specific story.
     chromatic: { delay: 300 },
   },
-  play: () => {
-    userEvent.tab();
-    userEvent.keyboard(' ', { delay: 300 });
+  play: async () => {
+    await userEvent.tab();
+    await userEvent.keyboard(' ', { delay: 300 });
   },
 };
 

src/components/PageHeader/PageHeader.module.css

@@ -53,7 +53,7 @@
 
 /**
  * Page header right
- * 
+ *
  * On larger viewports, add margin-left to keep space between title and
  * header-right content. If additional margin needs to be added (i.e.
  * margin-top on smaller viewports), add a spacing utility class to the

src/components/Popover/Popover.stories.tsx

@@ -77,7 +77,7 @@ export const Default: Story = {
     if (isChromatic()) {
       const canvas = within(canvasElement);
       const filtersTrigger = await canvas.findByRole('button');
-      userEvent.click(filtersTrigger);
+      await userEvent.click(filtersTrigger);
     }
   },
 };

src/components/Slider/Slider.stories.tsx

@@ -161,7 +161,7 @@ export const Tooltip: Story = {
       const canvas = within(canvasElement);
       const slider = await canvas.findByRole('slider');
 
-      userEvent.hover(slider);
+      await userEvent.hover(slider);
     }
   },
 };
@@ -177,8 +177,8 @@ export const Focus: Story = {
      */
     snapshot: { skip: true },
   },
-  play: () => {
-    userEvent.tab();
+  play: async () => {
+    await userEvent.tab();
   },
 };
 

src/components/Table/Table.tsx

@@ -222,15 +222,15 @@ const TableHeaderCell = ({
     sortDirection === 'ascending'
       ? 'arrow-narrow-up'
       : sortDirection === 'descending'
-      ? 'arrow-narrow-down'
-      : 'unfold-more';
+        ? 'arrow-narrow-down'
+        : 'unfold-more';
 
   const iconTitle =
     sortDirection === 'ascending'
       ? 'Sorted, ascending'
       : sortDirection === 'descending'
-      ? 'Sorted, descending'
-      : 'Sort';
+        ? 'Sorted, descending'
+        : 'Sort';
 
   return (
     <th