@lab-anssi/ui-kit 1.61.2 → 1.62.0

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

@@ -0,0 +1,246 @@
+<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" },
+    },
+  }}
+/>
+
+<script lang="ts">import Brique from "./Brique.svelte";
+import LienExterne from "../../icones/LienExterne.svelte";
+let { titre = undefined, soustitre = undefined, illustration, badge = false, actiongauche, actiondroite, partenaires = [] } = $props();
+</script>
+
+<Brique>
+  <div class="hero">
+    <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>
+      {/if}
+      <div class="textes">
+        <slot name="titre"><h1>{titre}</h1></slot>
+        <slot name="soustitre"><p>{soustitre}</p></slot>
+      </div>
+      <div class="actions">
+        <a
+          role="button"
+          class="action-gauche"
+          href={actiongauche.lien}
+          target={actiongauche.target ?? "_self"}
+        >
+          {actiongauche.titre}
+          {#if actiongauche.target === "_blank"}
+            <LienExterne />
+          {/if}
+        </a>
+        <a
+          role="button"
+          class="action-droite"
+          href={actiondroite.lien}
+          target={actiondroite.target ?? "_self"}
+        >
+          {actiondroite.titre}
+          {#if actiondroite.target === "_blank"}
+            <LienExterne />
+          {/if}
+        </a>
+      </div>
+    </div>
+    <div class="image">
+      <img src={illustration.lien} alt={illustration.alt} />
+    </div>
+    {#if partenaires && partenaires.length > 0}
+      <div class="partenaires">
+        <p>Une innovation ANSSI conçue pour durer en collaboration avec :</p>
+        <div class="liste">
+          {#each partenaires as partenaire (partenaire.lien)}
+            <img src={partenaire.lien} alt={partenaire.alt} />
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+</Brique>
+
+<style>.hero {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "contenu" "image" "partenaires";
+  gap: 32px;
+}
+@media (min-width: 932px) {
+  .hero {
+    grid-template-areas: "contenu image" "partenaires image";
+  }
+  .hero:has(:global(.sans-partenaires)) {
+    grid-template-areas: "contenu image" "contenu image";
+  }
+  .hero {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 24px;
+    row-gap: 0px;
+  }
+}
+.hero .contenu {
+  grid-area: contenu;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.hero .contenu .textes {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+.hero .contenu .section-badge {
+  margin-bottom: 8px;
+}
+.hero .contenu .section-badge .badge {
+  text-align: left;
+  background: #defbe5;
+  color: #18753c;
+  text-transform: uppercase;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  border-radius: 4px;
+  width: fit-content;
+  margin-bottom: 4px;
+}
+.hero .contenu .section-badge .badge span {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+}
+.hero .contenu .section-badge .badge span:before {
+  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/succes.svg");
+  display: flex;
+  width: 16px;
+  height: 16px;
+}
+.hero .contenu .actions {
+  grid-area: actions;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+@media (min-width: 576px) {
+  .hero .contenu .actions {
+    flex-direction: row;
+  }
+}
+@media (min-width: 576px) {
+  .hero .contenu {
+    margin-bottom: 32px;
+  }
+}
+.hero .image {
+  grid-area: image;
+  display: flex;
+  justify-content: center;
+}
+.hero .image img {
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .hero .image img {
+    max-width: 588px;
+  }
+}
+@media (min-width: 932px) {
+  .hero .image img {
+    max-height: 355px;
+  }
+}
+.hero .partenaires {
+  grid-area: partenaires;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.hero .partenaires p {
+  font-size: 14px;
+}
+.hero .partenaires .liste {
+  display: flex;
+  gap: 8px;
+}
+.hero .partenaires .liste img {
+  width: 79px;
+  height: 24px;
+}
+.hero h1,
+.hero :global(::slotted([slot="titre"])) {
+  font-size: 40px;
+  margin: 0;
+  line-height: 48px;
+  word-break: break-word;
+}
+@media (min-width: 576px) {
+  .hero h1,
+  .hero :global(::slotted([slot="titre"])) {
+    font-size: 48px;
+  }
+}
+.hero a[role=button] {
+  text-decoration: none;
+  padding: 8px 16px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 24px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+.hero a[role=button].action-gauche {
+  background-color: var(--brique-hero-bouton-gauche-background);
+  color: var(--brique-hero-bouton-gauche-texte);
+  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: 1px solid transparent;
+}
+.hero a[role=button].action-gauche:hover {
+  background-color: var(--brique-hero-bouton-gauche-background-hover);
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+.hero a[role=button].action-droite {
+  background-color: var(--brique-hero-bouton-droite-background);
+  color: var(--brique-hero-bouton-droite-texte);
+  border: 1px solid var(--brique-hero-bouton-droite-texte);
+  cursor: pointer;
+}
+.hero a[role=button].action-droite:active {
+  background-color: var(--brique-hero-bouton-droite-background-active);
+}
+.hero a[role=button].action-droite:hover {
+  background-color: var(--brique-hero-bouton-droite-background-hover);
+}
+.hero p,
+.hero :global(::slotted([slot="soustitre"])) {
+  margin: 0;
+  font-size: 20px;
+  line-height: 32px;
+}</style>

package/dist/composants/vitrines-produits/briques/BriqueHero.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Action, Image } from "../../../types";
+interface Props {
+    titre?: string;
+    soustitre?: string;
+    illustration: Image;
+    badge?: boolean;
+    actiongauche: Action;
+    actiondroite: Action;
+    partenaires?: Image[];
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BriqueHero: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    titre: {};
+    soustitre: {};
+}, {}, "">;
+type BriqueHero = InstanceType<typeof BriqueHero>;
+export default BriqueHero;

package/dist/composants/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -0,0 +1,50 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-titre-multimedia",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      multimedia: { reflect: false, type: "Object", attribute: "multimedia" },
+    },
+  }}
+/>
+
+<script lang="ts">import Brique from "./Brique.svelte";
+import LecteurVideo from "./LecteurVideo.svelte";
+let { titre = undefined, multimedia } = $props();
+</script>
+
+<Brique variation="transparent">
+  <div class="bloc-multimedia">
+    <slot name="titre"><h2>{titre}</h2></slot>
+    <div>
+      <LecteurVideo
+        source={multimedia.source}
+        sourceSousTitres={multimedia.sourcesoustitres ?? ""}
+        imageDeCouverture={multimedia.imagedecouverture}
+      />
+    </div>
+  </div>
+</Brique>
+
+<style>.bloc-multimedia {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+.bloc-multimedia h2,
+.bloc-multimedia :global(::slotted([slot="titre"])) {
+  color: var(--titre-couleur-primaire);
+  font-size: 28px;
+  line-height: 36px;
+  margin: 0;
+  text-align: center;
+  font-weight: bold;
+}
+@media (min-width: 932px) {
+  .bloc-multimedia h2,
+  .bloc-multimedia :global(::slotted([slot="titre"])) {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}</style>

package/dist/composants/vitrines-produits/briques/BriqueTitreMultimedia.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Video } from "../../../types";
+interface Props {
+    titre?: string;
+    multimedia: Video;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BriqueTitreMultimedia: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    titre: {};
+}, {}, "">;
+type BriqueTitreMultimedia = InstanceType<typeof BriqueTitreMultimedia>;
+export default BriqueTitreMultimedia;

package/dist/composants/vitrines-produits/briques/LecteurVideo.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">let { source, sourceSousTitres, imageDeCouverture = "", classe = "" } = $props();
+</script>
+
+<video controls class={classe} src={source} poster={imageDeCouverture}>
+  <source src={source} type="video/mp4" />
+  <track src={sourceSousTitres} kind="captions" srclang="fr" label="Français" />
+  Votre navigateur ne supporte pas la fonctionnalité de lecture de vidéos.
+</video>
+
+<style>video {
+  width: 100%;
+  max-width: 792px;
+  max-height: 446px;
+}</style>

package/dist/composants/vitrines-produits/briques/LecteurVideo.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    source: string;
+    sourceSousTitres: string;
+    imageDeCouverture?: string;
+    classe?: string;
+}
+declare const LecteurVideo: import("svelte").Component<Props, {}, "">;
+type LecteurVideo = ReturnType<typeof LecteurVideo>;
+export default LecteurVideo;

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

@@ -0,0 +1,148 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-presentation-anssi",
+    props: {
+      titre: { attribute: "titre", type: "String" },
+      labelBouton: { attribute: "label-bouton", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { srcAsset } from "../../../assets/assets.js";
+import { setThemeable } from "../../../utilitaires";
+import DsfrButton from "../../../dsfr/DsfrButton.svelte";
+import DsfrContainer from "../../../dsfr/DsfrContainer.svelte";
+const { titre = "Qu'est-ce que l'ANSSI ?", labelBouton = "En savoir plus" } = $props();
+setThemeable($host());
+</script>
+
+<section class="presentation-anssi">
+  <DsfrContainer>
+    <div class="presentation-anssi__conteneur">
+      <figure class="presentation-anssi__visuel">
+        <img
+          src={srcAsset("/illustrations/logo-anssi.svg")}
+          alt="Logo de l'ANSSI"
+          class="presentation-anssi__logo"
+        />
+      </figure>
+
+      <div class="presentation-anssi__contenu">
+        <slot name="titre"><h2 class="presentation-anssi__titre">{titre}</h2></slot>
+        <div class="presentation-anssi__description">
+          <slot>
+            <p>
+              Créée en 2009, l'Agence nationale de la sécurité des systèmes d'information (<abbr
+                >ANSSI</abbr
+              >) est l'autorité nationale en matière de cybersécurité et de cyberdéfense.
+            </p>
+            <p>
+              <strong>
+                Son action pour la protection de la Nation face aux cyberattaques se traduit en cinq
+                grandes missions : défendre, connaître, partager, accompagner, réguler.
+              </strong>
+            </p>
+          </slot>
+        </div>
+        <slot name="lien">
+          <DsfrButton
+            class="presentation-anssi__bouton"
+            label={labelBouton}
+            kind="secondary"
+            markup="a"
+            href="https://cyber.gouv.fr/"
+            target="_blank"
+            rel="noopener noreferrer"
+          />
+        </slot>
+      </div>
+    </div>
+  </DsfrContainer>
+</section>
+
+<style>*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.presentation-anssi {
+  color: var(--text-default-grey);
+  padding: var(--padding-section, 4.5rem 0);
+}
+.presentation-anssi__conteneur {
+  --colonnes-gap: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--colonnes-gap);
+}
+@media (min-width: 992px) {
+  .presentation-anssi__conteneur {
+    --colonnes-gap: 0;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 992px) {
+  .presentation-anssi__visuel, .presentation-anssi__contenu {
+    flex: 0 0 var(--colonne-taille);
+    max-width: var(--colonne-taille);
+    width: var(--colonne-taille);
+  }
+}
+.presentation-anssi__contenu {
+  --colonne-taille: calc(800% / 12);
+  padding-block-end: 1rem;
+  text-align: center;
+}
+@media (min-width: 992px) {
+  .presentation-anssi__contenu {
+    text-align: left;
+  }
+}
+.presentation-anssi__titre,
+.presentation-anssi :global(::slotted([slot="titre"])) {
+  color: var(--presentation-anssi-couleur-titre, var(--text-title-grey));
+  margin: 0 auto 1rem;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+}
+@media (min-width: 992px) {
+  .presentation-anssi__titre,
+  .presentation-anssi :global(::slotted([slot="titre"])) {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+.presentation-anssi__description {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-block-end: 1.5rem;
+}
+.presentation-anssi abbr {
+  text-decoration: none;
+}
+.presentation-anssi p:first-of-type {
+  margin-block-start: 0;
+}
+.presentation-anssi p:last-of-type {
+  margin-block-end: 0;
+}
+.presentation-anssi__visuel {
+  --colonne-taille: calc(400% / 12);
+}
+@media (min-width: 992px) {
+  .presentation-anssi__visuel {
+    order: 1;
+  }
+}
+.presentation-anssi__visuel, .presentation-anssi__logo {
+  margin: 0 auto;
+}
+.presentation-anssi__logo {
+  display: block;
+  height: auto;
+  width: 140px;
+}</style>

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

@@ -0,0 +1,37 @@
+interface Props {
+    /** Titre de la section */
+    titre?: string;
+    /** Libellé du bouton */
+    labelBouton?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const PresentationANSSI: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    titre: {};
+    default: {};
+    lien: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    titre: {};
+    default: {};
+    lien: {};
+}, {}, "">;
+type PresentationANSSI = InstanceType<typeof PresentationANSSI>;
+export default PresentationANSSI;

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

@@ -0,0 +1,139 @@
+<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 lang="ts">import Brique from "./Brique.svelte";
+let { titre = undefined, raisons, action = undefined, illustration } = $props();
+</script>
+
+<Brique variation="primaire">
+  <div class="grille-contenu">
+    <div class="illustration">
+      <img src={illustration.lien} alt={illustration.alt} />
+    </div>
+    <div class="contenu">
+      <slot name="titre"><h2>{titre}</h2></slot>
+      <slot>
+        <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>
+      </slot>
+    </div>
+    <div class="action">
+      {#if action}
+        <a role="button" href={action.lien} target="_blank">
+          {action.titre}
+        </a>
+      {/if}
+    </div>
+  </div>
+</Brique>
+
+<style>.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,
+.grille-contenu .contenu :global(::slotted([slot="titre"])) {
+  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;
+  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>