@lab-anssi/ui-kit 1.18.0 → 1.20.0

package/dist/lab/apparence-bouton.scss

@@ -0,0 +1,114 @@
+.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;
+
+  &:focus {
+    outline: 2px solid #0a76f6;
+    outline-offset: 2px;
+  }
+
+  &.sm {
+    padding: 4px 12px;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+
+    &.icone-droite {
+      padding-right: 8px;
+    }
+
+    &.icone-gauche {
+      padding-left: 8px;
+    }
+
+    &.icone-seule {
+      padding: 8px;
+    }
+  }
+
+  &.md {
+    padding: 8px 16px;
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    &.icone-droite {
+      padding-right: 12px;
+    }
+
+    &.icone-gauche {
+      padding-left: 12px;
+    }
+
+    &.icone-seule {
+      padding: 8px;
+    }
+  }
+
+  &.lg {
+    padding: 10px 24px;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+
+    &.icone-droite {
+      padding-right: 18px;
+    }
+
+    &.icone-gauche {
+      padding-left: 18px;
+    }
+
+    &.icone-seule {
+      padding: 12px;
+    }
+  }
+
+  &.primaire {
+    background: $bouton-primaire-couleur-fond;
+    color: $bouton-primaire-couleur-texte;
+    border: 1px solid transparent;
+    border-radius: $bouton-arrondi;
+
+    &:hover {
+      background: $bouton-primaire-couleur-fond-survol;
+    }
+
+    &:active {
+      background: $bouton-primaire-couleur-fond-clique;
+    }
+  }
+
+  &.tertiaire,
+  &.tertiaire-sans-bordure {
+    color: $bouton-secondaire-tertiaire-couleur-texte;
+    text-align: center;
+    background: white;
+    border-radius: $bouton-arrondi;
+
+    &:hover {
+      background: rgb(0, 0, 0, 4%);
+    }
+
+    &:active {
+      background: rgb(0, 0, 0, 8%);
+    }
+
+    &:focus {
+      outline: 2px solid #0a76f6;
+      outline-offset: 2px;
+    }
+  }
+
+  &.tertiaire {
+    border: 1px solid #ddd;
+  }
+
+  &.tertiaire-sans-bordure {
+    border: 1px solid transparent;
+  }
+}

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 {};