@lab-anssi/ui-kit 1.17.1 → 1.19.0

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        nom: string;
+        taille?: "sm" | "md" | "lg" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type IconeProps = typeof __propDef.props;
+export type IconeEvents = typeof __propDef.events;
+export type IconeSlots = typeof __propDef.slots;
+export default class Icone extends SvelteComponent<IconeProps, IconeEvents, IconeSlots> {
+}
+export {};

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/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;
+  }
+}