feat: implement collapsible component (#1141)

* feat: implement base collapsible component

* feat: add interactive tests

* test: reduce interaction test complexity

* style: code format

* style: code format

* update snapshots

* chore: add changeset

* feat: add transition aniamtion keyframes

* fix: add `keepMounted` prop to prevent animation removal

* test: add unit tests

* tests: refine unit tests

* style: code format

* test: fix failing interactive test

* chore: add changeset

* refactor: change story name

Author: alastair-simon

.changeset/fair-eels-reply.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add `mt-collapsible` component to component-library

.changeset/late-months-jam.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add `mt-collapsible` component to component-library

packages/component-library/__snapshots__/components-mt-collapsible-interaction-tests--visual-test-disabled-snap.png

@@ -0,0 +1,71 @@
+<template>
+  <CollapsibleContent
+    class="mt-collapsible-content"
+    :as="as"
+    :as-child="asChild"
+    :force-mount="forceMount"
+    @content-found="() => emits('contentFound')"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleContent } from "reka-ui";
+
+withDefaults(
+  defineProps<{
+    as?: string | object;
+    asChild?: boolean;
+    forceMount?: boolean;
+  }>(),
+  {
+    as: "div",
+    asChild: false,
+    forceMount: false,
+  },
+);
+
+const emits = defineEmits<{
+  contentFound: [];
+}>();
+</script>
+
+<style>
+.mt-collapsible-content {
+  overflow: hidden;
+}
+
+.mt-collapsible-content[data-state="open"] {
+  animation: mt-collapsible-slide-down 300ms ease-out;
+}
+
+.mt-collapsible-content[data-state="closed"] {
+  animation: mt-collapsible-slide-up 300ms ease-out;
+}
+
+@keyframes mt-collapsible-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes mt-collapsible-slide-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mt-collapsible-content[data-state="open"],
+  .mt-collapsible-content[data-state="closed"] {
+    animation: none;
+  }
+}
+</style>

packages/component-library/__snapshots__/components-mt-collapsible-interaction-tests--visual-test-starts-closed-snap.png

@@ -0,0 +1,20 @@
+<template>
+  <CollapsibleTrigger class="mt-collapsible-trigger" :as="as" :as-child="asChild">
+    <slot />
+  </CollapsibleTrigger>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleTrigger } from "reka-ui";
+
+withDefaults(
+  defineProps<{
+    as?: string | object;
+    asChild?: boolean;
+  }>(),
+  {
+    as: "button",
+    asChild: false,
+  },
+);
+</script>

packages/component-library/src/components/layout/mt-collapsible/mt-collapsible-content.vue

@@ -0,0 +1,82 @@
+import { within, userEvent, expect, waitFor } from "@storybook/test";
+
+import MtButton from "../../form/mt-button/mt-button.vue";
+import MtCollapsible from "./mt-collapsible.vue";
+import MtCollapsibleTrigger from "./mt-collapsible-trigger.vue";
+import MtCollapsibleContent from "./mt-collapsible-content.vue";
+
+import meta, { type MtCollapsibleMeta, type MtCollapsibleStory } from "./mt-collapsible.stories";
+
+export default {
+  ...meta,
+  title: "Components/mt-collapsible/Interaction tests",
+  tags: ["!autodocs"],
+} as MtCollapsibleMeta;
+
+const sharedComponents = {
+  MtCollapsible,
+  MtCollapsibleTrigger,
+  MtCollapsibleContent,
+  MtButton,
+};
+
+export const VisualTestStartsClosed: MtCollapsibleStory = {
+  name: "Should start closed and open on trigger click",
+  render: () => ({
+    components: sharedComponents,
+    template: `
+      <mt-collapsible>
+        <mt-collapsible-trigger as-child>
+          <mt-button variant="primary">Toggle content</mt-button>
+        </mt-collapsible-trigger>
+
+        <mt-collapsible-content>
+          <p style="margin-top: 8px; font-size: var(--font-size-xs);">This content is revealed and hidden by the trigger above.</p>
+        </mt-collapsible-content>
+      </mt-collapsible>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toggleButton = canvas.getByRole("button", { name: "Toggle content" });
+    const content = canvas.getByText("This content is revealed and hidden by the trigger above.");
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(content).not.toBeVisible();
+
+    await userEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+      expect(content).toBeVisible();
+    });
+  },
+};
+
+export const VisualTestDisabled: MtCollapsibleStory = {
+  name: "Should not toggle when disabled",
+  render: () => ({
+    components: sharedComponents,
+    template: `
+      <mt-collapsible disabled>
+        <mt-collapsible-trigger as-child>
+          <mt-button variant="primary" disabled>Toggle content</mt-button>
+        </mt-collapsible-trigger>
+
+        <mt-collapsible-content>
+          <p style="margin-top: 8px; font-size: var(--font-size-xs);">This content is revealed and hidden by the trigger above.</p>
+        </mt-collapsible-content>
+      </mt-collapsible>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toggleButton = canvas.getByRole("button", { name: "Toggle content" });
+    const content = canvas.getByText("This content is revealed and hidden by the trigger above.");
+
+    await userEvent.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(content).not.toBeVisible();
+  },
+};

packages/component-library/src/components/layout/mt-collapsible/mt-collapsible-trigger.vue

@@ -0,0 +1,57 @@
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks";
+
+import * as CollapsibleStories from "./mt-collapsible.stories";
+import ComponentPageHeader from "../../_docs/component-page-header.js";
+
+<Meta of={CollapsibleStories} />
+
+<ComponentPageHeader
+  title="Collapsible"
+  tagName="mt-collapsible"
+  packageImports={[
+    "MtCollapsible",
+    "MtCollapsibleTrigger",
+    "MtCollapsibleContent",
+  ]}
+  sourcePath="packages/component-library/src/components/layout/mt-collapsible"
+>
+  **Collapsible** is an interactive component that expands and collapses related
+  content behind a trigger. Use it to keep secondary information available
+  without crowding the surrounding layout.
+</ComponentPageHeader>
+
+## Examples
+
+### Basic
+
+<Canvas of={CollapsibleStories.Default} />
+
+### Disabled
+
+<Canvas of={CollapsibleStories.Disabled} />
+
+## Anatomy
+
+**Collapsible** is built from three companion exports that work together:
+
+- `mt-collapsible` is the root container that owns the open and closed state.
+- `mt-collapsible-trigger` is the interactive element that toggles the open state. It renders as a `button` by default.
+- `mt-collapsible-content` is the region that is shown or hidden when the state changes.
+
+## API reference
+
+<ArgTypes of={CollapsibleStories} />
+
+## Behavior notes
+
+- **Collapsible** is a compound pattern. You always compose `mt-collapsible` with `mt-collapsible-trigger` and `mt-collapsible-content`.
+- The open state can be controlled externally with `v-model:open` or left uncontrolled with `default-open`.
+- When `disabled`, the trigger no longer toggles the content and the data attributes reflect the disabled state for styling.
+- The content slides open and closed over 300 ms by default, using the `--reka-collapsible-content-height` CSS variable that the component exposes on its content element. The animation respects `prefers-reduced-motion`.
+- `keep-mounted` defaults to `true` so the closed content stays in the DOM (it's hidden with `hidden="until-found"`, which keeps it discoverable to the browser's find-in-page feature) and the slide animation can play. Set `keep-mounted="false"` when the closed subtree is too expensive to leave mounted; the open/close animation will not play in that case.
+
+## Accessibility notes
+
+- The trigger should always have a clear accessible name so users understand what content the toggle reveals.
+- The trigger and content are linked through `aria-controls` and `aria-expanded`, so assistive technology announces the state change automatically.
+- When using a custom element via `as-child`, make sure the rendered element is still focusable and supports keyboard activation.

packages/component-library/src/components/layout/mt-collapsible/mt-collapsible.interactive.stories.ts

@@ -0,0 +1,109 @@
+import { userEvent } from "@testing-library/user-event";
+import { render, screen } from "@testing-library/vue";
+import { waitFor } from "@testing-library/vue";
+import MtCollapsible from "./mt-collapsible.vue";
+import MtCollapsibleContent from "./mt-collapsible-content.vue";
+import MtCollapsibleTrigger from "./mt-collapsible-trigger.vue";
+
+function renderCollapsible(rootProps: Record<string, unknown> = {}) {
+  return render(MtCollapsible, {
+    props: rootProps,
+    slots: {
+      default: `
+        <mt-collapsible-trigger>Toggle</mt-collapsible-trigger>
+        <mt-collapsible-content>Collapsible content</mt-collapsible-content>
+      `,
+    },
+    global: {
+      components: {
+        MtCollapsibleTrigger,
+        MtCollapsibleContent,
+      },
+    },
+  });
+}
+
+describe("mt-collapsible", () => {
+  it("is open by default when `defaultOpen` is true", async () => {
+    // ARRANGE
+    renderCollapsible({ defaultOpen: true });
+
+    // ASSERT
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Toggle" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+    });
+    expect(screen.getByText("Collapsible content")).toBeVisible();
+  });
+
+  it("does not open when disabled", async () => {
+    // ARRANGE
+    renderCollapsible({ disabled: true });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+
+    // ASSERT
+    expect(screen.getByRole("button", { name: "Toggle" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Toggle" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(screen.getByText("Collapsible content")).not.toBeVisible();
+  });
+
+  it("can be controlled externally with `v-model:open`", async () => {
+    // ARRANGE
+    render({
+      components: {
+        MtCollapsible,
+        MtCollapsibleTrigger,
+        MtCollapsibleContent,
+      },
+      data() {
+        return {
+          open: false,
+        };
+      },
+      template: `
+        <mt-collapsible :open="open" @update:open="(value) => (open = value)">
+          <mt-collapsible-trigger>Toggle</mt-collapsible-trigger>
+          <mt-collapsible-content>Collapsible content</mt-collapsible-content>
+        </mt-collapsible>
+      `,
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+
+    // ASSERT
+    expect(screen.getByText("Collapsible content")).toBeVisible();
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+
+    // ASSERT
+    expect(screen.getByText("Collapsible content")).not.toBeVisible();
+  });
+
+  it("keeps content mounted when `keepMounted` is true", () => {
+    // ARRANGE
+    const { container } = renderCollapsible();
+
+    // ASSERT
+    const content = container.querySelector(".mt-collapsible-content");
+    expect(content).toBeInTheDocument();
+  });
+
+  it("unmounts content when `keepMounted` is false", () => {
+    // ARRANGE
+    const { container } = renderCollapsible({ keepMounted: false });
+    const content = container.querySelector(".mt-collapsible-content");
+
+    // ASSERT
+    expect(content).toHaveAttribute("hidden", "");
+    expect(screen.queryByText("Collapsible content")).not.toBeInTheDocument();
+  });
+});