@lab-anssi/ui-kit 1.12.0 → 1.12.2

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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 CarrouselTuiles } from "./lab/vitrines-produits/briques/CarrouselTuiles/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";

package/dist/index.js

@@ -2,7 +2,7 @@ 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 CarrouselTuiles } from "./lab/vitrines-produits/briques/CarrouselTuiles/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";

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

@@ -45,7 +45,6 @@ section {
   box-sizing: border-box;
   text-align: left;
   color: white;
-  width: 100vw;
 }
 section.sans-marge-haute {
   padding-top: 0;

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

@@ -1,16 +1,17 @@
 <svelte:options
   customElement={{
-		tag: 'lab-anssi-brique-hero',
-		props: {
-      titre: { reflect: false, type: 'String', attribute: 'titre' },
-      soustitre: { reflect: false, type: 'String', attribute: 'soustitre' },
-			illustration: { reflect: false, type: 'Object', attribute: 'illustration' },
-      badge: { reflect: false, type: 'Boolean', attribute: 'badge' },
-			actiongauche: { reflect: false, type: 'Object', attribute: 'actiongauche' },
-			actiondroite: { reflect: false, type: 'Object', attribute: 'actiondroite' },
-			partenaires: { reflect: false, type: 'Array', attribute: 'partenaires' },
-		}
-	}} />
+    tag: "lab-anssi-brique-hero",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      soustitre: { reflect: false, type: "String", attribute: "soustitre" },
+      illustration: { reflect: false, type: "Object", attribute: "illustration" },
+      badge: { reflect: false, type: "Boolean", attribute: "badge" },
+      actiongauche: { reflect: false, type: "Object", attribute: "actiongauche" },
+      actiondroite: { reflect: false, type: "Object", attribute: "actiondroite" },
+      partenaires: { reflect: false, type: "Array", attribute: "partenaires" },
+    },
+  }}
+/>
 
 <script>import Brique from "./Brique.svelte";
 export let titre;
@@ -24,12 +25,12 @@ export let partenaires = [];
 
 <Brique>
   <div class="hero">
-    <div class="contenu">
+    <div class="contenu" class:sans-partenaires={!partenaires || partenaires.length === 0}>
       {#if badge}
         <div class="section-badge">
-            <div class="badge">
-              <span>Service à impact national</span>
-            </div>
+          <div class="badge">
+            <span>Service à impact national</span>
+          </div>
         </div>
       {/if}
       <div class="textes">
@@ -61,7 +62,6 @@ export let partenaires = [];
   </div>
 </Brique>
 
-
 <style>.visible-tablette {
   display: none !important;
 }
@@ -105,11 +105,15 @@ export let partenaires = [];
     column-gap: 24px;
     row-gap: 0px;
   }
+  .hero:has(.sans-partenaires) {
+    grid-template-areas: "contenu image" "contenu image";
+  }
 }
 .hero .contenu {
   grid-area: contenu;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 .hero .contenu .textes {
   display: flex;
@@ -163,10 +167,16 @@ export let partenaires = [];
 }
 .hero .image {
   grid-area: image;
+  display: flex;
+  justify-content: center;
 }
 .hero .image img {
   width: 100%;
-  max-height: 250px;
+}
+@media (min-width: 768px) {
+  .hero .image img {
+    max-width: 588px;
+  }
 }
 @media (min-width: 932px) {
   .hero .image img {
@@ -214,18 +224,18 @@ export let partenaires = [];
 .hero a[role=button].action-gauche {
   background-color: var(--brique-hero-bouton-gauche-background);
   color: var(--brique-hero-bouton-gauche-texte);
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
 }
 .hero a[role=button].action-gauche:active {
   background-color: var(--brique-hero-bouton-gauche-background-active);
   box-shadow: none;
-  border: none;
+  border: 1px solid transparent;
 }
 .hero a[role=button].action-gauche:hover {
   background-color: var(--brique-hero-bouton-gauche-background-hover);
   box-shadow: none;
-  border: none;
+  border: 1px solid transparent;
 }
 .hero a[role=button].action-droite {
   background-color: var(--brique-hero-bouton-droite-background);

package/dist/lab/vitrines-produits/briques/{CarrouselTuiles.svelte → CarrouselTuiles/CarrouselTuiles.svelte}

@@ -5,8 +5,10 @@
   }
 }} />
 
-<script>import Brique from "./Brique.svelte";
-import Tuile from "./Tuile.svelte";
+<script>import Brique from "../Brique.svelte";
+import Tuile from "../Tuile.svelte";
+import IconeFlecheGauche from "./IconeFlecheGauche.svelte";
+import IconeFlecheDroite from "./IconeFlecheDroite.svelte";
 export let tuiles = [];
 let elementCarrousel;
 const versDirection = (direction) => {
@@ -35,8 +37,14 @@ const suivant = () => versDirection(1);
       {/each}
     </div>
     <div class="conteneur-actions">
-      <button class="precedent" on:click={precedent}>Précédent</button>
-      <button class="suivant" on:click={suivant}>Suivant</button>
+      <button class="precedent" on:click={precedent}>
+        <span class="icone"><IconeFlecheGauche /></span>
+        Précédent
+      </button>
+      <button class="suivant" on:click={suivant}>
+        Suivant
+        <span class="icone"><IconeFlecheDroite /></span>
+      </button>
     </div>
   </Brique>
 </div>
@@ -106,7 +114,7 @@ const suivant = () => versDirection(1);
 .conteneur-actions button {
   background: none;
   border: none;
-  color: #000091;
+  color: var(--brique-carrousel-bouton-action-texte-couleur);
   font-size: 18px;
   font-weight: 400;
   line-height: 28px;
@@ -114,20 +122,12 @@ const suivant = () => versDirection(1);
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: Marianne;
 }
 
-.conteneur-actions .precedent:before,
-.conteneur-actions .suivant:after {
-  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche_gauche_bleue.svg");
+.conteneur-actions .precedent > .icone,
+.conteneur-actions .suivant > .icone {
   display: flex;
-  width: 24px;
-  height: 24px;
-  line-height: 28px;
-}
-
-.conteneur-actions .suivant:after {
-  transform: rotate(180deg);
+  align-items: center;
 }
 
 .conteneur-actions button:hover {

package/dist/lab/vitrines-produits/briques/{CarrouselTuiles.svelte.d.ts → CarrouselTuiles/CarrouselTuiles.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { Tuiles } from "../../../types.js";
+import type { Tuiles } from "../../../../types.js";
 declare const __propDef: {
     props: {
         tuiles?: Tuiles;

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

@@ -0,0 +1,41 @@
+<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="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z" fill="#042794"/>
+</svg>
+
+<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;
+  }
+}
+
+svg {
+  transform: rotate(180deg);
+}
+
+svg path {
+  fill: var(--brique-carrousel-bouton-action-texte-couleur);
+}</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconeFlecheDroiteProps */
+/** @typedef {typeof __propDef.events}  IconeFlecheDroiteEvents */
+/** @typedef {typeof __propDef.slots}  IconeFlecheDroiteSlots */
+export default class IconeFlecheDroite extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconeFlecheDroiteProps = typeof __propDef.props;
+export type IconeFlecheDroiteEvents = typeof __propDef.events;
+export type IconeFlecheDroiteSlots = 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/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte

@@ -0,0 +1,37 @@
+<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="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z" fill="#042794"/>
+</svg>
+
+<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;
+  }
+}
+
+svg path {
+  fill: var(--brique-carrousel-bouton-action-texte-couleur);
+}</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  IconeFlecheGaucheProps */
+/** @typedef {typeof __propDef.events}  IconeFlecheGaucheEvents */
+/** @typedef {typeof __propDef.slots}  IconeFlecheGaucheSlots */
+export default class IconeFlecheGauche extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconeFlecheGaucheProps = typeof __propDef.props;
+export type IconeFlecheGaucheEvents = typeof __propDef.events;
+export type IconeFlecheGaucheSlots = 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/vitrines-produits/briques/RejoindreLaCommunaute.svelte

@@ -31,13 +31,13 @@ export let illustration;
           <li>{raison}</li>
         {/each}
       </ul>
-      <div class="action">
-        {#if action}
-          <a role="button" href={action.lien} target="_blank">
-            {action.titre}
-          </a>
-        {/if}
-      </div>
+    </div>
+    <div class="action">
+      {#if action}
+        <a role="button" href={action.lien} target="_blank">
+          {action.titre}
+        </a>
+      {/if}
     </div>
   </div>
 </Brique>
@@ -75,13 +75,14 @@ export let illustration;
 .grille-contenu {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-areas: "illustration" "contenu";
-  gap: 32px;
+  grid-template-areas: "contenu" "illustration" "action";
+  row-gap: 32px;
 }
 @media (min-width: 932px) {
   .grille-contenu {
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: "illustration contenu";
+    grid-template-areas: "illustration contenu" "illustration action";
+    row-gap: 0;
     column-gap: 24px;
   }
 }
@@ -109,10 +110,10 @@ export let illustration;
   line-height: 1.5rem;
   margin: 0;
 }
-.grille-contenu .contenu .action {
-  margin-top: 32px;
+.grille-contenu .action {
+  grid-area: action;
 }
-.grille-contenu .contenu .action a[role=button] {
+.grille-contenu .action a[role=button] {
   display: flex;
   justify-content: center;
   text-decoration: none;
@@ -129,18 +130,18 @@ export let illustration;
   border: none;
   cursor: pointer;
 }
-.grille-contenu .contenu .action a[role=button]:active {
+.grille-contenu .action a[role=button]:active {
   background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-active);
   box-shadow: none;
   border: none;
 }
-.grille-contenu .contenu .action a[role=button]:hover {
+.grille-contenu .action a[role=button]:hover {
   background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-hover);
   box-shadow: none;
   border: none;
 }
 @media (min-width: 576px) {
-  .grille-contenu .contenu .action a[role=button] {
+  .grille-contenu .action a[role=button] {
     max-width: unset;
     width: fit-content;
   }
@@ -149,16 +150,20 @@ export let illustration;
   grid-area: illustration;
 }
 .grille-contenu .illustration img {
-  width: 100%;
-  max-height: 250px;
+  width: 204px;
+  height: 157px;
+  display: flex;
+  margin: 0 auto 0 auto;
 }
 @media (min-width: 576px) {
   .grille-contenu .illustration img {
-    max-height: none;
+    width: 364px;
+    height: 282px;
   }
 }
 @media (min-width: 932px) {
   .grille-contenu .illustration img {
-    max-height: 330px;
+    width: 364px;
+    height: 282px;
   }
 }</style>

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

@@ -1,9 +1,8 @@
 <script>export let index;
 export let etapeMarelle;
-const estPair = (index + 1) % 2 === 0;
 </script>
 
-<div class={`marelle-etape ${estPair ? 'pair' : 'impair'}`}>
+<div class="marelle-etape">
   <div class="illustration">
     <img src={etapeMarelle.illustration.lien} alt={etapeMarelle.illustration.alt} />
   </div>
@@ -16,7 +15,9 @@ const estPair = (index + 1) % 2 === 0;
     <h4>{etapeMarelle.titre}</h4>
     <p>{etapeMarelle.description}</p>
     {#if etapeMarelle.lien}
-      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}>{etapeMarelle.lien.texte}</a>
+      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}
+        >{etapeMarelle.lien.texte}</a
+      >
     {/if}
   </div>
 </div>
@@ -63,23 +64,25 @@ const estPair = (index + 1) % 2 === 0;
     column-gap: 24px;
     row-gap: 24px;
   }
-  .marelle-etape.pair {
+  .marelle-etape:nth-child(even) {
     grid-template-areas: "illustration numero-etape contenu";
   }
 }
-.marelle-etape.pair .numero-etape {
+.marelle-etape:nth-child(even) .numero-etape {
+  padding-right: 16px;
   justify-content: center;
 }
 @media (min-width: 932px) {
-  .marelle-etape.pair .numero-etape {
+  .marelle-etape:nth-child(even) .numero-etape {
     justify-content: end;
   }
 }
-.marelle-etape.impair .numero-etape {
+.marelle-etape:nth-child(odd) .numero-etape {
+  padding-left: 16px;
   justify-content: center;
 }
 @media (min-width: 932px) {
-  .marelle-etape.impair .numero-etape {
+  .marelle-etape:nth-child(odd) .numero-etape {
     justify-content: start;
   }
 }
@@ -107,7 +110,7 @@ const estPair = (index + 1) % 2 === 0;
   justify-content: center;
 }
 .marelle-etape .numero-etape .encart-rond span {
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 2rem;
   font-weight: bold;
 }

package/dist/lab/vitrines-produits/briques/temoignages/Temoignages.svelte

@@ -1,13 +1,17 @@
-<svelte:options customElement={{
-  tag: 'lab-anssi-temoignages',
-  props: {
-    titre: { reflect: false, type: 'String', attribute: 'titre' },
-    temoignages: { reflect: false, type: 'Array', attribute: 'temoignages' },
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-temoignages",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      temoignages: { reflect: false, type: "Array", attribute: "temoignages" },
+    },
+  }}
+/>
 
 <script>import Brique from "../Brique.svelte";
 import IconeTemoignage from "./IconeTemoignage.svelte";
+import IconeFlecheGauche from "../CarrouselTuiles/IconeFlecheGauche.svelte";
+import IconeFlecheDroite from "../CarrouselTuiles/IconeFlecheDroite.svelte";
 export let titre = "Les avis de nos utilisateurs";
 export let temoignages = [];
 let elementCarrousel;
@@ -31,16 +35,26 @@ const scrollVers = (direction) => {
         {#each temoignages as temoignage, idx (idx)}
           <div class="temoignage">
             <IconeTemoignage />
-            <h4>« {temoignage.citation} »</h4>
+            <h4>«&nbsp;{temoignage.citation}&nbsp;»</h4>
             <h5>{temoignage.auteur}</h5>
             <h6>{temoignage.source}</h6>
           </div>
         {/each}
       </div>
-      <div class="conteneur-actions">
-        <button class="precedent" type="button" on:click={() => scrollVers(Direction.GAUCHE)}>Précédent</button>
-        <button class="suivant" type="button" on:click={() => scrollVers(Direction.DROITE)}>Suivant</button>
-      </div>
+      {#if temoignages.length > 1}
+        <div class="conteneur-actions" class:deux-ou-moins={temoignages.length <= 2}>
+          <button class="precedent" type="button" on:click={() => scrollVers(Direction.GAUCHE)}
+            >
+          <span class="icone"><IconeFlecheGauche /></span>Précédent
+        </button
+          >
+          <button class="suivant" type="button" on:click={() => scrollVers(Direction.DROITE)}
+            >Suivant
+          <span class="icone"><IconeFlecheDroite /></span>
+        </button
+          >
+        </div>
+      {/if}
     </div>
   </div>
 </Brique>
@@ -96,8 +110,9 @@ const scrollVers = (direction) => {
   gap: 24px;
 }
 .brique-temoignages .carrousel-temoignages .conteneur-carrousel {
+  --gap-des-elements: 24px;
   display: flex;
-  gap: 24px;
+  gap: var(--gap-des-elements);
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -106,18 +121,10 @@ const scrollVers = (direction) => {
   -webkit-overflow-scrolling: touch;
   padding-bottom: 24px;
 }
-@media (min-width: 576px) {
-  .brique-temoignages .carrousel-temoignages .conteneur-carrousel {
-    display: flex;
-    flex-direction: row;
-  }
-}
 .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
   width: 100%;
-  box-sizing: border-box;
   flex-shrink: 0;
-  scroll-snap-align: center;
-  padding: 0 8px 0 8px;
+  scroll-snap-align: start;
   color: #161616;
   font-size: 1.25rem;
   font-style: normal;
@@ -138,13 +145,15 @@ const scrollVers = (direction) => {
     border-bottom: none;
   }
 }
+@media (min-width: 768px) {
+  .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
+    width: calc(50% - var(--gap-des-elements));
+  }
+}
 @media (min-width: 932px) {
   .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
-    min-width: 388px;
-    width: 388px;
-    scroll-snap-align: start;
     padding-left: 32px;
-    padding-right: 0;
+    box-sizing: border-box;
     border-left: 1px solid #dddddd;
   }
 }
@@ -182,10 +191,15 @@ const scrollVers = (direction) => {
   justify-content: center;
   gap: 24px;
 }
+@media (min-width: 768px) {
+  .brique-temoignages .carrousel-temoignages .conteneur-actions.deux-ou-moins {
+    display: none;
+  }
+}
 .brique-temoignages .carrousel-temoignages .conteneur-actions button {
   background: none;
   border: none;
-  color: #000091;
+  color: var(--brique-carrousel-bouton-action-texte-couleur);
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.75rem;
@@ -193,18 +207,11 @@ const scrollVers = (direction) => {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: Marianne;
 }
-.brique-temoignages .carrousel-temoignages .conteneur-actions .precedent:before,
-.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant:after {
-  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche_gauche_bleue.svg");
+.brique-temoignages .carrousel-temoignages .conteneur-actions .precedent > .icone,
+.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant > .icone {
   display: flex;
-  width: 24px;
-  height: 24px;
-  line-height: 1.75rem;
-}
-.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant:after {
-  transform: rotate(180deg);
+  align-items: center;
 }
 .brique-temoignages .carrousel-temoignages .conteneur-actions button:hover {
   text-decoration: underline;