@datatechsolutions/tympan 0.3.1 → 0.4.0

package/src/components/calendar/Calendar.css

@@ -0,0 +1,260 @@
+/* Calendar (spec: wave-5-general/calendar.md; design direction §2.3, §2.4, §2.6, §2.10). */
+@layer tympan.components {
+  .ty-calendar {
+    --ty-calendar-cell: calc(var(--ty-control-height) + var(--ty-space-1));
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+    min-inline-size: 0;
+  }
+  .ty-calendar__rac {
+    display: block;
+  }
+
+  /* Header: previous / title (or pickers) / next. */
+  .ty-calendar__stepper {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+  }
+  .ty-calendar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ty-control-height);
+    block-size: var(--ty-control-height);
+    flex: none;
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-ink-2);
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-calendar__nav[data-hovered] {
+    background: var(--ty-surface-sunken);
+  }
+  .ty-calendar__nav[data-pressed] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-calendar__nav[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-calendar__nav[aria-disabled='true'],
+  .ty-calendar__nav[data-disabled] {
+    color: var(--ty-ink-3);
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+  .ty-calendar__heading {
+    flex: 1;
+    min-block-size: var(--ty-control-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--ty-space-2);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+    text-align: center;
+  }
+  .ty-calendar__pickers {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    gap: var(--ty-space-2);
+  }
+
+  /* Month grids, side by side, stacked below the small breakpoint. */
+  .ty-calendar__body {
+    display: flex;
+    gap: var(--ty-space-5);
+  }
+  .ty-calendar[data-months='2'] .ty-calendar__body,
+  .ty-calendar[data-months='3'] .ty-calendar__body {
+    justify-content: center;
+  }
+  .ty-calendar__month {
+    display: flex;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-calendar__weeks {
+    display: flex;
+    flex-direction: column;
+    padding-block: calc(var(--ty-font-size-meta) + var(--ty-space-2));
+  }
+  .ty-calendar__week {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-block-size: var(--ty-calendar-cell);
+    padding: 1px;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-calendar__grid {
+    flex: 1;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  .ty-calendar__weekday {
+    padding-block-end: var(--ty-space-1);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    font-weight: var(--ty-font-weight-regular);
+    text-align: center;
+  }
+  .ty-calendar__grid td {
+    padding: 1px;
+    text-align: center;
+  }
+
+  /* Day cells: states carry shape and colour, never colour alone. */
+  .ty-calendar__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ty-calendar-cell);
+    min-block-size: var(--ty-calendar-cell);
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-calendar__day-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    border-radius: inherit;
+  }
+  .ty-calendar__day[data-outside-month] {
+    color: var(--ty-ink-3);
+  }
+  .ty-calendar[data-months='2'] .ty-calendar__day[data-outside-month],
+  .ty-calendar[data-months='3'] .ty-calendar__day[data-outside-month] {
+    visibility: hidden;
+  }
+  .ty-calendar:not([data-outside-days]) .ty-calendar__day[data-outside-month] {
+    display: none;
+  }
+  .ty-calendar__day[data-hovered] {
+    background: var(--ty-surface-sunken);
+  }
+  .ty-calendar__day-box[data-today] {
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+    box-shadow: inset 0 0 0 1px var(--ty-line-strong);
+  }
+  .ty-calendar__day[data-selected] {
+    background: var(--ty-accent);
+    color: var(--ty-on-cta);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-calendar__day[data-selected] .ty-calendar__day-box {
+    color: inherit;
+  }
+  .ty-calendar__day[data-selection-start] {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .ty-calendar__day[data-selection-end] {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .ty-calendar__day[data-selected]:not([data-selection-start]):not([data-selection-end]) {
+    border-radius: 0;
+  }
+  .ty-calendar__day[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-calendar__day[data-unavailable] .ty-calendar__day-number {
+    color: var(--ty-ink-3);
+    text-decoration: line-through;
+  }
+  .ty-calendar__day[data-disabled],
+  .ty-calendar__day[data-unavailable] {
+    cursor: not-allowed;
+  }
+  .ty-calendar__day[data-disabled] {
+    opacity: 0.45;
+  }
+  .ty-calendar__error {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    color: var(--ty-danger);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-calendar__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2);
+    padding-block-start: var(--ty-space-2);
+    border-block-start: 1px solid var(--ty-line-soft);
+  }
+
+  /* Touch: every day cell reaches the target size. */
+  @media (pointer: coarse), (max-width: 1023.98px) {
+    .ty-calendar {
+      --ty-calendar-cell: var(--ty-control-target);
+    }
+  }
+
+  /* Several months stack below the small breakpoint. */
+  @media (max-width: 639.98px) {
+    .ty-calendar[data-months='2'] .ty-calendar__body,
+    .ty-calendar[data-months='3'] .ty-calendar__body {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-calendar *,
+    .ty-calendar *::before,
+    .ty-calendar *::after {
+      animation-duration: 0s;
+      transition-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-calendar__day[data-selected] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-calendar__day-box[data-today] {
+      box-shadow: none;
+      outline: 1px solid CanvasText;
+    }
+    .ty-calendar__day[data-unavailable] {
+      color: GrayText;
+      opacity: 1;
+    }
+    .ty-calendar__day[data-disabled] {
+      color: GrayText;
+      opacity: 1;
+    }
+    .ty-calendar__day[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+    .ty-calendar__day,
+    .ty-calendar__weekday,
+    .ty-calendar__week {
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/components/calendar/Calendar.test.tsx

@@ -0,0 +1,178 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { renderRtl } from '../../../test/rtl'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { Calendar } from './Calendar'
+
+const day = (y: number, m: number, d: number) => new Date(y, m - 1, d)
+const range = (sy: number, sm: number, sd: number, ey: number, em: number, ed: number) => ({
+  start: day(sy, sm, sd),
+  end: day(ey, em, ed),
+})
+const sameDay = (a: Date | null | undefined, y: number, m: number, d: number) =>
+  !!a && a.getFullYear() === y && a.getMonth() === m - 1 && a.getDate() === d
+
+function grid() {
+  return screen.getByRole('grid')
+}
+
+describe('Calendar', () => {
+  it('moves focus by week with ArrowDown', async () => {
+    render(<Calendar label="Book" value={day(2026, 3, 10)} onChange={() => {}} locale="en-US" />)
+    await userEvent.click(within(grid()).getByRole('button', { name: /March 10/ }))
+    expect(document.activeElement).toHaveTextContent(/^10$/)
+    await userEvent.keyboard('{ArrowDown}')
+    expect(document.activeElement).toHaveTextContent(/^17$/)
+  })
+
+  it('moves focus to the month end with PageDown and reads the heading', async () => {
+    render(<Calendar label="Later" value={day(2026, 1, 31)} onChange={() => {}} locale="en-US" />)
+    await userEvent.click(within(grid()).getByRole('button', { name: /January 31/ }))
+    await userEvent.keyboard('{PageDown}')
+    expect(document.activeElement).toHaveTextContent(/^28$/)
+    expect(screen.getByText('February 2026')).toBeVisible()
+  })
+
+  it('swaps an earlier end into a 2-to-5 range', async () => {
+    const onChange = vi.fn()
+    render(
+      <Calendar label="Stay" mode="range" value={null} focusedValue={day(2026, 3, 1)} onChange={onChange} locale="en-US" />,
+    )
+    await userEvent.click(within(grid()).getByRole('button', { name: /March 5, 2026/ }))
+    await userEvent.click(within(grid()).getByRole('button', { name: /March 2, 2026/ }))
+    const reported = onChange.mock.calls.at(-1)![0] as { start: Date; end: Date }
+    expect(sameDay(reported.start, 2026, 3, 2)).toBe(true)
+    expect(sameDay(reported.end, 2026, 3, 5)).toBe(true)
+  })
+
+  it('cancels a pending range start on Escape', async () => {
+    const onChange = vi.fn()
+    render(
+      <Calendar label="Stay" mode="range" value={null} focusedValue={day(2026, 3, 1)} onChange={onChange} locale="en-US" />,
+    )
+    await userEvent.click(within(grid()).getByRole('button', { name: /March 5, 2026/ }))
+    await userEvent.keyboard('{Escape}')
+    const selected = within(grid()).getAllByRole('gridcell').filter((c) => c.getAttribute('aria-selected') === 'true')
+    expect(selected).toHaveLength(0)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('keeps Sundays unselectable and announced as unavailable', async () => {
+    const onChange = vi.fn()
+    render(
+      <Calendar
+        label="Visit"
+        value={day(2026, 3, 10)}
+        onChange={onChange}
+        isDateUnavailable={(d) => d.getDay() === 0}
+        locale="en-US"
+      />,
+    )
+    const sunday = within(grid()).getByRole('button', { name: /Sunday, March 8/ })
+    expect(sunday).toHaveAttribute('aria-disabled', 'true')
+    await userEvent.click(sunday)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('marks a range over an unavailable day invalid and shows the error', () => {
+    render(
+      <Calendar
+        label="Stay"
+        mode="range"
+        value={range(2026, 3, 6, 2026, 3, 12)}
+        onChange={() => {}}
+        isDateUnavailable={(d) => d.getDay() === 0}
+        errorMessage="Pick weekdays only."
+        locale="en-US"
+      />,
+    )
+    expect(screen.getByRole('alert')).toHaveTextContent('Pick weekdays only.')
+    expect(within(grid()).getAllByRole('gridcell').filter((c) => c.getAttribute('aria-selected') === 'true').length).toBeGreaterThan(0)
+  })
+
+  it('shows two consecutive months and pages by the set, or by one with pageBehavior single', async () => {
+    render(<Calendar label="Report" value={day(2026, 3, 10)} onChange={() => {}} visibleMonths={2} locale="en-US" />)
+    expect(screen.getAllByRole('grid')).toHaveLength(2)
+    expect(screen.getByText(/March 2026\s*–\s*April/)).toBeVisible()
+    await userEvent.click(screen.getByRole('button', { name: /Next month, May 2026/ }))
+    expect(screen.getByText(/May 2026\s*–\s*June/)).toBeVisible()
+  })
+
+  it('pages a two-month set by one month with pageBehavior single', async () => {
+    render(
+      <Calendar label="Report 2" value={day(2026, 3, 10)} onChange={() => {}} visibleMonths={2} pageBehavior="single" locale="en-US" />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Next month, April 2026/ }))
+    expect(screen.getByText(/April 2026\s*–\s*May/)).toBeVisible()
+  })
+
+  it('disables Next while the maxValue month is visible', () => {
+    render(<Calendar label="Cutoff" value={day(2026, 4, 10)} onChange={() => {}} maxValue={day(2026, 4, 30)} locale="en-US" />)
+    expect(screen.getByRole('button', { name: /Next month/ })).toBeDisabled()
+    expect(screen.getByRole('button', { name: /Previous month/ })).not.toBeDisabled()
+  })
+
+  it('jumps by picker and keeps focus in the year picker', async () => {
+    render(<Calendar label="Archive" value={day(2026, 3, 10)} onChange={() => {}} headerMode="pickers" locale="en-US" />)
+    // The trigger's name is the picked value ("2026"); the "Year" accessible
+    // label only shows as a suffix in jsdom's name computation.
+    await userEvent.click(screen.getByRole('button', { name: /Year/ }))
+    await userEvent.click(within(screen.getByRole('listbox')).getByText('2030'))
+    expect(within(grid()).getByRole('button', { name: /March 10, 2030/ })).toBeInTheDocument()
+    await waitFor(() => expect(screen.getByRole('button', { name: /Year/ })).toHaveFocus())
+  })
+
+  it('renders a non-interactive week-number column', () => {
+    render(<Calendar label="Plan" value={day(2026, 3, 10)} onChange={() => {}} showWeekNumbers locale="en-US" />)
+    const weeks = document.querySelectorAll('.ty-calendar__week')
+    expect(weeks.length).toBeGreaterThanOrEqual(5)
+    for (const w of weeks) {
+      expect(w.tagName).not.toBe('BUTTON')
+      expect(w.getAttribute('role')).not.toBe('button')
+    }
+  })
+
+  it('follows the Portuguese locale for weekday names and week start', () => {
+    const { container } = render(<Calendar label="Prazo" value={day(2026, 3, 10)} onChange={() => {}} locale="pt-BR" />)
+    // Weekday names are in the DOM; react-aria marks the header row
+    // aria-hidden (the names are already part of each day cell's label).
+    const weekdays = [...container.querySelectorAll('.ty-calendar__weekday')].map((el) => el.textContent)
+    expect(weekdays).toHaveLength(7)
+    expect(weekdays[0]).toMatch(/dom/i)
+    expect(within(grid()).getByRole('button', { name: /domingo, 1 de março/ })).toBeInTheDocument()
+  })
+
+  it('keeps day cells at the touch target, hides outside days on request and honours forced colours', () => {
+    const css = cssOf('components/calendar/Calendar.css')
+    expect(mediaBlock(css, /\(pointer:\s*coarse\)/)).toMatch(/var\(--ty-control-target\)/)
+    expect(css).toMatch(/:not\(\[data-outside-days\]\) \.ty-calendar__day\[data-outside-month\]/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/GrayText/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <Calendar label={`Book ${scheme}`} value={day(2026, 3, 10)} onChange={() => {}} showWeekNumbers footer={<span>GMT+1</span>} />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+
+  it('renders mirrored navigation in right-to-left and passes axe', async () => {
+    const { container } = renderRtl(<Calendar label="الحجز" value={day(2026, 9, 20)} onChange={() => {}} />)
+    for (const svg of container.querySelectorAll('svg.ty-icon')) {
+      if (svg.classList.contains('lucide-chevron-left') || svg.classList.contains('lucide-chevron-right')) {
+        expect(svg).toHaveClass('ty-mirror-rtl')
+      }
+    }
+    await expectNoAxeViolations(container)
+  })
+})