Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ui/accordion';
import { Avatar } from '@/ui/avatar';
import { Lozenge } from '@/ui/lozenge';

const fields = [
  ['Owner', <span key="owner" className="flex items-center gap-075"><Avatar name="Joseph Ariel" size="small" />Joseph A.</span>],
  ['Stage', <Lozenge key="stage" phase="working">Interview</Lozenge>],
  ['Salary', '£85,000 to £95,000'],
] as const;

export default function AccordionRail() {
  return (
    <div className="w-85 rounded-xlarge bg-surface p-100 shadow-raised">
      <Accordion defaultValue={['details']}>
        <AccordionItem value="details">
          <AccordionTrigger>Details</AccordionTrigger>
          <AccordionContent>
            <dl className="grid grid-cols-[96px_1fr] items-center gap-y-100">
              {fields.map(([label, value]) => (
                <div key={label} className="contents">
                  <dt className="text-text-subtle">{label}</dt>
                  <dd>{value}</dd>
                </div>
              ))}
            </dl>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="applications">
          <AccordionTrigger count={3}>Applications</AccordionTrigger>
          <AccordionContent>Senior Data Engineer, Analytics Lead and Data Platform Manager.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="files">
          <AccordionTrigger count={2}>Files</AccordionTrigger>
          <AccordionContent>Priya Shah CV.pdf and Halcyon Bank terms.pdf.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ui/accordion';

// A section with nothing inside yet can't be opened.
export default function AccordionDisabled() {
  return (
    <div className="w-85 rounded-xlarge bg-surface p-100 shadow-raised">
      <Accordion>
        <AccordionItem value="applications">
          <AccordionTrigger count={3}>Applications</AccordionTrigger>
          <AccordionContent>Senior Data Engineer, Analytics Lead and Data Platform Manager.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="placements" disabled>
          <AccordionTrigger count={0}>Placements</AccordionTrigger>
          <AccordionContent>No placements yet.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

import { CheckCircleIcon, CircleIcon } from '@phosphor-icons/react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ui/accordion';
import { Button } from '@/ui/button';

export default function AccordionChecklist() {
  return (
    <Accordion variant="checklist" multiple={false} defaultValue={['import']} className="max-w-130">
      <AccordionItem value="mailbox">
        <AccordionTrigger icon={<CheckCircleIcon role="img" aria-label="Done" className="text-success" />}>Connect your mailbox</AccordionTrigger>
        <AccordionContent>
          <p>Your mailbox is connected and syncing.</p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="import">
        <AccordionTrigger icon={<CircleIcon role="img" aria-label="To do" />}>Import your companies</AccordionTrigger>
        <AccordionContent>
          <p>Bring in your client list from a spreadsheet.</p>
          <Button variant="primary" className="mt-150">
            Import
          </Button>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="team">
        <AccordionTrigger icon={<CircleIcon role="img" aria-label="To do" />}>Invite your team</AccordionTrigger>
        <AccordionContent>
          <p>Add the consultants who work with you.</p>
          <Button variant="primary" className="mt-150">
            Invite
          </Button>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ui/accordion';

// A long title cuts with an ellipsis and keeps its count and caret; a big count keeps its thousands separator.
// An empty section says so in words.
export default function AccordionLongContent() {
  return (
    <div className="w-70 rounded-xlarge bg-surface p-100 shadow-raised">
      <Accordion defaultValue={['notes']}>
        <AccordionItem value="applications">
          <AccordionTrigger count={1234567}>Applications from the Halcyon Bank and Northwind Logistics framework</AccordionTrigger>
          <AccordionContent>The latest 50 show here; open the list for the rest.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="notes">
          <AccordionTrigger count={0}>Notes</AccordionTrigger>
          <AccordionContent>
            <p className="text-text-subtle">No notes yet. Add one from the record&apos;s Notes tab.</p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

import { useState } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ui/accordion';
import { Button } from '@/ui/button';

// Replay closes and reopens Applications: height and fade in 200ms.
export default function AccordionMotion() {
  const [open, setOpen] = useState<string[]>(['applications']);
  const replay = () => {
    setOpen([]);
    setTimeout(() => setOpen(['applications']), 900);
  };
  return (
    <div className="flex flex-col items-start gap-300">
      <div className="w-85 rounded-xlarge bg-surface p-100 shadow-raised">
        <Accordion value={open} onValueChange={(value) => setOpen(value as string[])}>
          <AccordionItem value="applications">
            <AccordionTrigger count={3}>Applications</AccordionTrigger>
            <AccordionContent>Senior Data Engineer, Analytics Lead and Data Platform Manager.</AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
      <Button size="sm" onClick={replay}>
        Replay
      </Button>
    </div>
  );
}