@lab-anssi/ui-kit 1.8.4 → 1.9.0

package/dist/generateurImagesPlaceholders.d.ts

@@ -1 +1 @@
-export declare const genereImageDePlaceholder: (largeur: number, longeur: number) => string;
+export declare const genereImageDePlaceholder: (largeur: number, longeur: number, texteAffiche?: string) => string;

package/dist/generateurImagesPlaceholders.js

@@ -1,3 +1,3 @@
-export const genereImageDePlaceholder = (largeur, longeur) => {
-    return `https://placehold.co/${largeur}x${longeur}`;
+export const genereImageDePlaceholder = (largeur, longeur, texteAffiche) => {
+    return `https://placehold.co/${largeur}x${longeur}${texteAffiche ? `?text=${encodeURIComponent(texteAffiche)}` : ''}`;
 };

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { default as Alerte } from "./Alerte.svelte";
 export { default as CentreAide } from "./CentreAide.svelte";
 export { default as ResumePssi } from "./lab/ResumePssi.svelte";
-export { default as BriqueHero } from './lab/vitrines-produits/briques/BriqueHero.svelte';
-export { default as CarrouselTuiles } from './lab/vitrines-produits/briques/CarrouselTuiles.svelte';
+export { default as BriqueHero } from "./lab/vitrines-produits/briques/BriqueHero.svelte";
+export { default as CarrouselTuiles } from "./lab/vitrines-produits/briques/CarrouselTuiles.svelte";
 export { default as MesServicesCyberBandeau } from "./mes-services-cyber/bandeau/Bandeau.svelte";
 export { default as LienDiagnosticCyber } from "./mes-services-cyber/lien/LienDiagnosticCyber.svelte";
 export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
 export { default as SuiteCyberNavigation } from "./suite-cyber/navigation/Navigation.svelte";
+export { default as BriqueTitreMultimedia } from "./lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte";
+export { default as Marelle } from "./lab/vitrines-produits/briques/marelle/Marelle.svelte";

package/dist/index.js

@@ -1,9 +1,11 @@
 export { default as Alerte } from "./Alerte.svelte";
 export { default as CentreAide } from "./CentreAide.svelte";
 export { default as ResumePssi } from "./lab/ResumePssi.svelte";
-export { default as BriqueHero } from './lab/vitrines-produits/briques/BriqueHero.svelte';
-export { default as CarrouselTuiles } from './lab/vitrines-produits/briques/CarrouselTuiles.svelte';
+export { default as BriqueHero } from "./lab/vitrines-produits/briques/BriqueHero.svelte";
+export { default as CarrouselTuiles } from "./lab/vitrines-produits/briques/CarrouselTuiles.svelte";
 export { default as MesServicesCyberBandeau } from "./mes-services-cyber/bandeau/Bandeau.svelte";
 export { default as LienDiagnosticCyber } from "./mes-services-cyber/lien/LienDiagnosticCyber.svelte";
 export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
 export { default as SuiteCyberNavigation } from "./suite-cyber/navigation/Navigation.svelte";
+export { default as BriqueTitreMultimedia } from "./lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte";
+export { default as Marelle } from "./lab/vitrines-produits/briques/marelle/Marelle.svelte";

package/dist/lab/vitrines-produits/briques/Brique.svelte

@@ -1,7 +1,9 @@
 <script>export let variation = "primaire";
+export let sansMargeHaute = false;
+export let sansMargeLaterale = false;
 </script>
 
-<section class={variation}>
+<section class={variation} class:sans-marge-haute={sansMargeHaute} class:sans-marge-laterale={sansMargeLaterale}>
   <div class="contenu-brique">
     <slot />
   </div>
@@ -40,8 +42,17 @@
 section {
   font-family: Marianne;
   padding: 48px 16px;
+  box-sizing: border-box;
   text-align: left;
   color: white;
+  width: 100vw;
+}
+section.sans-marge-haute {
+  padding-top: 0;
+}
+section.sans-marge-laterale {
+  padding-left: 0;
+  padding-right: 0;
 }
 @media (min-width: 576px) {
   section {
@@ -59,6 +70,9 @@ section.primaire {
 section.transparent {
   background: none;
 }
+section.secondaire {
+  background: var(--brique-background-secondaire);
+}
 
 .contenu-brique {
   max-width: 1200px;

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

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        variation?: "primaire" | "transparent";
+        variation?: "primaire" | "transparent" | "secondaire";
+        sansMargeHaute?: boolean;
+        sansMargeLaterale?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -0,0 +1,76 @@
+<svelte:options
+  customElement={{
+		tag: 'lab-anssi-titre-multimedia',
+		props: {
+      titre: { reflect: false, type: 'String', attribute: 'titre' },
+			multimedia: { reflect: false, type: 'Object', attribute: 'multimedia' },
+		}
+	}} />
+
+<script>import Brique from "./Brique.svelte";
+import LecteurVideo from "./LecteurVideo.svelte";
+export let titre;
+export let multimedia;
+</script>
+
+<Brique variation="transparent">
+  <div class="bloc-multimedia">
+    <h2>{titre}</h2>
+    <div>
+      <LecteurVideo
+        source={multimedia.source}
+        sourceSousTitres={multimedia.sourcesoustitres}
+        imageDeCouverture={multimedia.imagedecouverture}
+      />
+    </div>
+  </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;
+  }
+}
+
+.bloc-multimedia {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+.bloc-multimedia h2 {
+  color: var(--titre-couleur-primaire);
+  font-size: 28px;
+  line-height: 36px;
+  margin: 0;
+}
+@media (min-width: 932px) {
+  .bloc-multimedia h2 {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Video } from "../../../types";
+declare const __propDef: {
+    props: {
+        titre: string;
+        multimedia: Video;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BriqueTitreMultimediaProps = typeof __propDef.props;
+export type BriqueTitreMultimediaEvents = typeof __propDef.events;
+export type BriqueTitreMultimediaSlots = typeof __propDef.slots;
+export default class BriqueTitreMultimedia extends SvelteComponent<BriqueTitreMultimediaProps, BriqueTitreMultimediaEvents, BriqueTitreMultimediaSlots> {
+}
+export {};

package/dist/lab/vitrines-produits/briques/CarrouselTuiles.svelte

@@ -23,14 +23,14 @@ const suivant = () => versDirection(1);
 </script>
 
 <div class="carrousel-tuiles primaire">
-  <Brique variation="transparent">
+  <Brique variation="transparent" sansMargeHaute sansMargeLaterale>
     <div class="conteneur-tuiles" bind:this={elementCarrousel}>
-      {#each tuiles as tuile}
+      {#each tuiles as tuile, idx (idx)}
         <Tuile
           illustration={tuile.illustration}
           titre={tuile.titre}
           contenu={tuile.contenu}
-          classe="tuile-presentation"
+          position={idx === 0 ? "premiere" : idx === tuiles.length - 1 ? "derniere" : null}
         />
       {/each}
     </div>
@@ -72,14 +72,14 @@ const suivant = () => versDirection(1);
 }
 
 .carrousel-tuiles {
-  padding: 52px 0;
+  --espacement: 16px;
+  padding: 0;
 }
 .carrousel-tuiles.primaire {
-  background: linear-gradient(to bottom, var(--centre-aide-background-entete) 0%, var(--centre-aide-background-entete) 35%, transparent 35%, transparent 100%);
+  background: linear-gradient(to bottom, var(--centre-aide-background-entete) 0%, var(--centre-aide-background-entete) 30%, transparent 30%, transparent 100%);
 }
 
 .conteneur-tuiles {
-  --espacement: 16px;
   display: flex;
   overflow-x: auto;
   gap: var(--espacement);
@@ -88,29 +88,13 @@ const suivant = () => versDirection(1);
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  padding: 0 32px;
+  padding: 0 0;
 }
 
 .conteneur-tuiles::-webkit-scrollbar {
   display: none;
 }
 
-.tuile-presentation:first-of-type {
-  margin-left: var(--espacement);
-}
-
-.tuile-presentation:last-of-type {
-  margin-right: var(--espacement);
-}
-
-.tuile-presentation {
-  box-sizing: border-box;
-  scroll-snap-align: center;
-  flex-shrink: 0;
-  width: calc(100vw - 60px);
-  max-width: 266px;
-}
-
 .conteneur-actions {
   display: flex;
   margin-top: 32px;
@@ -130,6 +114,7 @@ const suivant = () => versDirection(1);
   display: flex;
   align-items: center;
   gap: 8px;
+  font-family: Marianne;
 }
 
 .conteneur-actions .precedent:before,
@@ -138,7 +123,6 @@ const suivant = () => versDirection(1);
   display: flex;
   width: 24px;
   height: 24px;
-  filter: brightness(0) invert(1);
   line-height: 28px;
 }
 
@@ -152,19 +136,17 @@ const suivant = () => versDirection(1);
   text-decoration-thickness: 2px;
 }
 
-@media screen and (min-width: 577px) {
-  .conteneur-tuiles {
+@media (min-width: 932px) {
+  .carrousel-tuiles {
     --espacement: 24px;
   }
-}
-@media screen and (min-width: 1247px) {
-  .conteneur-actions {
+  .carrousel-tuiles .conteneur-actions {
     display: none;
   }
-  .tuile-presentation:first-of-type {
+  .carrousel-tuiles .tuile-presentation:first-of-type {
     margin-left: 0;
   }
-  .tuile-presentation:last-of-type {
+  .carrousel-tuiles .tuile-presentation:last-of-type {
     margin-right: 0;
   }
 }</style>

package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte

@@ -0,0 +1,57 @@
+<script>export let source;
+export let sourceSousTitres;
+export let imageDeCouverture = "";
+export let classe = "";
+</script>
+
+<video
+  controls
+  class={classe}
+  src={source}
+  poster={imageDeCouverture}
+>
+  <source src={source} type="video/mp4" />
+  <track
+      src={sourceSousTitres}
+      kind="captions"
+      srclang="fr"
+      label="Français"
+  />
+  Votre navigateur ne supporte pas la fonctionnalité de lecture de vidéos.
+</video>
+
+<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;
+  }
+}
+
+video {
+  width: 100%;
+  max-width: 792px;
+  max-height: 446px;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        source: string;
+        sourceSousTitres: string;
+        imageDeCouverture?: string;
+        classe?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LecteurVideoProps = typeof __propDef.props;
+export type LecteurVideoEvents = typeof __propDef.events;
+export type LecteurVideoSlots = typeof __propDef.slots;
+export default class LecteurVideo extends SvelteComponent<LecteurVideoProps, LecteurVideoEvents, LecteurVideoSlots> {
+}
+export {};

package/dist/lab/vitrines-produits/briques/Tuile.svelte

@@ -1,10 +1,10 @@
 <script>export let titre;
 export let illustration;
 export let contenu;
-export let classe = "";
+export let position = null;
 </script>
 
-<div class="tuile {classe ?? ''}">
+<div class="tuile {position ?? ''}">
   <div class="conteneur-image">
     <img src={illustration.lien} alt={illustration.alt} />
   </div>
@@ -12,35 +12,83 @@ export let classe = "";
   <span>{contenu}</span>
 </div>
 
-<style>
-  .tuile {
-    --couleur-texte: #000000;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    background: #fff;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    text-align: center;
-    color: var(--couleur-texte);
-    width: 384px;
-    min-width: 212px;
+<style>.visible-tablette {
+  display: none !important;
+}
+@media (min-width: 576px) {
+  .visible-tablette {
+    display: unset !important;
   }
+}
 
-  p {
-    margin: 0;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
+@media (min-width: 576px) {
+  .invisible-tablette {
+    display: none !important;
   }
+}
 
-  span {
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
+.visible-desktop {
+  display: none !important;
+}
+@media (min-width: 932px) {
+  .visible-desktop {
+    display: unset !important;
   }
-</style>
+}
+
+@media (min-width: 932px) {
+  .invisible-desktop {
+    display: none !important;
+  }
+}
+
+.tuile {
+  --couleur-texte: #000000;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  background: #fff;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--couleur-texte);
+  min-width: 212px;
+  box-sizing: border-box;
+  scroll-snap-align: center;
+  flex-shrink: 0;
+  width: calc(100vw - 60px);
+  max-width: 384px;
+}
+.tuile.premiere {
+  margin-left: var(--espacement);
+}
+@media (min-width: 1200px) {
+  .tuile.premiere {
+    margin-left: 0;
+  }
+}
+.tuile.derniere {
+  margin-right: var(--espacement);
+}
+@media (min-width: 1200px) {
+  .tuile.derniere {
+    margin-right: 0;
+  }
+}
+
+p {
+  margin: 0;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+span {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}</style>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         titre: string;
         illustration: Image;
         contenu: string;
-        classe?: string;
+        position?: "premiere" | "derniere" | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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