@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/popover/Popover.css

@@ -0,0 +1,130 @@
+/* Popover (spec: wave-1/popover.md; design direction §2.2, §2.4, §2.5, §2.7). */
+@layer tympan.components {
+  .ty-popover {
+    box-sizing: border-box;
+    max-inline-size: min(calc(var(--ty-measure-summary) * 1ch + 2 * var(--ty-space-4)), calc(100vw - 2 * var(--ty-space-4)));
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    color: var(--ty-on-surface-raised);
+    box-shadow: var(--ty-shadow-floating);
+    backdrop-filter: blur(var(--ty-glass-blur-floating)) saturate(var(--ty-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-floating)) saturate(var(--ty-glass-saturate));
+    z-index: var(--ty-z-popover);
+    outline: none;
+  }
+
+  .ty-popover[data-entering] {
+    animation: ty-popover-in var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-popover[data-exiting] {
+    animation: ty-popover-in var(--ty-dur-quick) var(--ty-ease-out) reverse;
+  }
+
+  @keyframes ty-popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+  }
+
+  .ty-popover__dialog {
+    padding: var(--ty-space-4);
+    outline: none;
+  }
+
+  .ty-popover__title {
+    margin: 0 0 var(--ty-space-2);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-label);
+  }
+
+  .ty-popover__content {
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+
+  .ty-popover__arrow svg {
+    display: block;
+    fill: var(--ty-surface-raised-solid);
+    stroke: var(--ty-line);
+    stroke-width: 1px;
+  }
+  .ty-popover__arrow[data-placement='bottom'] svg {
+    transform: rotate(180deg);
+  }
+  .ty-popover__arrow[data-placement='left'] svg {
+    transform: rotate(-90deg);
+  }
+  .ty-popover__arrow[data-placement='right'] svg {
+    transform: rotate(90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-popover[data-entering],
+    .ty-popover[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-popover {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      backdrop-filter: none;
+    }
+    .ty-popover__arrow {
+      display: none;
+    }
+  }
+}
+
+
+/* ── <ty-popover> ────────────────────────────────────────────────────────
+   The element's anatomy: the host is an inline anchor; the panel reuses
+   the .ty-popover styles above (the React wrapper renders the same
+   classes), fixed-positioned by the element's placement model once open. */
+
+@layer tympan.components {
+  .ty-popover__anchor {
+    display: inline-block;
+    position: relative;
+  }
+
+  .ty-popover[hidden] {
+    display: none;
+  }
+
+  .ty-popover__dialog {
+    display: grid;
+    gap: var(--ty-space-2);
+  }
+
+  .ty-popover__arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--ty-surface-raised-solid);
+    border: 1px solid var(--ty-line);
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  .ty-popover[data-side='top'] .ty-popover__arrow {
+    inset-inline-end: var(--ty-space-4);
+    bottom: -6px;
+    border-top: none;
+    border-inline-start: none;
+  }
+
+  .ty-popover[data-side='bottom'] .ty-popover__arrow {
+    inset-inline-end: var(--ty-space-4);
+    top: -6px;
+    border-bottom: none;
+    border-inline-end: none;
+  }
+}

package/src/components/popover/Popover.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { Button } from '../button/Button'
+import { Popover } from './Popover'
+
+import * as rtlDom from '@testing-library/react'
+import rtlUser from '@testing-library/user-event'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('Popover', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('renders the info trigger with its label and collapsed state', () => {
+    render(
+      <Popover triggerLabel="About this score" title="Score">
+        Explains the score.
+      </Popover>,
+    )
+    const trigger = screen.getByRole('button', { name: 'About this score' })
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('opens a panel labelled by the title and expands the trigger', async () => {
+    render(
+      <Popover triggerLabel="About this score" title="Score">
+        Explains the score.
+      </Popover>,
+    )
+    const trigger = screen.getByRole('button', { name: 'About this score' })
+    await userEvent.click(trigger)
+    expect(await screen.findByRole('dialog', { name: 'Score' })).toBeVisible()
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('closes on Escape and returns focus to the trigger', async () => {
+    render(
+      <Popover triggerLabel="About" title="Score">
+        Explains.
+      </Popover>,
+    )
+    await userEvent.tab()
+    await userEvent.keyboard('{Enter}')
+    await screen.findByRole('dialog')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    await waitFor(() => expect(screen.getByRole('button', { name: 'About' })).toHaveFocus())
+  })
+
+  it('calls onOpenChange(false) on an outside click', async () => {
+    const onOpenChange = vi.fn()
+    render(
+      <>
+        <Popover triggerLabel="About" title="Score" onOpenChange={onOpenChange}>
+          Explains.
+        </Popover>
+        <p>Outside</p>
+      </>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'About' }))
+    await screen.findByRole('dialog')
+    await userEvent.click(document.body)
+    await waitFor(() => expect(onOpenChange).toHaveBeenLastCalledWith(false))
+  })
+
+  it('flips below the trigger when there is no room above', async () => {
+    const rect = (top: number, h: number, w = 100) =>
+      ({ x: 100, y: top, top, left: 100, right: 100 + w, bottom: top + h, width: w, height: h, toJSON: () => ({}) }) as DOMRect
+    const size = (el: HTMLElement) =>
+      el.classList.contains('ty-popover') ? { w: 200, h: 120 } : el.classList.contains('ty-button') ? { w: 32, h: 32 } : { w: 1024, h: 768 }
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      const { w, h } = size(this)
+      return this.classList.contains('ty-button') ? rect(4, h, w) : rect(0, h, w)
+    })
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function (this: HTMLElement) {
+      return size(this).w
+    })
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (this: HTMLElement) {
+      return size(this).h
+    })
+    vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function (this: HTMLElement) {
+      return size(this).h
+    })
+    vi.spyOn(Element.prototype, 'clientHeight', 'get').mockReturnValue(768)
+    vi.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(1024)
+    render(
+      <Popover triggerLabel="About" title="Score" placement="top" defaultOpen>
+        Explains.
+      </Popover>,
+    )
+    const dialog = await screen.findByRole('dialog')
+    const panel = dialog.closest('.ty-popover') as HTMLElement
+    await waitFor(() => expect(panel).toHaveAttribute('data-placement', 'bottom'))
+  })
+
+  it('shows without interaction when controlled open', async () => {
+    render(
+      <Popover trigger={<Button>Brand</Button>} title="Brand menu" open>
+        <a href="/a">Home</a>
+      </Popover>,
+    )
+    expect(await screen.findByRole('dialog', { name: 'Brand menu' })).toBeInTheDocument()
+  })
+
+  it('closes when Tab leaves the panel', async () => {
+    const onOpenChange = vi.fn()
+    render(
+      <>
+        <Popover trigger={<Button>Filters</Button>} title="Filters" onOpenChange={onOpenChange}>
+          <button type="button">Apply</button>
+        </Popover>
+      </>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Filters' }))
+    await screen.findByRole('dialog')
+    const apply = screen.getByRole('button', { name: 'Apply' })
+    apply.focus()
+    const outside = document.createElement('button')
+    document.body.appendChild(outside)
+    apply.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outside }))
+    await waitFor(() => expect(onOpenChange).toHaveBeenLastCalledWith(false))
+    outside.remove()
+  })
+
+  it('has reduced-motion and forced-colours rules and a 44 px trigger hit area', () => {
+    const css = cssOf('components/popover/Popover.css')
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/animation:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/CanvasText/)
+    expect(cssOf('components/button/Button.css')).toMatch(/max\(100%,\s*var\(--ty-control-target\)\)/)
+  })
+
+  it('has no axe violations when open', async () => {
+    render(
+      <Popover triggerLabel="About this score" title="Score" defaultOpen>
+        Explains the score.
+      </Popover>,
+    )
+    await screen.findByRole('dialog')
+    await expectNoAxeViolations(document.body)
+  })
+})
+
+describe('Popover in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    renderRtl(<Popover triggerLabel="حول هذه النتيجة" title="نتيجة الإثبات"><p>نص</p></Popover>)
+    await rtlUser.click(rtlDom.screen.getByRole('button', { name: 'حول هذه النتيجة' }))
+    expect(await rtlDom.screen.findByRole('dialog')).toBeInTheDocument()
+    await axeRtl(document.body)
+  })
+})

package/src/components/popover/Popover.tsx

@@ -0,0 +1,110 @@
+import { Info } from 'lucide-react'
+import { useRef, type FocusEvent, type ReactNode } from 'react'
+import {
+  Dialog,
+  DialogTrigger,
+  Heading,
+  OverlayArrow,
+  Popover as AriaPopover,
+} from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { devWarning } from '../../internal/dev'
+import { Button } from '../button/Button'
+
+export type PopoverPlacement = 'top' | 'end' | 'bottom' | 'start'
+export type PopoverAlign = 'start' | 'center' | 'end'
+
+export interface PopoverProps {
+  /** Element that toggles the panel; must be a pressable (e.g. Button). Defaults to an info button. */
+  trigger?: ReactNode
+  /** Accessible name of the built-in info trigger (required when `trigger` is omitted). */
+  triggerLabel?: string
+  /** Heading at the top of the panel; labels the panel. */
+  title?: string
+  children: ReactNode
+  placement?: PopoverPlacement
+  align?: PopoverAlign
+  /** Gap between trigger and panel as a step of the spacing scale (1 to 9). */
+  offset?: number
+  showArrow?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  className?: string
+}
+
+const SPACE_STEPS = [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]
+
+function toAriaPlacement(placement: PopoverPlacement, align: PopoverAlign) {
+  const side = placement === 'end' ? 'end' : placement === 'start' ? 'start' : placement
+  if (align === 'center') return side
+  if (side === 'top' || side === 'bottom') return `${side} ${align}` as const
+  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const
+}
+
+/** Non-modal floating panel anchored to a trigger (spec: wave-1/popover.md). */
+export function Popover(props: PopoverProps) {
+  const {
+    trigger,
+    triggerLabel,
+    title,
+    children,
+    placement = 'bottom',
+    align = 'center',
+    offset = 2,
+    showArrow = true,
+    open,
+    defaultOpen,
+    onOpenChange,
+    className,
+  } = props
+  devWarning(!trigger && !triggerLabel, 'Popover: the built-in info trigger needs `triggerLabel`.')
+  const closeRef = useRef<() => void>(() => {})
+
+  const handleBlur = (e: FocusEvent<HTMLElement>) => {
+    const next = e.relatedTarget as Node | null
+    if (next && !e.currentTarget.contains(next)) closeRef.current()
+  }
+
+  return (
+    <DialogTrigger
+      {...(open !== undefined ? { isOpen: open } : {})}
+      {...(defaultOpen !== undefined ? { defaultOpen } : {})}
+      onOpenChange={onOpenChange}
+    >
+      {trigger ?? (
+        <Button iconOnly variant="quiet" shape="circle" size="compact" accessibleLabel={triggerLabel ?? ''} leadingIcon={<Info />} />
+      )}
+      <AriaPopover
+        className={cx('ty-popover', className)}
+        placement={toAriaPlacement(placement, align)}
+        offset={(SPACE_STEPS[offset] ?? 8) + (showArrow ? 6 : 0)}
+        containerPadding={16}
+        shouldFlip
+      >
+        {showArrow ? (
+          <OverlayArrow className="ty-popover__arrow">
+            <svg width={12} height={12} viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M0 0 L6 6 L12 0" />
+            </svg>
+          </OverlayArrow>
+        ) : null}
+        <Dialog className="ty-popover__dialog" aria-label={title ? undefined : triggerLabel}>
+          {({ close }) => {
+            closeRef.current = close
+            return (
+              <div className="ty-popover__body" onBlur={handleBlur}>
+                {title ? (
+                  <Heading slot="title" level={3} className="ty-popover__title">
+                    {title}
+                  </Heading>
+                ) : null}
+                <div className="ty-popover__content">{children}</div>
+              </div>
+            )
+          }}
+        </Dialog>
+      </AriaPopover>
+    </DialogTrigger>
+  )
+}

package/src/components/product-mark/ProductMark.css

@@ -0,0 +1,24 @@
+/* ProductMark: the ink is currentColor; the accent dot reads --ty-mark-accent. */
+@layer tympan.components {
+  /* Gold for the Instrumento marks; Tympan's plate follows the theme's accent. */
+  .ty-product-mark {
+    --ty-mark-accent: #a67c2e;
+  }
+  [data-ty-mode='dark'] .ty-product-mark {
+    --ty-mark-accent: #b98b3e;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-ty-mode='light']) .ty-product-mark {
+      --ty-mark-accent: #b98b3e;
+    }
+  }
+  .ty-product-mark.ty-product-mark[data-product='tympan'] {
+    --ty-mark-accent: var(--ty-accent, #166e5a);
+  }
+  .ty-product-mark {
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+    color: inherit;
+  }
+}

package/src/components/product-mark/ProductMark.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { plateGeometry, ProductMark } from './ProductMark'
+import { PRODUCT_MARKS } from './marks'
+
+describe('ProductMark', () => {
+  it('is an image named after the product by default', () => {
+    render(<ProductMark product="fakhir" />)
+    expect(screen.getByRole('img', { name: 'Fakhir' })).toBeInTheDocument()
+  })
+
+  it('is hidden from assistive technology when decorative', () => {
+    const { container } = render(<ProductMark product="tympan" decorative />)
+    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.queryByRole('img')).toBeNull()
+  })
+
+  it('draws the ink in currentColor and the dot in --ty-mark-accent', () => {
+    const { container } = render(<ProductMark product="astrlabe" variant="horizontal" />)
+    const fills = [...container.querySelectorAll('path')].map((p) => p.getAttribute('fill'))
+    expect(fills).toContain('currentColor')
+    expect(fills.some((f) => f?.includes('--ty-mark-accent'))).toBe(true)
+  })
+
+  it('draws Tympan as its plate: rim, four almucantars, horizon, zenith and twelve ticks', () => {
+    const { container } = render(<ProductMark product="tympan" />)
+    // clip circle + 4 almucantars + horizon + rim + zenith
+    expect(container.querySelectorAll('circle')).toHaveLength(8)
+    expect(container.querySelectorAll('line')).toHaveLength(12)
+  })
+
+  it('the plate geometry puts the horizon and zenith where the home page plate has them', () => {
+    const g = plateGeometry()
+    expect(g.almucantar(0).cy).toBeCloseTo(-71.33, 1)
+    expect(g.almucantar(20).r).toBeCloseTo(149.78, 1)
+    expect(g.zenith).toBeCloseTo(122.58, 1)
+  })
+
+  it('has symbol and horizontal artwork for every other product, each with one accent path', () => {
+    for (const product of ['fakhir', 'astrlabe', 'datatech'] as const) {
+      for (const variant of ['symbol', 'horizontal'] as const) {
+        const art = PRODUCT_MARKS[product][variant]
+        expect(art.paths.filter((p) => p.tone === 'accent')).toHaveLength(1)
+        expect(art.viewBox.split(' ')).toHaveLength(4)
+      }
+    }
+  })
+})

package/src/components/product-mark/ProductMark.tsx

@@ -0,0 +1,95 @@
+import { cx } from '../../internal/cx'
+import { useId } from 'react'
+import { PRODUCT_MARKS, type ProductMarkProduct, type ProductMarkVariant } from './marks'
+import { plateGeometry } from './plate'
+
+export type { ProductMarkProduct } from './marks'
+export { plateGeometry, type PlateCircle, type PlateGeometry } from './plate'
+
+/** `symbol` (small sizes), `icon` (48 px and up: the fuller plate) or `horizontal` (symbol and wordmark). */
+export type ProductMarkVariantName = ProductMarkVariant | 'icon'
+
+const NAMES: Record<ProductMarkProduct, string> = { tympan: 'Tympan', fakhir: 'Fakhir', astrlabe: 'Astrlabe', datatech: 'Datatech' }
+
+export interface ProductMarkProps {
+  product: ProductMarkProduct
+  /** `symbol` (the instrument alone), `icon` (fuller artwork for 48 px and up) or `horizontal` (with the wordmark). */
+  variant?: ProductMarkVariantName
+  /** Block size in CSS pixels (or any CSS length); the width follows the artwork. Default 32. */
+  size?: number | string
+  /**
+   * Accessible name; defaults to the product name. Pass `decorative` when the product name is already
+   * visible next to the mark.
+   */
+  label?: string
+  decorative?: boolean
+  className?: string
+}
+
+/**
+ * Datatech family product mark. The ink follows `currentColor`, the accent dot `--ty-mark-accent`
+ * (gold by default, set per theme), so marks follow every theme in light and dark. Tympan keeps its own
+ * plate mark (stroked, no accent).
+ */
+const PLATE = plateGeometry()
+
+/** Tympan's plate mark, drawn from the same geometry as the home page plate (400-unit box at x, y, size). */
+function PlateMark({ full, x = 0, y = 0, size = 400 }: { full: boolean; x?: number; y?: number; size?: number }) {
+  const clip = `ty-plate-${useId().replace(/[^\w-]/g, '')}`
+  const g = PLATE
+  const soft = 'var(--ty-mark-soft, color-mix(in oklab, var(--ty-mark-accent) 45%, transparent))'
+  const altitudes = full ? [10, 20, 30, 40, 50, 60, 70, 80] : [20, 40, 60, 80]
+  return (
+    <g transform={`translate(${x} ${y}) scale(${size / 400})`}>
+      <defs>
+        <clipPath id={clip}>
+          <circle cx={g.c} cy={g.c} r={g.r} />
+        </clipPath>
+      </defs>
+      {full ? <circle cx={g.c} cy={g.c} r={g.r + 12} fill="none" stroke="var(--ty-mark-line, color-mix(in oklab, currentColor 45%, transparent))" strokeWidth={6} /> : null}
+      {g.ticks(full ? 15 : 30, full ? 2 : 1).map((t, i) => (
+        <line key={i} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2} stroke="currentColor" strokeWidth={full ? (t.long ? 10 : 6) : 16} />
+      ))}
+      {altitudes.map((h) => {
+        const a = g.almucantar(h)
+        return <circle key={h} cx={g.c} cy={a.cy} r={a.r} fill="none" stroke={soft} strokeWidth={full ? 8 : 16} clipPath={`url(#${clip})`} />
+      })}
+      {(() => {
+        const hz = g.almucantar(0)
+        return <circle cx={g.c} cy={hz.cy} r={hz.r} fill="none" stroke="var(--ty-mark-accent)" strokeWidth={full ? 18 : 30} clipPath={`url(#${clip})`} />
+      })()}
+      <circle cx={g.c} cy={g.c} r={g.r} fill="none" stroke="currentColor" strokeWidth={full ? 16 : 26} />
+      <circle cx={g.c} cy={g.zenith} r={full ? 16 : 24} fill="var(--ty-mark-accent)" />
+    </g>
+  )
+}
+
+/**
+ * Datatech family product mark. The ink follows `currentColor`, the accent `--ty-mark-accent` (set per
+ * theme), so marks follow every theme in light and dark. Tympan's mark is its astrolabe plate, generated
+ * from `plateGeometry` (the home page plate); Fakhir, Astrlabe and Datatech use the "Instrumento" artwork.
+ */
+export function ProductMark({ product, variant = 'symbol', size = 32, label, decorative = false, className }: ProductMarkProps) {
+  const blockSize = typeof size === 'number' ? `${size}px` : size
+  const tympan = product === 'tympan'
+  const art = PRODUCT_MARKS[product][variant === 'icon' ? 'symbol' : variant]
+  const viewBox = tympan && variant !== 'horizontal' ? '0 0 400 400' : art.viewBox
+  return (
+    <svg
+      className={cx('ty-product-mark', className)}
+      data-product={product}
+      data-variant={variant}
+      viewBox={viewBox}
+      style={{ blockSize, inlineSize: 'auto' }}
+      role={decorative ? undefined : 'img'}
+      aria-label={decorative ? undefined : (label ?? NAMES[product])}
+      aria-hidden={decorative || undefined}
+      focusable="false"
+    >
+      {tympan ? variant === 'horizontal' ? <PlateMark full={false} x={4} y={6} size={40} /> : <PlateMark full={variant === 'icon'} /> : null}
+      {art.paths.map((p, i) => (
+        <path key={i} d={p.d} fill={p.tone === 'accent' ? 'var(--ty-mark-accent)' : 'currentColor'} />
+      ))}
+    </svg>
+  )
+}