@zevra/ui 0.39.0 → 0.40.0

package/react/clients.tsx

@@ -0,0 +1,121 @@
+// Le bandeau des clients de Zevra : la bande de réassurance que montrent
+// zevra.tech et les produits.
+//
+// ⚠️ ENTRÉE SÉPARÉE (`@zevra/ui/react/clients`) : les logos y sont inlinés
+// (≈ 50 Ko), le barrel React n'en porte pas un octet. Voir
+// scripts/build-clients-data.mjs.
+//
+// UNE SEULE LISTE. Le bandeau vivait en deux copies (ClientLogoBanner.astro
+// sur zevra.tech, ClientLogos.tsx dans MCP Juridique) qui divergeaient à
+// chaque client ajouté : WJ Avocats, entré sur zevra.tech le 14/10/2026,
+// manquait encore à MCP trois jours plus tard. Un client s'ajoute ICI, une
+// fois, et toutes les apps le reçoivent à la mise à jour du paquet.
+//
+// ⚠️ CE SONT LES CLIENTS DE ZEVRA, l'éditeur, tous produits confondus. Le
+// libellé que pose une app ne doit pas les présenter comme clients d'un
+// produit en particulier : charte, jamais de client prêté.
+
+import { Fragment, type CSSProperties } from 'react'
+import { cx } from './cx.js'
+import { Kicker, Mono } from './typography.js'
+import { LOGOS_CLIENTS, type ClientId } from './clients-data.js'
+
+export type { ClientId }
+
+/**
+ * Les clients, dans l'ordre d'affichage, avec leur HAUTEUR OPTIQUE.
+ *
+ * La hauteur n'est pas celle du fichier : elle égalise la SURFACE D'ENCRE
+ * affichée (somme de l'alpha du rendu, suréchantillonné ×4 ; cible
+ * 1 077 px² à l'unité, mesure de zevra.tech du 25/09/2026). Chaque hauteur
+ * est corrigée d'un facteur √(moyenne / encre), avec des exceptions :
+ *
+ *  - Dairia et Karila, marques COMPACTES à traits fins, sont plafonnées :
+ *    portées à la surface moyenne (69 et 74), elles domineraient leur ligne
+ *    par la géométrie. Karila est montée de 46 à 60 le 25/09 : elle lisait
+ *    « en retrait », ses minuscules tombaient à 5,5 px.
+ *  - Bremens et WJ, mots-marques LONGS (rapports 9 et 5,9), prennent leur
+ *    surface en largeur. WJ reste à 0,44× l'encre moyenne : à la cible
+ *    (45), il écraserait sa ligne.
+ *
+ * Pour ajouter un client : déposer son fichier dans logos/clients/source/
+ * (il doit porter sa transparence : le masque ne lit que l'alpha, un JPG
+ * sur fond blanc s'afficherait en rectangle plein), lancer
+ * scripts/build-clients.py, puis MESURER l'encre plutôt que reprendre la
+ * hauteur du fichier, et revoir la coupure `SAUT`.
+ */
+export const CLIENTS: ReadonlyArray<{ id: ClientId; nom: string; hauteur: number }> = [
+  { id: 'legal-data-space', nom: 'Legal Data Space', hauteur: 35 },
+  { id: 'blnk', nom: 'BL NK', hauteur: 25 },
+  { id: 'dairia-avocats', nom: 'Dairia Avocats', hauteur: 46 },
+  { id: 'clesame', nom: 'Clésame', hauteur: 27 },
+  { id: 'karila', nom: 'Cabinet Karila', hauteur: 60 },
+  { id: 'beside-avocats', nom: 'Beside Avocats', hauteur: 20 },
+  { id: 'bremens-avocats', nom: 'Bremens Avocats', hauteur: 23 },
+  { id: 'orange', nom: 'Orange', hauteur: 34 },
+  { id: 'wj-avocats', nom: 'WJ Avocats', hauteur: 30 },
+]
+
+/** Au bureau, la rangée casse ici : 5 + 4. Laissée libre, elle casserait
+ *  selon la largeur avec un orphelin qui se lit comme un accident. L'ordre
+ *  ci-dessus compose les deux lignes : une marque compacte par ligne
+ *  (Dairia en haut, Karila en bas), et les longs Bremens et WJ en face des
+ *  larges du haut, pour que les deux lignes pèsent pareil. */
+const SAUT = 5
+
+export interface BandeauClientsProps {
+  /** Le kicker au-dessus des logos (« Ils construisent avec nous »). Omis
+   *  ou vide : la bande sans titre. Le texte vient de l'app, qui tient ses
+   *  langues. */
+  titre?: string
+  className?: string
+}
+
+/**
+ * La bande de logos clients, centrée, en deux lignes au bureau.
+ *
+ * Les logos ne sont pas affichés, ils sont DÉCOUPÉS : chaque fichier sert de
+ * masque à un aplat. Une seule encre au repos (`--ink-2`), l'indigo de
+ * l'action au survol (`--accent`), plutôt que neuf chartes concurrentes. La
+ * règle « aucune recoloration » protège les logos Zevra ; ceux de tiers,
+ * dans une bande de réassurance, suivent la typographie du support.
+ *
+ * Ne porte ni gouttière ni marge de section : c'est à la page de la placer.
+ */
+export function BandeauClients({ titre, className }: BandeauClientsProps) {
+  return (
+    <div className={cx('zv-clients', className)}>
+      {titre ? (
+        <Kicker variante="center">
+          <Mono>{titre}</Mono>
+        </Kicker>
+      ) : null}
+      <div className="zv-clients__rangee">
+        {CLIENTS.map((client, i) => {
+          const logo = LOGOS_CLIENTS[client.id]
+          return (
+            <Fragment key={client.id}>
+              {i === SAUT && <span className="zv-clients__saut" aria-hidden="true" />}
+              {/* Un seul porteur de l'image, la variable : une balise image en plus
+                  écrirait chaque data-URI deux fois dans le HTML. Le nom
+                  passe par role="img". */}
+              <span
+                className="zv-clients__logo"
+                role="img"
+                aria-label={client.nom}
+                title={client.nom}
+                style={
+                  {
+                    '--zv-clients-h': client.hauteur,
+                    '--zv-clients-ratio': logo.ratio,
+                    '--zv-clients-src': `url("${logo.src}")`,
+                  } as CSSProperties
+                }
+              />
+            </Fragment>
+          )
+        })}
+      </div>
+    </div>
+  )
+}