DetourGlyph

←→

Pictogramme d’une alternative — la trace, le passage difficile et le contournement en pointillés qui la quitte avant et la rejoint après.

stableÀ valider

// Titre : Alternative praticable et alternative moins dure
import DetourGlyph from '@pathou/components/DetourGlyph';

// --sev vient de la carte du point d’attention : la couleur du passage contourné
export default function Exemple() {
  return (
    <div style={{ display: 'flex', gap: 24, ['--sev' as string]: 'var(--exigeant)' }}>
      <DetourGlyph kind="praticable" />
      <DetourGlyph kind="moins-dur" worst="rouge" />
    </div>
  );
}

Installation

Copie le fichier dans ton projet, ainsi que les tokens qu’il utilise.

src/components/DetourGlyph.tsx
import { RATING_COLOR } from '../lib/colors';
import type { Rating } from '../lib/types';

/** Pictogramme : la trace, le passage difficile, et le contournement en pointillés qui la quitte avant et la rejoint après. */
export default function DetourGlyph({ kind, worst }: { kind: 'praticable' | 'moins-dur'; worst?: Rating }) {
  const arc = 'M12 22C14 5 38 5 40 22';
  return (
    <svg className="detour-glyph" width="52" height="28" viewBox="0 0 52 28" aria-hidden="true" fill="none" strokeLinecap="round">
      <path d="M2 22H50" stroke="var(--muted)" strokeOpacity="0.55" strokeWidth="2.5" />
      <path d="M18 22H34" stroke="var(--sev)" strokeWidth="2.5" />
      <path d={arc} stroke="var(--detour)" strokeWidth="2.4" strokeDasharray="3.2 2.6" />
      {kind === 'moins-dur' && worst && (
        // tronçon plein de la cotation qui reste difficile, posé sur l'arc
        <path pathLength="100" d={arc} stroke={worst === 'noir' ? 'var(--text)' : RATING_COLOR[worst]} strokeWidth="2.8" strokeDasharray="0 40 20 100" strokeLinecap="butt" />
      )}
      <circle cx="12" cy="22" r="3" fill="var(--detour)" stroke="var(--panel)" strokeWidth="1.5" />
      <circle cx="40" cy="22" r="3" fill="var(--detour)" stroke="var(--panel)" strokeWidth="1.5" />
    </svg>
  );
}

Tokens : --panel --text --muted --detour

Utilisation

import DetourGlyph from './components/DetourGlyph';

<DetourGlyph kind={r.status} worst={r.worst} />

Anatomie

#	Élément	Rôle
1	Trace	Le trait horizontal, en --muted atténué.
2	Passage	Le segment central, de la couleur `--sev` héritée de la carte du point d’attention.
3	Contournement	L’arc en pointillés --detour, avec ses deux points de départ et d’arrivée.

Guidelines

MUST
Poser le pictogramme dans un parent qui définit --sev ; sans elle, le passage n’a pas de couleur.
SHOULD
Le garder décoratif (aria-hidden) et dire le type d’alternative en texte à côté.

Référence de l’API

Prop	Type	Défaut
`kind`	`'praticable' \| 'moins-dur'`	requis
`worst`	`Rating`	—