@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/sectioned-modal/SectionedModal.tsx

@@ -0,0 +1,258 @@
+import { X } from 'lucide-react'
+import { useEffect, useId, useRef, type FormEvent, type KeyboardEvent, type ReactNode } from 'react'
+import { Button as AriaButton, Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useHeldOrOwn } from '../../internal/overlays-nav/state'
+import { useMessages } from '../../internal/provider'
+import { Button } from '../button/Button'
+import { InlineNotice } from '../inline-notice/InlineNotice'
+
+export type SectionedModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+export interface ModalSection {
+  id: string
+  label: string
+  icon?: ReactNode
+  group?: string
+  count?: number
+  content?: ReactNode
+}
+
+export interface ModalFormFooter {
+  cancelLabel?: string
+  submitLabel?: string
+  pending?: boolean
+  submitDisabled?: boolean
+}
+
+export interface SectionedModalProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  subtitle?: string
+  eyebrow?: string
+  icon?: ReactNode
+  /** Name of the bare layout (no title). */
+  ariaLabel?: string
+  headerActions?: ReactNode
+  size?: SectionedModalSize
+  /** When false, Escape and the backdrop do nothing. */
+  dismissible?: boolean
+  /** Thin accent line on top of the header (decorative). */
+  accent?: boolean
+  error?: ReactNode
+  footer?: ReactNode
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void
+  formFooter?: ModalFormFooter
+  sections?: ModalSection[]
+  activeSection?: string
+  defaultSection?: string
+  onSectionChange?: (id: string) => void
+  identity?: ReactNode
+  navigationHeader?: ReactNode
+  navigationFooter?: ReactNode
+  closeLabel?: string
+  children?: ReactNode
+  className?: string
+}
+
+const FIELD = 'input:not([type=hidden]):not([disabled]), textarea:not([disabled]), select:not([disabled])'
+
+/** Groups sections in first-seen group order, keeping the section order inside each group. */
+function groupSections(list: ModalSection[]): Array<[string | undefined, ModalSection[]]> {
+  const buckets = new Map<string | undefined, ModalSection[]>()
+  for (const s of list) {
+    const bucket = buckets.get(s.group)
+    if (bucket) bucket.push(s)
+    else buckets.set(s.group, [s])
+  }
+  return [...buckets.entries()]
+}
+
+function SectionRail(props: { label: string; sections: ModalSection[]; active: string; onPick: (id: string) => void; identity?: ReactNode; extras?: ReactNode; foot?: ReactNode }) {
+  return (
+    <div className="ty-sectioned-modal__rail">
+      {props.identity ? <div className="ty-sectioned-modal__identity">{props.identity}</div> : null}
+      {props.extras}
+      <nav aria-label={props.label} className="ty-sectioned-modal__nav">
+        {groupSections(props.sections).map(([group, items]) => (
+          <div key={group ?? '·'} className="ty-sectioned-modal__group">
+            {group ? <p className="ty-sectioned-modal__group-name">{group}</p> : null}
+            <ul className="ty-sectioned-modal__list">
+              {items.map((s) => (
+                <li key={s.id}>
+                  <AriaButton
+                    className="ty-sectioned-modal__item"
+                    aria-current={s.id === props.active ? 'page' : undefined}
+                    data-active={s.id === props.active || undefined}
+                    onPress={() => props.onPick(s.id)}
+                  >
+                    {s.icon ? (
+                      <span className="ty-sectioned-modal__item-icon" aria-hidden="true">
+                        {s.icon}
+                      </span>
+                    ) : null}
+                    <span className="ty-sectioned-modal__item-label">{s.label}</span>
+                    {s.count !== undefined ? <span className="ty-sectioned-modal__count">{s.count}</span> : null}
+                  </AriaButton>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </nav>
+      {props.foot ? <div className="ty-sectioned-modal__rail-foot">{props.foot}</div> : null}
+    </div>
+  )
+}
+
+/** Large modal for editing and inspecting an item (spec: wave-2/sectioned-modal.md). */
+export function SectionedModal(props: SectionedModalProps) {
+  const copy = useMessages().sectionedModal
+  const titleId = useId()
+  const subtitleId = useId()
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const headingRef = useRef<HTMLHeadingElement>(null)
+  const dismissible = props.dismissible ?? true
+  const sections = props.sections ?? []
+  const layout = sections.length ? 'sectioned' : props.title ? 'structured' : 'bare'
+  const [active, setActive] = useHeldOrOwn(props.activeSection, props.defaultSection ?? sections[0]?.id ?? '', props.onSectionChange)
+  const shown = sections.find((s) => s.id === active) ?? sections[0]
+  const pending = props.formFooter?.pending ?? false
+
+  // Initial focus: first field of the body, else the heading.
+  useEffect(() => {
+    if (!props.open) return
+    const frame = requestAnimationFrame(() => {
+      // The person may already have moved into the body (a click before this
+      // frame): never take focus away from them.
+      if (bodyRef.current?.contains(document.activeElement)) return
+      const field = bodyRef.current?.querySelector<HTMLElement>(FIELD)
+      if (field) field.focus()
+      else headingRef.current?.focus()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [props.open])
+
+  const submitShortcut = (e: KeyboardEvent<HTMLFormElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      e.currentTarget.requestSubmit()
+    }
+  }
+
+  const header =
+    layout === 'bare' ? null : (
+      <div className="ty-sectioned-modal__head" data-accent={props.accent || undefined}>
+        {props.icon ? (
+          <span className="ty-sectioned-modal__head-icon" aria-hidden="true">
+            {props.icon}
+          </span>
+        ) : null}
+        <div className="ty-sectioned-modal__titles">
+          {props.eyebrow ? <p className="ty-sectioned-modal__eyebrow">{props.eyebrow}</p> : null}
+          <Heading slot="title" id={titleId} level={2} ref={headingRef} tabIndex={-1} className="ty-sectioned-modal__title">
+            {props.title}
+          </Heading>
+          {props.subtitle ? (
+            <p id={subtitleId} className="ty-sectioned-modal__subtitle">
+              {props.subtitle}
+            </p>
+          ) : null}
+        </div>
+        <div className="ty-sectioned-modal__head-actions">
+          {props.headerActions}
+          <Button variant="quiet" shape="circle" iconOnly accessibleLabel={props.closeLabel ?? copy.close} leadingIcon={<X />} onPress={props.onClose} disabled={pending} />
+        </div>
+      </div>
+    )
+
+  const bodyContent = (
+    <>
+      {props.error ? (
+        <InlineNotice tone="danger" urgency="assertive">
+          {props.error}
+        </InlineNotice>
+      ) : null}
+      {layout === 'sectioned' && shown ? (
+        <section aria-label={shown.label} className="ty-sectioned-modal__section">
+          {shown.content ?? props.children}
+        </section>
+      ) : (
+        props.children
+      )}
+    </>
+  )
+
+  const footerContent = props.footer ?? (props.formFooter ? (
+    <>
+      <Button onPress={props.onClose} disabled={pending}>
+        {props.formFooter.cancelLabel ?? copy.cancel}
+      </Button>
+      <Button type="submit" variant="primary" busy={pending} disabled={props.formFooter.submitDisabled}>
+        {props.formFooter.submitLabel ?? copy.save}
+      </Button>
+    </>
+  ) : null)
+
+  const inner = (
+    <>
+      <div ref={bodyRef} className="ty-sectioned-modal__body">
+        {bodyContent}
+      </div>
+      {footerContent ? <div className="ty-sectioned-modal__foot">{footerContent}</div> : null}
+    </>
+  )
+
+  const main = props.onSubmit ? (
+    <form
+      className="ty-sectioned-modal__form"
+      noValidate
+      onKeyDown={submitShortcut}
+      onSubmit={(e) => {
+        e.preventDefault()
+        props.onSubmit?.(e)
+      }}
+    >
+      {inner}
+    </form>
+  ) : (
+    <div className="ty-sectioned-modal__form">{inner}</div>
+  )
+
+  return (
+    <ModalOverlay
+      isOpen={props.open}
+      isDismissable={dismissible && !pending}
+      isKeyboardDismissDisabled={!dismissible || pending}
+      onOpenChange={(next) => {
+        if (!next) props.onClose()
+      }}
+      className="ty-sectioned-modal__backdrop"
+    >
+      <Modal className={cx('ty-sectioned-modal', props.className)} data-size={props.size ?? 'lg'} data-layout={layout}>
+        <Dialog
+          className="ty-sectioned-modal__dialog"
+          aria-label={layout === 'bare' ? props.ariaLabel : undefined}
+          aria-describedby={props.subtitle && layout !== 'bare' ? subtitleId : undefined}
+        >
+          {header}
+          <div className="ty-sectioned-modal__frame">
+            {layout === 'sectioned' ? (
+              <SectionRail
+                label={props.title ?? props.ariaLabel ?? ''}
+                sections={sections}
+                active={shown?.id ?? ''}
+                onPick={setActive}
+                identity={props.identity}
+                extras={props.navigationHeader}
+                foot={props.navigationFooter}
+              />
+            ) : null}
+            {main}
+          </div>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

package/src/components/segmented-control/SegmentedControl.css

@@ -0,0 +1,123 @@
+/* SegmentedControl (spec: wave-1/segmented-control.md; design direction §2.3, §2.4, §2.7). */
+@layer tympan.components {
+  .ty-segmented-control {
+    --ty-segment-height: calc(var(--ty-control-height) - var(--ty-space-2));
+
+    box-sizing: border-box;
+    display: inline-flex;
+    gap: var(--ty-space-1);
+    padding: var(--ty-space-1);
+    border: 1px solid var(--ty-line);
+    border-radius: calc(var(--ty-radius-control) + var(--ty-space-1));
+    background: var(--ty-surface-sunken);
+  }
+
+  .ty-segmented-control[data-size='compact'] {
+    --ty-segment-height: calc(var(--ty-control-height-compact) - var(--ty-space-2));
+  }
+
+  .ty-segmented-control[data-size='large'] {
+    --ty-segment-height: var(--ty-control-height);
+  }
+
+  .ty-segmented-control[data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .ty-segmented-control__segment {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ty-space-2);
+    min-inline-size: 0;
+    min-block-size: var(--ty-segment-height);
+    padding-inline: var(--ty-space-3);
+    border: 1px solid transparent;
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--ty-dur-quick) var(--ty-ease),
+      color var(--ty-dur-quick) var(--ty-ease);
+  }
+
+  .ty-segmented-control[data-full-width] .ty-segmented-control__segment {
+    flex: 1 1 0;
+  }
+
+  /* 44 x 44 px hit area on every segment regardless of size. */
+  .ty-segmented-control__segment::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: max(100%, var(--ty-control-target));
+    block-size: max(100%, var(--ty-control-target));
+    transform: translate(-50%, -50%);
+  }
+
+  .ty-segmented-control__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ty-segmented-control__segment[data-hovered]:not([data-selected], [data-disabled]) {
+    color: var(--ty-ink);
+  }
+
+  /* <ty-segmented-control> drives the native states; React Aria sets the data-* ones. */
+  .ty-segmented-control__segment:hover:not([data-selected], [data-disabled], :disabled) {
+    color: var(--ty-ink);
+  }
+
+  /* Selection thumb: accent-soft with accent text (§2.3). */
+  .ty-segmented-control__segment[data-selected] {
+    border-color: var(--ty-line);
+    background: var(--ty-accent-soft);
+    color: var(--ty-on-accent-soft);
+    box-shadow: var(--ty-shadow-raised);
+  }
+
+  .ty-segmented-control__segment[data-focus-visible],
+  .ty-segmented-control__segment:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .ty-segmented-control__segment[data-disabled],
+  .ty-segmented-control__segment:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-segmented-control__segment {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-segmented-control {
+      border: 1px solid CanvasText;
+    }
+    .ty-segmented-control__segment[data-selected] {
+      border: 2px solid Highlight;
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-segmented-control__segment[data-focus-visible],
+    .ty-segmented-control__segment:focus-visible {
+      outline-color: CanvasText;
+    }
+  }
+}

package/src/components/segmented-control/SegmentedControl.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Grid, List } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { SegmentedControl } from './SegmentedControl'
+
+import * as rtlDom from '@testing-library/react'
+import rtlUser from '@testing-library/user-event'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { useState as useRtlState } from 'react'
+import { renderRtl } from '../../../test/rtl'
+
+const periods = ['Day', 'Week', 'Month']
+
+describe('SegmentedControl', () => {
+  it('checks the value and keeps only it in the tab order', async () => {
+    render(
+      <>
+        <button type="button">before</button>
+        <SegmentedControl label="Period" options={periods} defaultValue="Week" onChange={() => {}} />
+        <button type="button">after</button>
+      </>,
+    )
+    const week = screen.getByRole('radio', { name: 'Week' })
+    expect(week).toBeChecked()
+    screen.getByRole('button', { name: 'before' }).focus()
+    await userEvent.tab()
+    expect(week).toHaveFocus()
+    await userEvent.tab()
+    expect(screen.getByRole('button', { name: 'after' })).toHaveFocus()
+  })
+
+  it('selects the next segment with ArrowRight and calls onChange', async () => {
+    const onChange = vi.fn()
+    render(<SegmentedControl label="Period" options={periods} defaultValue="Week" onChange={onChange} />)
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowRight}')
+    expect(onChange).toHaveBeenCalledWith('Month')
+    expect(screen.getByRole('radio', { name: 'Month' })).toBeChecked()
+  })
+
+  it('wraps from the last segment to the first', async () => {
+    const onChange = vi.fn()
+    render(<SegmentedControl label="Period" options={periods} defaultValue="Month" onChange={onChange} />)
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowRight}')
+    expect(onChange).toHaveBeenCalledWith('Day')
+  })
+
+  it('does not call onChange when the selected segment is clicked again', async () => {
+    const onChange = vi.fn()
+    render(<SegmentedControl label="Period" options={periods} defaultValue="Week" onChange={onChange} />)
+    await userEvent.click(screen.getByText('Week'))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('is exposed as disabled and ignores clicks when disabled', async () => {
+    const onChange = vi.fn()
+    render(<SegmentedControl label="Period" options={periods} disabled onChange={onChange} />)
+    await userEvent.click(screen.getByText('Month'))
+    expect(onChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('radiogroup', { name: 'Period' })).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('keeps labels as accessible names when icon-only', () => {
+    render(
+      <SegmentedControl
+        label="View"
+        iconOnly
+        options={[
+          { value: 'grid', label: 'Grid', icon: Grid },
+          { value: 'list', label: 'List', icon: List },
+        ]}
+        onChange={() => {}}
+      />,
+    )
+    expect(screen.getByRole('radio', { name: 'Grid' })).toBeInTheDocument()
+    expect(screen.getByRole('radio', { name: 'List' })).toBeInTheDocument()
+  })
+
+  it('keeps 44 px hit areas and declares motion and forced-colours rules', () => {
+    const css = cssOf('components/segmented-control/SegmentedControl.css')
+    expect(css).toMatch(/\.ty-segmented-control__segment::before\s*\{[^}]*block-size:\s*max\(100%,\s*var\(--ty-control-target\)\)/)
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/transition:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+  })
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SegmentedControl label="Period" options={periods} onChange={() => {}} />)
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('SegmentedControl in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    function Host() {
+      const [value, setValue] = useRtlState('يوم')
+      return <SegmentedControl label="الفترة" options={['يوم', 'أسبوع', 'شهر']} value={value} onChange={setValue} />
+    }
+    const { container } = renderRtl(<Host />)
+    await rtlUser.click(rtlDom.screen.getByRole('radio', { name: 'يوم' }))
+    // In right-to-left, Left Arrow moves forward (to the option on the left).
+    await rtlUser.keyboard('{ArrowLeft}')
+    expect(rtlDom.screen.getByRole('radio', { name: 'أسبوع' })).toBeChecked()
+    await axeRtl(container)
+  })
+})

package/src/components/segmented-control/SegmentedControl.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { Radio, RadioGroup } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { requestHaptic } from '../../internal/haptics'
+import type { IconComponent } from '../../internal/types'
+
+export type SegmentedOption = string | { value: string; label: string; icon?: IconComponent }
+
+export interface SegmentedControlProps {
+  /** Two to five segments; a string is both value and label. */
+  options: SegmentedOption[]
+  value?: string
+  defaultValue?: string
+  /** Called only when the value actually changes. */
+  onChange: (value: string) => void
+  /** Accessible name of the group. */
+  label: string
+  size?: 'compact' | 'regular' | 'large'
+  fullWidth?: boolean
+  disabled?: boolean
+  /** Hide labels visually; labels remain the accessible names. */
+  iconOnly?: boolean
+  className?: string
+}
+
+interface Segment {
+  value: string
+  label: string
+  icon?: IconComponent
+}
+
+const asSegment = (o: SegmentedOption): Segment => (typeof o === 'string' ? { value: o, label: o } : o)
+
+/**
+ * Selection that may be controlled (`value`) or local. `commit` ignores a
+ * re-selection of the current value, so hosts only hear real changes.
+ */
+function useSelection(controlled: string | undefined, initial: string, notify: (v: string) => void) {
+  const [local, setLocal] = useState(initial)
+  const active = controlled === undefined ? local : controlled
+  const commit = (next: string) => {
+    if (next === active) return
+    if (controlled === undefined) setLocal(next)
+    requestHaptic('light')
+    notify(next)
+  }
+  return [active, commit] as const
+}
+
+function SegmentButton({ segment, hideText, hint }: { segment: Segment; hideText: boolean; hint: boolean }) {
+  const Glyph = segment.icon
+  return (
+    <Radio value={segment.value} className="ty-segmented-control__segment" aria-label={hideText ? segment.label : undefined}>
+      {Glyph && <Glyph className="ty-icon" aria-hidden="true" focusable="false" />}
+      <span className={hideText ? 'ty-visually-hidden' : 'ty-segmented-control__label'} title={hint ? segment.label : undefined}>
+        {segment.label}
+      </span>
+    </Radio>
+  )
+}
+
+/** Exactly one of a small set of options, changed in place (spec: wave-1/segmented-control.md). */
+export function SegmentedControl(props: SegmentedControlProps) {
+  const segments = props.options.map(asSegment)
+  const [active, commit] = useSelection(props.value, props.defaultValue ?? segments[0]?.value ?? '', props.onChange)
+  const stretched = props.fullWidth === true
+  const iconOnly = props.iconOnly === true
+  return (
+    <RadioGroup
+      className={cx('ty-segmented-control', props.className)}
+      aria-label={props.label}
+      orientation="horizontal"
+      isDisabled={props.disabled ?? false}
+      value={active}
+      onChange={commit}
+      data-size={props.size ?? 'regular'}
+      data-full-width={stretched || undefined}
+      data-icon-only={iconOnly || undefined}
+    >
+      {segments.map((s) => (
+        <SegmentButton key={s.value} segment={s} hideText={iconOnly} hint={stretched} />
+      ))}
+    </RadioGroup>
+  )
+}

package/src/components/separator/Separator.css

@@ -0,0 +1,61 @@
+/* Separator (spec: wave-1/separator.md; design direction §2.1, §2.3). */
+@layer tympan.components {
+  .ty-separator {
+    --ty-separator-color: var(--ty-line);
+    --ty-separator-gap: var(--ty-space-4);
+    flex: none;
+    border: 0;
+    background: var(--ty-separator-color);
+    block-size: 1px;
+    inline-size: 100%;
+    margin-block: var(--ty-separator-gap);
+  }
+
+  .ty-separator[data-emphasis='soft'] {
+    --ty-separator-color: var(--ty-line-soft);
+  }
+  .ty-separator[data-spacing='none'] {
+    --ty-separator-gap: 0px;
+  }
+  .ty-separator[data-spacing='roomy'] {
+    --ty-separator-gap: var(--ty-space-5);
+  }
+
+  .ty-separator[data-orientation='vertical'] {
+    inline-size: 1px;
+    block-size: auto;
+    align-self: stretch;
+    margin-block: 0;
+    margin-inline: var(--ty-separator-gap);
+  }
+
+  .ty-separator--captioned,
+  .ty-separator[data-captioned] {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+    block-size: auto;
+    background: none;
+  }
+  .ty-separator__line {
+    flex: 1 1 0;
+    block-size: 1px;
+    background: var(--ty-separator-color);
+  }
+  .ty-separator__caption {
+    flex: none;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+
+  @media (forced-colors: active) {
+    .ty-separator:not(.ty-separator--captioned):not([data-captioned]),
+    .ty-separator__line {
+      background: CanvasText;
+    }
+    .ty-separator__caption {
+      color: CanvasText;
+    }
+  }
+}