@lab-anssi/ui-kit 1.8.4 → 1.9.0

package/dist/lab/vitrines-produits/briques/marelle/Marelle.svelte

@@ -0,0 +1,121 @@
+<svelte:options customElement={{
+  tag: 'lab-anssi-marelle',
+  props: {
+    titre: { reflect: false, type: 'String', attribute: 'titre' },
+    etapesmarelle: { reflect: false, type: 'Array', attribute: 'etapesmarelle' },
+    action: { reflect: false, type: 'Object', attribute: 'action' }
+  }
+}} />
+
+<script>import Brique from "../Brique.svelte";
+import Etape from "./Etape.svelte";
+export let titre = "";
+export let etapesmarelle = [];
+export let action;
+</script>
+
+<Brique variation="secondaire">
+  <div class="brique-marelle">
+    <div class="titre">{titre}</div>
+    <section class="marelle-etapes">
+      {#each etapesmarelle as etapeMarelle, index}
+        <Etape index={index} etapeMarelle={etapeMarelle} />
+      {/each}
+    </section>
+    {#if action}
+      <div class="bouton-action">
+        <a role="button" class="action" href={action.lien} target="_blank">{action.titre}</a>
+      </div>
+    {/if}
+  </div>
+</Brique>
+
+<style>.visible-tablette {
+  display: none !important;
+}
+@media (min-width: 576px) {
+  .visible-tablette {
+    display: unset !important;
+  }
+}
+
+@media (min-width: 576px) {
+  .invisible-tablette {
+    display: none !important;
+  }
+}
+
+.visible-desktop {
+  display: none !important;
+}
+@media (min-width: 932px) {
+  .visible-desktop {
+    display: unset !important;
+  }
+}
+
+@media (min-width: 932px) {
+  .invisible-desktop {
+    display: none !important;
+  }
+}
+
+.brique-marelle {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+.brique-marelle .titre {
+  color: var(--brique-marelle-titre-couleur);
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 36px;
+}
+@media (min-width: 932px) {
+  .brique-marelle .titre {
+    font-size: 2rem;
+    line-height: 40px;
+  }
+}
+.brique-marelle .marelle-etapes {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  color: #161616;
+}
+@media (min-width: 932px) {
+  .brique-marelle .marelle-etapes {
+    gap: 32px;
+  }
+}
+.brique-marelle .bouton-action {
+  display: flex;
+  justify-content: center;
+}
+.brique-marelle .bouton-action a[role=button] {
+  text-decoration: none;
+  font-family: Marianne, sans-serif;
+  padding: 8px 16px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 24px;
+  border-radius: 4px;
+}
+.brique-marelle .bouton-action a[role=button].action {
+  background-color: var(--brique-marelle-bouton-background);
+  color: var(--brique-marelle-bouton-texte);
+  border: none;
+  cursor: pointer;
+}
+.brique-marelle .bouton-action a[role=button].action:active {
+  background-color: var(--brique-marelle-bouton-background-active);
+  box-shadow: none;
+  border: none;
+}
+.brique-marelle .bouton-action a[role=button].action:hover {
+  background-color: var(--brique-marelle-bouton-background-hover);
+  box-shadow: none;
+  border: none;
+}</style>

package/dist/lab/vitrines-produits/briques/marelle/Marelle.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Action, EtapeMarelle } from "../../../../types";
+declare const __propDef: {
+    props: {
+        titre?: string;
+        etapesmarelle?: EtapeMarelle[];
+        action: Action;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MarelleProps = typeof __propDef.props;
+export type MarelleEvents = typeof __propDef.events;
+export type MarelleSlots = typeof __propDef.slots;
+export default class Marelle extends SvelteComponent<MarelleProps, MarelleEvents, MarelleSlots> {
+}
+export {};

package/dist/types.d.ts

@@ -2,6 +2,11 @@ export type Image = {
     lien: string;
     alt: string;
 };
+export type Video = {
+    source: string;
+    sourcesoustitres?: string;
+    imagedecouverture?: string;
+};
 export type Action = {
     titre: string;
     lien: string;
@@ -11,3 +16,13 @@ export type Tuiles = {
     illustration: Image;
     contenu: string;
 }[];
+export type EtapeMarelle = {
+    titre: string;
+    description: string;
+    lien?: {
+        href: string;
+        texte: string;
+        target: string;
+    };
+    illustration: Image;
+};