@lab-anssi/ui-kit 1.1.1 → 1.2.1

package/dist/assets/icones/bouton-gauffre.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="waffle rounded">
+<g id="Ic&#195;&#180;ne">
+<path d="M7 4C7 5.65685 5.65685 7 4 7C2.34315 7 1 5.65685 1 4C1 2.34315 2.34315 1 4 1C5.65685 1 7 2.34315 7 4Z" fill="#000091"/>
+<path d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12Z" fill="#000091"/>
+<path d="M7 20C7 21.6569 5.65685 23 4 23C2.34315 23 1 21.6569 1 20C1 18.3431 2.34315 17 4 17C5.65685 17 7 18.3431 7 20Z" fill="#000091"/>
+<path d="M15 4C15 5.65685 13.6569 7 12 7C10.3431 7 9 5.65685 9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4Z" fill="#000091"/>
+<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" fill="#000091"/>
+<path d="M15 20C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20C9 18.3431 10.3431 17 12 17C13.6569 17 15 18.3431 15 20Z" fill="#000091"/>
+<path d="M23 4C23 5.65685 21.6569 7 20 7C18.3431 7 17 5.65685 17 4C17 2.34315 18.3431 1 20 1C21.6569 1 23 2.34315 23 4Z" fill="#000091"/>
+<path d="M23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12Z" fill="#000091"/>
+<path d="M23 20C23 21.6569 21.6569 23 20 23C18.3431 23 17 21.6569 17 20C17 18.3431 18.3431 17 20 17C21.6569 17 23 18.3431 23 20Z" fill="#000091"/>
+</g>
+</g>
+</svg>

package/dist/assets/icones/chevron-bleu.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#240;&#159;&#154;&#171; Chevron">
+<path id="Ic&#195;&#180;ne" fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 8.78145L11.3 5.48145L12.2427 6.42411L7.99999 10.6668L3.75732 6.42411L4.69999 5.48145L7.99999 8.78145Z" fill="#000091"/>
+</g>
+</svg>

package/dist/assets/icones/chevron-noir.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.172 12L8.22205 7.04999L9.63605 5.63599L16 12L9.63605 18.364L8.22205 16.95L13.172 12Z" fill="#161616"/>
+</svg>

package/dist/assets/icones/croix-bleu.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="close-line">
+<path id="Ic&#195;&#180;ne" fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 7.05733L11.3 3.75733L12.2427 4.7L8.94266 8L12.2427 11.3L11.3 12.2427L7.99999 8.94266L4.69999 12.2427L3.75732 11.3L7.05732 8L3.75732 4.7L4.69999 3.75733L7.99999 7.05733Z" fill="#000091"/>
+</g>
+</svg>

package/dist/assets/icones/lien-externe.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="external-link">
+<path id="Ic&#195;&#180;ne" fill-rule="evenodd" clip-rule="evenodd" d="M6.66667 4V5.33333H3.33333V12.6667H10.6667V9.33333H12V13.3333C12 13.7015 11.7015 14 11.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V4.66667C2 4.29848 2.29848 4 2.66667 4H6.66667ZM14 2V8L11.4707 5.47133L7.47133 9.47133L6.52867 8.52867L10.528 4.52867L8 2H14Z" fill="#666666"/>
+</g>
+</svg>

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
 export { default as MesServicesCyberBandeau } from "./mes-services-cyber/bandeau/Bandeau.svelte";
+export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
+export { default as SuiteCyberNavigation } from "./suite-cyber/navigation/Navigation.svelte";

package/dist/index.js

@@ -1,2 +1,3 @@
-export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
 export { default as MesServicesCyberBandeau } from "./mes-services-cyber/bandeau/Bandeau.svelte";
+export { default as NavigationPiedDePage } from "./pied-de-page/NavigationPiedDePage.svelte";
+export { default as SuiteCyberNavigation } from "./suite-cyber/navigation/Navigation.svelte";

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

@@ -56,6 +56,21 @@ const croix = srcAsset("/icones/croix-blanche.svg");
   }
 }
 
+.visible-desktop {
+  display: none !important;
+}
+@media (min-width: 932px) {
+  .visible-desktop {
+    display: unset !important;
+  }
+}
+
+@media (min-width: 932px) {
+  .invisible-desktop {
+    display: none !important;
+  }
+}
+
 .largeur-totale {
   position: relative;
   overflow: hidden;

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

@@ -1,6 +1,6 @@
 <svelte:options customElement="lab-anssi-navigation-pied-de-page" />
 
-<script>export let conformiteAccessibilite = "conforme";
+<script>export let conforme = false;
 </script>
 
 <div class="conteneur-navigation-pied-de-page">
@@ -17,7 +17,7 @@
   <a href="/securite">Sécurité</a>
   <div class="separateur"></div>
   <a href="/accessibilite"
-    >Accessiblité: {conformiteAccessibilite === "conforme" ? "conforme" : "non conforme"}</a
+    >Accessiblité: {conforme ? "conforme" : "non conforme"}</a
   >
 </div>
 
@@ -36,6 +36,21 @@
   }
 }
 
+.visible-desktop {
+  display: none !important;
+}
+@media (min-width: 932px) {
+  .visible-desktop {
+    display: unset !important;
+  }
+}
+
+@media (min-width: 932px) {
+  .invisible-desktop {
+    display: none !important;
+  }
+}
+
 .conteneur-navigation-pied-de-page {
   font-family: "Marianne";
   list-style: none;

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        conformiteAccessibilite?: "conforme" | "nonConforme";
+        conforme?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/suite-cyber/navigation/AccueilMSC.svelte

@@ -0,0 +1,95 @@
+<script>import { srcAsset } from "../../mes-services-cyber/assets.js";
+const accueilMSC = srcAsset("/icones/bouton-accueil-msc.svg");
+const chevronDroite = srcAsset("/icones/chevron-noir.svg");
+</script>
+
+<a
+  href="https://messervices.cyber.gouv.fr"
+  target="_blank"
+  class="accueil-msc"
+  id="mes-services-cyber"
+>
+  <div class="icone">
+    <img src={accueilMSC} alt="MesServicesCyber" />
+  </div>
+  <label for="mes-services-cyber">
+    MesServicesCyber
+    <span>Gérer mon profil et mes services</span>
+  </label>
+  <div class="chevron">
+    <img src={chevronDroite} alt="Aller sur MesServicesCyber" />
+  </div>
+</a>
+
+<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;
+  }
+}
+
+.accueil-msc {
+  font-family: Marianne;
+  font-style: normal;
+  font-weight: normal;
+  cursor: pointer;
+  display: flex;
+  margin-top: 8px;
+  padding: 12px 16px;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+  text-decoration: none;
+}
+.accueil-msc:hover {
+  background-color: #f6f6f6;
+}
+.accueil-msc:active {
+  background-color: #ededed;
+}
+.accueil-msc label {
+  display: flex;
+  padding-bottom: 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+  color: #161616;
+  font-family: Marianne;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px;
+  cursor: pointer;
+}
+.accueil-msc label span {
+  color: #3a3a3a;
+  font-family: Marianne;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}</style>

package/dist/suite-cyber/navigation/AccueilMSC.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 AccueilMscProps = typeof __propDef.props;
+export type AccueilMscEvents = typeof __propDef.events;
+export type AccueilMscSlots = typeof __propDef.slots;
+export default class AccueilMsc extends SvelteComponent<AccueilMscProps, AccueilMscEvents, AccueilMscSlots> {
+}
+export {};

package/dist/suite-cyber/navigation/BlocLiens.svelte

@@ -0,0 +1,140 @@
+<script>export let titre;
+export let services;
+</script>
+
+<div class="bloc">
+  <div class="titre">{titre}</div>
+  <div class="conteneur">
+    {#each services as { nom, lien, icone, labels, classeTracking }, i}
+      <a href={lien} target="_blank" class={classeTracking}>
+        <div class="defaut">
+          <div class="icone">
+            <img src={icone} alt={nom} />
+          </div>
+          <div>{nom}</div>
+        </div>
+        {#if labels}
+          <div class="labels">
+            {#each labels as label}
+              <span>{label}</span>
+            {/each}
+          </div>
+        {/if}
+      </a>
+      {#if i < services.length - 1}
+        <hr />
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<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;
+  }
+}
+
+.bloc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+  padding-bottom: 8px;
+  gap: 10px;
+}
+.bloc:last-child {
+  padding-bottom: 0;
+}
+.bloc .titre {
+  display: flex;
+  align-self: stretch;
+  color: #666666;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  text-transform: uppercase;
+}
+.bloc .conteneur {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #dddddd;
+  background: #fff;
+}
+.bloc .conteneur a {
+  text-decoration: none;
+}
+.bloc .conteneur a:hover {
+  background-color: #f6f6f6;
+}
+.bloc .conteneur a:active {
+  background-color: #ededed;
+}
+.bloc .conteneur a .defaut {
+  display: flex;
+  padding: 12px;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  color: #161616;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.bloc .conteneur a .defaut .icone {
+  display: flex;
+  align-items: center;
+}
+.bloc .conteneur a .labels {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  flex-wrap: wrap;
+  margin-left: 56px;
+}
+.bloc .conteneur a .labels:last-child {
+  margin-bottom: 12px;
+  margin-top: -3px;
+}
+.bloc .conteneur a .labels span {
+  padding: 2px 8px;
+  border-radius: 12px;
+  background: #eee;
+  color: #161616;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.bloc .conteneur hr {
+  border: 0;
+  border-top: 1px solid #ddd;
+  margin: 0 16px;
+}</style>

package/dist/suite-cyber/navigation/BlocLiens.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        titre: string;
+        services: {
+            nom: string;
+            lien: string;
+            icone: string;
+            labels?: string[];
+            classeTracking: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BlocLiensProps = typeof __propDef.props;
+export type BlocLiensEvents = typeof __propDef.events;
+export type BlocLiensSlots = typeof __propDef.slots;
+export default class BlocLiens extends SvelteComponent<BlocLiensProps, BlocLiensEvents, BlocLiensSlots> {
+}
+export {};

package/dist/suite-cyber/navigation/Navigation.svelte

@@ -0,0 +1,278 @@
+<svelte:options customElement="lab-anssi-bouton-suite-cyber-navigation" />
+
+<script>import { srcAsset } from "../../mes-services-cyber/assets.js";
+import { slide } from "svelte/transition";
+import AccueilMsc from "./AccueilMSC.svelte";
+import BlocLiens from "./BlocLiens.svelte";
+const gauffre = srcAsset("/icones/bouton-gauffre.svg");
+const chevron = srcAsset("/icones/chevron-bleu.svg");
+const croix = srcAsset("/icones/croix-bleu.svg");
+const nis2 = srcAsset("/icones/NIS2.svg");
+const certFr = srcAsset("/icones/CERT-FR.svg");
+const mac = srcAsset("/icones/MAC.svg");
+const mss = srcAsset("/icones/MSS.svg");
+const lienExterne = srcAsset("/icones/lien-externe.svg");
+export let sourceUtm = "";
+let estOuvert = false;
+</script>
+
+<div class="suite-cyber">
+  <div class="navigation">
+    <button
+      class:actif={estOuvert}
+      on:click={() => {
+        estOuvert = !estOuvert;
+      }}
+    >
+      <img src={gauffre} alt="La Suite cyber" />
+      <div class="avec-texte">
+        <span>La Suite cyber</span>
+        <img src={chevron} alt={estOuvert ? "ouvert" : "fermé"} class:ouvert={estOuvert} />
+      </div>
+    </button>
+  </div>
+  {#if estOuvert}
+    <div class="contenu" transition:slide>
+      <button class="fermer invisible-tablette" on:click={() => (estOuvert = false)}>
+        Fermer
+        <img src={croix} alt="Fermer" />
+      </button>
+      <AccueilMsc />
+      <div class="services-anssi">
+        <BlocLiens
+          titre="Embarquer dans NIS2"
+          services={[
+            {
+              nom: "MonEspaceNIS2",
+              lien: `https://monespacenis2.cyber.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: nis2,
+              classeTracking: "nis2",
+            },
+          ]}
+        />
+        <BlocLiens
+          titre="S'informer"
+          services={[
+            {
+              nom: "Le portail du CERT-FR",
+              lien: `https://www.cert.ssi.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: certFr,
+              classeTracking: "cert-fr",
+            },
+          ]}
+        />
+        <BlocLiens
+          titre="Piloter"
+          services={[
+            {
+              nom: "MonServiceSécurisé",
+              lien: `https://monservicesecurise.cyber.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: mss,
+              labels: ["Entités publiques"],
+              classeTracking: "mss",
+            },
+          ]}
+        />
+        <BlocLiens
+          titre="Tester"
+          services={[
+            {
+              nom: "ADS",
+              lien: `https://club.ssi.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: certFr,
+              labels: ["Entités publiques", "Entités régulées"],
+              classeTracking: "ads",
+            },
+            {
+              nom: "SILENE",
+              lien: `https://club.ssi.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: certFr,
+              labels: ["Entités publiques", "Entités régulées"],
+              classeTracking: "silene",
+            },
+          ]}
+        />
+        <BlocLiens
+          titre="Accompagner"
+          services={[
+            {
+              nom: "MonAideCyber",
+              lien: `https://monaide.cyber.gouv.fr?utm_campaign="suite-cyber"&utm_source="${sourceUtm}"`,
+              icone: mac,
+              classeTracking: "mac",
+            },
+          ]}
+        />
+      </div>
+      <a
+        class="lien-externe site-anssi"
+        href="https://cyber.gouv.fr?utm_campaign='suite-cyber'&utm_source='{sourceUtm}'"
+        target="_blank"
+      >
+        <div>
+          <span>Accéder au site de l'ANSSI</span>
+          <img src={lienExterne} alt="Accéder au site de l'ANSSI" />
+        </div>
+      </a>
+    </div>
+  {/if}
+</div>
+
+<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;
+  }
+}
+
+.suite-cyber {
+  font-family: Marianne;
+  font-style: normal;
+  font-weight: normal;
+  position: relative;
+}
+.suite-cyber .navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.suite-cyber .navigation button {
+  display: flex;
+  border: none;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  color: #000091;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  cursor: pointer;
+  gap: 8px;
+  background: white;
+}
+.suite-cyber .navigation button:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.suite-cyber .navigation button:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+@media (min-width: 932px) {
+  .suite-cyber .navigation button img {
+    width: 16px;
+    height: 16px;
+  }
+}
+.suite-cyber .navigation button > .avec-texte {
+  display: none;
+}
+.suite-cyber .navigation button > .avec-texte > span {
+  font-family: Marianne;
+}
+@media (min-width: 932px) {
+  .suite-cyber .navigation button > .avec-texte {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+}
+.suite-cyber .navigation button.actif {
+  background: #e3e3fd;
+}
+.suite-cyber .navigation button.actif:active {
+  background: #adadf9;
+}
+.suite-cyber .navigation button.actif:hover {
+  background: #c1c1fb;
+}
+.suite-cyber .navigation button img.ouvert {
+  transform: rotate(180deg);
+}
+.suite-cyber .contenu {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-y: scroll !important;
+  overflow-x: hidden;
+  z-index: 1000;
+}
+@media (min-width: 576px) {
+  .suite-cyber .contenu {
+    position: absolute;
+    top: 40px;
+    right: 0;
+    left: unset;
+    width: 360px;
+    height: 540px;
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 18, 0.16);
+  }
+}
+.suite-cyber .contenu button.fermer {
+  border: none;
+  background: none;
+  color: #000091;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-end;
+  gap: 8px;
+  padding: 4px 8px 4px 12px;
+  margin: 12px;
+}
+.suite-cyber .contenu .services-anssi {
+  display: flex;
+  padding: 12px 16px 0px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.suite-cyber .contenu .lien-externe {
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  text-decoration: none;
+}
+.suite-cyber .contenu .lien-externe div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  color: #666666;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.suite-cyber .contenu .lien-externe div img {
+  line-height: 20px;
+}</style>