@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/Lien.svelte

@@ -0,0 +1,233 @@
+<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" },
+      actif: { reflect: false, type: "Boolean", attribute: "actif" },
+      largeurMaximale: { reflect: false, type: "Boolean", attribute: "largeur-maximale" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet } from "../utilitaires";
+import Icone from "./Icone.svelte";
+let { titre = undefined, href, variante, taille, icone = undefined, apparence = "lien", cible = undefined, positionIcone = "sans", actif = true, largeurMaximale = false } = $props();
+</script>
+
+<a
+  class={`${variante} ${taille} icone-${positionIcone} ${apparence}`}
+  class:largeur-maximale={largeurMaximale}
+  {href}
+  target={cible}
+  title={positionIcone === "seule" ? titre : ""}
+  aria-disabled={!actif}
+>
+  {#if (positionIcone === "gauche" || positionIcone === "seule") && icone}
+    <Icone nom={icone} taille={taille === "lg" ? "md" : "sm"} />
+  {/if}
+  {#if positionIcone !== "seule"}
+    <span><slot>{titre}</slot></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 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  justify-content: center;
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  font-family: inherit;
+}
+.bouton.largeur-maximale {
+  width: 100%;
+  box-sizing: border-box;
+}
+.bouton:focus-visible {
+  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:disabled, .bouton[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.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.primaire:disabled, .bouton.primaire[aria-disabled=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;
+  border-color: #929292;
+}
+.bouton.tertiaire, .bouton.tertiaire-sans-bordure {
+  color: var(--bouton-secondaire-tertiaire-couleur-texte);
+  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:disabled, .bouton.tertiaire[aria-disabled=true], .bouton.tertiaire-sans-bordure:disabled, .bouton.tertiaire-sans-bordure[aria-disabled=true] {
+  background: transparent;
+  color: #929292;
+}
+.bouton.tertiaire {
+  border: 1px solid #ddd;
+}
+.bouton.tertiaire-sans-bordure {
+  border: 1px solid transparent;
+}
+
+.bouton {
+  text-decoration: none;
+}
+
+.lien-texte {
+  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 {
+  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-visible {
+  outline: 2px solid #0a76f6;
+  outline-offset: 2px;
+}</style>

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

@@ -0,0 +1,39 @@
+interface 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";
+    actif?: boolean;
+    largeurMaximale?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Lien: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Lien = InstanceType<typeof Lien>;
+export default Lien;