audi-app/design-system/.design-sync/previews/Accordion.tsx

import * as React from "react";
import { Accordion, LeafRow } from "@audi-dash/ui";

function Root({ children }: { children: React.ReactNode }) {
  return (
    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
      {children}
    </div>
  );
}

export function Open() {
  return (
    <Root>
      <div style={{ width: 300 }}>
        <Accordion title="Reifen" summary="4,2 mm" defaultOpen>
          <LeafRow title="Vorne" value="4,2 mm" />
          <LeafRow title="Hinten" value="3,8 mm" />
        </Accordion>
      </div>
    </Root>
  );
}

export function Closed() {
  return (
    <Root>
      <div style={{ width: 300 }}>
        <Accordion title="Versicherung" summary="248 €/Jahr">
          <LeafRow title="Haftpflicht" value="180 €" />
          <LeafRow title="Teilkasko" value="68 €" />
        </Accordion>
      </div>
    </Root>
  );
}

export function NestedLevel2() {
  return (
    <Root>
      <div style={{ width: 300 }}>
        <Accordion title="Service" summary="Nächster Termin" defaultOpen>
          <Accordion title="Inspektion" level={2} defaultOpen>
            <LeafRow title="Fällig bei" value="45.000 km" />
          </Accordion>
          <Accordion title="Ölwechsel" level={2}>
            <LeafRow title="Fällig bei" value="47.500 km" />
          </Accordion>
        </Accordion>
      </div>
    </Root>
  );
}