chore: move stories into folders

src/stories/Accordion.stories.ts → src/stories/Components/Accordion.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+import overflowFixture from "../../../cypress/fixtures/overflowingData.json";
 import { expect, within } from "@storybook/test";
 
 // Note this type is re-used in the Dropdown.stories.ts file

src/stories/BaseButton.stories.ts → src/stories/Components/BaseButton.stories.ts

@@ -2,9 +2,12 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 
 import BaseButton from "@/components/BaseButton.vue";
 
-import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+import overflowFixture from "../../../cypress/fixtures/overflowingData.json";
 import { expect, within } from "@storybook/test";
-import { checkChildrenForOverflow, checkElementForTextOverflow } from "./utils";
+import {
+  checkChildrenForOverflow,
+  checkElementForTextOverflow,
+} from "../utils";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof BaseButton> = {

src/stories/BaseModal.stories.ts → src/stories/Components/BaseModal.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import BaseModal from "@/components/modals/BaseModal.vue";
 import { expect, within } from "@storybook/test";
 
-import overflowFixture from "../../cypress/fixtures/overflowingData.json";
+import overflowFixture from "../../../cypress/fixtures/overflowingData.json";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof BaseModal> = {

src/stories/CardElement.stories.ts → src/stories/Components/CardElement.stories.ts

@@ -4,8 +4,11 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import CardElement from "@/components/CardElement.vue";
 import { h } from "vue";
 
-import overflowFixture from "../../cypress/fixtures/overflowingData.json";
-import { checkChildrenForOverflow, checkElementForTextOverflow } from "./utils";
+import overflowFixture from "../../../cypress/fixtures/overflowingData.json";
+import {
+  checkChildrenForOverflow,
+  checkElementForTextOverflow,
+} from "../utils";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof CardElement> = {

src/stories/Dropdown.stories.ts → src/stories/Components/Dropdown.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import overflowFixture from "../../cypress/fixtures/overflowingData.json";
-import { expect, within } from "@storybook/test";
-import { checkElementForTextOverflow } from "./utils";
+import overflowFixture from "../../../cypress/fixtures/overflowingData.json";
+import { expect, userEvent, within } from "@storybook/test";
+import { checkElementForTextOverflow } from "../utils";
 import type { HTMLDetailsElementCustom } from "./Accordion.stories";
 
 const meta: Meta<HTMLDetailsElementCustom> = {
@@ -116,10 +116,13 @@ export const WithRadioButtons: Story = {
 };
 
 export const WithCheckboxes: Story = {
-  render: ({ optionText }) => ({
+  args: {
+    open: true,
+  },
+  render: ({ optionText, title }) => ({
     template: `
   <summary>
-    Select phases of matter...
+    ${title}
   </summary>
   <ul>
     <li>
@@ -148,4 +151,21 @@ export const WithCheckboxes: Story = {
     </li>
   </ul>`,
   }),
+
+  play: async ({ canvasElement, args }: any) => {
+    const canvas = within(canvasElement);
+    const checkboxes = canvas.getAllByRole("checkbox");
+
+    expect(checkboxes).toHaveLength(4);
+
+    // Clicking the first checkbox should check it and not hide the dropdown
+    await userEvent.click(checkboxes[0]);
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[0]).toBeVisible();
+
+    // Clickling on the summary should hide the dropdown
+    const summary = canvas.getByText(args.title);
+    await userEvent.click(summary);
+    expect(checkboxes[0]).not.toBeVisible();
+  },
 };