@lab-anssi/ui-kit 1.17.0 → 1.18.0

package/dist/index.d.ts

@@ -16,3 +16,5 @@ export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/brique
 export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
 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";

package/dist/index.js

@@ -16,3 +16,5 @@ export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/brique
 export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
 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";

package/dist/lab/Bouton.svelte

@@ -0,0 +1,71 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bouton",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      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" },
+    },
+  }}
+/>
+
+<script>import Icone from "./Icone.svelte";
+export let titre;
+export let variante = "tertiaire";
+export let taille = "sm";
+export let icone = void 0;
+export let sansBordure = false;
+</script>
+
+<button class={`bouton ${variante} ${taille}`} class:sansBordure on:click>
+  {titre}
+  {#if icone}
+    <Icone nom={icone} taille="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>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        titre: string;
+        variante?: string;
+        taille?: string;
+        icone?: string | undefined;
+        sansBordure?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BoutonProps = typeof __propDef.props;
+export type BoutonEvents = typeof __propDef.events;
+export type BoutonSlots = typeof __propDef.slots;
+export default class Bouton extends SvelteComponent<BoutonProps, BoutonEvents, BoutonSlots> {
+}
+export {};