@gouvfr/dsfr-roller 1.0.50 → 1.0.52

package/SECURITY.md

@@ -1,4 +1,4 @@
-## Sécurité du Système de Design de l'État
+## Sécurité du Système de Design de l’État
 
 L’équipe derrière le Système de Design de l’État prend les risques liés à la sécurité très au sérieux.
 C’est pour cette raison qu’un audit de sécurité à été réalisé sur l’ensemble des composants et des librairies avant la sortie ainsi que la mise en place de bonnes pratiques (double authentification, signature des paquets, etc.).

package/legal/cgu.md

@@ -1,6 +1,6 @@
 ## CONDITIONS GÉNÉRALES D’UTILISATION DU SYSTÈME DE DESIGN DE L’ÉTAT
 
-Le Service d’Information du Gouvernement (« SIG ») vous remercie de bien vouloir lire attentivement l’intégralité des présentes Conditions Générales d’Utilisation (« CGU ») avant d’utiliser la plateforme du Système de Design de l'État (« Plateforme »). Tout accès, toute utilisation et/ou toute Contribution à la Plateforme est subordonné au respect des présentes CGU. Tout Utilisateur de la Plateforme reconnaît souscrire sans réserve aux présentes CGU et s’engage à les respecter.
+Le Service d’Information du Gouvernement (« SIG ») vous remercie de bien vouloir lire attentivement l’intégralité des présentes Conditions Générales d’Utilisation (« CGU ») avant d’utiliser la plateforme du Système de Design de l’État (« Plateforme »). Tout accès, toute utilisation et/ou toute Contribution à la Plateforme est subordonné au respect des présentes CGU. Tout Utilisateur de la Plateforme reconnaît souscrire sans réserve aux présentes CGU et s’engage à les respecter.
 
 
 
@@ -9,7 +9,7 @@ Le Service d’Information du Gouvernement (« SIG ») vous remercie de bien vou
 Le SIG est le pilote de la transformation numérique de la communication de l’État . À ce titre, le SIG a pour mission de placer toutes les actions du Gouvernement sous la marque de l’État afin de garantir l’homogénéité et la reconnaissance de l’ensemble des initiatives ministérielles ou interministérielles.
 Dans ce cadre, le SIG a mis en place la nouvelle stratégie de la marque de l’État pour rendre l’action de l’État plus concrète, lisible et visible grâce à un signe commun pour les citoyens.
 
-Dans la continuité de la mise en œuvre de la marque de l’État, le SIG a structuré dans le cadre d’une plateforme, le Système de Design de l'État visant à mettre à disposition des librairies de Ressources permettant notamment de standardiser et d’harmoniser l’expérience numérique de l’État et des citoyens grâce à une interface commune des sites Internet et applications de l’État. Le Système de Design de l’État permet ainsi de générer des économies, en rationalisant les développements numériques, de garantir la qualité et l’efficacité de l’expérience utilisateur, la cohérence et une meilleure reconnaissance des services de l’État.
+Dans la continuité de la mise en œuvre de la marque de l’État, le SIG a structuré dans le cadre d’une plateforme, le Système de Design de l’État visant à mettre à disposition des librairies de Ressources permettant notamment de standardiser et d’harmoniser l’expérience numérique de l’État et des citoyens grâce à une interface commune des sites Internet et applications de l’État. Le Système de Design de l’État permet ainsi de générer des économies, en rationalisant les développements numériques, de garantir la qualité et l’efficacité de l’expérience utilisateur, la cohérence et une meilleure reconnaissance des services de l’État.
 
 Les présentes Conditions Générales définissent les conditions selon lesquelles l’Utilisateur de l’État ou les Autres Utilisateurs peuvent naviguer sur la Plateforme accessible sur l’URL https://www.systeme-de-design.gouv.fr, accéder et exploiter les Ressources et Contribuer à leur amélioration ou leur enrichissement.
 
@@ -19,13 +19,13 @@ Les présentes Conditions Générales définissent les conditions selon lesquell
 
 Les termes débutant avec une majuscule dans les présentes CGU, qu’ils soient utilisés au singulier ou au pluriel auront la signification qui leur est attribuée ci-après :
 
-* **Communauté** : désigne la communauté en ligne des Utilisateurs et des membres de l’équipe du Système de Design de l'État.
+* **Communauté** : désigne la communauté en ligne des Utilisateurs et des membres de l’équipe du Système de Design de l’État.
 
 * **Composants** : désigne les librairies d’éléments destinés aux designers et aux développeurs intégrant des Éléments Graphiques (Fondamentaux Techniques et les Éléments d’Identité), des Éléments d’Interface, des Paquets de codes sources.
 
 * **Contribution** : désigne tout élément fourni par l’Utilisateur dans le cadre de l’utilisation de la Plateforme, qu’il s’agisse de la modification d’un Composant ou du développement d’un nouveau Composant.
 
-* **Système de Design de l'État (DSFR)** : désigne l’ensemble de Composants réutilisables, guidé par des standards et une gouvernance, devant être assemblés pour construire les sites internet et applications mobiles des Entités Autorisées et objet des présentes Conditions Générales.
+* **Système de Design de l’État (DSFR)** : désigne l’ensemble de Composants réutilisables, guidé par des standards et une gouvernance, devant être assemblés pour construire les sites internet et applications mobiles des Entités Autorisées et objet des présentes Conditions Générales.
 
 * **Documentation** : désigne les principes d’utilisation des Composants auxquels les Utilisateurs doivent se conformer.
 
@@ -41,11 +41,11 @@ Les termes débutant avec une majuscule dans les présentes CGU, qu’ils soient
 
 * **Marque de l’Etat** : telle que définie par la circulaire du Premier Ministre en date du 17 février 2020, laquelle précise la stratégie de marque de l’Etat.
 
-* **Opérateurs de l’État** : désigne les entités définies chaque année dans l’annexe « Opérateurs de l'État » du projet de loi de finances de l’année en cours.
+* **Opérateurs de l’État** : désigne les entités définies chaque année dans l’annexe « Opérateurs de l’État » du projet de loi de finances de l’année en cours.
 
 * **Paquets de codes sources** : désigne les fichiers de codes sources accessibles sur la plateforme de Git (Github).
 
-* **Plateforme** : désigne le site Internet du Système de Design de l'État, permettant aux Utilisateurs de naviguer, utiliser et contribuer au Système de Design de l'État.
+* **Plateforme** : désigne le site Internet du Système de Design de l’État, permettant aux Utilisateurs de naviguer, utiliser et contribuer au Système de Design de l’État.
 
 * **Ressources** : désigne les Composants, la Documentation, le support et les outils mis à disposition de l’Utilisateur sur ou au travers de la Plateforme.
 
@@ -146,7 +146,7 @@ Cette Plateforme est en constante évolution et enrichissement et le SIG ne saur
 
 ### ARTICLE 5 – PROCÉDURE D’AGRÉMENT
 
-Conformément à la circulaire n°6120/SG du 14 octobre 2019 relative à l’organisation et la coordination de la communication gouvernementale, toutes les refontes ou créations de site Internet et applications mobiles de communication de l'État (que le nom de domaine soit en <.gouv.fr>, en <.fr> ou autre) sont obligatoirement soumises à l’agrément du SIG.
+Conformément à la circulaire n°6120/SG du 14 octobre 2019 relative à l’organisation et la coordination de la communication gouvernementale, toutes les refontes ou créations de site Internet et applications mobiles de communication de l’État (que le nom de domaine soit en <.gouv.fr>, en <.fr> ou autre) sont obligatoirement soumises à l’agrément du SIG.
 
 Les Entités Autorisées doivent solliciter un agrément de principe du SIG, préalablement au lancement des prestations de refonte ou de création d’un site Internet et applications mobiles de communication de l’État pour lequel ils entendent utiliser la Plateforme. Cette demande s’effectue à l’aide du formulaire disponible au lien suivant : https://www.demarches-simplifiees.fr/commencer/agrement-principe-site-internet
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR",
   "keywords": [
     "Système de Design de l'État",
@@ -56,8 +56,8 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.50",
-    "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.0",
+    "@gouvfr/dsfr-forge": "=1.0.52",
+    "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.1-rc.1",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",
     "highlight.js": "^11.10.0",

package/src/node/directive/components/table/table-container-directive.js

@@ -22,6 +22,7 @@ class TableContainerDirective extends Node {
     const table = data.children?.find(child => child.type === 'table');
     if (table ) {
       table.caption = directiveLabel.children?.[0]?.value;
+      table.multiline = data.properties?.multiline === true;
     }
     return data;
   }

package/src/node/directive/components/tile/tile-container-directive.js

@@ -25,6 +25,8 @@ class TileContainerDirective extends Node {
   structureTile(data) {
     const pictogramUrl = data.properties.pictogram;
     const image = Node.getImageChild(data);
+    const imgDarkUrl = data.imgDarkUrl;
+    const hasImage = image || imgDarkUrl;
     const contentChildren = data.children.filter(child => !Node.getImageChild(child));
     const title = contentChildren.find(child => child.type === 'heading');
     const description = contentChildren[1];
@@ -71,7 +73,7 @@ class TileContainerDirective extends Node {
             },
           ]
         },
-        pictogramUrl || image ? {
+        pictogramUrl || hasImage ? {
           type: 'htmlContainer',
           tagName: 'div',
           classes: ['fr-tile__header'],
@@ -120,17 +122,28 @@ class TileContainerDirective extends Node {
                 }
               ]
             } : {},
-            image ? {
+            hasImage ? {
               type: 'htmlContainer',
               tagName: 'div',
               classes: ['fr-tile__img'],
               children: [
                 {
-                  classe: ['fr-responsive-img'],
-                  ...image
-                }
+                  classes: ['fr-responsive-img', imgDarkUrl ? 'fr-tile__img--light' : ''],
+                  attributes: {
+                    'aria-hidden': 'true',
+                  },
+                  ...image,
+                },
+                imgDarkUrl ? {
+                  classes: ['fr-responsive-img', 'fr-tile__img--dark'],
+                  type: 'image',
+                  attributes: {
+                    src: imgDarkUrl,
+                    'aria-hidden': 'true'
+                  }
+                } : {}
               ]
-            } : {},
+            } : {}
           ]
         } : {},
       ]

package/src/node/directive/doc/guidance/guideline-container-directive.js

@@ -37,10 +37,7 @@ class GuidelineContainerDirective extends Node {
             {
               type: 'image',
               classes: ['dsfr-doc-guideline__img'],
-              attributes: {
-                src: image.url,
-                alt: image.alt,
-              }
+              ...image
             },
             {
               type: 'htmlContainer',

package/src/node/directive/doc/prevent-permalinks-container-directive.js

@@ -0,0 +1,12 @@
+import { Node } from '../../node.js'
+
+class PreventPermalinksContainerDirective extends Node {
+  async render() {
+    const content = await super.render();
+    return `<!-- NO_PERMALINK_START -->\n${content}\n<!-- NO_PERMALINK_END -->`;
+  }
+}
+
+PreventPermalinksContainerDirective.NAME = 'dsfr-doc-prevent-permalinks';
+
+export { PreventPermalinksContainerDirective };

package/src/node/gfm/table-header-node.js

@@ -5,7 +5,6 @@ class TableHeaderNode extends TableCellNode {
     super(data, 'th');
     if (this.data.scope) {
       this.attributes.setAttribute('scope', this.data.scope);
-      if (this.data.scope === 'row') this.attributes.addClass('fr-cell--fixed');
     }
     if (this.data.isColumnHeader) this.attributes.setAttribute('role', 'columnheader');
   }

package/src/node/gfm/table-node.js

@@ -5,6 +5,7 @@ class TableNode extends Node {
   constructor (data) {
     super(data);
     this._caption = data.caption;
+    this._multiline = data.multiline;
     this.attributes.addClass('fr-table');
   }
 
@@ -70,7 +71,7 @@ class TableNode extends Node {
         <div class="fr-table__wrapper">
           <div class="fr-table__container">
             <div class="fr-table__content">
-              <table>
+              <table ${this._multiline ? 'class="fr-cell--multiline"' : ''}>
                 ${caption}
                 ${await this.renderChildren()}
               </table>

package/src/node/node-factory.js

@@ -59,6 +59,7 @@ import { PageItemCardContainerDirective } from './directive/doc/page-item-card-c
 import { VideoLeafDirective } from  './directive/doc/video-leaf-directive.js';
 import { ImageTextDirective } from './directive/doc/image-text-directive.js'
 import { ChangelogLeafDirective } from './directive/doc/changelog-leaf-directive.js'
+import { PreventPermalinksContainerDirective } from './directive/doc/prevent-permalinks-container-directive.js';
 
 
 const NODES = [
@@ -118,7 +119,8 @@ const DIRECTIVE_CONTAINERS = [
   TabsContainerDirective,
   AnatomyContainerDirective,
   GridContainerDirective,
-  ColContainerDirective
+  ColContainerDirective,
+  PreventPermalinksContainerDirective
 ];
 const DIRECTIVE_LEAFS = [
   ButtonLeafDirective,

package/src/node/node.js

@@ -31,7 +31,7 @@ class Node extends Renderable {
     }
 
     if (this.hasNormalizedId) {
-      this._normalizedId =  normalize(this.text);
+      this._normalizedId = normalize(this.text);
       this.attributes.setAttribute('id', this._normalizedId);
     }
   }

package/src/page/body/edit.js

@@ -6,9 +6,8 @@ class Edit {
       classes: ['dsfr-doc-edit', 'fr-background-alt--blue-france', `fr-icon-${data.icon ?? 'edit-fill'}`],
       children: [
         {
-          type: 'heading',
+          type: 'paragraph',
           classes: ['dsfr-doc-edit__title', 'fr-h5'],
-          depth: data.depth ?? 5,
           children: [
             {
               type: 'text',

package/src/page/body/mesh.js

@@ -0,0 +1,55 @@
+const MAX_MESH_ITEMS = 3;
+
+class Mesh {
+  constructor(data) {
+    const children = [];
+    for (const [i, item] of data.items.entries()) {
+      if (i >= MAX_MESH_ITEMS) break;
+      children.push({
+        ...item,
+        type: 'containerDirective',
+        name: 'dsfr-doc-page-item-card',
+      });
+    }
+    children.sort((a, b) => {
+      const textA = a.text.toLowerCase();
+      const textB = b.text.toLowerCase();
+      return textA.localeCompare(textB);
+    });
+
+    this._node ={
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-mesh'],
+      children: [
+        {
+          type: 'heading',
+          classes: ['dsfr-doc-mesh__title', 'fr-h3'],
+          depth: data.depth ?? 5,
+          children: [
+            {
+              type: 'text',
+              value: data.title
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: [
+            'fr-grid-row',
+            'fr-grid-row--gutters',
+            'fr-mb-12v',
+          ],
+          children: children,
+        }
+      ]
+    }
+  }
+
+  get node () {
+    return this._node;
+  }
+}
+
+export { Mesh };

package/src/page/scripts/scripts.js

@@ -13,7 +13,8 @@ const DEFAULT_LIB_FILES = [
 
 const SCRIPTS_MAP = new Map([
   ['search', 'dsfr-doc-search'],
-  ['home', 'dsfr-doc-home']
+  ['home', 'dsfr-doc-home'],
+  ['pattern', 'dsfr-doc-pattern']
 ]);
 
 class Scripts extends Renderable {

package/src/script/pattern/index.js

@@ -0,0 +1,3 @@
+import './name/add-firstname.js';
+import './name/remove-firstname.js';
+import './name/toggle-disabled.js';

package/src/script/pattern/name/add-firstname.js

@@ -0,0 +1,38 @@
+const getFieldsetElement = (node) => {
+  const parent = node.parentNode;
+  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
+  return getFieldsetElement(parent);
+};
+
+window.addFirstname = (button, id) => {
+  button.firstnamesCount = (button.firstnamesCount + 1) || 1;
+
+  const firstname = getFieldsetElement(document.getElementById(id));
+  const reference = getFieldsetElement(button);
+
+  const copy = firstname.cloneNode(true);
+  let html = copy.innerHTML;
+  const regexp = new RegExp(id, 'g');
+  html = html.replace(regexp, `${id}-added-${button.firstnamesCount}`);
+  html = html.replace('name="given-name"', `name="additional-name-${button.firstnamesCount}"`);
+  html = html.replace('autocomplete="given-name"', 'autocomplete="additional-name"');
+  copy.innerHTML = html;
+
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('fr-input-wrap', 'fr-input-wrap--action');
+
+  const removeButton = document.createElement('button');
+  const labelRemoveButton = '<%= getText("label.remove-firstname", "name") %>';
+  removeButton.classList.add('fr-btn', 'fr-btn--secondary', 'fr-icon-delete-line');
+  removeButton.innerHTML = labelRemoveButton;
+  removeButton.title = labelRemoveButton;
+
+  removeButton.setAttribute('onclick', 'removeFirstname(this.copy)');
+  removeButton.copy = copy;
+
+  wrapper.appendChild(copy.getElementsByTagName('input')[0]);
+  wrapper.appendChild(removeButton);
+  copy.getElementsByTagName('label')[0].after(wrapper);
+  reference.parentNode.insertBefore(copy, reference);
+  document.getElementById(`${id}-added-${button.firstnamesCount}`).focus();
+};

package/src/script/pattern/name/remove-firstname.js

@@ -0,0 +1,4 @@
+window.removeFirstname = (copy) => {
+  copy.nextElementSibling.querySelector('input,button').focus();
+  copy.remove();
+};

package/src/script/pattern/name/toggle-disabled.js

@@ -0,0 +1,8 @@
+window.toggleDisabled = (checkbox, id) => {
+  const fieldset = document.getElementById(id);
+  if (checkbox.checked) fieldset.setAttribute('disabled', '');
+  else {
+    fieldset.removeAttribute('disabled');
+    fieldset.querySelector('input, button').focus();
+  }
+};

package/src/style/main/components/_dsfr-doc-anatomy.scss

@@ -12,6 +12,7 @@
   &__content {
     position: relative;
     padding-left: 2rem;
+    list-style-type: none;
   }
 
   &__pin {

package/src/style/main/components/_fr-tile.scss

@@ -0,0 +1,17 @@
+.fr-tile {
+  &__img--dark {
+    display: none;
+  }
+}
+
+[data-fr-theme='dark'] {
+  .fr-tile {
+    &__img--dark {
+      display: block;
+    }
+
+    &__img--light {
+      display: none;
+    }
+  }
+}

package/src/style/main/components/_index.scss

@@ -8,3 +8,4 @@
 @use 'dsfr-doc-pagination';
 @use 'dsfr-doc-edit';
 @use 'dsfr-doc-storybook-leaf';
+@use 'fr-tile';

package/src/style/main/utility/_dsfr-doc-anchor-heading.scss

@@ -0,0 +1,5 @@
+.dsfr-doc-anchor-heading {
+  &:not(:hover) {
+    --underline-img: none;
+  }
+}

package/src/style/main/utility/_index.scss

@@ -1,4 +1,5 @@
 @use 'global';
 @use 'font';
 @use 'dsfr-doc-code';
+@use 'dsfr-doc-anchor-heading';
 @use 'icon';

package/src/template/template.js

@@ -1,10 +1,24 @@
 import { Renderable } from '../core/renderable.js';
 import { nodeFactory } from '../node/node-factory.js';
 
+const PERMALINK_CONTENT_REGEX = /<!--\s*NO_PERMALINK_START\s*-->\s(?<content>[\s\S]*)\s<!--\s*NO_PERMALINK_END\s*-->/g;
+const PREVENT_PERMALINKS_REGEX = /(?<permalinks><!--\s*NO_PERMALINK_START\s*-->\s(?:[\s\S]*)\s<!--\s*NO_PERMALINK_END\s*-->)/g;
+const HEADING_REGEX = /<h(?<level>[2-6])(?<attrs>[^>]*)>(?<content>.*?)<\/h\1>/g;
+const ATTRIBUTE_ID_REGEX = /\sid=["'](?<id>[^"']+)["']/;
+const PERMALINK_CLASS = 'dsfr-doc-anchor-heading';
+
+const injectPermaLink = (match, level, attrs, content) => {
+  const idMatch = attrs.match(ATTRIBUTE_ID_REGEX);
+  if (!idMatch || !idMatch.groups?.id) return match;
+  const link = `<a href="#${idMatch.groups.id}" class="${PERMALINK_CLASS}">${content}</a>`;
+  return `<h${level}${attrs}>${link}</h${level}>`;
+};
+
 class Template extends Renderable {
-  constructor (data) {
+  constructor (data, hasPermaLinks = false) {
     super(data);
     nodeFactory.populate(data.fragments);
+    this._hasPermaLinks = hasPermaLinks;
     this._content = nodeFactory.create({
       type: 'root',
       children: data.nodes
@@ -20,7 +34,19 @@ class Template extends Renderable {
   }
 
   async render () {
-    return await this._content.render();
+    const html = await this._content.render();
+    if (!this._hasPermaLinks) return html;
+    return this.addPermaLinks(html);
+  }
+
+  addPermaLinks (html) {
+    return html.split(PREVENT_PERMALINKS_REGEX).map((part) => {
+      const match = PERMALINK_CONTENT_REGEX.exec(part);
+      if (match && match.groups && match.groups.content) {
+        return match.groups.content;
+      }
+      return part.replace(HEADING_REGEX, injectPermaLink);
+    }).join('');
   }
 
   get text () {

package/src/template/templates/editorial-template.js

@@ -3,10 +3,11 @@ import { Sidemenu } from '../../component/components/sidemenu.js';
 import { Breadcrumb } from '../../component/components/breadcrumb.js';
 import { TOC } from '../../page/body/toc.js';
 import { Edit } from '../../page/body/edit.js';
+import { Mesh } from '../../page/body/mesh.js';
 
 class EditorialTemplate extends Template {
   constructor (data) {
-    super(data);
+    super(data, true);
 
     this._hasSidemenu = data?.resource?.navigation?.sidemenu !== undefined;
     if (this._hasSidemenu) this._sidemenu = new Sidemenu(data.resource.navigation.sidemenu, data.resource.badge);
@@ -18,11 +19,18 @@ class EditorialTemplate extends Template {
 
   structure (data) {
     this._hasEditUrl = data?.editUrl != null;
+    this._hasMesh = data?.mesh?.items?.length;
+
     if (this._hasEditUrl) {
       const edit = new Edit({...data.resource.edit, editUrl: data.editUrl, blankLabel: data.fragments.blank});
       data.nodes.push(edit.node);
     }
 
+    if (this._hasMesh) {
+      const mesh = new Mesh({...data.resource.mesh, ...data.mesh});
+      data.nodes.push(mesh.node);
+    }
+
     return super.structure(data);
   }