@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/upgrade-gate/UpgradeGate.css

@@ -0,0 +1,94 @@
+/* UpgradeGate (spec: wave-2/upgrade-gate.md; design direction §2.5, §2.7, §2.10). */
+@layer tympan.components {
+  .ty-gate {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ty-z-modal);
+    display: grid;
+    place-items: center;
+    padding: var(--ty-space-4);
+    overflow-y: auto;
+    background: var(--ty-bg);
+  }
+  .ty-gate[data-entering] {
+    animation: ty-gate-fade var(--ty-dur-quick) var(--ty-ease);
+  }
+  @keyframes ty-gate-fade {
+    from {
+      opacity: 0;
+    }
+  }
+  .ty-gate__modal {
+    position: relative;
+    z-index: 1;
+    inline-size: min(100%, 560px);
+    outline: none;
+  }
+  .ty-gate__dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+    padding: var(--ty-space-6);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-sheet);
+    background: var(--ty-surface-raised);
+    box-shadow: var(--ty-shadow-modal);
+    backdrop-filter: blur(var(--ty-glass-blur-floating));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-floating));
+    outline: none;
+  }
+  .ty-gate__eyebrow {
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-eyebrow);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-eyebrow);
+    letter-spacing: var(--ty-font-tracking-eyebrow);
+    text-transform: uppercase;
+  }
+  .ty-gate__title {
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h1);
+    font-weight: var(--ty-font-weight-bold);
+    line-height: var(--ty-font-line-height-h1);
+  }
+  .ty-gate__description {
+    margin: 0;
+    max-inline-size: var(--ty-measure-summary);
+    font-size: var(--ty-font-size-body-lg);
+    line-height: var(--ty-font-line-height-body-lg);
+  }
+  .ty-gate__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-3);
+  }
+  @media (max-width: 639.98px) {
+    .ty-gate__actions {
+      flex-direction: column;
+    }
+    .ty-gate__actions > * {
+      inline-size: 100%;
+      min-block-size: var(--ty-control-target);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ty-gate[data-entering] {
+      animation: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-gate__dialog {
+      background: var(--ty-surface-raised-solid);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-gate__dialog {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/upgrade-gate/UpgradeGate.rtl.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { inRtl } from '../../../test/rtl-b'
+import { UpgradeGate } from './UpgradeGate'
+
+describe('UpgradeGate in right-to-left locales', () => {
+  it('renders inside an Arabic right-to-left subtree and passes axe', async () => {
+    const { container } = inRtl(<UpgradeGate onViewPlans={() => {}} onSignOut={() => {}} />)
+    expect(container.querySelector('[dir="rtl"]')).not.toBeNull()
+    await expectNoAxeViolations(document.body, ['region'])
+  })
+})

package/src/components/upgrade-gate/UpgradeGate.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { UpgradeGate } from './UpgradeGate'
+
+function Page(props: { busy?: boolean; onViewPlans?: () => void; onSignOut?: () => void }) {
+  return (
+    <>
+      <button>Behind</button>
+      <UpgradeGate onViewPlans={props.onViewPlans ?? (() => {})} onSignOut={props.onSignOut ?? (() => {})} busy={props.busy} />
+    </>
+  )
+}
+
+describe('UpgradeGate', () => {
+  it('holds focus inside; Tab never reaches content behind', async () => {
+    render(<Page />)
+    const dialog = screen.getByRole('dialog', { name: 'Your organisation has no active plan' })
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog.contains(document.activeElement)).toBe(true)
+    for (let i = 0; i < 5; i++) {
+      await userEvent.tab()
+      expect(dialog.contains(document.activeElement)).toBe(true)
+    }
+  })
+
+  it('stays open on Escape and says so to screen readers', async () => {
+    render(<Page />)
+    await userEvent.keyboard('{Escape}')
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toHaveAccessibleDescription(/cannot be closed/)
+  })
+
+  it('busy: primary is blocked and announces busy', async () => {
+    const onViewPlans = vi.fn()
+    render(<Page busy onViewPlans={onViewPlans} />)
+    const primary = screen.getByRole('button', { name: 'View plans' })
+    expect(primary).toHaveAttribute('aria-busy', 'true')
+    await userEvent.click(primary)
+    expect(onViewPlans).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Sign out' })).toBeEnabled()
+  })
+
+  it('calls onSignOut once', async () => {
+    const onSignOut = vi.fn()
+    render(<Page onSignOut={onSignOut} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Sign out' }))
+    expect(onSignOut).toHaveBeenCalledTimes(1)
+  })
+
+  it('has no axe violations', async () => {
+    render(<Page />)
+    await expectNoAxeViolations(document.body)
+  })
+})

package/src/components/upgrade-gate/UpgradeGate.tsx

@@ -0,0 +1,56 @@
+import { useId, useRef } from 'react'
+import { Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components'
+import { useDomAttributes } from '../../internal/dom'
+import { useMessages } from '../../internal/provider'
+import type { AuthBrandMessages } from '../../internal/messages/auth-brand'
+import { AmbientBackdrop } from '../ambient-backdrop/AmbientBackdrop'
+import { Button } from '../button/Button'
+import { InlineNotice } from '../inline-notice/InlineNotice'
+
+export type UpgradeGateTexts = AuthBrandMessages['upgradeGate']
+
+export interface UpgradeGateProps {
+  onViewPlans: () => void
+  onSignOut: () => void
+  busy?: boolean
+  texts?: Partial<UpgradeGateTexts>
+  className?: string
+}
+
+/** Non-dismissable blocking screen for organisations without a plan (spec: wave-2/upgrade-gate.md). */
+export function UpgradeGate({ onViewPlans, onSignOut, busy = false, texts, className }: UpgradeGateProps) {
+  const t: UpgradeGateTexts = { ...useMessages().upgradeGate, ...texts }
+  const ids = useId().replace(/:/g, '')
+  const titleId = `ty-gate-title-${ids}`
+  const descId = `ty-gate-desc-${ids}`
+  const dialogRef = useRef<HTMLElement>(null)
+  // RAC's Dialog does not forward aria-modal; the gate is modal, so say it.
+  useDomAttributes(dialogRef, { 'aria-modal': 'true' })
+  return (
+    <ModalOverlay isOpen isDismissable={false} isKeyboardDismissDisabled className={className ? `ty-gate ${className}` : 'ty-gate'}>
+      <AmbientBackdrop />
+      <Modal className="ty-gate__modal">
+        <Dialog className="ty-gate__dialog" ref={dialogRef} role="dialog" aria-labelledby={titleId} aria-describedby={descId}>
+          <p className="ty-gate__eyebrow">{t.eyebrow}</p>
+          <Heading slot="title" level={1} id={titleId} className="ty-gate__title">
+            {t.title}
+          </Heading>
+          <p id={descId} className="ty-gate__description">
+            {t.description} <span className="ty-visually-hidden">{t.cannotDismiss}</span>
+          </p>
+          <InlineNotice tone="warning" title={t.noticeTitle} urgency="none">
+            {t.noticeBody}
+          </InlineNotice>
+          <div className="ty-gate__actions">
+            <Button variant="primary" busy={busy} onPress={onViewPlans} autoFocus>
+              {t.viewPlans}
+            </Button>
+            <Button variant="quiet" onPress={onSignOut}>
+              {t.signOut}
+            </Button>
+          </div>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

package/src/components/wheel-picker/WheelPicker.css

@@ -0,0 +1,149 @@
+/* WheelPicker (spec: wave-2/wheel-picker.md; design direction §2.5, §2.6, §2.7, §2.10). */
+@layer tympan.components {
+  .ty-wheel {
+    --ty-wheel-row: var(--ty-control-target);
+    --ty-wheel-rows: 5;
+    --ty-wheel-share: 1;
+    display: flex;
+    flex: var(--ty-wheel-share) 1 0;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-wheel__caption {
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    text-align: center;
+  }
+  .ty-wheel__viewport {
+    position: relative;
+    block-size: calc(var(--ty-wheel-row) * var(--ty-wheel-rows));
+    overflow: hidden;
+    border-radius: var(--ty-radius-card);
+  }
+  /* Fade masks at the top and bottom. */
+  .ty-wheel__viewport::before,
+  .ty-wheel__viewport::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    z-index: 2;
+    block-size: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    pointer-events: none;
+  }
+  .ty-wheel__viewport::before {
+    inset-block-start: 0;
+    background: linear-gradient(to bottom, var(--ty-surface-raised-solid), transparent);
+  }
+  .ty-wheel__viewport::after {
+    inset-block-end: 0;
+    background: linear-gradient(to top, var(--ty-surface-raised-solid), transparent);
+  }
+  .ty-wheel__band {
+    position: absolute;
+    inset-inline: var(--ty-space-1);
+    inset-block-start: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    z-index: 0;
+    block-size: var(--ty-wheel-row);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-accent-soft);
+    pointer-events: none;
+  }
+  .ty-wheel__list {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    block-size: 100%;
+    overflow-y: auto;
+    padding-block: calc(var(--ty-wheel-row) * (var(--ty-wheel-rows) - 1) / 2);
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    overscroll-behavior: contain;
+    outline: none;
+    touch-action: pan-y;
+  }
+  .ty-wheel__list::-webkit-scrollbar {
+    display: none;
+  }
+  .ty-wheel__viewport:has(.ty-wheel__list[data-focus-visible]) .ty-wheel__band,
+  .ty-wheel__viewport:has(.ty-wheel__row[data-focus-visible]) .ty-wheel__band {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+  .ty-wheel__row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ty-wheel-row);
+    padding-inline: var(--ty-space-2);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-body);
+    font-variant-numeric: tabular-nums;
+    scroll-snap-align: center;
+    cursor: pointer;
+    outline: none;
+    transition:
+      opacity var(--ty-dur-quick) var(--ty-ease),
+      transform var(--ty-dur-quick) var(--ty-ease);
+    user-select: none;
+  }
+  .ty-wheel__row[data-distance='1'] {
+    opacity: 0.8;
+    transform: scale(0.94);
+  }
+  .ty-wheel__row[data-distance='2'],
+  .ty-wheel__row[data-distance='3'] {
+    opacity: 0.55;
+    transform: scale(0.88);
+  }
+  .ty-wheel__row[data-selected] {
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-wheel[data-disabled] {
+    opacity: 0.55;
+  }
+  /* A pointer drag lifts the snap until release (set by the custom element
+     while a mouse or pen drag is active). */
+  .ty-wheel[data-dragging] .ty-wheel__list {
+    scroll-snap-type: none;
+    cursor: grabbing;
+  }
+
+  .ty-wheel-group {
+    display: flex;
+    gap: var(--ty-space-2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-wheel__row,
+    .ty-wheel__row[data-distance] {
+      transform: none;
+      opacity: 1;
+      transition: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-wheel__viewport::before,
+    .ty-wheel__viewport::after {
+      background: var(--ty-surface-raised-solid);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-wheel__band {
+      border: 2px solid Highlight;
+      background: Canvas;
+    }
+    .ty-wheel__row[data-selected] {
+      color: CanvasText;
+    }
+    .ty-wheel__viewport::before,
+    .ty-wheel__viewport::after {
+      background: Canvas;
+      opacity: 0.6;
+    }
+  }
+}

package/src/components/wheel-picker/WheelPicker.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { setMedia } from '../../../test/media'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { WheelPicker, WheelPickerGroup } from './WheelPicker'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('WheelPicker', () => {
+  const scrollTo = vi.fn()
+  beforeEach(() => {
+    scrollTo.mockReset()
+    Object.defineProperty(Element.prototype, 'scrollTo', { configurable: true, writable: true, value: scrollTo })
+  })
+  afterEach(() => {
+    delete (Element.prototype as { scrollTo?: unknown }).scrollTo
+  })
+
+  it('reports a clicked row', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={onChange} />)
+    await userEvent.click(screen.getByRole('option', { name: 'c' }))
+    expect(onChange).toHaveBeenCalledWith('c')
+  })
+
+  it('reports the value of object options, not the label', async () => {
+    const onChange = vi.fn()
+    render(
+      <WheelPicker
+        label="Month"
+        options={[
+          { value: '01', label: 'January' },
+          { value: '02', label: 'February' },
+        ]}
+        value="01"
+        onChange={onChange}
+      />,
+    )
+    await userEvent.click(screen.getByRole('option', { name: 'February' }))
+    expect(onChange).toHaveBeenCalledWith('02')
+  })
+
+  it('moves one row with ArrowDown', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={onChange} />)
+    await userEvent.tab()
+    expect(screen.getByRole('option', { name: 'a' })).toHaveFocus()
+    await userEvent.keyboard('{ArrowDown}')
+    expect(onChange).toHaveBeenCalledWith('b')
+  })
+
+  it('moves by the visible rows with PageDown', async () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Number" options={['1', '2', '3', '4', '5', '6', '7', '8']} value="1" onChange={onChange} visibleRows={3} />)
+    await userEvent.tab()
+    await userEvent.keyboard('{PageDown}')
+    expect(onChange).toHaveBeenCalledWith('4')
+  })
+
+  it('tolerates a value outside the list without reporting', () => {
+    const onChange = vi.fn()
+    render(<WheelPicker label="Letter" options={['a', 'b']} value="zzz" onChange={onChange} />)
+    expect(screen.getAllByRole('option')).toHaveLength(2)
+    expect(screen.getAllByRole('option').some((o) => o.getAttribute('aria-selected') === 'true')).toBe(false)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('calls only the changed column in a group', async () => {
+    const day = vi.fn()
+    const month = vi.fn()
+    render(
+      <WheelPickerGroup
+        label="Date"
+        columns={[
+          { label: 'Day', options: ['1', '2'], value: '1', onChange: day },
+          { label: 'Month', options: ['Jan', 'Feb'], value: 'Jan', onChange: month, share: 2 },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('group', { name: 'Date' })).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('option', { name: 'Feb' }))
+    expect(month).toHaveBeenCalledWith('Feb')
+    expect(day).not.toHaveBeenCalled()
+  })
+
+  it('centres the initial value on mount, once its row exists (React 18 and 19)', async () => {
+    // Clamp like a browser: a list cannot scroll past the rows it holds, so a
+    // scroll issued before React Aria commits the option rows would land on 0.
+    scrollTo.mockImplementation(function (this: HTMLElement, options: ScrollToOptions) {
+      const rowsInDom = this.querySelectorAll('[role="option"]').length
+      this.scrollTop = Math.min(options.top ?? 0, Math.max(0, rowsInDom - 1) * 44)
+    })
+    render(<WheelPicker label="Letter" options={['a', 'b', 'c', 'd', 'e']} value="d" onChange={() => {}} />)
+    await waitFor(() => expect(scrollTo).toHaveBeenCalled())
+    expect(screen.getByRole('listbox', { name: 'Letter' }).scrollTop).toBe(3 * 44)
+    expect(scrollTo).toHaveBeenCalledTimes(1)
+    expect(scrollTo).toHaveBeenCalledWith({ top: 3 * 44, behavior: 'instant' })
+  })
+
+  it('animates programmatic moves, and jumps under reduced motion', async () => {
+    const { rerender } = render(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="a" onChange={() => {}} />)
+    await waitFor(() => expect(scrollTo).toHaveBeenCalledWith(expect.objectContaining({ top: 0, behavior: 'instant' })))
+    rerender(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="c" onChange={() => {}} />)
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: 'smooth' }))
+    setMedia({ reducedMotion: true })
+    rerender(<WheelPicker label="Letter" options={['a', 'b', 'c']} value="b" onChange={() => {}} />)
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: 'instant' }))
+    const reduced = mediaBlock(cssOf('components/wheel-picker/WheelPicker.css'), /\(prefers-reduced-motion:\s*reduce\)/)
+    expect(reduced).toMatch(/transform:\s*none/)
+  })
+
+  it('keeps 44 px rows and a system-highlight band in forced colours', () => {
+    const css = cssOf('components/wheel-picker/WheelPicker.css')
+    expect(css).toMatch(/--ty-wheel-row:\s*var\(--ty-control-target\)/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+    expect(mediaBlock(css, /\(prefers-reduced-transparency:\s*reduce\)/)).toMatch(/surface-raised-solid/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <WheelPicker label={`Hour ${scheme}`} options={['08', '09', '10']} value="09" onChange={() => {}} />
+            <WheelPickerGroup
+              label={`Date ${scheme}`}
+              columns={[
+                { label: `Day ${scheme}`, options: ['1', '2'], value: '1', onChange: () => {} },
+                { label: `Year ${scheme}`, options: ['2025', '2026'], value: '2026', onChange: () => {} },
+              ]}
+            />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('WheelPicker in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<WheelPicker label="الساعة" options={['٠٨', '٠٩', '١٠']} value="٠٩" onChange={() => {}} />)
+    expect(rtlDom.screen.getByRole('listbox', { name: 'الساعة' })).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})