@lab-anssi/ui-kit 1.18.0 → 1.20.0

package/README.md

@@ -15,17 +15,40 @@
 
 ## Storybook des composants
 
-Le storybook des composants est disponible [ici](https://betagouv.github.io/lab-anssi-ui-kit/).
+> 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.
 
-Il est construit avec [Histoire](https://histoire.dev/)
+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/).
 
 ## Architecture de build
 
-Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents [Webcomponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents [WebComponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 
 L'architecture pour produire du Svelte utilise [SvelteKit](https://svelte.dev/docs/kit/packaging), configuré via le wizard `npx sv create`.
-C'est ce qui explique les nombreux fichiers de configuration Svelte (Prettier, Vitest, etc...) : Ils ont été rajoutés par le wizard.
+C'est ce qui explique les nombreux fichiers de configuration Svelte (Prettier, Vitest, etc.) : ils ont été rajoutés par le wizard.
 
-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.
+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. Tous le contenu de `dist/` est publié via `npm publish`.
+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 sortie devrait ressembler à :
+
+```shell
+
+$ npm run story:dev
+
+@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
+```
+
+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/index.d.ts

@@ -18,3 +18,5 @@ export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";
 export { default as ListeArticles } from "./lab/blog/ListeArticles.svelte";
 export { default as Icone } from "./lab/Icone.svelte";
 export { default as Bouton } from "./lab/Bouton.svelte";
+export { default as Lien } from "./lab/Lien.svelte";
+export { default as Tag } from "./lab/Tag.svelte";

package/dist/index.js

@@ -18,3 +18,5 @@ export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";
 export { default as ListeArticles } from "./lab/blog/ListeArticles.svelte";
 export { default as Icone } from "./lab/Icone.svelte";
 export { default as Bouton } from "./lab/Bouton.svelte";
+export { default as Lien } from "./lab/Lien.svelte";
+export { default as Tag } from "./lab/Tag.svelte";

package/dist/lab/Bouton.svelte

@@ -6,66 +6,122 @@
       variante: { reflect: false, type: "String", attribute: "variante" },
       taille: { reflect: false, type: "String", attribute: "taille" },
       icone: { reflect: false, type: "String", attribute: "icone" },
-      sansBordure: { reflect: false, type: "Boolean", attribute: "sans-bordure" },
+      positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
     },
   }}
 />
 
 <script>import Icone from "./Icone.svelte";
 export let titre;
-export let variante = "tertiaire";
-export let taille = "sm";
+export let variante;
+export let taille;
 export let icone = void 0;
-export let sansBordure = false;
+export let positionIcone = "sans";
 </script>
 
-<button class={`bouton ${variante} ${taille}`} class:sansBordure on:click>
-  {titre}
-  {#if icone}
-    <Icone nom={icone} taille="sm" />
+<button
+  class={`bouton ${variante} ${taille} icone-${positionIcone}`}
+  on:click
+  title={positionIcone === "seule" ? titre : ""}
+>
+  {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+  {#if positionIcone !== "seule"}
+    <span>{titre}</span>
+  {/if}
+  {#if positionIcone === "droite" && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
   {/if}
 </button>
 
-<style>
-  .bouton {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-family: Marianne, arial, sans-serif;
-    cursor: pointer;
-
-    &.tertiaire {
-      align-items: center;
-      color: #0d0c21;
-      text-align: center;
-      background: white;
-      border: 1px solid #ddd;
-      font-size: 0.875rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-      border-radius: 4px;
-
-      &.sm {
-        padding: 4px 12px;
-      }
-
-      &.sansBordure {
-        border: none;
-      }
-
-      &:hover {
-        background: rgb(0, 0, 0, 4%);
-      }
-
-      &:active {
-        background: rgb(0, 0, 0, 8%);
-      }
-
-      &:focus {
-        outline: 2px solid #0a76f6;
-        outline-offset: 2px;
-      }
-    }
-  }
-</style>
+<style>.bouton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Marianne, arial, sans-serif;
+  cursor: pointer;
+  justify-content: center;
+  font-style: normal;
+  font-weight: 500;
+}
+.bouton:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+.bouton.sm {
+  padding: 4px 12px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+.bouton.sm.icone-droite {
+  padding-right: 8px;
+}
+.bouton.sm.icone-gauche {
+  padding-left: 8px;
+}
+.bouton.sm.icone-seule {
+  padding: 8px;
+}
+.bouton.md {
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.bouton.md.icone-droite {
+  padding-right: 12px;
+}
+.bouton.md.icone-gauche {
+  padding-left: 12px;
+}
+.bouton.md.icone-seule {
+  padding: 8px;
+}
+.bouton.lg {
+  padding: 10px 24px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.bouton.lg.icone-droite {
+  padding-right: 18px;
+}
+.bouton.lg.icone-gauche {
+  padding-left: 18px;
+}
+.bouton.lg.icone-seule {
+  padding: 12px;
+}
+.bouton.primaire {
+  background: var(--bouton-primaire-couleur-fond);
+  color: var(--bouton-primaire-couleur-texte);
+  border: 1px solid transparent;
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.primaire:hover {
+  background: var(--bouton-primaire-couleur-fond-survol);
+}
+.bouton.primaire:active {
+  background: var(--bouton-primaire-couleur-fond-clique);
+}
+.bouton.tertiaire, .bouton.tertiaire-sans-bordure {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  text-align: center;
+  background: white;
+  border-radius: var(--bouton-arrondi);
+}
+.bouton.tertiaire:hover, .bouton.tertiaire-sans-bordure:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bouton.tertiaire:active, .bouton.tertiaire-sans-bordure:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.bouton.tertiaire:focus, .bouton.tertiaire-sans-bordure:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+.bouton.tertiaire {
+  border: 1px solid #ddd;
+}
+.bouton.tertiaire-sans-bordure {
+  border: 1px solid transparent;
+}</style>

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

@@ -2,10 +2,10 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         titre: string;
-        variante?: string;
-        taille?: string;
+        variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
+        taille: "sm" | "md" | "lg";
         icone?: string | undefined;
-        sansBordure?: boolean;
+        positionIcone?: "sans" | "seule" | "droite" | "gauche";
     };
     events: {
         click: MouseEvent;

package/dist/lab/Icone.svelte

@@ -9,13 +9,16 @@
 />
 
 <script>export let nom;
-export let taille = "md";
+export let taille = void 0;
 </script>
 
 <span class="icone fr-icon-{nom} {taille}"></span>
 
 <style>.icone {
   font-family: Marianne, arial, sans-serif;
+  --icon-size: 1em;
+  line-height: var(--icon-size);
+  height: var(--icon-size);
 }
 .icone:before {
   content: "";
@@ -28,13 +31,13 @@ export let taille = "md";
   width: var(--icon-size);
   height: var(--icon-size);
 }
-.icone.sm:before {
+.icone.sm {
   --icon-size: 1rem;
 }
-.icone.md:before {
+.icone.md {
   --icon-size: 1.5rem;
 }
-.icone.lg:before {
+.icone.lg {
   --icon-size: 2rem;
 }
 .fr-icon-ancient-gate-fill:before {

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         nom: string;
-        taille?: "sm" | "md" | "lg";
+        taille?: "sm" | "md" | "lg" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/Lien.svelte

@@ -0,0 +1,239 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-lien",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      href: { reflect: false, type: "String", attribute: "href" },
+      variante: { reflect: false, type: "String", attribute: "variante" },
+      taille: { reflect: false, type: "String", attribute: "taille" },
+      icone: { reflect: false, type: "String", attribute: "icone" },
+      apparence: { reflect: false, type: "String", attribute: "apparence" },
+      cible: { reflect: false, type: "String", attribute: "cible" },
+      positionIcone: { reflect: false, type: "String", attribute: "position-icone" },
+    },
+  }}
+/>
+
+<script>import Icone from "./Icone.svelte";
+export let titre;
+export let href;
+export let variante;
+export let taille;
+export let icone = void 0;
+export let apparence = "lien";
+export let cible = void 0;
+export let positionIcone = "sans";
+</script>
+
+<a
+  class={`${variante} ${taille} icone-${positionIcone} ${apparence}`}
+  {href}
+  target={cible}
+  title={positionIcone === "seule" ? titre : ""}
+>
+  {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+  {#if positionIcone !== "seule"}
+    <span>{titre}</span>
+  {/if}
+  {#if positionIcone === "droite" && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+  {#if cible === "_blank"}
+    <Icone nom="external-link-line" />
+  {/if}
+</a>
+
+<style>.bouton {
+  text-decoration: none;
+}
+
+.lien-texte {
+  font-family: Marianne, arial, sans-serif;
+  color: inherit;
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+  width: fit-content;
+  text-decoration: none;
+  position: relative;
+}
+
+.lien-texte:before {
+  content: "";
+  position: absolute;
+  bottom: 0.2em;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: currentColor;
+}
+
+.lien-texte:hover:before {
+  bottom: calc(0.2em - 1px);
+  height: 2px;
+}
+
+.lien {
+  font-family: Marianne, arial, sans-serif;
+  color: var(--couleur-lien);
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  width: fit-content;
+  text-decoration: none;
+  position: relative;
+}
+
+.lien.sm {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.lien.md {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.lien.lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.lien:before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--couleur-lien);
+}
+
+.lien:hover:before {
+  bottom: -1px;
+  height: 2px;
+}
+
+.lien:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.lien:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+
+.bouton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: Marianne, arial, sans-serif;
+  cursor: pointer;
+  justify-content: center;
+  font-style: normal;
+  font-weight: 500;
+}
+
+.bouton:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+
+.bouton.sm {
+  padding: 4px 12px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.bouton.sm.icone-droite {
+  padding-right: 8px;
+}
+
+.bouton.sm.icone-gauche {
+  padding-left: 8px;
+}
+
+.bouton.sm.icone-seule {
+  padding: 8px;
+}
+
+.bouton.md {
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.bouton.md.icone-droite {
+  padding-right: 12px;
+}
+
+.bouton.md.icone-gauche {
+  padding-left: 12px;
+}
+
+.bouton.md.icone-seule {
+  padding: 8px;
+}
+
+.bouton.lg {
+  padding: 10px 24px;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.bouton.lg.icone-droite {
+  padding-right: 18px;
+}
+
+.bouton.lg.icone-gauche {
+  padding-left: 18px;
+}
+
+.bouton.lg.icone-seule {
+  padding: 12px;
+}
+
+.bouton.primaire {
+  background: var(--bouton-primaire-couleur-fond);
+  color: var(--bouton-primaire-couleur-texte);
+  border: 1px solid transparent;
+  border-radius: var(--bouton-arrondi);
+}
+
+.bouton.primaire:hover {
+  background: var(--bouton-primaire-couleur-fond-survol);
+}
+
+.bouton.primaire:active {
+  background: var(--bouton-primaire-couleur-fond-clique);
+}
+
+.bouton.tertiaire, .bouton.tertiaire-sans-bordure {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  text-align: center;
+  background: white;
+  border-radius: var(--bouton-arrondi);
+}
+
+.bouton.tertiaire:hover, .bouton.tertiaire-sans-bordure:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.bouton.tertiaire:active, .bouton.tertiaire-sans-bordure:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.bouton.tertiaire:focus, .bouton.tertiaire-sans-bordure:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+
+.bouton.tertiaire {
+  border: 1px solid #ddd;
+}
+
+.bouton.tertiaire-sans-bordure {
+  border: 1px solid transparent;
+}</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        titre: string;
+        href: string;
+        variante: "primaire" | "tertiaire" | "tertiaire-sans-bordure";
+        taille: "sm" | "md" | "lg";
+        icone?: string | undefined;
+        apparence?: "lien" | "bouton" | "lien-texte";
+        cible?: string | undefined;
+        positionIcone?: "sans" | "seule" | "droite" | "gauche";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LienProps = typeof __propDef.props;
+export type LienEvents = typeof __propDef.events;
+export type LienSlots = typeof __propDef.slots;
+export default class Lien extends SvelteComponent<LienProps, LienEvents, LienSlots> {
+}
+export {};

package/dist/lab/Tag.svelte

@@ -0,0 +1,47 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-tag",
+    props: {
+      couleurFond: { reflect: false, type: "String", attribute: "couleur-fond" },
+      couleurTexte: { reflect: false, type: "String", attribute: "couleur-texte" },
+      label: { reflect: false, type: "String", attribute: "label" },
+      taille: { reflect: false, type: "String", attribute: "taille" },
+    },
+  }}
+/>
+
+<script>export let label;
+export let couleurTexte;
+export let couleurFond;
+export let taille = "sm";
+</script>
+
+<span class="tag {taille}" style:background={couleurFond} style:color={couleurTexte}>
+  {label}
+</span>
+
+<style>.tag {
+  color: var(--tag-couleur-texte);
+  background-color: var(--tag-couleur-fond);
+  font-family: Marianne;
+  font-weight: 400;
+  display: inline-block;
+  width: fit-content;
+  white-space: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tag.sm {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+.tag.md {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  padding: 4px 12px;
+  border-radius: 16px;
+}</style>

package/dist/lab/{blog/Tag.svelte.d.ts → Tag.svelte.d.ts}

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Tag } from "../../types";
 declare const __propDef: {
     props: {
-        tag?: Tag;
+        label: string;
+        couleurTexte: string | undefined;
+        couleurFond: string | undefined;
+        taille?: "sm" | "md";
     };
     events: {
         [evt: string]: CustomEvent<any>;