@zevra/ui 0.31.0 → 0.32.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.32.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,49 @@ 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 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"
+  glyphe={GLYPHES.zevra}
+  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"
+            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,60 @@ 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
+  /** L'URL du glyphe Zevra — `GLYPHES.zevra` 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 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,
+  glyphe,
+  titre,
+  actions,
+  reference,
+  className,
+  children,
+  ...reste
+}: PageErreurProps) {
+  return (
+    <div className={cx('zv-errpage', className)} {...reste}>
+      {glyphe && <img src={glyphe} alt="Zevra" className="zv-errpage__glyphe" />}
+      <p className="zv-errpage__kicker">
+        <span className="zv-spec" aria-hidden="true" />
+        <span className="zv-mono zv-mono--label">Erreur {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>
+  )
+}