@lab-anssi/ui-kit 1.8.3 → 1.9.0

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

@@ -0,0 +1,159 @@
+<script>export let index;
+export let etapeMarelle;
+const estPair = (index + 1) % 2 === 0;
+</script>
+
+<div class={`marelle-etape ${estPair ? 'pair' : 'impair'}`}>
+  <div class="illustration">
+    <img src={etapeMarelle.illustration.lien} alt={etapeMarelle.illustration.alt} />
+  </div>
+  <div class="numero-etape">
+    <div class="encart-rond">
+      <span>{index + 1}</span>
+    </div>
+  </div>
+  <div class="contenu">
+    <h4>{etapeMarelle.titre}</h4>
+    <p>{etapeMarelle.description}</p>
+    {#if etapeMarelle.lien}
+      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}>{etapeMarelle.lien.texte}</a>
+    {/if}
+  </div>
+</div>
+
+<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;
+  }
+}
+
+.marelle-etape {
+  display: grid;
+  row-gap: 32px;
+  grid-template-areas: "numero-etape" "contenu" "illustration";
+}
+@media (min-width: 932px) {
+  .marelle-etape {
+    grid-template-areas: "contenu numero-etape illustration";
+    grid-template-columns: 1fr 136px 1fr;
+    column-gap: 24px;
+    row-gap: 24px;
+  }
+  .marelle-etape.pair {
+    grid-template-areas: "illustration numero-etape contenu";
+  }
+}
+.marelle-etape.pair .numero-etape {
+  justify-content: center;
+}
+@media (min-width: 932px) {
+  .marelle-etape.pair .numero-etape {
+    justify-content: end;
+  }
+}
+.marelle-etape.impair .numero-etape {
+  justify-content: center;
+}
+@media (min-width: 932px) {
+  .marelle-etape.impair .numero-etape {
+    justify-content: start;
+  }
+}
+.marelle-etape .contenu {
+  grid-area: contenu;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+}
+.marelle-etape .numero-etape {
+  grid-area: numero-etape;
+  text-align: center;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+.marelle-etape .numero-etape .encart-rond {
+  width: 72px;
+  height: 72px;
+  background: var(--brique-marelle-etapes-numero-etape-couleur);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.marelle-etape .numero-etape .encart-rond span {
+  color: #FFFFFF;
+  font-size: 2rem;
+  font-weight: bold;
+}
+@media (min-width: 932px) {
+  .marelle-etape .numero-etape .encart-rond span {
+    font-size: 2.5rem;
+  }
+}
+
+.illustration img {
+  width: 100%;
+}
+
+.marelle-etape > div > h4 {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 28px;
+}
+@media (min-width: 932px) {
+  .marelle-etape > div > h4 {
+    font-size: 1.375rem;
+    line-height: 28px;
+  }
+}
+
+.marelle-etape > div > p {
+  margin: 0 0 8px 0;
+  font-size: 1rem;
+  line-height: 24px;
+}
+@media (min-width: 932px) {
+  .marelle-etape > div > p {
+    font-size: 1rem;
+    line-height: 24px;
+  }
+}
+
+.marelle-etape > div > p > b {
+  color: var(--brique-marelle-etapes-lien-couleur);
+}
+
+.marelle-etape > div > a {
+  color: var(--brique-marelle-etapes-lien-couleur);
+  display: inline-flex;
+  border: none;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { EtapeMarelle } from "../../../../types";
+declare const __propDef: {
+    props: {
+        index: number;
+        etapeMarelle: EtapeMarelle;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EtapeProps = typeof __propDef.props;
+export type EtapeEvents = typeof __propDef.events;
+export type EtapeSlots = typeof __propDef.slots;
+export default class Etape extends SvelteComponent<EtapeProps, EtapeEvents, EtapeSlots> {
+}
+export {};

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