Accordion

import { Accordion, AccordionItem } from '@fairgarden-private/design/components/Accordion'
import styles from './variants.module.css'

/**
 * The ruled accordion with the LTA disclosure glyph (default), the strong
 * top rule for an accordion that follows a heading, and the plus/minus
 * alternate.
 */
export function AccordionVariants() {
  return (
    <div className={styles.stack}>
      <Accordion defaultValue={['hours']}>
        <AccordionItem value="hours" title="Hours and seasons">
          <p className={styles.copy}>Open dawn to dusk every day. Boardwalks close after heavy frost.</p>
        </AccordionItem>
        <AccordionItem value="parking" title="Parking and transit">
          <p className={styles.copy}>Twelve spaces at the north lot; the 42 bus stops at the gate.</p>
        </AccordionItem>
        <AccordionItem value="rules" title="Preserve rules" disabled>
          <p className={styles.copy}>Unavailable while the page is updated.</p>
        </AccordionItem>
      </Accordion>

      <section className={styles.section}>
        <h3 className={styles.heading}>Trail notes</h3>
        <Accordion headed>
          <AccordionItem value="loop" title="Meadow loop, 1.2 miles">
            <p className={styles.copy}>Flat and accessible, with benches every quarter mile.</p>
          </AccordionItem>
          <AccordionItem value="ridge" title="Ridge trail, 3.4 miles">
            <p className={styles.copy}>Steep switchbacks; muddy in spring.</p>
          </AccordionItem>
        </Accordion>
      </section>

      <Accordion glyph="plusminus">
        <AccordionItem value="account" title="Account settings">
          <p className={styles.copy}>The plus/minus circle is the alternate for product UI.</p>
        </AccordionItem>
        <AccordionItem value="notifications" title="Notifications">
          <p className={styles.copy}>Never mix it with the disclosure glyph on one page.</p>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import { Accordion, AccordionItem } from '@fairgarden-private/design/components/Accordion'
import styles from './color.module.css'

/** `primary` drives every part: rules, titles, glyph and panel text. `secondary` is unused. */
export function AccordionColor() {
  return (
    <div className={styles.stack}>
      <Accordion primary="plum" defaultValue={['a']}>
        <AccordionItem value="a" title="Primary plum">
          <p className={styles.copy}>Rules, titles, glyph and panel text re-resolve together.</p>
        </AccordionItem>
        <AccordionItem value="b" title="Collapsed glyph">
          <p className={styles.copy}>The collapsed glyph is the muted step of the same scale.</p>
        </AccordionItem>
      </Accordion>
      <Accordion primary="slate" headed>
        <AccordionItem value="a" title="Primary slate, headed">
          <p className={styles.copy}>The strong top rule is the text step of the scale.</p>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import { Accordion, AccordionItem } from '@fairgarden-private/design/components/Accordion'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** Pure type and line: on forest the collapsed glyph is already the one ink, so direction carries the state. */
export function AccordionGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <Accordion defaultValue={['open']}>
            <AccordionItem value="open" title="Expanded">
              <p className={styles.copy}>Arrows point inward.</p>
            </AccordionItem>
            <AccordionItem value="closed" title="Collapsed">
              <p className={styles.copy}>Arrows point outward.</p>
            </AccordionItem>
          </Accordion>
        </PresetGround>
      ))}
    </div>
  )
}