@lab-anssi/ui-kit 1.14.4 → 1.15.0

package/dist/assets/icones/fleche-basse-noir.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 8.78132L11.3 5.48132L12.2427 6.42399L7.99999 10.6667L3.75732 6.42399L4.69999 5.48132L7.99999 8.78132Z" fill="#161616"/>
+</svg>

package/dist/index.d.ts

@@ -15,3 +15,4 @@ export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/Pr
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
 export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
 export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";
+export { default as ListeArticles } from "./lab/blog/ListeArticles.svelte";

package/dist/index.js

@@ -15,3 +15,4 @@ export { default as PresentationANSSI } from "./lab/vitrines-produits/briques/Pr
 export { default as RejoindreLaCommunaute } from "./lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte";
 export { default as BandeauTitre } from "./lab/blog/BandeauTitre.svelte";
 export { default as PageCrisp } from "./lab/blog/PageCrisp.svelte";
+export { default as ListeArticles } from "./lab/blog/ListeArticles.svelte";

package/dist/lab/blog/BandeauTitre.svelte

@@ -11,6 +11,7 @@
 />
 
 <script>import { estLien } from "../../types.js";
+import ComposantTag from "./Tag.svelte";
 export let titre;
 export let description = "";
 export let filAriane = [];
@@ -38,9 +39,7 @@ let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
     <div class="conteneur-texte">
       {#if tag}
         <div class="conteneur-tag">
-          <span class="tag" style="background: {tag.couleurFond}; color: {tag.couleurTexte};"
-            >{tag.label}</span
-          >
+          <ComposantTag {tag} />
         </div>
       {/if}
       <div class="conteneur-corps">
@@ -77,15 +76,6 @@ let filArianeVisible = window.matchMedia("(min-width: 576px)").matches;
 .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag {
   padding-top: 8px;
 }
-.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag .tag {
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-family: Marianne;
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  display: flex;
-}
 .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps {
   display: flex;
   flex-direction: column;

package/dist/lab/blog/CarteArticle.svelte

@@ -0,0 +1,67 @@
+<script>import ComposantTag from "./Tag.svelte";
+import Fleche from "../icones/Fleche.svelte";
+export let article;
+export let categorie;
+</script>
+
+<a class="carte-article" href={article.href}>
+  <div class="conteneur-texte">
+    <ComposantTag tag={categorie} />
+    <p>{article.titre}</p>
+  </div>
+  <div class="conteneur-fleche">
+    <Fleche direction="droite" />
+  </div>
+</a>
+
+<style>.carte-article {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  border: 1px solid #dddddd;
+  background: white;
+  padding: 24px 24px 52px 24px;
+  gap: 12px;
+  font-family: Marianne;
+  text-decoration: none;
+  position: relative;
+}
+.carte-article:visited {
+  color: unset;
+}
+.carte-article:hover {
+  background: #f6f6f6;
+}
+.carte-article:active {
+  background: #ededed;
+}
+.carte-article:focus-visible {
+  outline: 2px solid var(--couleur-focus);
+  outline-offset: 2px;
+}
+.carte-article .conteneur-texte {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 100%;
+}
+.carte-article .conteneur-texte p {
+  margin: 0;
+  color: var(--liste-articles-couleur-texte);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.carte-article .conteneur-fleche {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

package/dist/lab/blog/CarteArticle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ResumeArticle, Tag } from "../../types";
+declare const __propDef: {
+    props: {
+        article: ResumeArticle;
+        categorie: Tag;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CarteArticleProps = typeof __propDef.props;
+export type CarteArticleEvents = typeof __propDef.events;
+export type CarteArticleSlots = typeof __propDef.slots;
+export default class CarteArticle extends SvelteComponent<CarteArticleProps, CarteArticleEvents, CarteArticleSlots> {
+}
+export {};

package/dist/lab/blog/ListeArticles.svelte

@@ -0,0 +1,65 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-liste-articles",
+    props: {
+      articles: { reflect: false, type: "Array", attribute: "articles" },
+      categories: { reflect: false, type: "Object", attribute: "categories" },
+      idCategorieChoisie: { reflect: false, type: "String", attribute: "id-categorie-choisie" },
+    },
+  }}
+/>
+
+<script>import CarteArticle from "./CarteArticle.svelte";
+import ListeDeroulante from "./ListeDeroulante.svelte";
+export let articles;
+export let categories;
+export let idCategorieChoisie = "tous";
+const optionsFiltrage = [
+  { label: "Tous les articles", valeur: "tous" },
+  ...Object.entries(categories).map(([idCategorie, donnees]) => ({
+    label: donnees.label,
+    valeur: idCategorie
+  }))
+];
+$: articlesVisibles = idCategorieChoisie === "tous" ? articles : articles.filter((a) => a.idCategorie === idCategorieChoisie);
+</script>
+
+<div class="liste-articles">
+  <ListeDeroulante bind:valeur={idCategorieChoisie} options={optionsFiltrage} />
+  <h2>
+    {idCategorieChoisie === "tous" ? "Tous les articles" : categories[idCategorieChoisie].label}
+  </h2>
+  <div class="conteneur-articles">
+    {#each articlesVisibles as article, index (index)}
+      <CarteArticle {article} categorie={categories[article.idCategorie]} />
+    {/each}
+  </div>
+</div>
+
+<style>.liste-articles {
+  padding: 48px 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: Marianne;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+@media (min-width: 932px) {
+  .liste-articles {
+    padding: 48px 24px;
+  }
+}
+.liste-articles h2 {
+  margin: 0;
+  color: #161616;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.25rem;
+}
+.liste-articles .conteneur-articles {
+  gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
+}</style>

package/dist/lab/blog/ListeArticles.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { CategoriesArticle, ResumeArticle } from "../../types";
+declare const __propDef: {
+    props: {
+        articles: ResumeArticle[];
+        categories: CategoriesArticle;
+        idCategorieChoisie?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ListeArticlesProps = typeof __propDef.props;
+export type ListeArticlesEvents = typeof __propDef.events;
+export type ListeArticlesSlots = typeof __propDef.slots;
+export default class ListeArticles extends SvelteComponent<ListeArticlesProps, ListeArticlesEvents, ListeArticlesSlots> {
+}
+export {};

package/dist/lab/blog/ListeDeroulante.svelte

@@ -0,0 +1,56 @@
+<script>import { srcAsset } from "../../assets/assets";
+export let valeur;
+export let options;
+</script>
+
+<div class="conteneur-liste-deroulante">
+  <div class="conteneur-select">
+    <img
+      src={srcAsset("/icones/fleche-basse-noir.svg")}
+      alt="Icône de flêche de la liste déroulante"
+    />
+    <select bind:value={valeur}>
+      {#each options as option, index (index)}
+        <option label={option.label} value={option.valeur} />
+      {/each}
+    </select>
+  </div>
+</div>
+
+<style>.conteneur-select {
+  position: relative;
+  width: fit-content;
+}
+.conteneur-select img {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  pointer-events: none;
+}
+.conteneur-select select {
+  appearance: none;
+  padding: 8px 38px 8px 16px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border: none;
+  box-shadow: inset 0 -2px 0 0 #3a3a3a;
+  cursor: pointer;
+  color: #3a3a3a;
+  font-family: Marianne;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+  background: #eeeeee;
+}
+.conteneur-select select:hover {
+  background: #f6f6f6;
+}
+.conteneur-select select:focus-visible {
+  outline: 2px solid var(--couleur-focus);
+  outline-offset: 2px;
+}
+.conteneur-select select option {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}</style>

package/dist/lab/blog/ListeDeroulante.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        valeur: string;
+        options: {
+            label: string;
+            valeur: unknown;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ListeDeroulanteProps = typeof __propDef.props;
+export type ListeDeroulanteEvents = typeof __propDef.events;
+export type ListeDeroulanteSlots = typeof __propDef.slots;
+export default class ListeDeroulante extends SvelteComponent<ListeDeroulanteProps, ListeDeroulanteEvents, ListeDeroulanteSlots> {
+}
+export {};

package/dist/lab/blog/Tag.svelte

@@ -0,0 +1,22 @@
+<script>export let tag = null;
+</script>
+
+<span class="tag" style="background: {tag.couleurFond}; color: {tag.couleurTexte};">
+  {tag.label}
+</span>
+
+<style>.tag {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-family: Marianne;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  display: inline-block;
+  width: fit-content;
+  white-space: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/lab/blog/Tag.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Tag } from "../../types";
+declare const __propDef: {
+    props: {
+        tag?: Tag;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TagProps = typeof __propDef.props;
+export type TagEvents = typeof __propDef.events;
+export type TagSlots = typeof __propDef.slots;
+export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
+}
+export {};

package/dist/lab/icones/Fleche.svelte

@@ -0,0 +1,25 @@
+<script>export let direction = "gauche";
+</script>
+
+<svg
+  class={direction}
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
+    fill="black"
+  />
+</svg>
+
+<style>svg.droite {
+  transform: rotate(180deg);
+}
+svg.droite path {
+  fill: var(--liste-articles-couleur-fleche);
+}</style>

package/dist/lab/icones/Fleche.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        direction?: "gauche" | "droite";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FlecheProps = typeof __propDef.props;
+export type FlecheEvents = typeof __propDef.events;
+export type FlecheSlots = typeof __propDef.slots;
+export default class Fleche extends SvelteComponent<FlecheProps, FlecheEvents, FlecheSlots> {
+}
+export {};

package/dist/types.d.ts

@@ -51,4 +51,10 @@ export type TableDesMatieres = {
     texte: string;
     id: string;
 }[];
+export type ResumeArticle = {
+    idCategorie: string;
+    titre: string;
+    href: string;
+};
+export type CategoriesArticle = Record<string, Tag>;
 export {};