@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/mes-services-cyber/bandeau/Bandeau.svelte

@@ -0,0 +1,158 @@
+<svelte:options customElement="lab-anssi-mes-services-cyber-bandeau" />
+
+<script lang="ts">import { srcAsset } from "../../../assets/assets.js";
+const CLE_LOCAL_STORAGE = "lab-anssi-ui-kit-msc-bandeau-affichage";
+let affichage = $state(localStorage.getItem(CLE_LOCAL_STORAGE) || "visible");
+const croix = srcAsset("/icones/croix-blanche.svg");
+</script>
+
+{#if affichage === "visible"}
+  <div class="largeur-totale">
+    <div class="contenu">
+      <button
+        class="fermer"
+        onclick={() => {
+          affichage = "invisible";
+          localStorage.setItem(CLE_LOCAL_STORAGE, "invisible");
+        }}
+      >
+        <img src={croix} alt="fermer" />
+      </button>
+
+      <div class="textes">
+        <h4>
+          🚀 Découvrez MesServicesCyber ! <span class="badge visible-tablette">nouveauté</span>
+        </h4>
+        <p>
+          MesServicesCyber, la plateforme pour faciliter l'accès aux services et ressources de
+          l'ANSSI et de ses partenaires.
+        </p>
+      </div>
+
+      <a
+        href="https://messervices.cyber.gouv.fr/"
+        target="_blank"
+        rel="noopener"
+        id="matomo-bandeau-promotion-msc"
+      >
+        Je découvre MesServicesCyber
+      </a>
+    </div>
+  </div>
+{/if}
+
+<style>.largeur-totale {
+  position: relative;
+  overflow: hidden;
+  background: #0d0c21 url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/illustrations/tuile-msc.svg");
+  background-size: 500px;
+}
+.largeur-totale .contenu {
+  position: relative;
+  color: white;
+  padding: 16px;
+  max-width: 1200px;
+  margin: auto;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 932px) {
+  .largeur-totale .contenu {
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+  }
+}
+.largeur-totale .contenu .fermer {
+  border: none;
+  cursor: pointer;
+  background: none;
+  padding: 0;
+  transition: transform 0.2s ease-in-out;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+.largeur-totale .contenu .fermer:hover {
+  transform: scale(1.3);
+}
+.largeur-totale .contenu .textes {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 576px) {
+  .largeur-totale .contenu .textes {
+    gap: 8px;
+  }
+}
+.largeur-totale .contenu h4 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 8px;
+}
+@media (min-width: 932px) {
+  .largeur-totale .contenu h4 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+.largeur-totale .contenu h4 .badge {
+  color: #19753c;
+  background: #b8fec9;
+  border-radius: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  text-transform: uppercase;
+  transform: translateY(-3px);
+}
+.largeur-totale .contenu p {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  margin: 0;
+  padding-right: 32px;
+}
+@media (min-width: 932px) {
+  .largeur-totale .contenu p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+.largeur-totale .contenu a {
+  display: block;
+  color: #242424;
+  background: white;
+  margin: 8px auto 0 0;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  text-decoration: none;
+  gap: 8px;
+  border-radius: 4px;
+  padding: 4px 12px;
+  white-space: nowrap;
+  height: fit-content;
+  width: 100%;
+  max-width: 312px;
+  box-sizing: border-box;
+}
+@media (min-width: 576px) {
+  .largeur-totale .contenu a {
+    max-width: 248px;
+  }
+}
+@media (min-width: 932px) {
+  .largeur-totale .contenu a {
+    margin-right: 32px;
+  }
+}</style>

package/dist/composants/mes-services-cyber/bandeau/Bandeau.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Bandeau: import("svelte").Component<Record<string, never>, {}, "">;
+type Bandeau = ReturnType<typeof Bandeau>;
+export default Bandeau;

package/dist/composants/mes-services-cyber/lien/LienDiagnosticCyber.svelte

@@ -0,0 +1,125 @@
+<svelte:options customElement="lab-anssi-mes-services-cyber-lien-diagnostic-cyber" />
+
+<script lang="ts">import { srcAsset } from "../../../assets/assets";
+let { lien, versExterne = false } = $props();
+let target = $derived(versExterne ? "_blank" : "_self");
+let rel = $derived(versExterne ? "noreferrer" : undefined);
+let icone = $derived(versExterne ? "lien-externe" : "lien-interne");
+</script>
+
+<div class="racine">
+  <a href={lien} {target} class="lien-diagnostic-cyber" {rel}>
+    Diagnostic cyber gratuit
+    <img
+      src={srcAsset(`/icones/${icone}.svg`)}
+      alt={`lien-${versExterne ? "externe" : "interne"}`}
+    />
+  </a>
+  <div class="bloc">
+    <div class="texte">
+      <h6>Prenez votre cyberdépart !</h6>
+      <p>
+        Bénéficiez d'un <b>premier diagnostic gratuit</b> et anonyme dans vos locaux ou en visio
+        <b>accompagné par un Aidant cyber</b>.
+      </p>
+    </div>
+    <img
+      class="illustration"
+      src={srcAsset(`/illustrations/dino-kart.svg`)}
+      alt="Votre diagnostic cyber gratuit"
+    />
+  </div>
+</div>
+
+<style>.racine {
+  position: relative;
+  display: block;
+}
+.racine .lien-diagnostic-cyber {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--diagnostic-cyber-color, #0d0c21);
+  padding: 10px 8px 8px 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--diagnostic-cyber-color, #0d0c21);
+  border-radius: 8px;
+  cursor: pointer;
+  text-wrap: nowrap;
+  justify-content: space-between;
+}
+@media (min-width: 932px) {
+  .racine .lien-diagnostic-cyber {
+    font-size: 0.875rem;
+    line-height: 0.875rem;
+    max-width: fit-content;
+  }
+}
+.racine .lien-diagnostic-cyber:hover + .bloc {
+  visibility: visible;
+  opacity: 1;
+  top: calc(1.5rem + 4px + 4px + 2px + 12px);
+}
+.racine .lien-diagnostic-cyber img {
+  position: relative;
+  top: -1px;
+}
+.racine .bloc {
+  position: absolute;
+  pointer-events: none;
+  top: calc(1.5rem + 1px);
+  right: 0;
+  border-radius: 8px;
+  background: #fff;
+  display: flex;
+  width: 482px;
+  padding: 24px;
+  align-items: center;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 18, 0.16);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.2s linear, opacity 0.2s linear, top 0.2s ease-out;
+  z-index: 1;
+}
+.racine .bloc h6 {
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.75rem;
+  color: var(--diagnostic-cyber-color, #0d0c21);
+  align-self: stretch;
+  margin: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.racine .bloc .texte {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.racine .bloc .texte > p {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  align-self: stretch;
+  line-height: 1.5rem;
+  color: var(--diagnostic-cyber-color, #0d0c21);
+  margin: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  width: 300px;
+}
+.racine .illustration {
+  display: flex;
+  height: 144px;
+  padding: 6.4px 0px 7.014px 0px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  aspect-ratio: 4/3;
+}</style>

package/dist/composants/mes-services-cyber/lien/LienDiagnosticCyber.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    lien: string;
+    versExterne?: boolean;
+}
+declare const LienDiagnosticCyber: import("svelte").Component<Props, {}, "">;
+type LienDiagnosticCyber = ReturnType<typeof LienDiagnosticCyber>;
+export default LienDiagnosticCyber;

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

@@ -0,0 +1,62 @@
+<svelte:options customElement="lab-anssi-navigation-pied-de-page" />
+
+<script lang="ts">let { conforme = false } = $props();
+</script>
+
+<div class="conteneur-navigation-pied-de-page">
+  <a href="/aPropos">À propos</a>
+  <div class="separateur"></div>
+  <a href="/mentionsLegales">Mentions légales</a>
+  <div class="separateur"></div>
+  <a href="/confidentialite">Politique de confidentialité</a>
+  <div class="separateur"></div>
+  <a href="/cgu">Conditions générales</a>
+  <div class="separateur"></div>
+  <a href="/statistiques">Statistiques d’utilisation</a>
+  <div class="separateur"></div>
+  <a href="/securite">Sécurité</a>
+  <div class="separateur"></div>
+  <a href="/accessibilite">Accessiblité: {conforme ? "conforme" : "non conforme"}</a>
+</div>
+
+<style>.conteneur-navigation-pied-de-page {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  row-gap: 16px;
+  column-gap: 8px;
+  margin: 0 16px;
+  padding: 16px 0;
+  flex-wrap: wrap;
+  border-top: 1px solid #dddddd;
+}
+@media (min-width: 932px) {
+  .conteneur-navigation-pied-de-page {
+    margin: 0 24px;
+    column-gap: 16px;
+  }
+}
+.conteneur-navigation-pied-de-page a {
+  color: #666666;
+  text-decoration: none;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  white-space: nowrap;
+}
+.conteneur-navigation-pied-de-page a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 4px;
+}
+.conteneur-navigation-pied-de-page a:active {
+  background: #ededed;
+}
+
+.separateur {
+  width: 1px;
+  height: 16px;
+  background: #dddddd;
+}</style>

package/dist/composants/pied-de-page/NavigationPiedDePage.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    conforme?: boolean;
+}
+declare const NavigationPiedDePage: import("svelte").Component<Props, {}, "">;
+type NavigationPiedDePage = ReturnType<typeof NavigationPiedDePage>;
+export default NavigationPiedDePage;

package/dist/composants/suite-cyber/AccueilSuiteCyber.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">import { srcAsset } from "../../assets/assets.js";
+const chevronDroite = srcAsset("/icones/chevron-noir.svg");
+const { service = "" } = $props();
+const classService = $derived.by(() => {
+	if (service === "MonAideCyber") {
+		return "mac";
+	} else if (service === "MonEspaceNIS2") {
+		return "nis2";
+	} else if (service === "MesServicesCyber") {
+		return "msc";
+	} else if (service === "MonServiceSécurisé") {
+		return "mss";
+	}
+	return "";
+});
+</script>
+
+<a
+  href="https://messervices.cyber.gouv.fr"
+  target="_blank"
+  class={["accueil-suite-cyber", classService]}
+  id="mes-services-cyber"
+>
+  <div class="icone">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20 19.9999C20 20.2651 19.8946 20.5195 19.7071 20.707C19.5196 20.8946 19.2652 20.9999 19 20.9999H5C4.73478 20.9999 4.48043 20.8946 4.29289 20.707C4.10536 20.5195 4 20.2651 4 19.9999V10.9999H1L11.327 1.61192C11.5111 1.4444 11.7511 1.35156 12 1.35156C12.2489 1.35156 12.4889 1.4444 12.673 1.61192L23 10.9999H20V19.9999ZM11 12.9999V18.9999H13V12.9999H11Z"
+        fill="#000091"
+      />
+    </svg>
+  </div>
+  <div class="contenu">
+    <span class="titre">MesServicesCyber</span>
+    <span class="description">Gérer mon profil et mes services</span>
+  </div>
+  <div class="chevron">
+    <img src={chevronDroite} alt="Aller sur MesServicesCyber" />
+  </div>
+</a>
+
+<style>.accueil-suite-cyber {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-style: normal;
+  font-weight: normal;
+  padding: 0.75rem 1rem;
+  text-decoration: none;
+}
+.accueil-suite-cyber:hover {
+  background-color: var(--background-default-grey-hover);
+}
+.accueil-suite-cyber:active {
+  background-color: var(--background-default-grey-active);
+}
+
+.icone {
+  background-color: var(--background-contrast-blue-france);
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+}
+
+.contenu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  flex: 1 0 auto;
+}
+
+.titre {
+  color: var(--text-title-grey);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.75rem;
+}
+
+.description {
+  color: var(--text-default-grey);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+:global(:has([data-themeable="true"])) .accueil-suite-cyber.msc .icone {
+  background-color: var(--yellow-msc-75, #fff0cf);
+}
+:global(:has([data-themeable="true"])) .accueil-suite-cyber.mss .icone {
+  background-color: var(--blue-mss-75, #dbeeff);
+}</style>

package/dist/composants/suite-cyber/AccueilSuiteCyber.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    service?: string;
+}
+declare const AccueilSuiteCyber: import("svelte").Component<Props, {}, "">;
+type AccueilSuiteCyber = ReturnType<typeof AccueilSuiteCyber>;
+export default AccueilSuiteCyber;

package/dist/composants/suite-cyber/LiensSuiteCyber.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">import DsfrTag from "../../dsfr/DsfrTag.svelte";
+let { titre, services } = $props();
+</script>
+
+<div class="bloc">
+  <div class="titre">{titre}</div>
+
+  <div class="conteneur">
+    {#each services as { nom, lien, icone, labels, classeTracking }, i (nom)}
+      <a href={lien} target="_blank" class={["service", classeTracking]}>
+        <img class="logo-service" src={icone} alt={nom} />
+
+        <div class="contenu-service">
+          <div class="titre-service">{nom}</div>
+
+          {#if labels}
+            <div class="tags">
+              {#each labels as label (label)}
+                <DsfrTag {label} size="sm" />
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </a>
+
+      {#if i < services.length - 1}
+        <hr />
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style>.bloc:not(:last-child) {
+  margin-block-end: 0.75rem;
+}
+
+.titre {
+  color: var(--text-mention-grey);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  margin-block-end: 0.5rem;
+  text-transform: uppercase;
+}
+
+.conteneur {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  border: 1px solid var(--border-default-grey);
+}
+.conteneur hr {
+  border: 0;
+  border-top: 1px solid var(--grey-900-175, #ddd);
+  margin: 0 16px;
+}
+
+.service {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  text-decoration: none;
+}
+.service:hover {
+  background-color: var(--background-default-grey-hover);
+}
+.service:active {
+  background-color: var(--background-default-grey-active);
+}
+
+.logo-service {
+  height: 2rem;
+  flex-shrink: 0;
+  width: 2rem;
+}
+
+.contenu-service {
+  padding-block: 0.125rem 0.25rem;
+}
+
+.titre-service {
+  color: var(--text-title-grey);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+.titre-service:not(:only-child) {
+  margin-block-end: 0.625rem;
+}
+
+.tags {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+  flex-wrap: wrap;
+}</style>

package/dist/composants/suite-cyber/LiensSuiteCyber.svelte.d.ts

@@ -0,0 +1,14 @@
+type Service = {
+    nom: string;
+    lien: string;
+    icone: string;
+    labels?: string[];
+    classeTracking: string;
+};
+interface Props {
+    titre: string;
+    services: Service[];
+}
+declare const LiensSuiteCyber: import("svelte").Component<Props, {}, "">;
+type LiensSuiteCyber = ReturnType<typeof LiensSuiteCyber>;
+export default LiensSuiteCyber;