Merge pull request #7346 from Sage/FE-7237_storybook-play-functions-installation

chore(storybook): install addon interactions, test and pseudo packages

Author: DipperTheDan

.storybook/main.ts

@@ -48,6 +48,8 @@ const config: StorybookConfig = {
         },
       },
     },
+    "@storybook/addon-interactions",
+    "storybook-addon-pseudo-states",
     "@storybook/addon-toolbars",
     "@storybook/addon-viewport",
     "@chromatic-com/storybook",

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import { Preview } from "@storybook/react";
+import { configure } from "@storybook/test";
 
 import "../src/style/fonts.css";
 
@@ -9,6 +10,9 @@ import withLocaleSelector from "./with-locale-selector";
 import withPortalProvider from "./with-portal-provider";
 import { withThemeProvider, globalThemeProvider } from "./withThemeProvider";
 
+// Configure the testIdAttribute to look for data-role when querying elements using `getByTestId`.
+configure({ testIdAttribute: "data-role" });
+
 const customViewports = {
   xsm: { name: "Extra small", styles: { width: "320px", height: "900px" } },
   sm: { name: "Small", styles: { width: "640px", height: "900px" } },

.storybook/utils/user-interaction-pause.ts

@@ -0,0 +1,6 @@
+// Function to mimic how a user would pause between interactions
+function userInteractionPause(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export default userInteractionPause;