@lab-anssi/ui-kit 1.12.0 → 1.12.1

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