Collapsible

const collapsibleFixture = {
  id: "collapsible",
  title: "Advanced deployment settings",
  body: "Retries are limited to one automatic rollback.",
  defaultOpen: false,
} satisfies { id: string; title: string; body: string; defaultOpen: boolean };
 
import { Collapsible } from "@grassroot/ui-react";
 
export default function CollapsibleDemo() {
  return (
    <div>
      <Collapsible
        id={`${collapsibleFixture.id}-react`}
        defaultOpen={collapsibleFixture.defaultOpen}
        title={collapsibleFixture.title}
      >
        {collapsibleFixture.body}
      </Collapsible>
    </div>
  );
}

<script setup lang="ts">
import { Collapsible } from "@grassroot/ui-vue";
const collapsibleFixture = {
  id: "collapsible",
  title: "Advanced deployment settings",
  body: "Retries are limited to one automatic rollback.",
  defaultOpen: false,
} satisfies { id: string; title: string; body: string; defaultOpen: boolean };
 
</script>
 
<template>
  <div>
    <Collapsible
      :id="`${collapsibleFixture.id}-vue`"
      :title="collapsibleFixture.title"
      :default-open="collapsibleFixture.defaultOpen"
    >
      {{ collapsibleFixture.body }}
    </Collapsible>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootCollapsible } from "@grassroot/ui-angular";
const collapsibleFixture = {
  id: "collapsible",
  title: "Advanced deployment settings",
  body: "Retries are limited to one automatic rollback.",
  defaultOpen: false,
} satisfies { id: string; title: string; body: string; defaultOpen: boolean };
 
@Component({
  selector: "app-collapsible-demo",
  standalone: true,
  imports: [GrassrootCollapsible],
  template: `
    <div>
      <grassroot-collapsible [id]="id" [title]="fixture.title" [defaultOpen]="fixture.defaultOpen">
        {{ fixture.body }}
      </grassroot-collapsible>
    </div>
  `,
})
export class CollapsibleDemoComponent {
  protected readonly fixture = collapsibleFixture;
  protected readonly id = `${collapsibleFixture.id}-angular`;
}
 
export default CollapsibleDemoComponent;

<script lang="ts">
  import { Collapsible } from "@grassroot/ui-svelte";
  const collapsibleFixture = {
    id: "collapsible",
    title: "Advanced deployment settings",
    body: "Retries are limited to one automatic rollback.",
    defaultOpen: false,
  } satisfies { id: string; title: string; body: string; defaultOpen: boolean };
 
  </script>
 
<div>
  <Collapsible
    id={`${collapsibleFixture.id}-svelte`}
    title={collapsibleFixture.title}
    defaultOpen={collapsibleFixture.defaultOpen}
  >
    {collapsibleFixture.body}
  </Collapsible>
</div>

/** @jsxImportSource solid-js */
import { Collapsible } from "@grassroot/ui-solid";
const collapsibleFixture = {
  id: "collapsible",
  title: "Advanced deployment settings",
  body: "Retries are limited to one automatic rollback.",
  defaultOpen: false,
} satisfies { id: string; title: string; body: string; defaultOpen: boolean };
 
export default function CollapsibleDemo() {
  return (
    <div>
      <Collapsible
        id={`${collapsibleFixture.id}-solid`}
        title={collapsibleFixture.title}
        defaultOpen={collapsibleFixture.defaultOpen}
      >
        {collapsibleFixture.body}
      </Collapsible>
    </div>
  );
}