@lab-anssi/ui-kit 1.13.0 → 1.14.1

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/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

@@ -14,3 +14,4 @@ export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/b
 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

@@ -14,3 +14,4 @@ export { default as BriqueContenuADeuxColonnes } from "./lab/vitrines-produits/b
 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/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 {};

package/dist/lab/blog/SommaireBureau.svelte

@@ -0,0 +1,69 @@
+<script>import { createEventDispatcher } from "svelte";
+export let tableDesMatieres;
+const emets = createEventDispatcher();
+const ouvreEntree = (ancre) => {
+  emets("ancreOuverte", ancre);
+};
+</script>
+
+<div class="sommaire sommaire-deplie">
+  <ul>
+    {#each tableDesMatieres as entree (entree.id)}
+      <li>
+        <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html entree.texte}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>.sommaire-deplie {
+  display: none;
+  width: 282px;
+  flex: 0 0 auto;
+  align-self: flex-start;
+  font-family: Marianne, sans-serif;
+}
+@media (min-width: 932px) {
+  .sommaire-deplie {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 0;
+  }
+}
+.sommaire-deplie ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 40px;
+}
+.sommaire-deplie ul li {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-deplie ul li.actif {
+  font-weight: bold;
+}
+.sommaire-deplie ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 6px;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-deplie ul li a {
+  color: #161616;
+  border-bottom: none;
+  text-decoration: none;
+  padding-left: 8px;
+  display: inline-block;
+}
+.sommaire-deplie span {
+  margin-bottom: 16px;
+  font-size: 0.85rem;
+  line-height: 1.5rem;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableDesMatieres } from "../../types";
+declare const __propDef: {
+    props: {
+        tableDesMatieres: TableDesMatieres;
+    };
+    events: {
+        ancreOuverte: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SommaireBureauProps = typeof __propDef.props;
+export type SommaireBureauEvents = typeof __propDef.events;
+export type SommaireBureauSlots = typeof __propDef.slots;
+export default class SommaireBureau extends SvelteComponent<SommaireBureauProps, SommaireBureauEvents, SommaireBureauSlots> {
+}
+export {};

package/dist/lab/blog/SommaireMobile.svelte

@@ -0,0 +1,114 @@
+<script>import { createEventDispatcher } from "svelte";
+import IconeMenuLateral from "./IconeMenuLateral.svelte";
+import IconeChevronBas from "./IconeChevronBas.svelte";
+export let tableDesMatieres;
+let detailsElement;
+const emets = createEventDispatcher();
+const ouvreEntree = (ancre) => {
+  detailsElement.open = false;
+  emets("ancreOuverte", ancre);
+};
+</script>
+
+<div class="sommaire sommaire-replie">
+  <details bind:this={detailsElement}>
+    <summary>
+      <div class="entete-filtres">
+        <IconeMenuLateral />
+        <span id="section-active" class="titre-menu">
+          {tableDesMatieres[0]?.texte}
+        </span>
+        <IconeChevronBas />
+      </div>
+    </summary>
+
+    <ul>
+      {#each tableDesMatieres as entree (entree.id)}
+        <li>
+          <a href={`#${entree.id}`} on:click={() => ouvreEntree(entree.id)}>
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html entree.texte}</a
+          >
+        </li>
+      {/each}
+    </ul>
+  </details>
+</div>
+
+<style>.sommaire-replie {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  font-family: Marianne, sans-serif;
+}
+@media (min-width: 932px) {
+  .sommaire-replie {
+    display: none;
+  }
+}
+.sommaire-replie:has(details[open]) {
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.sommaire-replie details .entete-filtres {
+  padding: 12px 16px;
+  background: var(--sommaire-mobile-fond);
+  color: var(--sommaire-actif-couleur);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+.sommaire-replie details ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 16px;
+}
+.sommaire-replie details ul li {
+  border-bottom: 1px solid #ddd;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-replie details ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 14px;
+  border-bottom: none;
+}
+.sommaire-replie details ul li a {
+  color: #161616;
+  text-decoration: none;
+  padding-left: 16px;
+  display: inline-block;
+  border-bottom: none;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-replie details[open] summary .entete-filtres :global(.chevron) {
+  transform: rotate(180deg);
+}
+.sommaire-replie details summary {
+  list-style: none;
+}
+.sommaire-replie details summary::marker {
+  content: "";
+}
+.sommaire-replie details summary::-webkit-details-marker {
+  display: none;
+}
+.sommaire-replie details summary .entete-filtres {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sommaire-replie details .titre-menu {
+  flex-grow: 1;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableDesMatieres } from "../../types";
+declare const __propDef: {
+    props: {
+        tableDesMatieres: TableDesMatieres;
+    };
+    events: {
+        ancreOuverte: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SommaireMobileProps = typeof __propDef.props;
+export type SommaireMobileEvents = typeof __propDef.events;
+export type SommaireMobileSlots = typeof __propDef.slots;
+export default class SommaireMobile extends SvelteComponent<SommaireMobileProps, SommaireMobileEvents, SommaireMobileSlots> {
+}
+export {};

package/dist/types.d.ts

@@ -46,4 +46,9 @@ export type Tag = {
     couleurTexte: string;
     couleurFond: string;
 };
+export type TableDesMatieres = {
+    profondeur: number;
+    texte: string;
+    id: string;
+}[];
 export {};