✨ feat(notice): ajout de variations de bandeaux d'information importante [DS-3783, DS-3357]

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,

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)

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) { %><!-- <%= button.comments %> --><% } %>
-<<%= markup %> <%- includeClasses(btnClasses) %> <%- includeAttrs(btnAttrs); %> >
-  <%- button.label %>
-</<%= markup %>>
+<%- 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}); %>

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);  %>
 
 
 

src/component/link/template/ejs/link.ejs

@@ -26,100 +26,81 @@
   * 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 | 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
+
 %>
 <% eval(include('../../../../core/index.ejs')); %>
 <%
 const link = locals.link || {};
-let linkClasses = link.classes || [];
-let linkAttrs = link.attributes || {};
-
+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;
 }
 
-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 += ` <span class="${prefix}-link__detail">${link.detail}</span>`;
+  label += ` <span class="${prefix}-link__detail">${link.detail}</span>`;
 }
 
 %>
 
-<<%= markup %> <%- includeClasses(linkClasses); %> <%- includeAttrs(linkAttrs); %> ><%- label %></<%= markup %>>
+<%- include('../../../../core/template/ejs/action/action', {action: {...link, classes: linkClasses, attributes: linkAttrs, kind: action, label: label, disabled: disabled}}) %>

src/component/notice/.package.yml

@@ -5,3 +5,11 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bande
 style:
   - core
   - button
+  - link
+example:
+  style:
+    - header
+    - navigation
+    - breadcrumb
+    - search
+    - skiplink

src/component/notice/example/index.ejs

@@ -1,13 +1,42 @@
-<%
-const sample = getSample(include);
-%>
+<% 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 &#60;p&#62; 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 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 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, <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a>`}}, 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 <a href='#' ${includeAttrs(targetBlankData())}>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.`}}, true, './layout.ejs'); %>
+<%- include('../../accordion/template/ejs/accordions-group', {accordionsGroup: data }); %>

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'); %>

src/component/notice/example/sample/sample-content.ejs

@@ -0,0 +1,15 @@
+<%
+const sample = getSample(include);
+%>
+
+<%- section('Contenu des Bandeaux d\'information importante', 'Le bandeau doit être placé sur toutes les pages du site.<br> La balise &#60;p&#62; 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'); %>
+
+<%- 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'); %>

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'); %>

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é<br>officiel'}, service:true, links:true, navigation: true }}, true); %>
+
+<div id="content">
+  <%- 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' }
+    ]
+  }
+  %>
+  <div class="<%= prefix %>-container" >
+    <%- include('../../../../component/breadcrumb/template/ejs/breadcrumb', { breadcrumb: breadcrumb }, true); %>
+  </div>
+
+  <div class="<%= prefix %>-container" >
+    <h2>lorem, ipsum dolor sit amet  </h2>
+    <p>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.</p></div>
+</div>