@lab-anssi/ui-kit 1.23.1 → 1.24.0

package/README.md

@@ -15,10 +15,7 @@
 
 ## Storybook des composants
 
-> Nous parlons de _Storybook_ car c'est le terme généralement employé, mais nous utilisons [Histoire](https://histoire.dev/).  
-> Nous avons fait ce choix car au moment de la création de notre repo, Storybook n'était pas compatible Svelte.
-
-Lors de la release d'une nouvelle version de l'UI Kit, le Storybook des composants [est déployé sur Github Pages : https://betagouv.github.io/lab-anssi-ui-kit/](https://betagouv.github.io/lab-anssi-ui-kit/).
+Le Storybook des composants [est déployé sur Github Pages : https://betagouv.github.io/lab-anssi-ui-kit/](https://betagouv.github.io/lab-anssi-ui-kit/).
 
 ## Architecture de build
 
@@ -29,26 +26,26 @@ C'est ce qui explique les nombreux fichiers de configuration Svelte (Prettier, V
 
 Pour rajouter le build des WebComponents, on rajoute manuellement un fichier de configuration [`vite.webcomponents.config.ts`](./vite.webcomponents.config.ts) et des appels à la commande `vite -c vite.webcomponents.config.ts build` lors des étapes de build du package.
 
-Résultat : dans le repertoire `dist/` on retrouvera les composants Svelte et leurs équivalents Webcomponents.  
+Résultat : dans le repertoire `dist/` on retrouvera les composants Svelte et leurs équivalents Webcomponents.
 Tout le contenu de `dist/` est publié via `npm publish`.
 
 ## Développement en local
 
-La commande principale pour le développement en local est `npm run story:dev`.  
+La commande principale pour le développement en local est `npm run storybook:dev`.
 La sortie devrait ressembler à :
 
 ```shell
+$ npm run storybook:dev
+
+> @lab-anssi/ui-kit@1.23.2 storybook:dev
+> STORYBOOK_ENV=development storybook dev -p 6006
 
-$ npm run story:dev
+@storybook/core v8.3.7
 
-@lab-anssi/ui-kit@1.19.0 story:dev
-HISTOIRE_ENV=development histoire dev
-Re-optimizing dependencies because lockfile has changed
-Using 5 threads for story collection
-Collect stories start all
-  ➜  Local:   http://localhost:6006/
-  ➜  Network: use --host to expose
+info => Starting manager..
+WARN No story files found for the specified pattern: stories/**/*.mdx
+info => Starting preview..
 ```
 
-Après cette commande, le Storybook local est disponible sur http://localhost:6006/.  
+Après cette commande, le Storybook local est disponible sur http://localhost:6006/.
 Il devrait ressembler [au Storybook disponible en ligne](https://betagouv.github.io/lab-anssi-ui-kit/).

package/dist/lab/Bouton.svelte

@@ -8,6 +8,7 @@
       icone: { reflect: false, type: "String", attribute: "icone" },
       positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
       actif: { reflect: false, type: "Boolean", attribute: "actif" },
+      largeurMaximale: { reflect: false, type: "Boolean", attribute: "largeur-maximale" },
     },
   }}
 />
@@ -19,10 +20,12 @@ export let taille;
 export let icone = void 0;
 export let positionIcone = "sans";
 export let actif = true;
+export let largeurMaximale = false;
 </script>
 
 <button
   class={`bouton ${variante} ${taille} icone-${positionIcone}`}
+  class:largeur-maximale={largeurMaximale}
   title={positionIcone === "seule" ? titre : ""}
   disabled={!actif}
 >
@@ -44,9 +47,14 @@ export let actif = true;
   font-family: Marianne, arial, sans-serif;
   cursor: pointer;
   justify-content: center;
+  text-align: center;
   font-style: normal;
   font-weight: 500;
 }
+.bouton.largeur-maximale {
+  width: 100%;
+  box-sizing: border-box;
+}
 .bouton:focus-visible {
   outline: 2px solid #0a76f6;
   outline-offset: 2px;
@@ -112,9 +120,24 @@ export let actif = true;
   background: #e5e5e5;
   color: #929292;
 }
+.bouton.secondaire {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  background: white;
+  border: 1px solid var(--bouton-secondaire-couleur-bordure);
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.secondaire:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bouton.secondaire:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.bouton.secondaire:disabled, .bouton.secondaire[aria-disabled=true] {
+  background: transparent;
+  color: #929292;
+}
 .bouton.tertiaire, .bouton.tertiaire-sans-bordure {
   color: var(--bouton-secondaire-tertiaire-couleur-texte);
-  text-align: center;
   background: white;
   border-radius: var(--bouton-arrondi);
 }

package/dist/lab/Bouton.svelte.d.ts

@@ -2,11 +2,12 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         titre: string;
-        variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
+        variante: "primaire" | "secondaire" | "tertiaire" | "tertiaire-sans-bordure";
         taille: "sm" | "md" | "lg";
         icone?: string | undefined;
         positionIcone?: "sans" | "seule" | "droite" | "gauche";
         actif?: boolean;
+        largeurMaximale?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/Lien.svelte

@@ -11,6 +11,7 @@
       cible: { reflect: false, type: "String", attribute: "cible" },
       positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
       actif: { reflect: false, type: "Boolean", attribute: "actif" },
+      largeurMaximale: { reflect: false, type: "Boolean", attribute: "largeur-maximale" },
     },
   }}
 />
@@ -25,10 +26,12 @@ export let apparence = "lien";
 export let cible = void 0;
 export let positionIcone = "sans";
 export let actif = true;
+export let largeurMaximale = false;
 </script>
 
 <a
   class={`${variante} ${taille} icone-${positionIcone} ${apparence}`}
+  class:largeur-maximale={largeurMaximale}
   {href}
   target={cible}
   title={positionIcone === "seule" ? titre : ""}
@@ -135,10 +138,16 @@ export let actif = true;
   font-family: Marianne, arial, sans-serif;
   cursor: pointer;
   justify-content: center;
+  text-align: center;
   font-style: normal;
   font-weight: 500;
 }
 
+.bouton.largeur-maximale {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .bouton:focus-visible {
   outline: 2px solid #0a76f6;
   outline-offset: 2px;
@@ -222,9 +231,28 @@ export let actif = true;
   color: #929292;
 }
 
+.bouton.secondaire {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  background: white;
+  border: 1px solid var(--bouton-secondaire-couleur-bordure);
+  border-radius: var(--bouton-arrondi);
+}
+
+.bouton.secondaire:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.bouton.secondaire:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.bouton.secondaire:disabled, .bouton.secondaire[aria-disabled=true] {
+  background: transparent;
+  color: #929292;
+}
+
 .bouton.tertiaire, .bouton.tertiaire-sans-bordure {
   color: var(--bouton-secondaire-tertiaire-couleur-texte);
-  text-align: center;
   background: white;
   border-radius: var(--bouton-arrondi);
 }

package/dist/lab/Lien.svelte.d.ts

@@ -3,13 +3,14 @@ declare const __propDef: {
     props: {
         titre: string;
         href: string;
-        variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
+        variante: "primaire" | "secondaire" | "tertiaire" | "tertiaire-sans-bordure";
         taille: "sm" | "md" | "lg";
         icone?: string | undefined;
         apparence?: "lien" | "bouton" | "lien-texte";
         cible?: string | undefined;
         positionIcone?: "sans" | "seule" | "droite" | "gauche";
         actif?: boolean;
+        largeurMaximale?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/Tag.svelte

@@ -77,6 +77,8 @@ button.tag {
   display: inline-flex;
   position: relative;
   overflow: visible;
+  text-wrap: auto;
+  text-align: left;
   cursor: pointer;
 }
 button.tag:hover {

package/dist/lab/apparence-bouton.scss

@@ -5,10 +5,16 @@
   font-family: Marianne, arial, sans-serif;
   cursor: pointer;
   justify-content: center;
+  text-align: center;
 
   font-style: normal;
   font-weight: 500;
 
+  &.largeur-maximale {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
   &:focus-visible {
     outline: 2px solid #0a76f6;
     outline-offset: 2px;
@@ -94,10 +100,30 @@
     }
   }
 
+  &.secondaire {
+    color: $bouton-secondaire-tertiaire-couleur-texte;
+    background: white;
+    border: 1px solid $bouton-secondaire-couleur-bordure;
+    border-radius: $bouton-arrondi;
+
+    &:hover {
+      background: rgb(0, 0, 0, 4%);
+    }
+
+    &:active {
+      background: rgb(0, 0, 0, 8%);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      background: transparent;
+      color: #929292;
+    }
+  }
+
   &.tertiaire,
   &.tertiaire-sans-bordure {
     color: $bouton-secondaire-tertiaire-couleur-texte;
-    text-align: center;
     background: white;
     border-radius: $bouton-arrondi;
 

package/dist/mes-services-cyber/lien/LienDiagnosticCyber.svelte

@@ -35,6 +35,7 @@ let icone = versExterne ? "lien-externe" : "lien-interne";
 <style>.racine {
   position: relative;
   display: block;
+  font-family: Marianne, sans-serif;
 }
 .racine .lien-diagnostic-cyber {
   font-size: 1rem;