@lab-anssi/ui-kit 1.11.0 → 1.12.1

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

@@ -0,0 +1,158 @@
+<svelte:options
+  customElement={{
+		tag: 'lab-anssi-presentation-anssi',
+	}} />
+
+<script>import Brique from "./Brique.svelte";
+import { srcAsset } from "../../../assets/assets.js";
+</script>
+
+<Brique variation="transparent">
+  <div class="presentation-anssi">
+    <div class="logo-anssi">
+      <img src={srcAsset("/illustrations/logo-anssi.svg")} alt="Logo de l'ANSSI" />
+    </div>
+    <div class="contenu">
+      <h2>Qu'est ce que l'ANSSI ?</h2>
+      <p>
+        Créée en 2009, l’Agence nationale de la sécurité des systèmes d’information (ANSSI) est l’autorité nationale en matière de cybersécurité et de cyberdéfense.
+        <br />
+        <br />
+        <b>
+          Son action pour la protection de la Nation face aux cyberattaques se traduit en quatre grandes missions : défendre, connaître, partager, accompagner.
+        </b>
+      </p>
+    </div>
+    <div class="encart-action">
+      <a class="action" role="button" href="https://cyber.gouv.fr/" target="_blank">En savoir plus</a>
+    </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;
+  }
+}
+
+.presentation-anssi {
+  color: #3a3a3a;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "logo-anssi" "contenu" "encart-action";
+  row-gap: 24px;
+  padding: 16px 16px;
+}
+@media (min-width: 932px) {
+  .presentation-anssi {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "contenu logo-anssi" "encart-action logo-anssi";
+  }
+}
+.presentation-anssi .logo-anssi {
+  grid-area: logo-anssi;
+  display: flex;
+  justify-content: center;
+}
+@media (min-width: 932px) {
+  .presentation-anssi .logo-anssi {
+    align-items: center;
+  }
+}
+.presentation-anssi .logo-anssi img {
+  max-width: 140px;
+  max-height: 140px;
+}
+.presentation-anssi .contenu {
+  text-align: center;
+  grid-area: contenu;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+@media (min-width: 932px) {
+  .presentation-anssi .contenu {
+    text-align: start;
+    align-items: start;
+  }
+}
+.presentation-anssi .contenu h2 {
+  color: var(--brique-presentation-anssi-titre-couleur);
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.25rem;
+  margin: 0;
+}
+.presentation-anssi .contenu p {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin: 0;
+}
+.presentation-anssi .encart-action {
+  grid-area: encart-action;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+@media (min-width: 932px) {
+  .presentation-anssi .encart-action {
+    justify-content: start;
+  }
+}
+.presentation-anssi .encart-action a[role=button] {
+  width: 100%;
+  text-decoration: none;
+  font-family: Marianne, sans-serif;
+  padding: 8px 16px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 24px;
+  border-radius: 4px;
+}
+@media (min-width: 576px) {
+  .presentation-anssi .encart-action a[role=button] {
+    width: fit-content;
+  }
+}
+.presentation-anssi .encart-action a[role=button].action {
+  background-color: var(--brique-presentation-anssi-bouton-background);
+  color: var(--brique-presentation-anssi-bouton-texte);
+  border: 1px solid var(--brique-presentation-anssi-bouton-texte);
+  cursor: pointer;
+}
+.presentation-anssi .encart-action a[role=button].action:active {
+  background-color: var(--brique-presentation-anssi-bouton-background-active);
+}
+.presentation-anssi .encart-action a[role=button].action:hover {
+  background-color: var(--brique-presentation-anssi-bouton-background-hover);
+}</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PresentationAnssiProps = typeof __propDef.props;
+export type PresentationAnssiEvents = typeof __propDef.events;
+export type PresentationAnssiSlots = typeof __propDef.slots;
+export default class PresentationAnssi extends SvelteComponent<PresentationAnssiProps, PresentationAnssiEvents, PresentationAnssiSlots> {
+}
+export {};

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

@@ -0,0 +1,169 @@
+<svelte:options
+  customElement={{
+		tag: 'lab-anssi-brique-rejoindre-la-communaute',
+		props: {
+      titre: { reflect: false, type: 'String', attribute: 'titre' },
+      raisons: { reflect: false, type: 'Array', attribute: 'raisons' },
+			action: { reflect: false, type: 'Object', attribute: 'action' },
+      illustration: { reflect: false, type: 'Object', attribute: 'illustration' }
+		}
+	}} />
+
+<script>import Brique from "./Brique.svelte";
+export let titre;
+export let raisons;
+export let action = void 0;
+export let illustration;
+</script>
+
+<Brique variation="primaire">
+  <div class="grille-contenu">
+    <div class="illustration">
+      <img src={illustration.lien} alt={illustration.alt} />
+    </div>
+    <div class="contenu">
+      <h2>{titre}</h2>
+      <p>
+        En tant que <b>membre de la communauté</b>, vous pourrez :
+      </p>
+      <ul>
+        {#each raisons as raison, idx (idx)}
+          <li>{raison}</li>
+        {/each}
+      </ul>
+    </div>
+    <div class="action">
+      {#if action}
+        <a role="button" href={action.lien} target="_blank">
+          {action.titre}
+        </a>
+      {/if}
+    </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;
+  }
+}
+
+.grille-contenu {
+  display: grid;
+  grid-template-columns: 1fr;
+  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" "illustration action";
+    row-gap: 0;
+    column-gap: 24px;
+  }
+}
+.grille-contenu .contenu {
+  grid-area: contenu;
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
+@media (min-width: 932px) {
+  .grille-contenu .contenu {
+    justify-content: center;
+  }
+}
+.grille-contenu .contenu h2 {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  word-break: break-word;
+  margin: 0;
+}
+.grille-contenu .contenu p {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin: 0;
+}
+.grille-contenu .action {
+  grid-area: action;
+}
+.grille-contenu .action a[role=button] {
+  display: flex;
+  justify-content: center;
+  text-decoration: none;
+  font-family: Marianne, sans-serif;
+  padding: 8px 16px;
+  max-width: 100%;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 24px;
+  border-radius: 4px;
+  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background);
+  color: var(--brique-contenu-deux-colonnes-action-bouton-texte);
+  border: none;
+  cursor: pointer;
+}
+.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 .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 .action a[role=button] {
+    max-width: unset;
+    width: fit-content;
+  }
+}
+.grille-contenu .illustration {
+  grid-area: illustration;
+}
+.grille-contenu .illustration img {
+  width: 204px;
+  height: 157px;
+  display: flex;
+  margin: 0 auto 0 auto;
+}
+@media (min-width: 576px) {
+  .grille-contenu .illustration img {
+    width: 364px;
+    height: 282px;
+  }
+}
+@media (min-width: 932px) {
+  .grille-contenu .illustration img {
+    width: 364px;
+    height: 282px;
+  }
+}</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Action, Image } from "../../../types";
+declare const __propDef: {
+    props: {
+        titre: string;
+        raisons: string[];
+        action?: Action | undefined;
+        illustration: Image;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RejoindreLaCommunauteProps = typeof __propDef.props;
+export type RejoindreLaCommunauteEvents = typeof __propDef.events;
+export type RejoindreLaCommunauteSlots = typeof __propDef.slots;
+export default class RejoindreLaCommunaute extends SvelteComponent<RejoindreLaCommunauteProps, RejoindreLaCommunauteEvents, RejoindreLaCommunauteSlots> {
+}
+export {};

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;