v1.13.0

🚀 Composants

📦 Composants

Ajout du composant BandeauTitre

Webcomponent : <lab-anssi-bandeau-titre> avec propriétés :

titre: { type: "String", attribute: "titre" },
description: { type: "String", attribute: "description" },
filAriane: { type: "Array", attribute: "fil-ariane" },
tag: { type: "Object", attribute: "tag" },

🐞 Corrections

Centre les libellés des boutons de certaines briques

Corrige la bordure basse des liens

Amélioration de la génération du fichier JSX

v1.12.4

🐞 Corrections

Briques CarrouselTuiles et Témoignages

Les boutons Suivant et Précédent du ont désormais un sous-lignage plus épais lors de leur survol

Brique Marelle

Les liens affichés dans les étapes de la Marelle ont désormais également un sous-lignage plus épais lors de leur survol

v1.12.3

🚀 Changements d'API

Rajoute un champ target? pour le type Action

export type Action = {
  titre: string;
  lien: string;
  target?: "_self" | "_blank" | "_parent" | "_top";
};

🐞 Corrections

🧱 Pour chaque briques

• Rajoute une icône LienExterne lorsqu'un lien possède une target _blank
  
  
  
• Rallonge la bordure des boutons Précédent et Suivant pour Le CarrouselTuiles et la brique Témoignages

🧱 Brique Hero

• Effectue un retour à la ligne des boutons d'actions de la brique Hero si leur longueur touche l'illustration
  

🧱 Brique Titre Multimédia

• Centre le titre de la brique multimédia en version mobile
  

v1.12.2

🐞 Corrections

🧱 Modifications sur le composant Brique Hero

• Centre le contenu texte de la brique en format desktop s'il n'y a pas de partenaires à afficher

• Applique une largeur maximum à l'illustration de la brique en mode grande tablette (à partir de 768 pixels)
• Aligne les textes dans les boutons d'action

🧱 Modifications sur la Brique Marelle

• Sur la Marelle, applique une marge sur les numéros d'étape
  • pairs : marge à droite de l'élément
  • impairs : marge à gauche de l'élément
    

v1.12.1

🐞 Corrections

🧱 Modifications sur le composant Brique générique

Le composant générique embarquait une largeur particulière (100vw), qui entrainait un scroll horizontal indésirable lors de l'intégration du composant

🧱 Modifications sur la Brique de Témoignages

• Masque les boutons Précédent et Suivant à partir de tablette s'il y a 2 témoignages ou moins
  (actions inutiles, car seulement deux éléments sont affichés à l'écran)
• Masque les boutons Précédent et Suivant s'il n'y a qu'un seul témoignage
• Affiche deux témoignages pour les tailles d'écrans supérieures à 768px
• Change la couleur des boutons Précédent et Suivant pour coller au thème du produit concerné

🧱 Modifications sur la Brique de Carrousel de tuiles

• Change la couleur des boutons Précédent et Suivant pour coller au thème du produit concerné

🧱 Modifications sur la Brique Rejoindre la Communauté

• La mise en page des éléments a été revue pour matcher réellement à la maquête figma

Convertisseur composant svelte vers types JSX

• La regex qui permet de trouver le customElement et le tag cherche désormais des doubles quotes OU des simples

v1.12.0

🚀 Nouveautés (2 nouvelles briques réutilisables)

Nouvelle brique réutilisable Rejoindre la communauté

Cette brique affiche la liste des avantages à rejoindre la communauté du produit où elle sera utilisée. Elle permet également d'afficher un CTA vers la page permet réellement de rejoindre la communauté.

Cette brique possède quatre propriétés :

• titre: string -> le titre de la section
• raisons: string[] -> la liste des avantages à rejoindre la communauté
• action: { lien: string; titre: string } -> les propriétés du CTA sous le contenu textuel
• illustration: { lien: string; alt: string; } -> les propriétés de l'illustration à afficher

Utilisation du webcomponent :

<lab-anssi-brique-rejoindre-la-communaute
    titre="<titre_de_la_section>",
    raisons={JSON.stringify(["<avantage_de_rejoindre_la_communauté_1>", "<avantage_de_rejoindre_la_communauté_2>"])}
    action={JSON.stringify({ titre: '<titre_du_cta>', lien: '<url_de_redirection' })}
    illustration={JSON.stringify({   lien: 'lien_vers_illustration', alt: '' )}
>
</lab-anssi-brique-rejoindre-la-communaute>

Nouvelle brique réutilisable Présentation ANSSI

Cette brique permet de présenter l'ANSSI.

Utilisation du webcomponent :

<lab-anssi-presentation-anssi>
</lab-anssi-presentation-anssi>

🐞 Corrections (1)

Brique réutilisable Témoignages

La brique est désormais exportée pour être utilisée par les applications consommatrices

v1.11.0

🚀 Nouveautés

🔨 Nouvelle brique réutilisable "Contenu à deux colonnes"

Cette brique permet d'ajouter :

• un élément avec un fond de couleur primaire
• une colonne avec un titre, un paragraphe et de façon optionnelle, un bouton d'action
• une colonne avec une illustration

Les deux colonnes peuvent être échangées grâce à une propriété du webcomponent ordre

Exemple desktop :

• Texte à gauche
  

• Texte à droite

• CTA d'action absent
  

Exemple mobile :

A noter : l'ordre d'affichage des colonnes en mobile ne change jamais, il y aura toujours l'illustration au dessus du contenu

Utilisation du webcomponent :

      <lab-anssi-brique-contenu-a-deux-colonnes
        titre="un titre"
        paragraphe="wow du texte"
        action={JSON.stringify({
          titre: 'Libellé',
          lien: '#',
        })}
        ordre="texte-droite"
        illustration={JSON.stringify({
          lien: '/images/illustration-dialogue-mac.svg',
          alt: '',
        })}
      ></lab-anssi-brique-contenu-a-deux-colonnes>

Détail sur les propriétés :

• ordre peut prendre deux valeurs : texte-gauche ou texte-droite
• action est optionnel

v1.10.1

🐞 Correction

Corrige les largeurs de l’alerte

D’une part, la largeur autour de l’icône est corrigée pour toujours rester à 40px. D’autre part, on force l’alerte à ne jamais se réduire sous 200px.

v1.10.0

🚀 Nouveautés

🔨 Nouvelle brique réutilisable "Témoignages"

Cette brique, comme son nom l'indique, permet d'afficher une liste de témoignages.

Utilisation du webcomponent

<lab-anssi-temoignages
    titre="<titre_de_la_brique>",
    temoignages={JSON.stringify([
        {
            auteur: "<auteur>",
            source: "<source_du_temoignage",
            citation: "<le_contenu_du_temoignage>"
        },
        {
            auteur: "<auteur>",
            source: "<source_du_temoignage",
            citation: "<le_contenu_du_temoignage>"
        },
    ])}
></lab-anssi-temoignages>

v1.9.0

🚀 Nouveautés

🔨 Ajout de la brique "Titre et vidéo"

Utilisation du webcomponent

<lab-anssi-titre-multimedia
    titre="Titre de la brique"
    multimedia={JSON.stringify({
        source: "<lien_ou_chemin_vers_la_source>",
        sourcesoustitres: "<lien_ou_chemin_vers_les_sous_titres>",
        imagedecouverture: "<lien_ou_chemin_vers_le_placeholder>"
    })}
></lab-anssi-titre-multimedia>

🔨 Ajout de la brique Marelle

Utilisation du webcomponent

Variables préalables :

const etapesMarelle = [
    {
      description: "Description",
      illustration: {
        lien: genereImageDePlaceholder(600, 400, "Illustration première étape"),
        alt: ''
      },
      lien: { href: "#", target: "_blank", texte: "Lien vers ressource externe" },
      titre: "Première étape"
    },
    {
      description: "Description étape 2",
      illustration: {
        lien: genereImageDePlaceholder(600, 400, "Illustration deuxième étape"),
        alt: ''
      },
      lien: { href: "#", target: "_blank", texte: "Lien vers ressource externe" },
      titre: "Deuxième étape"
    },
  ];

<lab-anssi-titre-multimedia
    titre="Titre de la brique Marelle"
    etapesmarelle={JSON.stringify(etapesMarelle)}
    action={JSON.stringify({
        titre: 'Libellé action',
        lien: '#'
    })}
></lab-anssi-titre-multimedia>

🐞 Correctifs

sur la Brique Hero

• Les propriétés du webcomponent passent de camelCase à minuscules

sur la brique Carrousel

• retire le padding top sur la brique générique qui sert d'enveloppant
• en mobile, prend une taille large avec un peu de la prochaine d'affichée
• retire le padding à droite et à gauche, la "prochaine" tuile sur le slider est collée à droite de l'écran