Accordion

const accordionFixture = {
  id: "accordion",
  type: "single",
  defaultValue: ["deploy"],
  items: [
    { value: "deploy", trigger: "Deploy policy", content: "Production deploys require a green verification run." },
    { value: "rollback", trigger: "Rollback policy", content: "Roll back to the last verified release.", disabled: true },
  ],
} satisfies {
  id: string;
  type: "single" | "multiple";
  defaultValue: string[];
  items: Array<{ value: string; trigger: string; content: string; disabled?: boolean }>;
};
 
import { Accordion } from "@grassroot/ui-react";
 
export default function AccordionDemo() {
  return (
    <div>
      <Accordion {...accordionFixture} />
    </div>
  );
}

<script setup lang="ts">
import { Accordion } from "@grassroot/ui-vue";
const accordionFixture = {
  id: "accordion",
  type: "single",
  defaultValue: ["deploy"],
  items: [
    { value: "deploy", trigger: "Deploy policy", content: "Production deploys require a green verification run." },
    { value: "rollback", trigger: "Rollback policy", content: "Roll back to the last verified release.", disabled: true },
  ],
} satisfies {
  id: string;
  type: "single" | "multiple";
  defaultValue: string[];
  items: Array<{ value: string; trigger: string; content: string; disabled?: boolean }>;
};
 
</script>
 
<template>
  <div>
    <Accordion
      :items="accordionFixture.items"
      :type="accordionFixture.type"
      :default-value="accordionFixture.defaultValue"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootAccordion } from "@grassroot/ui-angular";
const accordionFixture = {
  id: "accordion",
  type: "single",
  defaultValue: ["deploy"],
  items: [
    { value: "deploy", trigger: "Deploy policy", content: "Production deploys require a green verification run." },
    { value: "rollback", trigger: "Rollback policy", content: "Roll back to the last verified release.", disabled: true },
  ],
} satisfies {
  id: string;
  type: "single" | "multiple";
  defaultValue: string[];
  items: Array<{ value: string; trigger: string; content: string; disabled?: boolean }>;
};
 
@Component({
  selector: "app-accordion-demo",
  standalone: true,
  imports: [GrassrootAccordion],
  host: { style: "display: block; width: 600px; max-width: 100%;" },
  template: `<grassroot-accordion [items]="items" [type]="fixture.type" [(value)]="open" />`,
})
export class AccordionDemoComponent {
  protected readonly fixture = accordionFixture;
  protected readonly items = [...accordionFixture.items];
  protected readonly open = signal([...accordionFixture.defaultValue]);
}
 
export default AccordionDemoComponent;

<script lang="ts">
  import { Accordion } from "@grassroot/ui-svelte";
  const accordionFixture = {
    id: "accordion",
    type: "single",
    defaultValue: ["deploy"],
    items: [
      { value: "deploy", trigger: "Deploy policy", content: "Production deploys require a green verification run." },
      { value: "rollback", trigger: "Rollback policy", content: "Roll back to the last verified release.", disabled: true },
    ],
  } satisfies {
    id: string;
    type: "single" | "multiple";
    defaultValue: string[];
    items: Array<{ value: string; trigger: string; content: string; disabled?: boolean }>;
  };
 
  </script>
 
<div>
  <Accordion
    items={accordionFixture.items}
    type={accordionFixture.type}
    defaultValue={accordionFixture.defaultValue}
  />
</div>

/** @jsxImportSource solid-js */
import { Accordion } from "@grassroot/ui-solid";
const accordionFixture = {
  id: "accordion",
  type: "single",
  defaultValue: ["deploy"],
  items: [
    { value: "deploy", trigger: "Deploy policy", content: "Production deploys require a green verification run." },
    { value: "rollback", trigger: "Rollback policy", content: "Roll back to the last verified release.", disabled: true },
  ],
} satisfies {
  id: string;
  type: "single" | "multiple";
  defaultValue: string[];
  items: Array<{ value: string; trigger: string; content: string; disabled?: boolean }>;
};
 
import type { JSX } from "solid-js";
 
export default function AccordionDemo(): JSX.Element {
  return (
    <div>
      <Accordion
        items={accordionFixture.items}
        type={accordionFixture.type}
        defaultValue={accordionFixture.defaultValue}
      />
    </div>
  );
}