From d00276481e136db1cd00420431222784c837129b Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 12 Apr 2024 12:35:42 +0200 Subject: [PATCH 01/15] =?UTF-8?q?feat(notice):=20ajout=20des=20alertes,=20?= =?UTF-8?q?des=20bandeaux=20m=C3=A9t=C3=A9o,=20et=20de=202=20niveaux=20g?= =?UTF-8?q?=C3=A9n=C3=A9riques?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- module/color/variable/_box-shadows.scss | 4 +- module/color/variable/_decisions.scss | 1 + src/component/link/template/ejs/link.ejs | 12 +- src/component/notice/.package.yml | 1 + src/component/notice/example/index.ejs | 41 ++++-- .../notice/example/sample/sample-alert.ejs | 13 ++ .../notice/example/sample/sample-content.ejs | 15 +++ .../notice/example/sample/sample-generic.ejs | 11 ++ .../notice/example/sample/sample-meteo.ejs | 11 ++ src/component/notice/style/_module.scss | 126 ++++++++++++++++-- src/component/notice/style/_scheme.scss | 60 +++++++++ src/component/notice/template/ejs/notice.ejs | 40 ++++-- .../icon/system/fr--alert-warning-2-fill.svg | 1 + .../icon/system/fr--alert-warning-fill.svg | 1 + src/core/icon/weather/heavy-showers-fill.svg | 1 + src/core/icon/weather/tornado-fill.svg | 1 + src/core/icon/weather/typhoon-fill.svg | 1 + 17 files changed, 311 insertions(+), 29 deletions(-) create mode 100644 src/component/notice/example/sample/sample-alert.ejs create mode 100644 src/component/notice/example/sample/sample-content.ejs create mode 100644 src/component/notice/example/sample/sample-generic.ejs create mode 100644 src/component/notice/example/sample/sample-meteo.ejs create mode 100644 src/core/icon/system/fr--alert-warning-2-fill.svg create mode 100644 src/core/icon/system/fr--alert-warning-fill.svg create mode 100644 src/core/icon/weather/heavy-showers-fill.svg create mode 100644 src/core/icon/weather/tornado-fill.svg create mode 100644 src/core/icon/weather/typhoon-fill.svg diff --git a/module/color/variable/_box-shadows.scss b/module/color/variable/_box-shadows.scss index 788352907..558de4c80 100644 --- a/module/color/variable/_box-shadows.scss +++ b/module/color/variable/_box-shadows.scss @@ -21,8 +21,10 @@ $values: ( bottom-2-out: 0 2px 0 0 $COLOR, all-4-in: inset 0 0 0 4px $COLOR, all-6-in: inset 0 0 0 6px $COLOR, - left-6-in: inset 6px 0 0 0 $COLOR, + top-6-in: inset 0 6px 0 0 $COLOR, right-6-in: inset -6px 0 0 0 $COLOR, + bottom-6-in: inset 0 -6px 0 0 $COLOR, + left-6-in: inset 6px 0 0 0 $COLOR, all-8-in: inset 0 0 0 8px $COLOR, left-10-in: inset 10px 0 0 0 $COLOR, right-10-in: inset -10px 0 0 0 $COLOR, diff --git a/module/color/variable/_decisions.scss b/module/color/variable/_decisions.scss index 627d5a3ad..99b238111 100644 --- a/module/color/variable/_decisions.scss +++ b/module/color/variable/_decisions.scss @@ -24,6 +24,7 @@ $values: ( system: strong, ), action-high: ( + neutral: strongest (hover: true), primary: strong (hover: true), accent: strong (hover: true), system: strong (hover: true) diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index e8627e5d2..d7e037e8b 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -26,17 +26,25 @@ * left : icone à gauche du label * right : icone à droite du label +* link.id (string, optional) : id du lien + * link.attributes (object, optional) : attributs spécifiques à rajouter sur le composant * link.classes (array, optional) : classes spécifiques à rajouter sur le composant +* link.assess (bool, optional) : si true, ajoute l'attribut permettant le remplissage automatique des informations du fichier à télécharger. Si string, ajoute l'attribut avec la valeur de la string (ex: "bytes" pour les poids en bytes) + +* link.hreflang (string, optional) : code langue du fichier à télécharger + +* link.isFrLink (bool, optional) : si false, n'ajoute pas la classe de base "fr-link" + %> <% eval(include('../../../../core/index.ejs')); %> <% const link = locals.link || {}; let linkClasses = link.classes || []; let linkAttrs = link.attributes || {}; - +let isFrLink = link.isFrLink !== false; let label = link.label || 'lorem ipsum'; const markup = link.markup || 'a'; @@ -53,7 +61,7 @@ if (link.download === true) { linkClasses.push(prefix + '-link--download'); } -linkClasses.push(prefix + '-link'); +if (isFrLink) linkClasses.push(prefix + '-link'); linkAttrs.id = link.id || uniqueId('link'); diff --git a/src/component/notice/.package.yml b/src/component/notice/.package.yml index a2fa8fd7d..70b5386c9 100644 --- a/src/component/notice/.package.yml +++ b/src/component/notice/.package.yml @@ -5,3 +5,4 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bande style: - core - button + - link diff --git a/src/component/notice/example/index.ejs b/src/component/notice/example/index.ejs index b0154c3b6..7589546f0 100755 --- a/src/component/notice/example/index.ejs +++ b/src/component/notice/example/index.ejs @@ -1,13 +1,38 @@ -<% -const sample = getSample(include); -%> +<% const sample = getSample(include); %> -<%- section('Bandeau d\'information importante', 'Seul le bandeau de type information est disponible pour le moment.
Le titre est défini par la classe "fr-notice__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.
Le bandeau doit être placé au début du contenu de la page, pour être le premier élément au clique sur le lien d\'évitement "aller au contenu".', 0, true); %> +<% + const elements = [ + { + title: 'Contenu', + path: 'sample-content' + }, + { + title: 'Bandeaux génériques', + path: 'sample-generic' + }, + { + title: 'Bandeaux météo', + path: 'sample-meteo' + }, + { + title: 'Bandeaux d\'alertes', + path: 'sample-alert' + }, + ]; -<%- sample('Bandeau d\'information importante simple', './sample/notice-default', {notice: {type: "info", title: "Titre du bandeau d'information"}}, true, './layout.ejs'); %> + const accordions = []; -<%- sample('Bandeau d\'information importante avec bouton fermer', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau"}}, true, './layout.ejs'); %> + for (let element of elements) { + accordions.push({ + label: element.title, + id: uniqueId('notice'), + content: include(`./sample/${element.path}`) + }); + } -<%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: `Titre du bandeau, lien au fil du texte`}}, true, './layout.ejs'); %> + const data = { + accordions: accordions + } + %> -<%- sample('Bandeau d\'information importante avec titre long', './sample/notice-dismissable', {notice: {type: "info", title: `Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un lien au fil du texte lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %> +<%- include('../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %> diff --git a/src/component/notice/example/sample/sample-alert.ejs b/src/component/notice/example/sample/sample-alert.ejs new file mode 100644 index 000000000..86c7f2e7f --- /dev/null +++ b/src/component/notice/example/sample/sample-alert.ejs @@ -0,0 +1,13 @@ +<% +const sample = getSample(include); +%> + +<%- section('Bandeaux d\'alertes', 'Il existe 4 bandeaux d\'alertes utilisables en fonction du type d\'alerte. L\'icône ne peut pas être modifiée et les intitulés officiels doivent être utilisés', 0, true); %> + +<%- sample('Bandeau d\'appel à témoins', './notice-dismissable', {notice: {type: "witness", title: 'Appel à témoins', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'alerte enlèvement (non modifiable)', './notice-dismissable', {notice: {type: "kidnapping", title: 'Alerte enlèvement', desc: 'Une alerte enlèvement est en cours actuellement.', link: {label: 'Cliquez ici pour en savoir plus', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau vigipirate', './notice-dismissable', {notice: {type: "vigipirate", title: 'Vigipirate', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau de cyberattack', './notice-dismissable', {notice: {type: "cyberattack", title: 'Cyber-attaque', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/example/sample/sample-content.ejs b/src/component/notice/example/sample/sample-content.ejs new file mode 100644 index 000000000..22843a01b --- /dev/null +++ b/src/component/notice/example/sample/sample-content.ejs @@ -0,0 +1,15 @@ +<% +const sample = getSample(include); +%> + +<%- section('Contenu des Bandeaux d\'information importante', 'La balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.
Le bandeau doit être placé au début du contenu de la page, pour être le premier élément au clique sur le lien d\'évitement "aller au contenu".', 0, true); %> + +<%- sample('Bandeau d\'information minimum', './notice-default', {notice: {type: "info", title: "Titre du bandeau d'information"}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'information avec bouton fermer', './notice-dismissable', {notice: {type: "info", title: "Titre du bandeau"}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'information sans icône', './notice-dismissable', {notice: {type: "info", icon: false, title: "Titre du bandeau"}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'information avec icone personnalisée', './notice-dismissable', {notice: {type: "info", icon: 'virus-fill', title: "Titre du bandeau"}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'information cas max', './notice-dismissable', {notice: {type: "info", title: 'Titre du bandeau assez long', desc: 'Texte de description plutot long lorem ipsum sit consectetur adipiscing elit. Sed', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/example/sample/sample-generic.ejs b/src/component/notice/example/sample/sample-generic.ejs new file mode 100644 index 000000000..ae5d3daaf --- /dev/null +++ b/src/component/notice/example/sample/sample-generic.ejs @@ -0,0 +1,11 @@ +<% +const sample = getSample(include); +%> + +<%- section('Bandeaux génériques', 'Il existe 3 bandeaux génériques utilisables en fonction du niveau de gravité de l\'information. L\'icône peut être modifiée et seul le titre est obligatoire', 0, true); %> + +<%- sample('Bandeau d\'information', './notice-dismissable', {notice: {type: "info", title: 'Titre du bandeau d\'information', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'avertissement', './notice-dismissable', {notice: {type: "warning", title: 'Titre du bandeau d\'avertissement', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'alerte', './notice-dismissable', {notice: {type: "alert", title: 'Titre du bandeau d\'alerte', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/example/sample/sample-meteo.ejs b/src/component/notice/example/sample/sample-meteo.ejs new file mode 100644 index 000000000..f67b775aa --- /dev/null +++ b/src/component/notice/example/sample/sample-meteo.ejs @@ -0,0 +1,11 @@ +<% +const sample = getSample(include); +%> + +<%- section('Bandeaux météo', 'Il existe 3 bandeaux météo utilisables en fonction du niveau d\'alerte météo. L\'icône peut être modifiée et seul le titre est obligatoire', 0, true); %> + +<%- sample('Bandeau d\'information', './notice-dismissable', {notice: {type: "weather-orange", title: 'Libellé de l’alerte orange', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'avertissement', './notice-dismissable', {notice: {type: "weather-red", title: 'Libellé de l’alerte rouge', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> + +<%- sample('Bandeau d\'alerte', './notice-dismissable', {notice: {type: "weather-purple", title: 'Libellé de l’alerte violette', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/style/_module.scss b/src/component/notice/style/_module.scss index 83d57035c..5c80356ab 100644 --- a/src/component/notice/style/_module.scss +++ b/src/component/notice/style/_module.scss @@ -3,6 +3,8 @@ /// @group notice //// +@use 'module/media-query'; + #{ns(notice)} { @include relative(); @include set-title-margin(0); @@ -11,28 +13,136 @@ &__body { @include relative; - @include padding(0 10v 0 10v); + @include padding(0 9v 0 0); + @include padding(0 12v 0 0, md); + } + &__title { + @include relative; + @include margin-right(1v); + @include font-weight(bold); @include icon-size(md, before); @include icon-style(before) { - @include absolute(null, null, null, 0); + @include margin-right(2v); } } - &__title { - @include relative; - @include text-style(md); - @include font-weight(bold); + &__desc { + @include margin-right(1v); + } + + &__title, + &__desc { + display: block; + @include media-query.respond-from(sm) { + display: inline; + } + } + + &__title, + &__desc, + &__link { + @include text-style(sm); + @include media-query.respond-from(md) { + @include text-style(md); + } + } + + &--no-icon { + #{ns(notice)}__title { + @include before { + display: none; + } + } } #{ns(btn--close)} { @include nest-btn(sm, only, close-line, null, false); @include absolute(-1v, 0); + color: inherit; } &--info { - #{ns(notice)}__body { - @include icon-image(info-fill, before); + #{ns(notice)}__title { + @include has-not-icon { + @include icon-image(info-fill, before); + @include icon-content; + } + } + } + + &--warning, + &--alert { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-image(warning-fill, before); + @include icon-content; + } + } + } + + &--weather-orange { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-image(heavy-showers-fill, before); + @include icon-content; + } + } + } + + &--weather-red { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-image(tornado-fill, before); + @include icon-content; + } + } + } + + &--weather-purple { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-image(typhoon-fill, before); + @include icon-content; + } + } + } + + &--witness, + &--kidnapping, + &--vigipirate, + &--cyberattack { + @include padding-top(5.5v); + + #{ns(notice)}__title { + text-transform: uppercase; + } + } + + &--witness { + #{ns(notice)}__title { + @include icon-image(warning-fill, before); + @include icon-content; + } + } + + &--kidnapping { + #{ns(notice)}__title { + @include icon-image(alert-warning-fill, before); + @include icon-content; + } + } + + &--vigipirate { + #{ns(notice)}__title { + @include icon-image(alert-warning-2-fill, before); + @include icon-content; + } + } + + &--cyberattack { + #{ns(notice)}__title { + @include icon-image(warning-fill, before); @include icon-content; } } diff --git a/src/component/notice/style/_scheme.scss b/src/component/notice/style/_scheme.scss index 862f94683..66b0f5781 100644 --- a/src/component/notice/style/_scheme.scss +++ b/src/component/notice/style/_scheme.scss @@ -14,5 +14,65 @@ @include color.background(contrast info, (legacy:$legacy)); @include color.text(default info, (legacy:$legacy)); } + + &--warning, + &--weather-orange { + @include color.background(contrast warning, (legacy:$legacy)); + @include color.text(default warning, (legacy:$legacy)); + } + + &--alert { + @include color.background(contrast error, (legacy:$legacy)); + @include color.text(default error, (legacy:$legacy)); + } + + &--weather-red { + @include color.background(flat error, (legacy:$legacy)); + @include color.text(inverted grey, (legacy:$legacy)); + + #{ns(btn--close)} { + @include color.background(action-high error, (legacy:$legacy)); + } + } + + &--weather-purple { + @include color.background(flat purple-glycine, (legacy:$legacy)); + @include color.text(inverted grey, (legacy:$legacy)); + + #{ns(btn--close)} { + @include color.background(action-high purple-glycine, (legacy:$legacy)); + } + } + + &--witness { + @include color.background(flat grey, (legacy:$legacy)); + @include color.text(inverted grey, (legacy:$legacy)); + @include color.box-shadow(plain error, (legacy:$legacy), top-6-in); + + #{ns(btn--close)} { + @include color.background(action-high grey, (legacy:$legacy)); + } + } + + &--kidnapping, + &--vigipirate { + @include color.background(flat error, (legacy:$legacy)); + @include color.text(inverted grey, (legacy:$legacy)); + @include color.box-shadow(plain grey, (legacy:$legacy), top-6-in); + + #{ns(btn--close)} { + @include color.background(action-high error, (legacy:$legacy)); + } + } + + &--cyberattack { + @include color.background(flat grey, (legacy:$legacy)); + @include color.text(inverted grey, (legacy:$legacy)); + @include color.box-shadow(plain info, (legacy:$legacy), top-6-in); + + #{ns(btn--close)} { + @include color.background(action-high grey, (legacy:$legacy)); + } + } } } diff --git a/src/component/notice/template/ejs/notice.ejs b/src/component/notice/template/ejs/notice.ejs index 874536d9a..8b9f4688a 100644 --- a/src/component/notice/template/ejs/notice.ejs +++ b/src/component/notice/template/ejs/notice.ejs @@ -5,9 +5,13 @@ * notice.id (String, optional): Id du bandeau -* notice.text (string, optional) : Texte de decription de bandeau +* notice.desc (string, optional) : Texte de decription de bandeau -* notice.type (String, optional): Type de bandeau [info] +* notice.link (object, optional): Paramètres du lien + +* notice.type (String, optional): Type de bandeau [info/warning/alert/weather-orange/weather-red/weather-purple/kidnapping/cyberattack/vigipirate/witness] + +* notice.icon (String, optional): Nom de l'icône du bandeau ou false pour ne pas afficher d'icône * notice.dismissable (boolean, optional): Ajoute un bouton de fermeture @@ -15,6 +19,8 @@ * notice.notice (boolean, optional): Si true, ajoute un role notice (si insertion à la volée du bandeau) +* notice.markup (string, optional): Balise de contenu du bandeau (p [default], h1, h2, h3, h4, h5, h6) + * notice.classes (array, optional): Classes supplémentaires sur le bandeau * notice.attribute (object, optional): Attributs supplémentaires sur le bandeau @@ -25,23 +31,37 @@ <% eval(include('../../../../core/index.ejs')); %> <% -let notice = locals.notice || {}; -let title = notice.title || false; -let type = notice.type || false; -let classes = notice.classes || []; -let attributes = notice.attributes || {}; +const notice = locals.notice || {}; +const title = notice.title || false; +const desc = notice.desc || false; +const link = notice.link || false; +const type = notice.type || false; +const classes = notice.classes || []; +const attributes = notice.attributes || {}; +const markup = notice.markup || 'p'; classes.push(prefix + '-notice'); +const titleClasses = [`${prefix}-notice__title`]; if (type) classes.push(prefix + '-notice--' + type); if (notice.notice) attributes.role = "notice"; if (notice.id) attributes.id = notice.id; +if (notice.icon === false) classes.push(prefix + '-notice--no-icon'); +else if (notice.icon) titleClasses.push(prefix + '-icon-' + notice.icon); %>
<%- includeClasses(classes); %>>
- <% if (title) { %> -

<%- title %>

- <% } %> + <<%= markup %>> + <% if (title) { %> + ><%- title %> + <% } %> + <% if (desc) { %> + <%- desc %> + <% } %> + <% if (link) { %> + <%- include('../../../link/template/ejs/link', {link: {classes: [`${prefix}-notice__link`], isFrLink: false, ...notice.link}}) %> + <% } %> + > <% if (notice.dismissable) { %> <%- include('../../../button/template/ejs/button', {button: {size: 'md', classes: [`${prefix}-btn--close`], ...notice.button}}) %> <% } %> diff --git a/src/core/icon/system/fr--alert-warning-2-fill.svg b/src/core/icon/system/fr--alert-warning-2-fill.svg new file mode 100644 index 000000000..b8d6fcdf4 --- /dev/null +++ b/src/core/icon/system/fr--alert-warning-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/core/icon/system/fr--alert-warning-fill.svg b/src/core/icon/system/fr--alert-warning-fill.svg new file mode 100644 index 000000000..1cdfc5d26 --- /dev/null +++ b/src/core/icon/system/fr--alert-warning-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/core/icon/weather/heavy-showers-fill.svg b/src/core/icon/weather/heavy-showers-fill.svg new file mode 100644 index 000000000..3e7b8b2cc --- /dev/null +++ b/src/core/icon/weather/heavy-showers-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/core/icon/weather/tornado-fill.svg b/src/core/icon/weather/tornado-fill.svg new file mode 100644 index 000000000..2ee434dec --- /dev/null +++ b/src/core/icon/weather/tornado-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/core/icon/weather/typhoon-fill.svg b/src/core/icon/weather/typhoon-fill.svg new file mode 100644 index 000000000..2abce469f --- /dev/null +++ b/src/core/icon/weather/typhoon-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file From 08b17d325e04b1b995ee5caab5d1a00e8f603d5b Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 12 Apr 2024 13:05:45 +0200 Subject: [PATCH 02/15] feat(notice): mise en situation --- src/component/notice/.package.yml | 7 ++++ src/component/notice/example/index.ejs | 4 ++ .../notice/example/sample/sample-content.ejs | 2 +- .../notice/example/sample/sample-header.ejs | 38 +++++++++++++++++++ 4 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 src/component/notice/example/sample/sample-header.ejs diff --git a/src/component/notice/.package.yml b/src/component/notice/.package.yml index 70b5386c9..504d2b1aa 100644 --- a/src/component/notice/.package.yml +++ b/src/component/notice/.package.yml @@ -6,3 +6,10 @@ style: - core - button - link +example: + style: + - header + - navigation + - breadcrumb + - search + - skiplink \ No newline at end of file diff --git a/src/component/notice/example/index.ejs b/src/component/notice/example/index.ejs index 7589546f0..0371935c0 100755 --- a/src/component/notice/example/index.ejs +++ b/src/component/notice/example/index.ejs @@ -18,6 +18,10 @@ title: 'Bandeaux d\'alertes', path: 'sample-alert' }, + { + title: 'Mise en situation', + path: 'sample-header' + }, ]; const accordions = []; diff --git a/src/component/notice/example/sample/sample-content.ejs b/src/component/notice/example/sample/sample-content.ejs index 22843a01b..9b787f7d2 100644 --- a/src/component/notice/example/sample/sample-content.ejs +++ b/src/component/notice/example/sample/sample-content.ejs @@ -2,7 +2,7 @@ const sample = getSample(include); %> -<%- section('Contenu des Bandeaux d\'information importante', 'La balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.
Le bandeau doit être placé au début du contenu de la page, pour être le premier élément au clique sur le lien d\'évitement "aller au contenu".', 0, true); %> +<%- section('Contenu des Bandeaux d\'information importante', 'Le bandeau doit être placé sur toutes les pages du site.
La balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.', 0, true); %> <%- sample('Bandeau d\'information minimum', './notice-default', {notice: {type: "info", title: "Titre du bandeau d'information"}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/example/sample/sample-header.ejs b/src/component/notice/example/sample/sample-header.ejs new file mode 100644 index 000000000..de8de7a1d --- /dev/null +++ b/src/component/notice/example/sample/sample-header.ejs @@ -0,0 +1,38 @@ +<% +const sample = getSample(include); +%> + +<%- section('Mise en situation du placement du bandeau', 'Le bandeau doit être placé au début du contenu de la page, pour être le premier élément au clique sur le lien d\'évitement "aller au contenu".', 0, true); %> + +<% +const skiplinks = [ + { label: 'Contenu', href:'#content' }, + { label: 'Menu', href:'#header-navigation' }, +]; +%> + +<%- include('../../../../component/skiplink/template/ejs/skiplinks', { skiplink: {items: skiplinks} }, true); %> + +<%- include('../../../../component/header/example/sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, navigation: true }}, true); %> + +
+ <%- include('../../template/ejs/notice.ejs', {notice: {type: 'info', title: 'Information importante'}}); %> + + <% const breadcrumb = { + id: uniqueId('breadcrumb'), + segments: [ + { path: '', label: 'Accueil' }, + { path: 'segment-1', label: 'Nom de la page' }, + { path: 'segment-2', label: 'Nom de la page' }, + { label: 'Page Actuelle' } + ] + } + %> +
+ <%- include('../../../../component/breadcrumb/template/ejs/breadcrumb', { breadcrumb: breadcrumb }, true); %> +
+ +
+

lorem, ipsum dolor sit amet

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore similique commodi sit eligendi, esse ab sapiente necessitatibus, consequatur delectus nobis doloribus rem libero, expedita blanditiis veritatis? Nobis doloribus possimus reprehenderit.

+
From cdbba492750e16e3c73e21c1bb74691eafdb1e50 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 12 Apr 2024 15:50:08 +0200 Subject: [PATCH 03/15] fix(notice): legacy icons --- src/component/notice/style/_legacy.scss | 67 ++++++++++++++++++++++--- 1 file changed, 61 insertions(+), 6 deletions(-) diff --git a/src/component/notice/style/_legacy.scss b/src/component/notice/style/_legacy.scss index 0ed559bff..ac1c720b7 100644 --- a/src/component/notice/style/_legacy.scss +++ b/src/component/notice/style/_legacy.scss @@ -6,19 +6,74 @@ @use 'module/legacy'; @include legacy.is(ie11) { - /** - * reset des marges dans le bandeau - */ #{ns(notice)} { &__title, p { @include margin(0); } + &__title { + @include before { + vertical-align: -6px; + color: transparent; + } + } + &--info { - #{ns(notice)}__body { - @include icon-legacy(info-fill, md, before, false) { - color: transparent; + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(info-fill, md, before, false); + } + } + } + + &--warning, + &--alert, + &--witness, + &--cyberattack { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(warning-fill, md, before, false); + } + } + } + + &--weather-orange { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(heavy-showers-fill, md, before, false); + } + } + } + + &--weather-red { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(tornado-fill, md, before, false); + } + } + } + + &--weather-purple { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(typhoon-fill, md, before, false); + } + } + } + + &--kidnapping { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(alert-warning-fill, md, before, false); + } + } + } + + &--vigipirate { + #{ns(notice)}__title { + @include has-not-icon { + @include icon-legacy(alert-warning-2-fill, md, before, false); } } } From 0b13a63736e75f9dd96ae78e0a8a781a6fed9cbf Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Tue, 30 Apr 2024 16:22:30 +0200 Subject: [PATCH 04/15] =?UTF-8?q?fix(notice):=20retrait=20des=20bandeau=20?= =?UTF-8?q?d'alerte=20enl=C3=A8vement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/notice/example/sample/sample-alert.ejs | 2 +- src/component/notice/style/_module.scss | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/component/notice/example/sample/sample-alert.ejs b/src/component/notice/example/sample/sample-alert.ejs index 86c7f2e7f..3c69fa910 100644 --- a/src/component/notice/example/sample/sample-alert.ejs +++ b/src/component/notice/example/sample/sample-alert.ejs @@ -6,7 +6,7 @@ const sample = getSample(include); <%- sample('Bandeau d\'appel à témoins', './notice-dismissable', {notice: {type: "witness", title: 'Appel à témoins', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> -<%- sample('Bandeau d\'alerte enlèvement (non modifiable)', './notice-dismissable', {notice: {type: "kidnapping", title: 'Alerte enlèvement', desc: 'Une alerte enlèvement est en cours actuellement.', link: {label: 'Cliquez ici pour en savoir plus', href: '#', blank: true}}}, true, '../layout.ejs'); %> + <%- sample('Bandeau vigipirate', './notice-dismissable', {notice: {type: "vigipirate", title: 'Vigipirate', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/style/_module.scss b/src/component/notice/style/_module.scss index 5c80356ab..4f71db442 100644 --- a/src/component/notice/style/_module.scss +++ b/src/component/notice/style/_module.scss @@ -119,7 +119,8 @@ } } - &--witness { + &--witness, + &--cyberattack { #{ns(notice)}__title { @include icon-image(warning-fill, before); @include icon-content; @@ -139,11 +140,4 @@ @include icon-content; } } - - &--cyberattack { - #{ns(notice)}__title { - @include icon-image(warning-fill, before); - @include icon-content; - } - } } From 8a3e7f5cf75a5b302a32cc56fd43c10ce7eefde9 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 17 May 2024 10:56:33 +0200 Subject: [PATCH 05/15] Update src/component/link/template/ejs/link.ejs Co-authored-by: Baptiste.z --- src/component/link/template/ejs/link.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index d7e037e8b..d17ce5509 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -32,7 +32,7 @@ * link.classes (array, optional) : classes spécifiques à rajouter sur le composant -* link.assess (bool, optional) : si true, ajoute l'attribut permettant le remplissage automatique des informations du fichier à télécharger. Si string, ajoute l'attribut avec la valeur de la string (ex: "bytes" pour les poids en bytes) +* link.assess (bool | string, optional) : si true, ajoute l'attribut permettant le remplissage automatique des informations du fichier à télécharger. Si string, ajoute l'attribut avec la valeur de la string (ex: "bytes" pour les poids en bytes) * link.hreflang (string, optional) : code langue du fichier à télécharger From 9e03cbab533c8638f1a6aa61f28df726646895eb Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Tue, 21 May 2024 18:58:28 +0200 Subject: [PATCH 06/15] refactor(link, button, notice): ajout d'un template action dans core MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Les fr-link et fr-btn sont maintenant basés sur le template action pour définir leur markup, état désactivés, et libellé --- src/component/button/template/ejs/button.ejs | 49 +++----- src/component/form/example/index.ejs | 2 +- src/component/link/template/ejs/link.ejs | 115 +++++++------------ src/component/notice/style/_module.scss | 29 +++-- src/component/notice/style/_scheme.scss | 6 +- src/component/notice/template/ejs/notice.ejs | 4 +- src/core/template/ejs/action/action.ejs | 78 +++++++++++++ 7 files changed, 158 insertions(+), 125 deletions(-) create mode 100644 src/core/template/ejs/action/action.ejs diff --git a/src/component/button/template/ejs/button.ejs b/src/component/button/template/ejs/button.ejs index d1e5f0045..0fe1700fe 100644 --- a/src/component/button/template/ejs/button.ejs +++ b/src/component/button/template/ejs/button.ejs @@ -43,10 +43,17 @@ const button = locals.button || {}; let btnClasses = button.classes || []; let btnAttrs = button.attributes || {}; btnAttrs.id = button.id || uniqueId('button'); - -const markup = button.markup || 'button'; - btnClasses.push(prefix + '-btn'); +let action; +const markup = button.markup || 'button'; +switch (markup) { + case 'a': + action = 'link'; + break; + default: + action = markup; + break; +} switch(button.size) { case 'sm': @@ -84,37 +91,8 @@ switch (button.kind) { break; } -if (button.disabled === true) { - switch(markup) { - case 'input': - case 'button': - btnAttrs['disabled'] = ''; - break; - - case 'a': - btnAttrs['aria-disabled'] = 'true'; - btnAttrs.role = 'link'; - break; - } -} else { +if (button.disabled !== true) { if (button.onclick) btnAttrs.onclick = button.onclick; - - switch (markup) { - case 'a': - btnAttrs.href = button.href || '#[url - à modifier]'; - switch (true) { - case button.blank: - btnAttrs = {...targetBlankData(), ...btnAttrs}; - break; - - case button.self: - btnAttrs.target = '_self'; - break; - } - - if (button.rel) btnAttrs.rel = button.rel; - break; - } } if (button.title) btnAttrs['title'] = button.title; @@ -123,9 +101,8 @@ if (button.tooltip && button.tooltip.id) btnAttrs['aria-describedby'] = button.t %> <% if (button.comments) { %><% } %> -<<%= markup %> <%- includeClasses(btnClasses) %> <%- includeAttrs(btnAttrs); %> > - <%- button.label %> -> +<%- include('../../../../core/template/ejs/action/action', {action: {...button, classes: btnClasses, attributes: btnAttrs, kind: action}}) %> + <% if (button.tooltip) { %> <%- include('../../../tooltip/template/ejs/tooltip', {tooltip: button.tooltip}); %> diff --git a/src/component/form/example/index.ejs b/src/component/form/example/index.ejs index 300a53585..1efc7a732 100755 --- a/src/component/form/example/index.ejs +++ b/src/component/form/example/index.ejs @@ -33,7 +33,7 @@ <%- sample('Bouton type submit', '../../button/example/sample/button-default', { button: { type:'submit', label: 'Envoyer', title: 'Envoyer le formulaire' }}, true); %> -<%- sample('Input type submit', '../../button/example/sample/button-default', { button: { markup: 'input', label: ' ', title: 'Envoyer le formulaire', type:'submit', attributes: { value: 'Envoyer', title: 'Envoyer le formulaire' }}}, true); %> +<%- sample('Input type submit', '../../button/example/sample/button-default', { button: { markup: 'input', label: 'Envoyer', title: 'Envoyer le formulaire', type:'submit', attributes: { title: 'Envoyer le formulaire' }}}, true); %> diff --git a/src/component/link/template/ejs/link.ejs b/src/component/link/template/ejs/link.ejs index d17ce5509..f0c2707f6 100644 --- a/src/component/link/template/ejs/link.ejs +++ b/src/component/link/template/ejs/link.ejs @@ -36,98 +36,71 @@ * link.hreflang (string, optional) : code langue du fichier à télécharger -* link.isFrLink (bool, optional) : si false, n'ajoute pas la classe de base "fr-link" - %> <% eval(include('../../../../core/index.ejs')); %> <% const link = locals.link || {}; -let linkClasses = link.classes || []; -let linkAttrs = link.attributes || {}; -let isFrLink = link.isFrLink !== false; +const linkClasses = link.classes || []; +const linkAttrs = link.attributes || {}; let label = link.label || 'lorem ipsum'; - +const disabled = link.disabled === true; +linkAttrs.id = link.id || uniqueId('link'); +linkClasses.push(prefix + '-link'); +let action; const markup = link.markup || 'a'; - -if (link.assess === true) { - linkAttrs[`data-${prefix}-assess-file`] = '' -} else if (typeof(link.assess) === 'string') { - linkAttrs[`data-${prefix}-assess-file`] = link.assess +switch (markup) { + case 'a': + action = 'link'; + break; + default: + action = markup; + break; } -if (link.hreflang) linkAttrs.hreflang = link.hreflang; -if (link.download === true) { - linkAttrs.download = ''; - linkClasses.push(prefix + '-link--download'); +switch (action) { + case 'link': + if (link.rel) linkAttrs.rel = link.rel; + if (link.hreflang) linkAttrs.hreflang = link.hreflang; + if (link.download) { + linkAttrs.download = link.download; + linkClasses.push(prefix + '-link--download'); + } + if (link.assess === true) { + linkAttrs[`data-${prefix}-assess-file`] = '' + } else if (typeof(link.assess) === 'string') { + linkAttrs[`data-${prefix}-assess-file`] = link.assess + } + break; } -if (isFrLink) linkClasses.push(prefix + '-link'); - -linkAttrs.id = link.id || uniqueId('link'); - switch (link.size) { - case 'sm': - linkClasses.push(prefix + '-link--sm'); - break; + case 'sm': + linkClasses.push(prefix + '-link--sm'); + break; - case 'lg': - linkClasses.push(prefix + '-link--lg'); - break; + case 'lg': + linkClasses.push(prefix + '-link--lg'); + break; } if (link.icon !== undefined) linkClasses.push(`${prefix}-icon-${link.icon}`); if (link.iconPlace !== undefined) { - switch (link.iconPlace) { - case 'left': - linkClasses.push(`${prefix}-link--icon-left`); - break; - - case 'right': - linkClasses.push(`${prefix}-link--icon-right`); - break; - } -} - -if (link.disabled === true) { - switch (markup) { - case 'input': - case 'button': - linkAttrs['disabled'] = ''; - break; - - case 'a': - linkAttrs['aria-disabled'] = 'true'; - linkAttrs.role = 'link'; - linkAttrs.href = undefined; - break; - } -} else { - switch (markup) { - case 'a': - linkAttrs.href = link.href || '[url - à modifier]'; - switch (true) { - case link.download: - linkAttrs.download = 'true'; - break; - - case link.blank: - linkAttrs = {...targetBlankData(), ...linkAttrs}; - break; - - case link.self: - linkAttrs.target = '_self'; - break; - } - if (link.rel) linkAttrs.rel = link.rel; - break; - } + switch (link.iconPlace) { + case 'left': + linkClasses.push(`${prefix}-link--icon-left`); + break; + + case 'right': + linkClasses.push(`${prefix}-link--icon-right`); + break; + } } if (link.detail) { - label += ` ${link.detail}`; + label += ` ${link.detail}`; } %> -<<%= markup %> <%- includeClasses(linkClasses); %> <%- includeAttrs(linkAttrs); %> ><%- label %>> +<%- include('../../../../core/template/ejs/action/action', {action: {...link, classes: linkClasses, attributes: linkAttrs, kind: action, label: label, disabled: disabled}}) %> diff --git a/src/component/notice/style/_module.scss b/src/component/notice/style/_module.scss index 4f71db442..b20851411 100644 --- a/src/component/notice/style/_module.scss +++ b/src/component/notice/style/_module.scss @@ -4,8 +4,10 @@ //// @use 'module/media-query'; +@use 'module/selector'; +@use 'module/spacing'; -#{ns(notice)} { +#{selector.ns(notice)} { @include relative(); @include set-title-margin(0); @include set-text-margin(0); @@ -49,21 +51,21 @@ } &--no-icon { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include before { display: none; } } } - #{ns(btn--close)} { + #{selector.ns(btn--close)} { @include nest-btn(sm, only, close-line, null, false); @include absolute(-1v, 0); color: inherit; } &--info { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include has-not-icon { @include icon-image(info-fill, before); @include icon-content; @@ -73,7 +75,7 @@ &--warning, &--alert { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include has-not-icon { @include icon-image(warning-fill, before); @include icon-content; @@ -82,7 +84,7 @@ } &--weather-orange { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include has-not-icon { @include icon-image(heavy-showers-fill, before); @include icon-content; @@ -91,7 +93,7 @@ } &--weather-red { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include has-not-icon { @include icon-image(tornado-fill, before); @include icon-content; @@ -100,7 +102,7 @@ } &--weather-purple { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include has-not-icon { @include icon-image(typhoon-fill, before); @include icon-content; @@ -113,29 +115,32 @@ &--vigipirate, &--cyberattack { @include padding-top(5.5v); + background-position: 0 0; + background-size: spacing.space(100% 1.5v); + background-repeat: no-repeat; - #{ns(notice)}__title { + #{selector.ns(notice)}__title { text-transform: uppercase; } } &--witness, &--cyberattack { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include icon-image(warning-fill, before); @include icon-content; } } &--kidnapping { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include icon-image(alert-warning-fill, before); @include icon-content; } } &--vigipirate { - #{ns(notice)}__title { + #{selector.ns(notice)}__title { @include icon-image(alert-warning-2-fill, before); @include icon-content; } diff --git a/src/component/notice/style/_scheme.scss b/src/component/notice/style/_scheme.scss index 66b0f5781..cb5a5823b 100644 --- a/src/component/notice/style/_scheme.scss +++ b/src/component/notice/style/_scheme.scss @@ -47,7 +47,7 @@ &--witness { @include color.background(flat grey, (legacy:$legacy)); @include color.text(inverted grey, (legacy:$legacy)); - @include color.box-shadow(plain error, (legacy:$legacy), top-6-in); + @include color.background-image(border plain error, (legacy:$legacy)); #{ns(btn--close)} { @include color.background(action-high grey, (legacy:$legacy)); @@ -58,7 +58,7 @@ &--vigipirate { @include color.background(flat error, (legacy:$legacy)); @include color.text(inverted grey, (legacy:$legacy)); - @include color.box-shadow(plain grey, (legacy:$legacy), top-6-in); + @include color.background-image(border plain grey, (legacy:$legacy)); #{ns(btn--close)} { @include color.background(action-high error, (legacy:$legacy)); @@ -68,7 +68,7 @@ &--cyberattack { @include color.background(flat grey, (legacy:$legacy)); @include color.text(inverted grey, (legacy:$legacy)); - @include color.box-shadow(plain info, (legacy:$legacy), top-6-in); + @include color.background-image(border plain info, (legacy:$legacy)); #{ns(btn--close)} { @include color.background(action-high grey, (legacy:$legacy)); diff --git a/src/component/notice/template/ejs/notice.ejs b/src/component/notice/template/ejs/notice.ejs index 8b9f4688a..6bf9c85bc 100644 --- a/src/component/notice/template/ejs/notice.ejs +++ b/src/component/notice/template/ejs/notice.ejs @@ -59,11 +59,11 @@ else if (notice.icon) titleClasses.push(prefix + '-icon-' + notice.icon); <%- desc %> <% } %> <% if (link) { %> - <%- include('../../../link/template/ejs/link', {link: {classes: [`${prefix}-notice__link`], isFrLink: false, ...notice.link}}) %> + <%- include('../../../../core/template/ejs/action/action', {action: {...notice.link, classes: [`${prefix}-notice__link`], kind: 'link'}}) %> <% } %> > <% if (notice.dismissable) { %> - <%- include('../../../button/template/ejs/button', {button: {size: 'md', classes: [`${prefix}-btn--close`], ...notice.button}}) %> + <%- include('../../../button/template/ejs/button-close', {button: {size: 'md', ...notice.button}}) %> <% } %>
diff --git a/src/core/template/ejs/action/action.ejs b/src/core/template/ejs/action/action.ejs new file mode 100644 index 000000000..18d2bcc5c --- /dev/null +++ b/src/core/template/ejs/action/action.ejs @@ -0,0 +1,78 @@ +<%# +# paramètres action + +* button.kind (string, optional) : type d'action [button/input/link] +valeurs : + ** button (default) : bouton + ** input : input + ** link : lien + +* action.label (string, required) : label de l'élément d'action + +* action.href (string, optional) : adresse url du lien si action.kind = link + +* action.blank (bool, optional) : si true, target prend la valeur _blank + +* action.self (bool, optional) : si true, target prend la valeur _self + +* action.disabled (boolean, optional) : si valeur true, action désactivée + +* action.classes (array, optional) : classes de l'élément d'action + +* action.attributes (object, optional) : attributs de l'élément d'action + +#%> + +<% eval(include('../../../index.ejs')); %> + +<% +const action = locals.action || {}; +const actionClasses = action.classes || []; +let actionAttrs = action.attributes || {}; +const actionKind = action.kind || 'button'; +const actionLabel = action.label; +const actionDisabled = action.disabled === true; +let markup; + +switch (actionKind) { + case 'input': + markup = 'input'; + actionAttrs.value = actionLabel; + break; + + case 'button': + markup = 'button'; + break; + + case 'link': + markup = 'a'; + actionAttrs.href = action.href || '[url - à modifier]'; + switch (true) { + case action.blank: + actionAttrs = {...targetBlankData(), ...actionAttrs}; + break; + + case action.self: + actionAttrs.target = '_self'; + break; + } + break; +} + +if (actionDisabled === true) { + switch (actionKind) { + case 'input': + case 'button': + actionAttrs['disabled'] = ''; + break; + + case 'link': + actionAttrs['aria-disabled'] = 'true'; + actionAttrs.role = 'link'; + actionAttrs.href = undefined; + break; + } +} +%> + +<<%= markup %> <%- includeAttrs(actionAttrs); %> <%- includeClasses(actionClasses); %>><% if (actionKind !== 'input') { %><%- actionLabel %>><% } %> \ No newline at end of file From e44502cafcaff744ec63912fa439f70700a5dc58 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 22 May 2024 17:05:17 +0200 Subject: [PATCH 07/15] fix(core): type dans template action --- src/component/button/template/ejs/button.ejs | 1 - src/core/template/ejs/action/action.ejs | 10 +++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/component/button/template/ejs/button.ejs b/src/component/button/template/ejs/button.ejs index 0fe1700fe..f596659d4 100644 --- a/src/component/button/template/ejs/button.ejs +++ b/src/component/button/template/ejs/button.ejs @@ -96,7 +96,6 @@ if (button.disabled !== true) { } if (button.title) btnAttrs['title'] = button.title; -if (button.type !== undefined) btnAttrs['type'] = button.type; if (button.tooltip && button.tooltip.id) btnAttrs['aria-describedby'] = button.tooltip.id; %> diff --git a/src/core/template/ejs/action/action.ejs b/src/core/template/ejs/action/action.ejs index 18d2bcc5c..d8b2d3091 100644 --- a/src/core/template/ejs/action/action.ejs +++ b/src/core/template/ejs/action/action.ejs @@ -7,13 +7,15 @@ valeurs : ** input : input ** link : lien -* action.label (string, required) : label de l'élément d'action +* action.label (string, required) : libellé de l'élément d'action * action.href (string, optional) : adresse url du lien si action.kind = link -* action.blank (bool, optional) : si true, target prend la valeur _blank +* action.type (string, optional) : attribut type de l'élément d'action si action.kind = input ou button -* action.self (bool, optional) : si true, target prend la valeur _self +* action.blank (bool, optional) : si true, target prend la valeur _blank, si action.kind = link + +* action.self (bool, optional) : si true, target prend la valeur _self, si action.kind = link * action.disabled (boolean, optional) : si valeur true, action désactivée @@ -34,6 +36,8 @@ const actionLabel = action.label; const actionDisabled = action.disabled === true; let markup; +if (action.type) actionAttrs.type = action.type; + switch (actionKind) { case 'input': markup = 'input'; From 32abf351a56fd4da7ffe11ee6d921c91fe3494fd Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 22 May 2024 17:06:38 +0200 Subject: [PATCH 08/15] fix(core): precision doc --- src/core/template/ejs/action/action.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/template/ejs/action/action.ejs b/src/core/template/ejs/action/action.ejs index d8b2d3091..131876e63 100644 --- a/src/core/template/ejs/action/action.ejs +++ b/src/core/template/ejs/action/action.ejs @@ -11,7 +11,7 @@ valeurs : * action.href (string, optional) : adresse url du lien si action.kind = link -* action.type (string, optional) : attribut type de l'élément d'action si action.kind = input ou button +* action.type (string, optional) : attribut type de l'élément d'action si action.kind = input ou button [button/submit/reset] * action.blank (bool, optional) : si true, target prend la valeur _blank, si action.kind = link From 54c4f85efc386d40c16760fd5e5b3665718cd89e Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 27 May 2024 15:51:25 +0200 Subject: [PATCH 09/15] feat(notice): ajout tracking analytics du lien --- src/analytics/example/component/notice/index.ejs | 11 +++++++++++ .../integration/component/notice/notice-actionee.js | 9 +++++++++ .../integration/component/notice/notice-selector.js | 3 ++- 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100755 src/analytics/example/component/notice/index.ejs diff --git a/src/analytics/example/component/notice/index.ejs b/src/analytics/example/component/notice/index.ejs new file mode 100755 index 000000000..89d5384ba --- /dev/null +++ b/src/analytics/example/component/notice/index.ejs @@ -0,0 +1,11 @@ +<% const sample = getSample(include); %> + +<% +let title = 'Vigilance météo rouge'; +let desc = 'lorem ispum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec elit ultricies ultricies.'; +let link = {label: 'En savoir plus', href: 'https://www.meteofrance.fr/', blank: true}; +%> + +<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc:desc, link: link}}); %> + +<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr'}}}); %> diff --git a/src/analytics/script/integration/component/notice/notice-actionee.js b/src/analytics/script/integration/component/notice/notice-actionee.js index d49c0b2dd..b0cf8d859 100644 --- a/src/analytics/script/integration/component/notice/notice-actionee.js +++ b/src/analytics/script/integration/component/notice/notice-actionee.js @@ -11,6 +11,15 @@ class NoticeActionee extends ComponentActionee { return 'NoticeActionee'; } + init () { + const link = this.node.querySelector(NoticeSelector.LINK); + if (link) { + this.link = link; + this.detectInteractionType(link); + this.listenActionClick(link); + } + } + get label () { const noticeTitle = this.node.querySelector(NoticeSelector.TITLE); if (noticeTitle) { diff --git a/src/analytics/script/integration/component/notice/notice-selector.js b/src/analytics/script/integration/component/notice/notice-selector.js index 613d6543c..c672bea56 100644 --- a/src/analytics/script/integration/component/notice/notice-selector.js +++ b/src/analytics/script/integration/component/notice/notice-selector.js @@ -2,5 +2,6 @@ import api from '../../../../api'; export const NoticeSelector = { NOTICE: api.internals.ns.selector('notice'), - TITLE: api.internals.ns.selector('notice__title') + TITLE: api.internals.ns.selector('notice__title'), + LINK: api.internals.ns.selector('notice a') }; From e29501e0679435712c411fed5d0b3912e7f5c794 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 27 May 2024 16:00:09 +0200 Subject: [PATCH 10/15] fix(analytics): link actionee notice --- .../example/component/notice/index.ejs | 2 +- .../integration/component/notice/integrate.js | 2 ++ .../component/notice/notice-actionee.js | 9 ------ .../component/notice/notice-link-actionee.js | 30 +++++++++++++++++++ 4 files changed, 33 insertions(+), 10 deletions(-) create mode 100644 src/analytics/script/integration/component/notice/notice-link-actionee.js diff --git a/src/analytics/example/component/notice/index.ejs b/src/analytics/example/component/notice/index.ejs index 89d5384ba..c7633073d 100755 --- a/src/analytics/example/component/notice/index.ejs +++ b/src/analytics/example/component/notice/index.ejs @@ -8,4 +8,4 @@ let link = {label: 'En savoir plus', href: 'https://www.meteofrance.fr/', blank: <%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc:desc, link: link}}); %> -<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr'}}}); %> +<%- sample('Attentat en cours', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr'}}}); %> diff --git a/src/analytics/script/integration/component/notice/integrate.js b/src/analytics/script/integration/component/notice/integrate.js index 7c6664d99..7b95bdf62 100644 --- a/src/analytics/script/integration/component/notice/integrate.js +++ b/src/analytics/script/integration/component/notice/integrate.js @@ -1,9 +1,11 @@ import api from '../../../../api'; import { NoticeSelector } from './notice-selector'; import { NoticeActionee } from './notice-actionee'; +import { NoticeLinkActionee } from './notice-link-actionee'; const integrateNotice = () => { api.internals.register(NoticeSelector.NOTICE, NoticeActionee); + api.internals.register(NoticeSelector.LINK, NoticeLinkActionee); }; export default integrateNotice; diff --git a/src/analytics/script/integration/component/notice/notice-actionee.js b/src/analytics/script/integration/component/notice/notice-actionee.js index b0cf8d859..d49c0b2dd 100644 --- a/src/analytics/script/integration/component/notice/notice-actionee.js +++ b/src/analytics/script/integration/component/notice/notice-actionee.js @@ -11,15 +11,6 @@ class NoticeActionee extends ComponentActionee { return 'NoticeActionee'; } - init () { - const link = this.node.querySelector(NoticeSelector.LINK); - if (link) { - this.link = link; - this.detectInteractionType(link); - this.listenActionClick(link); - } - } - get label () { const noticeTitle = this.node.querySelector(NoticeSelector.TITLE); if (noticeTitle) { diff --git a/src/analytics/script/integration/component/notice/notice-link-actionee.js b/src/analytics/script/integration/component/notice/notice-link-actionee.js new file mode 100644 index 000000000..6bf2b456a --- /dev/null +++ b/src/analytics/script/integration/component/notice/notice-link-actionee.js @@ -0,0 +1,30 @@ +import { ComponentActionee } from '../component-actionee'; +import ID from './id'; + +class NavigationLinkActionee extends ComponentActionee { + constructor () { + super(2); + } + + static get instanceClassName () { + return 'NoticeLinkActionee'; + } + + init () { + this.detectInteractionType(); + this.listenActionClick(); + } + + get label () { + const firstText = this.getFirstText(); + if (firstText) return firstText; + + return 'lien de bandeau d\'information importante'; + } + + get component () { + return ID; + } +} + +export { NavigationLinkActionee }; From 23d7f389c87d774e73f906bbd0176b3a4b7412eb Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 27 May 2024 16:28:21 +0200 Subject: [PATCH 11/15] fix(notice): changement nomenclature --- .../component/notice/notice-link-actionee.js | 4 ++-- src/component/notice/example/index.ejs | 19 +++++-------------- .../notice/example/sample/sample-alert.ejs | 8 ++++---- .../notice/example/sample/sample-meteo.ejs | 8 ++++---- src/component/notice/style/_module.scss | 4 ++-- src/component/notice/style/_scheme.scss | 2 +- 6 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/analytics/script/integration/component/notice/notice-link-actionee.js b/src/analytics/script/integration/component/notice/notice-link-actionee.js index 6bf2b456a..d13165a5c 100644 --- a/src/analytics/script/integration/component/notice/notice-link-actionee.js +++ b/src/analytics/script/integration/component/notice/notice-link-actionee.js @@ -1,7 +1,7 @@ import { ComponentActionee } from '../component-actionee'; import ID from './id'; -class NavigationLinkActionee extends ComponentActionee { +class NoticeLinkActionee extends ComponentActionee { constructor () { super(2); } @@ -27,4 +27,4 @@ class NavigationLinkActionee extends ComponentActionee { } } -export { NavigationLinkActionee }; +export { NoticeLinkActionee }; diff --git a/src/component/notice/example/index.ejs b/src/component/notice/example/index.ejs index 0371935c0..31dadd039 100755 --- a/src/component/notice/example/index.ejs +++ b/src/component/notice/example/index.ejs @@ -26,17 +26,8 @@ const accordions = []; - for (let element of elements) { - accordions.push({ - label: element.title, - id: uniqueId('notice'), - content: include(`./sample/${element.path}`) - }); - } - - const data = { - accordions: accordions - } - %> - -<%- include('../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %> + for (let element of elements) { %> + <%- include(`./sample/${element.path}`); %> +



+ <% } +%> diff --git a/src/component/notice/example/sample/sample-alert.ejs b/src/component/notice/example/sample/sample-alert.ejs index 3c69fa910..6e9cd3aba 100644 --- a/src/component/notice/example/sample/sample-alert.ejs +++ b/src/component/notice/example/sample/sample-alert.ejs @@ -4,10 +4,10 @@ const sample = getSample(include); <%- section('Bandeaux d\'alertes', 'Il existe 4 bandeaux d\'alertes utilisables en fonction du type d\'alerte. L\'icône ne peut pas être modifiée et les intitulés officiels doivent être utilisés', 0, true); %> -<%- sample('Bandeau d\'appel à témoins', './notice-dismissable', {notice: {type: "witness", title: 'Appel à témoins', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- sample({title: 'Alerte attentat', subtitle: 'Ce bandeau ne peut être utilisé qu’en cas de danger imminent, et non pas pour informer sur un état d’alerte vigipirate qui aurait été relevé par exemple.'}, './notice-dismissable', {notice: {type: "attack", title: 'Attentat en cours', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> - +<%- sample('Appel à témoins', './notice-dismissable', {notice: {type: "witness", title: 'Appel à témoins', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> -<%- sample('Bandeau vigipirate', './notice-dismissable', {notice: {type: "vigipirate", title: 'Vigipirate', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- //sample('Bandeau d\'alerte enlèvement (non modifiable)', './notice-dismissable', {notice: {type: "kidnapping", title: 'Alerte enlèvement', desc: 'Une alerte enlèvement est en cours actuellement.', link: {label: 'Cliquez ici pour en savoir plus', href: '#', blank: true}}}, true, '../layout.ejs'); %> -<%- sample('Bandeau de cyberattack', './notice-dismissable', {notice: {type: "cyberattack", title: 'Cyber-attaque', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- sample('Alerte technologique', './notice-dismissable', {notice: {type: "cyberattack", title: 'Cyber-attaque', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/example/sample/sample-meteo.ejs b/src/component/notice/example/sample/sample-meteo.ejs index f67b775aa..0d0a2972e 100644 --- a/src/component/notice/example/sample/sample-meteo.ejs +++ b/src/component/notice/example/sample/sample-meteo.ejs @@ -2,10 +2,10 @@ const sample = getSample(include); %> -<%- section('Bandeaux météo', 'Il existe 3 bandeaux météo utilisables en fonction du niveau d\'alerte météo. L\'icône peut être modifiée et seul le titre est obligatoire', 0, true); %> +<%- section('Bandeaux vigilance météo', 'Il existe 3 bandeaux météo utilisables en fonction du niveau d\'alerte météo. L\'icône peut être modifiée et seul le titre est obligatoire', 0, true); %> -<%- sample('Bandeau d\'information', './notice-dismissable', {notice: {type: "weather-orange", title: 'Libellé de l’alerte orange', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- sample('Vigilance météo orange', './notice-dismissable', {notice: {type: "weather-orange", title: 'Vigilance météo orange', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> -<%- sample('Bandeau d\'avertissement', './notice-dismissable', {notice: {type: "weather-red", title: 'Libellé de l’alerte rouge', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- sample('Vigilance météo rouge', './notice-dismissable', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> -<%- sample('Bandeau d\'alerte', './notice-dismissable', {notice: {type: "weather-purple", title: 'Libellé de l’alerte violette', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> +<%- sample({title:'Vigilance météo violette', subtitle: 'Ce bandeau n’est propre qu’aux territoires ultra-marins'}, './notice-dismissable', {notice: {type: "weather-purple", title: 'Vigilance météo violette', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %> diff --git a/src/component/notice/style/_module.scss b/src/component/notice/style/_module.scss index b20851411..24dcaa379 100644 --- a/src/component/notice/style/_module.scss +++ b/src/component/notice/style/_module.scss @@ -112,7 +112,7 @@ &--witness, &--kidnapping, - &--vigipirate, + &--attack, &--cyberattack { @include padding-top(5.5v); background-position: 0 0; @@ -139,7 +139,7 @@ } } - &--vigipirate { + &--attack { #{selector.ns(notice)}__title { @include icon-image(alert-warning-2-fill, before); @include icon-content; diff --git a/src/component/notice/style/_scheme.scss b/src/component/notice/style/_scheme.scss index cb5a5823b..728398acf 100644 --- a/src/component/notice/style/_scheme.scss +++ b/src/component/notice/style/_scheme.scss @@ -55,7 +55,7 @@ } &--kidnapping, - &--vigipirate { + &--attack { @include color.background(flat error, (legacy:$legacy)); @include color.text(inverted grey, (legacy:$legacy)); @include color.background-image(border plain grey, (legacy:$legacy)); From 4325e4a61f197a80012ac8114073d92d1f7cb1f5 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 27 May 2024 16:37:32 +0200 Subject: [PATCH 12/15] fix(analytics): integrate notice & id --- src/analytics/example/component/notice/index.ejs | 6 +++--- src/analytics/script/integration/component/components.js | 4 ++-- src/core/template/ejs/action/action.ejs | 3 +++ 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/analytics/example/component/notice/index.ejs b/src/analytics/example/component/notice/index.ejs index c7633073d..b1b621485 100755 --- a/src/analytics/example/component/notice/index.ejs +++ b/src/analytics/example/component/notice/index.ejs @@ -3,9 +3,9 @@ <% let title = 'Vigilance météo rouge'; let desc = 'lorem ispum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec elit ultricies ultricies.'; -let link = {label: 'En savoir plus', href: 'https://www.meteofrance.fr/', blank: true}; +let link = {label: 'En savoir plus', blank: true}; %> -<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc:desc, link: link}}); %> +<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc:desc, link: {...link, href: 'https://www.meteofrance.fr/', id: uniqueId('link')}}}); %> -<%- sample('Attentat en cours', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr'}}}); %> +<%- sample('Attentat en cours', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr', id: uniqueId('link')}}}); %> diff --git a/src/analytics/script/integration/component/components.js b/src/analytics/script/integration/component/components.js index 501b664c9..3558dd102 100644 --- a/src/analytics/script/integration/component/components.js +++ b/src/analytics/script/integration/component/components.js @@ -18,7 +18,7 @@ import integrateLink from './link/integrate'; import integrateInput from './input/integrate'; import integrateModal from './modal/integrate'; import integrateNavigation from './navigation/integrate'; -// import integrateNotice from './notice/integrate'; +import integrateNotice from './notice/integrate'; import integratePagination from './pagination/integrate'; import integrateQuote from './quote/integrate'; import integrateRadio from './radio/integrate'; @@ -59,7 +59,7 @@ const integrateComponents = () => { integrateLink(); integrateModal(); integrateNavigation(); - // integrateNotice(); + integrateNotice(); integratePagination(); integrateQuote(); integrateRadio(); diff --git a/src/core/template/ejs/action/action.ejs b/src/core/template/ejs/action/action.ejs index 131876e63..0efb33cd8 100644 --- a/src/core/template/ejs/action/action.ejs +++ b/src/core/template/ejs/action/action.ejs @@ -7,6 +7,8 @@ valeurs : ** input : input ** link : lien +* action.id (string, optional) : id de l'élément d'action + * action.label (string, required) : libellé de l'élément d'action * action.href (string, optional) : adresse url du lien si action.kind = link @@ -37,6 +39,7 @@ const actionDisabled = action.disabled === true; let markup; if (action.type) actionAttrs.type = action.type; +if (action.id) actionAttrs.id = action.id; switch (actionKind) { case 'input': From bdc876d64b90f1380cd258ac8f0f7d52a60011ca Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 27 May 2024 18:03:25 +0200 Subject: [PATCH 13/15] fix(analytics): notice exemple --- src/analytics/example/component/notice/index.ejs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/analytics/example/component/notice/index.ejs b/src/analytics/example/component/notice/index.ejs index b1b621485..846109c31 100755 --- a/src/analytics/example/component/notice/index.ejs +++ b/src/analytics/example/component/notice/index.ejs @@ -6,6 +6,6 @@ let desc = 'lorem ispum dolor sit amet, consectetur adipiscing elit. Nullam nec let link = {label: 'En savoir plus', blank: true}; %> -<%- sample('Bandeau vigilance météo rouge', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-red", title: 'Vigilance météo rouge', desc:desc, link: {...link, href: 'https://www.meteofrance.fr/', id: uniqueId('link')}}}); %> +<%- sample('Vigilance météo orange', '../../../../component/notice/example/sample/notice-default', {notice: {type: "weather-orange", title: 'Vigilance météo orange', desc:desc, link: {...link, href: 'https://www.meteofrance.fr/', id: uniqueId('link')}}}); %> -<%- sample('Attentat en cours', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr', id: uniqueId('link')}}}); %> +<%- sample('Alerte attentat', '../../../../component/notice/example/sample/notice-default', {notice: {type: "attack", title: 'Attentat en cours', desc:desc, link: {...link, href: 'https://interieur.gouv.fr', id: uniqueId('link')}}}); %> From 32d7b07ad22d1f370cce621e2e42e3037e0ea9a1 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Thu, 30 May 2024 17:57:37 +0200 Subject: [PATCH 14/15] Update src/component/notice/.package.yml Co-authored-by: lab9 --- src/component/notice/.package.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/notice/.package.yml b/src/component/notice/.package.yml index 504d2b1aa..15857361a 100644 --- a/src/component/notice/.package.yml +++ b/src/component/notice/.package.yml @@ -5,7 +5,6 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bande style: - core - button - - link example: style: - header From d795ec024e589038f1bcdd966c6f0101efb588c0 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 31 May 2024 11:29:00 +0200 Subject: [PATCH 15/15] fix(notice): 3 bandeaux d'alertes --- src/component/notice/example/sample/sample-alert.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/notice/example/sample/sample-alert.ejs b/src/component/notice/example/sample/sample-alert.ejs index 6e9cd3aba..3644c9f9c 100644 --- a/src/component/notice/example/sample/sample-alert.ejs +++ b/src/component/notice/example/sample/sample-alert.ejs @@ -2,7 +2,7 @@ const sample = getSample(include); %> -<%- section('Bandeaux d\'alertes', 'Il existe 4 bandeaux d\'alertes utilisables en fonction du type d\'alerte. L\'icône ne peut pas être modifiée et les intitulés officiels doivent être utilisés', 0, true); %> +<%- section('Bandeaux d\'alertes', 'Il existe 3 bandeaux d\'alertes utilisables en fonction du type d\'alerte. L\'icône ne peut pas être modifiée et les intitulés officiels doivent être utilisés', 0, true); %> <%- sample({title: 'Alerte attentat', subtitle: 'Ce bandeau ne peut être utilisé qu’en cas de danger imminent, et non pas pour informer sur un état d’alerte vigipirate qui aurait été relevé par exemple.'}, './notice-dismissable', {notice: {type: "attack", title: 'Attentat en cours', desc: 'Texte de description lorem ipsum sit consectetur adipiscing.', link: {label: 'Lien de consultation', href: '#', blank: true}}}, true, '../layout.ejs'); %>