@zevra/ui 0.31.0 → 0.33.0

package/dist/css-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,+kmRAA+kmR,CAAA;AAElnmR;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}
+{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,22tRAA22tR,CAAA;AAE94tR;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/react/catalogue.tsx

@@ -20,7 +20,7 @@ import {
   Callout, Card, Check, Divider, Ent, EntText, Faq, FaqItem, Flow, FlowStep,
   LegalPage,
   Glass, IndexItem, IndexList, Inset, Media, MediaCoin, MediaVoile, MiniStat,
-  MiniStatItem, Pill, Price,
+  MiniStatItem, PageErreur, Pill, Price,
   Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview,
 } from './content.js'
 import {
@@ -1022,8 +1022,52 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'components.css',
     resume:
-      'Surfaces, encarts, étiquettes éditoriales et blocs de preuve. ⚠️ Deux règles de charte y sont opposables : jamais de fausse citation, jamais de lorem dans un aperçu produit.',
+      'Surfaces, encarts, étiquettes éditoriales, blocs de preuve et la page d’erreur. ⚠️ Deux règles de charte y sont opposables : jamais de fausse citation, jamais de lorem dans un aperçu produit.',
     exemples: [
+      {
+        id: 'page-erreur',
+        nom: 'Page d’erreur',
+        resume:
+          '404, 403, 410, 500. ⚠️ Le glyphe est DÉCORATIF par défaut (glypheAlt=""), et le mot « Erreur » se passe en prop : la 0.32.0 posait alt="Zevra" et « Erreur » en dur, si bien que la 404 de Mémoire annonçait « Zevra » au lecteur d’écran et affichait « Erreur 404 » sous /en/. Le composant ne porte AUCUN texte : une plaisanterie câblée dans un design system part dans les sept apps, dans une seule langue, et n’en revient jamais. La copie ci-dessous est la RÉFÉRENCE, à copier et à adapter. Elle plaisante en vocabulaire juridique — un mot juste employé de travers, pas une blague sur un ton qu’Encre & Papier n’a pas — et l’ordre est fixe : le titre dit la panne en clair, l’esprit vient ensuite et se dédit lui-même. Une page d’erreur qui fait rire avant d’informer est ratée.',
+        code: `<PageErreur
+  code="404"
+  libelle="Erreur"          {/* le mot est À VOUS : « Error » sous /en/ */}
+  glyphe={GLYPHES.memoire}  {/* le glyphe de VOTRE produit */}
+  glypheAlt=""              {/* vide = décoratif, et c'est le bon défaut */}
+  titre="Page introuvable"
+  reference={<>Réf. 404 · GET /dossier/2019</>}
+  actions={<>
+    <ButtonLink href="/">Retour à l'accueil</ButtonLink>
+    <ButtonLink href="/contact" variante="fantome">Nous signaler le lien</ButtonLink>
+  </>}
+>
+  Elle a peut-être exercé son droit à l'effacement.{' '}
+  <strong>Plus sérieusement</strong> : le lien est mort, l'adresse a changé,
+  ou cette page n'a jamais été versée au dossier.
+</PageErreur>`,
+        rendu: (
+          <PageErreur
+            code="404"
+            libelle="Erreur"
+            glyphe={GLYPHES.zevra}
+            titre="Page introuvable"
+            reference={<>Réf. 404 · GET /dossier/2019</>}
+            style={{ minHeight: 0, padding: '40px 24px' }}
+            actions={
+              <>
+                <ButtonLink href="#">Retour à l’accueil</ButtonLink>
+                <ButtonLink href="#" variante="fantome">
+                  Nous signaler le lien
+                </ButtonLink>
+              </>
+            }
+          >
+            Elle a peut-être exercé son droit à l’effacement.{' '}
+            <strong>Plus sérieusement</strong> : le lien est mort, l’adresse a changé, ou
+            cette page n’a jamais été versée au dossier.
+          </PageErreur>
+        ),
+      },
       {
         id: 'cartes',
         nom: 'Cartes',

package/react/content.tsx

@@ -726,3 +726,80 @@ export function LegalPage({
     </article>
   )
 }
+
+/* ─── Page d'erreur ─────────────────────────────────────────────────── */
+
+export interface PageErreurProps extends Div {
+  /** Le code, tel qu'il s'affiche dans le kicker (`404`, `403`, `500`). */
+  code: string
+  /** Le mot qui précède le code (« Erreur », « Error », « Error »). Absent,
+   *  seul le code s'affiche.
+   *
+   *  ⚠️ EN PROP, et pas en dur : une 404 anglaise de Mémoire affichait
+   *  « Erreur 404 ». Le composant est censé ne porter aucun texte — c'est
+   *  écrit dans son arbitrage —, et il en portait quand même. */
+  libelle?: string
+  /** L'URL du glyphe — `GLYPHES.memoire` de `@zevra/ui/glyphes`. Sur une
+   *  page qui n'a plus de contenu, c'est le seul repère qui dise encore où
+   *  l'on se trouve. */
+  glyphe?: string
+  /** Le texte alternatif du glyphe. VIDE par défaut, donc décoratif : sur
+   *  une page d'erreur, la marque n'apporte rien que le titre et le kicker
+   *  ne disent déjà, et l'annoncer place un nom de produit devant
+   *  l'information que le lecteur est venu chercher.
+   *
+   *  ⚠️ Il valait `"Zevra"` en dur jusqu'à la 0.33.0 : sur la 404 de
+   *  Mémoire, un lecteur d'écran annonçait « Zevra » devant le M de Mémoire,
+   *  et aucune prop ne permettait de le corriger. Une valeur qu'une app aura
+   *  légitimement besoin d'ajuster ne se pose pas en dur — c'est la règle du
+   *  dépôt, et celle-ci l'enfreignait. */
+  glypheAlt?: string
+  /** Le titre. ⚠️ Il dit la panne EN CLAIR : « Page introuvable », pas un
+   *  jeu de mots. L'esprit vient dans le texte, jamais avant l'information. */
+  titre: ReactNode
+  /** Les actions : un bouton plein pour la sortie, un fantôme pour le
+   *  recours. Deux au plus — au-delà, la page d'erreur devient un menu. */
+  actions?: ReactNode
+  /** La cote de l'incident (`GET /dossier/2019`). Elle donne au visiteur de
+   *  quoi signaler la panne et au support de quoi la retrouver. */
+  reference?: ReactNode
+  className?: string
+  /** L'explication. C'est ici, et seulement ici, que l'esprit a sa place. */
+  children?: ReactNode
+}
+
+/**
+ * Une page entière d'erreur — 404, 403, 410, 500, maintenance.
+ *
+ * ⚠️ ELLE NE PORTE AUCUN TEXTE PAR DÉFAUT, et c'est délibéré : une
+ * plaisanterie câblée dans un design system part dans les sept apps, dans
+ * une seule langue, et n'en revient jamais. La copie de référence — celle
+ * qui plaisante en vocabulaire juridique — vit dans l'exemple du catalogue,
+ * là où on la lit avant de la copier.
+ */
+export function PageErreur({
+  code,
+  libelle,
+  glyphe,
+  glypheAlt = '',
+  titre,
+  actions,
+  reference,
+  className,
+  children,
+  ...reste
+}: PageErreurProps) {
+  return (
+    <div className={cx('zv-errpage', className)} {...reste}>
+      {glyphe && <img src={glyphe} alt={glypheAlt} className="zv-errpage__glyphe" />}
+      <p className="zv-errpage__kicker">
+        <span className="zv-spec" aria-hidden="true" />
+        <span className="zv-mono zv-mono--label">{libelle ? `${libelle} ${code}` : code}</span>
+      </p>
+      <h1 className="zv-errpage__titre">{titre}</h1>
+      {children && <p className="zv-errpage__texte">{children}</p>}
+      {actions && <div className="zv-errpage__actions">{actions}</div>}
+      {reference && <p className="zv-errpage__ref">{reference}</p>}
+    </div>
+  )
+}