` copies scattered across
+ * modals/pages. */
+export function Alert({ variant, children, className, testId }: AlertProps): ReactNode {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/frontend/src/components/common/CalendarWeek.tsx b/frontend/src/components/common/CalendarWeek.tsx
index 6fe6455..eba42d8 100644
--- a/frontend/src/components/common/CalendarWeek.tsx
+++ b/frontend/src/components/common/CalendarWeek.tsx
@@ -402,10 +402,15 @@ export function CalendarWeek({
// see the --c-leave-* tokens) and owner by a 2px left cap
// (`--self`/`--partner`) — never by hue, so the two axes stay
// readable side by side and in greyscale.
+ const typeKey = getTypeKey(representativeType)
const classNames = [
'calendar-band',
- `calendar-band--${getTypeKey(representativeType)}`,
+ `calendar-band--${typeKey}`,
+ // `leave-swatch--*` (primitives.css) carries the shared
+ // fill/hatch/outline/cap-mark recipe; `unknown` has no recipe.
+ typeKey !== 'unknown' ? `leave-swatch--${typeKey}` : '',
segment.parentUuid === personalDataUuid ? 'calendar-band--self' : 'calendar-band--partner',
+ segment.parentUuid === personalDataUuid ? 'leave-swatch--cap-self' : 'leave-swatch--cap-partner',
segment.isBandStart ? 'calendar-band--start' : '',
segment.isBandEnd ? 'calendar-band--end' : '',
segment.wishId && segment.wishId === flashWishId ? 'calendar-band--flash' : '',
diff --git a/frontend/src/components/common/FormField.test.tsx b/frontend/src/components/common/FormField.test.tsx
new file mode 100644
index 0000000..a9c21a1
--- /dev/null
+++ b/frontend/src/components/common/FormField.test.tsx
@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { FormField } from './FormField'
+
+describe('FormField', () => {
+ it('renders the label wired to the control via htmlFor/id', () => {
+ render(
+
+
+ ,
+ )
+ const input = screen.getByTestId('name-input')
+ expect(input).toHaveAttribute('id', 'name')
+ expect(screen.getByText('Name')).toHaveAttribute('for', 'name')
+ })
+
+ it('renders no error/helper paragraph and no aria-invalid/aria-describedby when neither is given', () => {
+ render(
+
+
+ ,
+ )
+ const input = screen.getByTestId('name-input')
+ expect(input).not.toHaveAttribute('aria-invalid')
+ expect(input).not.toHaveAttribute('aria-describedby')
+ expect(screen.queryByText(/./, { selector: '.field__error' })).not.toBeInTheDocument()
+ expect(screen.queryByText(/./, { selector: '.field__helper' })).not.toBeInTheDocument()
+ })
+
+ it('renders a helper line and describes the control by it when there is no error', () => {
+ render(
+
+
+ ,
+ )
+ const input = screen.getByTestId('qty-input')
+ expect(input).toHaveAttribute('aria-describedby', 'qty-helper')
+ expect(input).not.toHaveAttribute('aria-invalid')
+ const helper = screen.getByText('Whole numbers only')
+ expect(helper).toHaveAttribute('id', 'qty-helper')
+ expect(helper).toHaveClass('field__helper')
+ })
+
+ it('renders an error line, sets aria-invalid, and describes the control by the error over the helper', () => {
+ render(
+
+
+ ,
+ )
+ const input = screen.getByTestId('qty-input')
+ expect(input).toHaveAttribute('aria-invalid', 'true')
+ expect(input).toHaveAttribute('aria-describedby', 'qty-error')
+ const error = screen.getByText('Required')
+ expect(error).toHaveAttribute('id', 'qty-error')
+ expect(error).toHaveClass('field__error')
+ // The helper still renders alongside the error (matches the hand-rolled
+ // ParentBalanceForm convention) — just isn't what's referenced by
+ // aria-describedby while an error is present.
+ expect(screen.getByText('Whole numbers only')).toBeInTheDocument()
+ })
+
+ it('appends a custom className to the field wrapper', () => {
+ render(
+
+
+ ,
+ )
+ expect(screen.getByTestId('name-input').closest('.field')).toHaveClass(
+ 'field',
+ 'onboarding__partner-name-field',
+ )
+ })
+
+ it('preserves other props already on the control (value, disabled, data-testid)', () => {
+ render(
+
+
+ ,
+ )
+ const input = screen.getByTestId('qty-input') as HTMLInputElement
+ expect(input.value).toBe('5')
+ expect(input).toBeDisabled()
+ })
+})
diff --git a/frontend/src/components/common/FormField.tsx b/frontend/src/components/common/FormField.tsx
new file mode 100644
index 0000000..ff7dcbf
--- /dev/null
+++ b/frontend/src/components/common/FormField.tsx
@@ -0,0 +1,73 @@
+import { ReactElement, ReactNode, cloneElement } from 'react'
+
+/** The subset of a native form control's props `FormField` needs to wire up
+ * — id/aria-invalid/aria-describedby — so `children` can stay typed without
+ * reaching for `any`. Every native control (input/select/textarea) already
+ * satisfies this structurally. */
+interface FieldControlProps {
+ id?: string | undefined
+ 'aria-invalid'?: 'true' | undefined
+ 'aria-describedby'?: string | undefined
+}
+
+export interface FormFieldProps {
+ id: string
+ label: ReactNode
+ error?: ReactNode
+ helperText?: ReactNode
+ className?: string
+ children: ReactElement
+}
+
+/**
+ * The shared `.field` markup (see `src/styles/primitives.css`) — label,
+ * control, an optional inline error, an optional helper line — used to be
+ * hand-copied across every form in the app (`ParentBalanceForm`,
+ * `PlannedDayModal`, `Auth`, `Join`, `Onboarding`, `Settings`,
+ * `PartnerInvitePanel`, `ChildBirthdayInput`, `PeriodPopover`, …). This
+ * centralizes it and wires the control's `id`/`aria-invalid`/
+ * `aria-describedby` automatically via `cloneElement`, so a caller only
+ * supplies the control itself (uncontrolled as to id/aria) as `children`.
+ *
+ * `aria-describedby` points at the error when present, else the helper when
+ * present, else nothing — matching the hand-rolled convention this replaces
+ * (e.g. `ParentBalanceForm`'s dubbeldagar/reserved fields, which describe by
+ * their helper whenever there's no error to describe by instead).
+ */
+export function FormField({
+ id,
+ label,
+ error,
+ helperText,
+ className,
+ children,
+}: FormFieldProps): ReactNode {
+ const errorId = `${id}-error`
+ const helperId = `${id}-helper`
+ const describedBy = error ? errorId : helperText ? helperId : undefined
+
+ const control = cloneElement(children, {
+ id,
+ 'aria-invalid': error ? 'true' : undefined,
+ 'aria-describedby': describedBy,
+ })
+
+ return (
+
+
+ {control}
+ {error && (
+
+ {error}
+
+ )}
+ {helperText && (
+
+ {helperText}
+
+ )}
+
+ {prompt}
+ {confirmFirst ? (
+ <>
+ {confirmButton}
+ {cancelButton}
+
+ ) : (
+ <>
+ {cancelButton}
+ {confirmButton}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/components/common/Modal.test.tsx b/frontend/src/components/common/Modal.test.tsx
new file mode 100644
index 0000000..6333b57
--- /dev/null
+++ b/frontend/src/components/common/Modal.test.tsx
@@ -0,0 +1,184 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Modal } from './Modal'
+
+describe('Modal', () => {
+ it('renders the title, close button and children', () => {
+ render(
+
+ Body content
+ ,
+ )
+ expect(screen.getByRole('heading', { name: 'Hello' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+ expect(screen.getByText('Body content')).toBeInTheDocument()
+ })
+
+ it('defaults to the md content size', () => {
+ const { container } = render(
+
+ Body
+ ,
+ )
+ expect(container.querySelector('.modal__content--md')).not.toBeNull()
+ })
+
+ it('applies the sm content size when requested', () => {
+ const { container } = render(
+
+ Body
+ ,
+ )
+ expect(container.querySelector('.modal__content--sm')).not.toBeNull()
+ })
+
+ it('calls onClose when the close button is clicked', async () => {
+ const user = userEvent.setup()
+ const onClose = vi.fn()
+ render(
+
+ Body
+ ,
+ )
+ await user.click(screen.getByRole('button', { name: 'Close' }))
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('disables the close button when closeDisabled is set', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByRole('button', { name: 'Close' })).toBeDisabled()
+ })
+
+ it('closes on overlay click by default', async () => {
+ const user = userEvent.setup()
+ const onClose = vi.fn()
+ const { container } = render(
+
+ Body
+ ,
+ )
+ await user.click(container.querySelector('.modal__overlay') as Element)
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('does not close on overlay click when closeOnOverlayClick is false', async () => {
+ const user = userEvent.setup()
+ const onClose = vi.fn()
+ const { container } = render(
+
+ Body
+ ,
+ )
+ await user.click(container.querySelector('.modal__overlay') as Element)
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('does not close when clicking inside the content box', async () => {
+ const user = userEvent.setup()
+ const onClose = vi.fn()
+ render(
+
+ Body content
+ ,
+ )
+ await user.click(screen.getByText('Body content'))
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('calls onClose on Escape', () => {
+ const onClose = vi.fn()
+ render(
+
+ Body
+ ,
+ )
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('ignores other keys', () => {
+ const onClose = vi.fn()
+ render(
+
+ Body
+ ,
+ )
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('does not call onClose on Escape when closeDisabled is set', () => {
+ const onClose = vi.fn()
+ render(
+
+ Body
+ ,
+ )
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('removes the Escape listener on unmount', () => {
+ const onClose = vi.fn()
+ const { unmount } = render(
+
+ Body
+ ,
+ )
+ unmount()
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('renders a footer when provided', () => {
+ render(
+ Save}>
+ Body
+ ,
+ )
+ expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
+ })
+
+ it('renders no footer when omitted', () => {
+ const { container } = render(
+
+ Body
+ ,
+ )
+ expect(container.querySelector('.modal__footer')).toBeNull()
+ })
+
+ it('wires up testId, contentTestId, titleTestId, titleId and role', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByTestId('overlay-test')).toHaveAttribute('role', 'dialog')
+ expect(screen.getByTestId('content-test')).toBeInTheDocument()
+ expect(screen.getByTestId('title-test')).toHaveAttribute('id', 'hello-title')
+ })
+
+ it('omits role when not provided', () => {
+ const { container } = render(
+
+ Body
+ ,
+ )
+ expect(container.querySelector('.modal__overlay')).not.toHaveAttribute('role')
+ })
+})
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
new file mode 100644
index 0000000..d878a36
--- /dev/null
+++ b/frontend/src/components/common/Modal.tsx
@@ -0,0 +1,96 @@
+import { ReactNode, useEffect } from 'react'
+import { Icon } from './Icon'
+
+export interface ModalProps {
+ onClose: () => void
+ title: ReactNode
+ /** Maps to `.modal__content--{size}` in `src/styles/primitives.css`. */
+ size?: 'sm' | 'md'
+ /** Disables the close button and stops Escape from closing — mirrors
+ * `QRCodeModal`'s "can't close while the scrape is running" rule. */
+ closeDisabled?: boolean
+ /** Whether clicking the overlay (outside the content box) closes the
+ * modal. Defaults to true; `QRCodeModal` sets it false so a stray click
+ * can't drop a running fetch. */
+ closeOnOverlayClick?: boolean
+ footer?: ReactNode
+ /** `data-testid` on the overlay div. */
+ testId?: string
+ /** `data-testid` on the content box. */
+ contentTestId?: string
+ /** `data-testid` on the title ``. */
+ titleTestId?: string
+ /** `id` on the title ``, for a caller that wants to wire up
+ * `aria-labelledby` on the overlay itself. */
+ titleId?: string
+ /** Set to `'dialog'` when the caller wants that role on the overlay
+ * (`PlannedDayModal` does; the others don't add one). */
+ role?: 'dialog'
+ closeAriaLabel: string
+ children: ReactNode
+}
+
+/**
+ * The shared `.modal__overlay > .modal__content > .modal__header (h2 +
+ * close button) > .modal__body > .modal__footer` shell — hand-copied across
+ * `ParentBalanceForm`, `PlannedDayModal` and `QRCodeModal` before this.
+ * Standardises the close button on ``; the caller still
+ * supplies its own `aria-label` text. No focus trap — out of scope here.
+ */
+export function Modal({
+ onClose,
+ title,
+ size = 'md',
+ closeDisabled = false,
+ closeOnOverlayClick = true,
+ footer,
+ testId,
+ contentTestId,
+ titleTestId,
+ titleId,
+ role,
+ closeAriaLabel,
+ children,
+}: ModalProps): ReactNode {
+ useEffect(() => {
+ if (closeDisabled) return
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose()
+ }
+ document.addEventListener('keydown', handleKeyDown)
+ return () => document.removeEventListener('keydown', handleKeyDown)
+ }, [closeDisabled, onClose])
+
+ const handleOverlayClick = () => {
+ if (closeOnOverlayClick) onClose()
+ }
+
+ return (
+
+
e.stopPropagation()}
+ data-testid={contentTestId}
+ >
+
+
+ {title}
+
+
+
+
+
{children}
+
+ {footer &&
{footer}
}
+
+
Body
+ ,
+ )
+ const el = screen.getByRole('article')
+ expect(el).toHaveClass('tip-card', cls)
+ })
+
+ it('renders the title in a tip-card__title heading and the children below the header', () => {
+ render(
+
+ My body
+ ,
+ )
+ const el = screen.getByRole('article')
+ expect(el.querySelector('.tip-card__title')?.textContent).toBe('My title')
+ expect(el.querySelector('.tip-card__body')?.textContent).toBe('My body')
+ })
+
+ it('renders without a data-testid when none is given', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByRole('article')).not.toHaveAttribute('data-testid')
+ })
+
+ it('applies a testId when given', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByTestId('my-tip')).toBe(screen.getByRole('article'))
+ })
+
+ it('applies the aria-label when given', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByRole('article')).toHaveAttribute('aria-label', 'Tips: T')
+ })
+
+ it('appends a custom className alongside the variant class', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.getByRole('article')).toHaveClass('tip-card', 'tip-card--action', 'vacation-rescue-tip')
+ })
+
+ it('does not render a dismiss button when onDismiss is not provided', () => {
+ render(
+
+ Body
+ ,
+ )
+ expect(screen.queryByTestId('dismiss-button')).not.toBeInTheDocument()
+ })
+
+ it('renders a dismiss button with the given label and calls onDismiss when clicked', () => {
+ const onDismiss = vi.fn()
+ render(
+
+ Body
+ ,
+ )
+ const button = screen.getByTestId('dismiss-button')
+ expect(button).toHaveAttribute('aria-label', 'Dismiss T')
+ fireEvent.click(button)
+ expect(onDismiss).toHaveBeenCalledTimes(1)
+ })
+
+ it('renders headerExtra content instead of relying on the generic dismiss button', () => {
+ render(
+ Bye}>
+ Body
+ ,
+ )
+ expect(screen.getByTestId('custom-dismiss')).toBeInTheDocument()
+ expect(screen.queryByTestId('dismiss-button')).not.toBeInTheDocument()
+ })
+
+ it('renders both the generic dismiss button and headerExtra when both are given', () => {
+ render(
+ {}}
+ headerExtra={Extra}
+ >
+ Body
+ ,
+ )
+ expect(screen.getByTestId('dismiss-button')).toBeInTheDocument()
+ expect(screen.getByTestId('extra')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/common/TipCardShell.tsx b/frontend/src/components/common/TipCardShell.tsx
new file mode 100644
index 0000000..a72e941
--- /dev/null
+++ b/frontend/src/components/common/TipCardShell.tsx
@@ -0,0 +1,68 @@
+import { ReactNode } from 'react'
+
+export type TipCardVariant = 'info' | 'warning' | 'action' | 'danger'
+
+export interface TipCardShellProps {
+ variant: TipCardVariant
+ title: ReactNode
+ children: ReactNode
+ /** Renders the generic "×" dismiss button (see `TipCard`'s own use) when
+ * provided. Omit this and use `headerExtra` instead when a consumer needs
+ * a differently-styled header control, e.g. `VacationRescueTip`'s labelled
+ * dismiss button with its own testid/disabled state. */
+ onDismiss?: (() => void) | undefined
+ /** aria-label for the generic dismiss button; ignored without `onDismiss`. */
+ dismissLabel?: string | undefined
+ /** Custom content rendered in the header after the title, in place of the
+ * generic dismiss button. */
+ headerExtra?: ReactNode
+ testId?: string | undefined
+ ariaLabel?: string | undefined
+ className?: string | undefined
+}
+
+/**
+ * The `tip-card` / `tip-card__header` / `tip-card__title` shell shared by
+ * `TipCard` and the dashboard's derived tip-like cards (`PlanWarningCard`,
+ * `SurplusAdviceTip`, `VacationRescueTip`) — so the dashboard reads as one
+ * visual system. Body content (and anything beyond it, e.g.
+ * `VacationRescueTip`'s date list) is left to `children`, since it varies
+ * per consumer.
+ */
+export function TipCardShell({
+ variant,
+ title,
+ children,
+ onDismiss,
+ dismissLabel,
+ headerExtra,
+ testId,
+ ariaLabel,
+ className,
+}: TipCardShellProps): ReactNode {
+ return (
+
+
+
{title}
+ {onDismiss && (
+
+ )}
+ {headerExtra}
+
+ {children}
+
-
-
{title}
+
{t('planResults.vacationRescueDismiss')}
-
+ }
+ >
{body}
@@ -107,6 +108,6 @@ export function VacationRescueTip({
{t('planResults.vacationRescueError')}
)}
-
{TYPE_ORDER.map((type) => (
-
-
+
{getLabelForType(type, t)}
))}
@@ -259,7 +262,7 @@ export function YearRows({