-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat(notice): ajout de bandeaux d'information importante [DS-3783, …
…DS-3357] (#917) - ajout des bandeaux d'alertes, des bandeaux vigilance météo, et de 2 niveaux génériques (warning et alert) - mise en situation dans une page - BC : changement de la structure html pour accueillir une description et un lien en plus du titre
- Loading branch information
Showing
27 changed files
with
601 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', blank: true}; | ||
| %> | ||
|
|
||
| <%- 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('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')}}}); %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
src/analytics/script/integration/component/notice/integrate.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
30 changes: 30 additions & 0 deletions
30
src/analytics/script/integration/component/notice/notice-link-actionee.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { ComponentActionee } from '../component-actionee'; | ||
| import ID from './id'; | ||
|
|
||
| class NoticeLinkActionee 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 { NoticeLinkActionee }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,33 @@ | ||
| <% | ||
| const sample = getSample(include); | ||
| %> | ||
|
|
||
| <%- section('Bandeau d\'information importante', 'Seul le bandeau de type information est disponible pour le moment. <br> 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.<br>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 sample = getSample(include); %> | ||
|
|
||
| <%- sample('Bandeau d\'information importante simple', './sample/notice-default', {notice: {type: "info", title: "Titre du bandeau d'information"}}, true, './layout.ejs'); %> | ||
|
|
||
| <%- sample('Bandeau d\'information importante avec bouton fermer', './sample/notice-dismissable', {notice: {type: "info", title: "Titre du bandeau"}}, true, './layout.ejs'); %> | ||
| <% | ||
| 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' | ||
| }, | ||
| { | ||
| title: 'Mise en situation', | ||
| path: 'sample-header' | ||
| }, | ||
| ]; | ||
| <%- sample('Bandeau d\'information importante avec lien', './sample/notice-dismissable', {notice: {type: "info", title: `Titre du bandeau, <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a>`}}, true, './layout.ejs'); %> | ||
| const 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 <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %> | ||
| for (let element of elements) { %> | ||
| <%- include(`./sample/${element.path}`); %> | ||
| <br><br><br><br> | ||
| <% } | ||
| %> |
Oops, something went wrong.