@lab-anssi/ui-kit 1.19.0 → 1.21.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

@@ -19,3 +19,4 @@ 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

@@ -19,3 +19,4 @@ 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/Tag.svelte

@@ -0,0 +1,114 @@
+<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" },
+      type: { reflect: false, type: "String", attribute: "type" },
+    },
+  }}
+/>
+
+<script>export let label;
+export let couleurTexte;
+export let couleurFond;
+export let taille = "sm";
+export let type = "defaut";
+let selectionne = false;
+const bascule = () => {
+  selectionne = !selectionne;
+};
+</script>
+
+{#if type === "defaut"}
+  <span class="tag {taille}" style:background={couleurFond} style:color={couleurTexte}>
+    {label}
+  </span>
+{:else}
+  <button
+    class="tag {taille}"
+    aria-pressed={selectionne}
+    style:background={couleurFond}
+    style:color={couleurTexte}
+    on:click={bascule}
+    on:click
+  >
+    {label}
+  </button>
+{/if}
+
+<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;
+}
+.tag:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}
+
+button.tag {
+  color: var(--tag-selectionnable-couleur-texte);
+  background-color: var(--tag-selectionnable-couleur-fond);
+  border: none;
+  display: inline-flex;
+  position: relative;
+  overflow: visible;
+}
+button.tag:hover {
+  background-color: var(--tag-selectionnable-couleur-fond-survol);
+}
+button.tag:active {
+  background-color: var(--tag-selectionnable-couleur-fond-clique);
+}
+button.tag[aria-pressed=true] {
+  color: var(--tag-selectionne-couleur-texte);
+  background-color: transparent;
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond) 0.625rem);
+}
+button.tag[aria-pressed=true]:hover {
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond-survol) 0.625rem);
+}
+button.tag[aria-pressed=true]:active {
+  background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, var(--tag-selectionne-couleur-fond-clique) 0.625rem);
+}
+button.tag[aria-pressed=true]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/checkbox-circle-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/checkbox-circle-line.svg");
+  background-color: var(--tag-selectionnable-couleur-texte);
+  --icon-size: 1rem;
+  content: "";
+  display: inline-block;
+  flex: 0 0 auto;
+  height: var(--icon-size);
+  margin: -0.5rem;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  position: absolute;
+  right: 0;
+  top: 4px;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  width: var(--icon-size);
+}</style>

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

@@ -1,10 +1,15 @@
 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";
+        type?: "defaut" | "selectionnable";
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/lab/blog/BandeauTitre.svelte

@@ -11,11 +11,11 @@
 />
 
 <script>import { estLien } from "../../types.js";
-import ComposantTag from "./Tag.svelte";
+import Tag from "../Tag.svelte";
 export let titre;
 export let description = "";
 export let filAriane = [];
-export let tag = null;
+export let infosTag = null;
 let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
 </script>
 
@@ -37,9 +37,13 @@ let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
       </div>
     {/if}
     <div class="conteneur-texte">
-      {#if tag}
+      {#if infosTag}
         <div class="conteneur-tag">
-          <ComposantTag {tag} />
+          <Tag
+            couleurFond={infosTag.couleurFond}
+            couleurTexte={infosTag.couleurTexte}
+            label={infosTag.label}
+          />
         </div>
       {/if}
       <div class="conteneur-corps">

package/dist/lab/blog/BandeauTitre.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import { type NoeudFilAriane, type Tag } from "../../types.js";
+import { type NoeudFilAriane, type InfosTag } from "../../types.js";
 declare const __propDef: {
     props: {
         titre: string;
         description?: string;
         filAriane?: NoeudFilAriane[];
-        tag?: Tag | null;
+        infosTag?: InfosTag | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/blog/CarteArticle.svelte

@@ -1,4 +1,4 @@
-<script>import ComposantTag from "./Tag.svelte";
+<script>import Tag from "../Tag.svelte";
 import Fleche from "../icones/Fleche.svelte";
 export let article;
 export let categorie;
@@ -6,7 +6,11 @@ export let categorie;
 
 <a class="carte-article" href={article.href}>
   <div class="conteneur-texte">
-    <ComposantTag tag={categorie} />
+    <Tag
+      couleurFond={categorie.couleurFond}
+      couleurTexte={categorie.couleurTexte}
+      label={categorie.label}
+    />
     <p>{article.titre}</p>
   </div>
   <div class="conteneur-fleche">

package/dist/lab/blog/CarteArticle.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { ResumeArticle, Tag } from "../../types";
+import type { ResumeArticle, InfosTag } from "../../types";
 declare const __propDef: {
     props: {
         article: ResumeArticle;
-        categorie: Tag;
+        categorie: InfosTag;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/types.d.ts

@@ -41,7 +41,7 @@ type Feuille = {
 };
 export type NoeudFilAriane = Lien | Feuille;
 export declare const estLien: (noeud: NoeudFilAriane) => noeud is Lien;
-export type Tag = {
+export type InfosTag = {
     label: string;
     couleurTexte: string;
     couleurFond: string;
@@ -56,5 +56,5 @@ export type ResumeArticle = {
     titre: string;
     href: string;
 };
-export type CategoriesArticle = Record<string, Tag>;
+export type CategoriesArticle = Record<string, InfosTag>;
 export {};