@lab-anssi/ui-kit 1.12.4 → 1.14.0

package/dist/Alerte.svelte

@@ -17,37 +17,7 @@ let estOuvert = true;
   </div>
 {/if}
 
-<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;
-  }
-}
-
-.alerte {
+<style>.alerte {
   display: flex;
   border: 1px solid #0163cb;
   min-width: 200px;

package/dist/CentreAide.svelte

@@ -83,37 +83,7 @@ let ouvert = false;
   </div>
 {/if}
 
-<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;
-  }
-}
-
-.declencheur-centre-aide {
+<style>.declencheur-centre-aide {
   position: fixed;
   bottom: 24px;
   right: 24px;

package/dist/assets/icones/aide.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.355V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.7902 11.5 13.4448 10.887 13.4967 10.0985C13.5486 9.31006 12.9799 8.61655 12.1966 8.51295C11.4133 8.40935 10.6839 8.93117 10.529 9.706L8.567 9.313C8.90349 7.63124 10.4087 6.44085 12.1228 6.50102C13.8368 6.56119 15.2549 7.8542 15.4726 9.55541C15.6904 11.2566 14.6436 12.8651 13 13.355Z" fill="#0D0C21"/>
+</svg>

package/dist/assets/icones/fleche-droite-blanche.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.78145 7.99999L5.48145 4.69999L6.42411 3.75732L10.6668 7.99999L6.42411 12.2427L5.48145 11.3L8.78145 7.99999Z" fill="white"/>
+</svg>

package/dist/assets/icones/telecharger.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 13.2823H14V14.6156H2V13.2823ZM8.66667 9.39697L12.714 5.34897L13.6567 6.29164L8 11.949L2.34333 6.29231L3.286 5.34897L7.33333 9.39564V1.94897H8.66667V9.39697Z" fill="black"/>
+</svg>

package/dist/index.d.ts

@@ -13,3 +13,5 @@ export { default as Temoignages } from "./lab/vitrines-produits/briques/temoigna
 export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte";
 export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/PresentationANSSI.svelte";
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
+export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
+export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";

package/dist/index.js

@@ -13,3 +13,5 @@ export { default as Temoignages } from "./lab/vitrines-produits/briques/temoigna
 export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte";
 export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/PresentationANSSI.svelte";
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
+export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
+export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";

package/dist/lab/ResumePssi.svelte

@@ -82,37 +82,7 @@
   production dans un délai très court.
 </p>
 
-<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;
-  }
-}
-
-a {
+<style>a {
   display: inline-flex;
   color: #000091;
   border: none;

package/dist/lab/blog/BandeauTitre.svelte

@@ -0,0 +1,152 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bandeau-titre",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      description: { reflect: false, type: "String", attribute: "description" },
+      filAriane: { reflect: false, type: "Array", attribute: "fil-ariane" },
+      tag: { reflect: false, type: "Object", attribute: "tag" },
+    },
+  }}
+/>
+
+<script>import { estLien } from "../../types.js";
+export let titre;
+export let description = "";
+export let filAriane = [];
+export let tag = null;
+let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
+</script>
+
+<div class="conteneur-bandeau-entete">
+  <div class="contenu-bandeau-entete">
+    {#if filAriane.length}
+      <div class="fil-ariane">
+        {#if !filArianeVisible}
+          <button on:click={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
+        {:else}
+          {#each filAriane as noeud, index (index)}
+            {#if estLien(noeud)}
+              <a href={noeud.href}>{noeud.label}</a>
+            {:else}
+              <span>{noeud.label}</span>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+    {/if}
+    <div class="conteneur-texte">
+      {#if tag}
+        <div class="conteneur-tag">
+          <span class="tag" style="background: {tag.couleurFond}; color: {tag.couleurTexte};"
+            >{tag.label}</span
+          >
+        </div>
+      {/if}
+      <div class="conteneur-corps">
+        <h1>{titre}</h1>
+        {#if description}
+          <span>{description}</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>.conteneur-bandeau-entete {
+  background: var(--bandeau-titre-background);
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete {
+  padding: 16px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: Marianne;
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: left;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte {
+  display: flex;
+  padding: 8px 0 12px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag {
+  padding-top: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag .tag {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-family: Marianne;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
+  font-family: Marianne;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps span {
+  font-family: Marianne;
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  margin: 0;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane span,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  color: white;
+  font-family: Marianne;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a:after {
+  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche-droite-blanche.svg");
+  width: 16px;
+  height: 16px;
+  display: flex;
+}</style>

package/dist/lab/blog/BandeauTitre.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type NoeudFilAriane, type Tag } from "../../types.js";
+declare const __propDef: {
+    props: {
+        titre: string;
+        description?: string;
+        filAriane?: NoeudFilAriane[];
+        tag?: Tag | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BandeauTitreProps = typeof __propDef.props;
+export type BandeauTitreEvents = typeof __propDef.events;
+export type BandeauTitreSlots = typeof __propDef.slots;
+export default class BandeauTitre extends SvelteComponent<BandeauTitreProps, BandeauTitreEvents, BandeauTitreSlots> {
+}
+export {};

package/dist/lab/blog/IconeChevronBas.svelte

@@ -0,0 +1,19 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="chevron"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99999 8.78096L11.3 5.48096L12.2427 6.42362L7.99999 10.6663L3.75732 6.42362L4.69999 5.48096L7.99999 8.78096Z"
+    fill="black"
+  />
+</svg>
+
+<style>path {
+  fill: var(--sommaire-actif-couleur);
+}</style>

package/dist/lab/blog/IconeChevronBas.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconeChevronBasProps */
+/** @typedef {typeof __propDef.events}  IconeChevronBasEvents */
+/** @typedef {typeof __propDef.slots}  IconeChevronBasSlots */
+export default class IconeChevronBas extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconeChevronBasProps = typeof __propDef.props;
+export type IconeChevronBasEvents = typeof __propDef.events;
+export type IconeChevronBasSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/lab/blog/IconeMenuLateral.svelte

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2 2.66626H14V3.99959H2V2.66626ZM2 7.33293H10V8.66626H2V7.33293ZM2 11.9996H14V13.3329H2V11.9996Z"
+    fill="black"
+  />
+</svg>
+
+<style>path {
+  fill: var(--sommaire-actif-couleur);
+}</style>

package/dist/lab/blog/IconeMenuLateral.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconeMenuLateralProps */
+/** @typedef {typeof __propDef.events}  IconeMenuLateralEvents */
+/** @typedef {typeof __propDef.slots}  IconeMenuLateralSlots */
+export default class IconeMenuLateral extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconeMenuLateralProps = typeof __propDef.props;
+export type IconeMenuLateralEvents = typeof __propDef.events;
+export type IconeMenuLateralSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/lab/blog/PageCrisp.svelte

@@ -0,0 +1,247 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-page-crisp",
+    props: {
+      contenu: { reflect: false, type: "String", attribute: "contenu" },
+      tableDesMatieres: { reflect: false, type: "Array", attribute: "table-des-matieres" },
+    },
+  }}
+/>
+
+<script>import SommaireMobile from "./SommaireMobile.svelte";
+import { onDestroy, tick } from "svelte";
+import SommaireBureau from "./SommaireBureau.svelte";
+export let contenu;
+export let tableDesMatieres;
+let composant;
+let observateurDIntersection;
+const observeLesSections = () => {
+  observateurDIntersection = new IntersectionObserver(
+    (sections) => {
+      sections.forEach((section) => {
+        const titreDeLaSection = section.target.querySelector("h2");
+        const lesLiens = composant.querySelectorAll(
+          `.sommaire ul li a[href='#${titreDeLaSection.id}']`
+        );
+        if (!lesLiens) return;
+        if (section.isIntersecting) {
+          lesLiens.forEach((l) => l.parentElement.classList.add("actif"));
+          const menuMobileVisible = composant.querySelector("#section-active");
+          if (menuMobileVisible) menuMobileVisible.textContent = titreDeLaSection.textContent;
+        } else lesLiens.forEach((l) => l.parentElement.classList.remove("actif"));
+      });
+    },
+    { rootMargin: "-30% 0% -62% 0%" }
+  );
+  const lesSections = composant.querySelectorAll("article .contenu section");
+  lesSections.forEach((s) => observateurDIntersection.observe(s));
+};
+$: if (contenu) tick().then(observeLesSections);
+const attendChargementImages = async () => {
+  const images = composant.querySelectorAll("img");
+  await Promise.all(
+    Array.from(images).map((image) => {
+      if (image.complete) return Promise.resolve();
+      return new Promise((res) => {
+        image.addEventListener("load", res);
+        image.addEventListener("error", res);
+      });
+    })
+  );
+};
+const scroll = (cible) => {
+  if (cible) {
+    tick().then(async () => {
+      const ancre = composant && composant.querySelector(cible);
+      if (ancre) {
+        await attendChargementImages();
+        ancre.scrollIntoView(true);
+      }
+    });
+  }
+};
+$: if (contenu) scroll(window.location.hash);
+const ancreOuverte = (evenement) => scroll(`#${evenement.detail}`);
+onDestroy(() => {
+  const lesSections = composant.querySelectorAll("section");
+  lesSections.forEach((s) => {
+    if (observateurDIntersection) observateurDIntersection.unobserve(s);
+  });
+});
+</script>
+
+<div bind:this={composant}>
+  <SommaireMobile {tableDesMatieres} on:ancreOuverte={ancreOuverte} />
+
+  <article>
+    <SommaireBureau {tableDesMatieres} on:ancreOuverte={ancreOuverte} />
+    <div class="contenu">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      {@html contenu}
+    </div>
+  </article>
+</div>
+
+<style>article {
+  font-family: Marianne, sans-serif;
+  color: #3a3a3a;
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 48px 16px 72px;
+}
+@media (min-width: 932px) {
+  article {
+    padding: 48px 24px 72px;
+    flex-direction: row;
+    gap: 24px;
+  }
+}
+article .contenu {
+  display: flex;
+  flex-direction: column;
+  gap: 72px;
+}
+article .contenu :global(section) {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+article .contenu :global(p) {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+article .contenu :global(h2) {
+  color: #161616;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  margin: 0;
+  scroll-margin-top: 50px; /* Hauteur de la barre de navigation */
+}
+@media (min-width: 576px) {
+  article .contenu :global(h2) {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+@media (min-width: 932px) {
+  article .contenu :global(h2) {
+    scroll-margin-top: 0;
+  }
+}
+article .contenu :global(h3) {
+  color: #161616;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  article .contenu :global(h3) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+article .contenu :global(h4) {
+  color: #161616;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  article .contenu :global(h4) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+article .contenu :global(img),
+article .contenu :global(video) {
+  width: 100%;
+}
+article .contenu :global(video) {
+  border-radius: 10px;
+}
+article .contenu :global(.conteneur-video .legende) {
+  font-style: italic;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+article .contenu :global(.information) {
+  background: #e8edff;
+  padding: 16px 16px 16px 24px;
+  border-radius: 4px;
+  color: #0163cb;
+  border-left: 4px solid #0163cb;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+article .contenu :global(.information):before {
+  content: "Information";
+  font-weight: bold;
+}
+article .contenu :global(.aide) {
+  background: #f6f6f6;
+  position: relative;
+  padding: 24px 24px 24px 64px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+article .contenu :global(.aide):before {
+  content: "";
+  display: block;
+  background-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/aide.svg");
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 24px;
+  left: 24px;
+}
+article .contenu :global(a) {
+  color: var(--couleur-lien);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}
+article .contenu :global(a):hover {
+  text-decoration-thickness: 2px;
+}
+article .contenu :global(a.telechargement) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  position: relative;
+}
+article .contenu :global(a.telechargement):after {
+  content: "";
+  display: block;
+  background: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/telecharger.svg");
+  filter: var(--filtre-couleur-primaire);
+  width: 16px;
+  height: 16px;
+}
+article .contenu :global(a.telechargement):before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--couleur-lien);
+}
+article .contenu :global(a.telechargement):hover:before {
+  bottom: -1px;
+  height: 2px;
+}
+article .contenu :global(ul li) {
+  padding-bottom: 8px;
+}</style>

package/dist/lab/blog/PageCrisp.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { TableDesMatieres } from "../../types";
+declare const __propDef: {
+    props: {
+        contenu: string;
+        tableDesMatieres: TableDesMatieres;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PageCrispProps = typeof __propDef.props;
+export type PageCrispEvents = typeof __propDef.events;
+export type PageCrispSlots = typeof __propDef.slots;
+export default class PageCrisp extends SvelteComponent<PageCrispProps, PageCrispEvents, PageCrispSlots> {
+}
+export {};