@lab-anssi/ui-kit 1.12.2 → 1.12.4

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

@@ -1,14 +1,17 @@
-<svelte:options customElement={{
-  tag: 'lab-anssi-marelle',
-  props: {
-    titre: { reflect: false, type: 'String', attribute: 'titre' },
-    etapesmarelle: { reflect: false, type: 'Array', attribute: 'etapesmarelle' },
-    action: { reflect: false, type: 'Object', attribute: 'action' }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-marelle",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      etapesmarelle: { reflect: false, type: "Array", attribute: "etapesmarelle" },
+      action: { reflect: false, type: "Object", attribute: "action" },
+    },
+  }}
+/>
 
 <script>import Brique from "../Brique.svelte";
 import Etape from "./Etape.svelte";
+import LienExterne from "../../../icones/LienExterne.svelte";
 export let titre = "";
 export let etapesmarelle = [];
 export let action;
@@ -19,12 +22,17 @@ export let action;
     <div class="titre">{titre}</div>
     <section class="marelle-etapes">
       {#each etapesmarelle as etapeMarelle, index}
-        <Etape index={index} etapeMarelle={etapeMarelle} />
+        <Etape {index} {etapeMarelle} />
       {/each}
     </section>
     {#if action}
       <div class="bouton-action">
-        <a role="button" class="action" href={action.lien} target="_blank">{action.titre}</a>
+        <a role="button" class="action" href={action.lien} target={action.target}>
+          {action.titre}
+          {#if action.target === "_blank"}
+            <LienExterne />
+          {/if}
+        </a>
       </div>
     {/if}
   </div>
@@ -97,6 +105,9 @@ export let action;
   text-decoration: none;
   font-family: Marianne, sans-serif;
   padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   text-align: center;
   font-weight: 500;
   font-size: 1rem;

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

@@ -1,8 +1,14 @@
 <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g>
     <g>
-      <path d="M13.3327 4.625H18.666C21.495 4.625 24.2081 5.74881 26.2085 7.74919C28.2089 9.74958 29.3327 12.4627 29.3327 15.2917C29.3327 18.1206 28.2089 20.8338 26.2085 22.8341C24.2081 24.8345 21.495 25.9583 18.666 25.9583V30.625C11.9993 27.9583 2.66602 23.9583 2.66602 15.2917C2.66602 12.4627 3.78982 9.74958 5.79021 7.74919C7.7906 5.74881 10.5037 4.625 13.3327 4.625ZM15.9993 23.2917H18.666C19.7166 23.2917 20.7569 23.0847 21.7275 22.6827C22.6981 22.2807 23.58 21.6914 24.3229 20.9485C25.0657 20.2057 25.655 19.3237 26.0571 18.3531C26.4591 17.3825 26.666 16.3422 26.666 15.2917C26.666 14.2411 26.4591 13.2008 26.0571 12.2302C25.655 11.2596 25.0657 10.3777 24.3229 9.63481C23.58 8.89194 22.6981 8.30267 21.7275 7.90063C20.7569 7.49859 19.7166 7.29167 18.666 7.29167H13.3327C11.211 7.29167 9.17612 8.13452 7.67583 9.63481C6.17554 11.1351 5.33268 13.1699 5.33268 15.2917C5.33268 20.105 8.61535 23.2463 15.9993 26.5983V23.2917Z" fill="#FFFFFF"/>
-      <path d="M15.5993 19.9583L12.7357 15.2917L15.5993 10.625H12.5084L9.59935 15.2917L12.5084 19.9583H15.5993ZM21.5993 19.9583L18.7357 15.2917L21.5993 10.625H18.5084L15.5993 15.2917L18.5084 19.9583H21.5993Z" fill="#FFFFFF"/>
+      <path
+        d="M13.3327 4.625H18.666C21.495 4.625 24.2081 5.74881 26.2085 7.74919C28.2089 9.74958 29.3327 12.4627 29.3327 15.2917C29.3327 18.1206 28.2089 20.8338 26.2085 22.8341C24.2081 24.8345 21.495 25.9583 18.666 25.9583V30.625C11.9993 27.9583 2.66602 23.9583 2.66602 15.2917C2.66602 12.4627 3.78982 9.74958 5.79021 7.74919C7.7906 5.74881 10.5037 4.625 13.3327 4.625ZM15.9993 23.2917H18.666C19.7166 23.2917 20.7569 23.0847 21.7275 22.6827C22.6981 22.2807 23.58 21.6914 24.3229 20.9485C25.0657 20.2057 25.655 19.3237 26.0571 18.3531C26.4591 17.3825 26.666 16.3422 26.666 15.2917C26.666 14.2411 26.4591 13.2008 26.0571 12.2302C25.655 11.2596 25.0657 10.3777 24.3229 9.63481C23.58 8.89194 22.6981 8.30267 21.7275 7.90063C20.7569 7.49859 19.7166 7.29167 18.666 7.29167H13.3327C11.211 7.29167 9.17612 8.13452 7.67583 9.63481C6.17554 11.1351 5.33268 13.1699 5.33268 15.2917C5.33268 20.105 8.61535 23.2463 15.9993 26.5983V23.2917Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M15.5993 19.9583L12.7357 15.2917L15.5993 10.625H12.5084L9.59935 15.2917L12.5084 19.9583H15.5993ZM21.5993 19.9583L18.7357 15.2917L21.5993 10.625H18.5084L15.5993 15.2917L18.5084 19.9583H21.5993Z"
+        fill="#FFFFFF"
+      />
     </g>
   </g>
 </svg>

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

@@ -43,16 +43,13 @@ const scrollVers = (direction) => {
       </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="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
-          >
+            <span class="icone"><IconeFlecheDroite /></span>
+          </button>
         </div>
       {/if}
     </div>
@@ -200,13 +197,14 @@ const scrollVers = (direction) => {
   background: none;
   border: none;
   color: var(--brique-carrousel-bouton-action-texte-couleur);
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 1.75rem;
+  line-height: 1.5rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
+  box-shadow: inset 0 -1px 0 var(--brique-carrousel-bouton-action-texte-couleur);
 }
 .brique-temoignages .carrousel-temoignages .conteneur-actions .precedent > .icone,
 .brique-temoignages .carrousel-temoignages .conteneur-actions .suivant > .icone {
@@ -214,7 +212,5 @@ const scrollVers = (direction) => {
   align-items: center;
 }
 .brique-temoignages .carrousel-temoignages .conteneur-actions button:hover {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 2px;
+  box-shadow: inset 0 -2px 0 var(--brique-carrousel-bouton-action-texte-couleur);
 }</style>

package/dist/pied-de-page/NavigationPiedDePage.svelte

@@ -16,9 +16,7 @@
   <div class="separateur"></div>
   <a href="/securite">Sécurité</a>
   <div class="separateur"></div>
-  <a href="/accessibilite"
-    >Accessiblité: {conforme ? "conforme" : "non conforme"}</a
-  >
+  <a href="/accessibilite">Accessiblité: {conforme ? "conforme" : "non conforme"}</a>
 </div>
 
 <style>.visible-tablette {

package/dist/types.d.ts

@@ -10,6 +10,7 @@ export type Video = {
 export type Action = {
     titre: string;
     lien: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
 };
 export type Tuiles = {
     titre: string;
@@ -22,7 +23,7 @@ export type EtapeMarelle = {
     lien?: {
         href: string;
         texte: string;
-        target: string;
+        target: "_self" | "_blank" | "_parent" | "_top";
     };
     illustration: Image;
 };