@lab-anssi/ui-kit 1.12.2 → 1.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +1 -0
  2. package/dist/CentreAide.svelte +13 -6
  3. package/dist/generateurImagesPlaceholders.js +1 -1
  4. package/dist/lab/ResumePssi.svelte +43 -73
  5. package/dist/lab/icones/LienExterne.svelte +20 -0
  6. package/dist/lab/icones/LienExterne.svelte.d.ts +18 -0
  7. package/dist/lab/vitrines-produits/briques/Brique.svelte +6 -2
  8. package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte +11 -10
  9. package/dist/lab/vitrines-produits/briques/BriqueHero.svelte +23 -2
  10. package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte +8 -6
  11. package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte +9 -9
  12. package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheDroite.svelte +7 -2
  13. package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte +7 -2
  14. package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte +3 -13
  15. package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte +15 -6
  16. package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte +10 -9
  17. package/dist/lab/vitrines-produits/briques/Tuile.svelte +12 -2
  18. package/dist/lab/vitrines-produits/briques/marelle/Etape.svelte +14 -8
  19. package/dist/lab/vitrines-produits/briques/marelle/Marelle.svelte +21 -10
  20. package/dist/lab/vitrines-produits/briques/temoignages/IconeTemoignage.svelte +8 -2
  21. package/dist/lab/vitrines-produits/briques/temoignages/Temoignages.svelte +6 -11
  22. package/dist/pied-de-page/NavigationPiedDePage.svelte +1 -3
  23. package/dist/types.d.ts +2 -1
  24. package/dist/webcomponents/lab-anssi-ui-kit.iife.js +42 -46
  25. package/package.json +8 -2
@@ -1,14 +1,17 @@
1
- <svelte:options customElement={{
2
- tag: 'lab-anssi-marelle',
3
- props: {
4
- titre: { reflect: false, type: 'String', attribute: 'titre' },
5
- etapesmarelle: { reflect: false, type: 'Array', attribute: 'etapesmarelle' },
6
- action: { reflect: false, type: 'Object', attribute: 'action' }
7
- }
8
- }} />
1
+ <svelte:options
2
+ customElement={{
3
+ tag: "lab-anssi-marelle",
4
+ props: {
5
+ titre: { reflect: false, type: "String", attribute: "titre" },
6
+ etapesmarelle: { reflect: false, type: "Array", attribute: "etapesmarelle" },
7
+ action: { reflect: false, type: "Object", attribute: "action" },
8
+ },
9
+ }}
10
+ />
9
11
 
10
12
  <script>import Brique from "../Brique.svelte";
11
13
  import Etape from "./Etape.svelte";
14
+ import LienExterne from "../../../icones/LienExterne.svelte";
12
15
  export let titre = "";
13
16
  export let etapesmarelle = [];
14
17
  export let action;
@@ -19,12 +22,17 @@ export let action;
19
22
  <div class="titre">{titre}</div>
20
23
  <section class="marelle-etapes">
21
24
  {#each etapesmarelle as etapeMarelle, index}
22
- <Etape index={index} etapeMarelle={etapeMarelle} />
25
+ <Etape {index} {etapeMarelle} />
23
26
  {/each}
24
27
  </section>
25
28
  {#if action}
26
29
  <div class="bouton-action">
27
- <a role="button" class="action" href={action.lien} target="_blank">{action.titre}</a>
30
+ <a role="button" class="action" href={action.lien} target={action.target}>
31
+ {action.titre}
32
+ {#if action.target === "_blank"}
33
+ <LienExterne />
34
+ {/if}
35
+ </a>
28
36
  </div>
29
37
  {/if}
30
38
  </div>
@@ -97,6 +105,9 @@ export let action;
97
105
  text-decoration: none;
98
106
  font-family: Marianne, sans-serif;
99
107
  padding: 8px 16px;
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 8px;
100
111
  text-align: center;
101
112
  font-weight: 500;
102
113
  font-size: 1rem;
@@ -1,8 +1,14 @@
1
1
  <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
2
2
  <g>
3
3
  <g>
4
- <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"/>
5
- <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"/>
4
+ <path
5
+ 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"
6
+ fill="#FFFFFF"
7
+ />
8
+ <path
9
+ 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"
10
+ fill="#FFFFFF"
11
+ />
6
12
  </g>
7
13
  </g>
8
14
  </svg>
@@ -43,16 +43,13 @@ const scrollVers = (direction) => {
43
43
  </div>
44
44
  {#if temoignages.length > 1}
45
45
  <div class="conteneur-actions" class:deux-ou-moins={temoignages.length <= 2}>
46
- <button class="precedent" type="button" on:click={() => scrollVers(Direction.GAUCHE)}
47
- >
48
- <span class="icone"><IconeFlecheGauche /></span>Précédent
49
- </button
50
- >
46
+ <button class="precedent" type="button" on:click={() => scrollVers(Direction.GAUCHE)}>
47
+ <span class="icone"><IconeFlecheGauche /></span>Précédent
48
+ </button>
51
49
  <button class="suivant" type="button" on:click={() => scrollVers(Direction.DROITE)}
52
50
  >Suivant
53
- <span class="icone"><IconeFlecheDroite /></span>
54
- </button
55
- >
51
+ <span class="icone"><IconeFlecheDroite /></span>
52
+ </button>
56
53
  </div>
57
54
  {/if}
58
55
  </div>
@@ -214,7 +211,5 @@ const scrollVers = (direction) => {
214
211
  align-items: center;
215
212
  }
216
213
  .brique-temoignages .carrousel-temoignages .conteneur-actions button:hover {
217
- text-decoration: underline;
218
- text-underline-offset: 4px;
219
- text-decoration-thickness: 2px;
214
+ box-shadow: inset 0 -2px 0 var(--brique-carrousel-bouton-action-texte-couleur);
220
215
  }</style>
@@ -16,9 +16,7 @@
16
16
  <div class="separateur"></div>
17
17
  <a href="/securite">Sécurité</a>
18
18
  <div class="separateur"></div>
19
- <a href="/accessibilite"
20
- >Accessiblité: {conforme ? "conforme" : "non conforme"}</a
21
- >
19
+ <a href="/accessibilite">Accessiblité: {conforme ? "conforme" : "non conforme"}</a>
22
20
  </div>
23
21
 
24
22
  <style>.visible-tablette {
package/dist/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export type Video = {
10
10
  export type Action = {
11
11
  titre: string;
12
12
  lien: string;
13
+ target?: "_self" | "_blank" | "_parent" | "_top";
13
14
  };
14
15
  export type Tuiles = {
15
16
  titre: string;
@@ -22,7 +23,7 @@ export type EtapeMarelle = {
22
23
  lien?: {
23
24
  href: string;
24
25
  texte: string;
25
- target: string;
26
+ target: "_self" | "_blank" | "_parent" | "_top";
26
27
  };
27
28
  illustration: Image;
28
29
  };