@gouvfr/dsfr-roller 1.0.72 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.72",
+  "version": "1.0.75",
   "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",
@@ -30,6 +30,10 @@
     {
       "name": "Baptiste Zeller",
       "email": "baptiste.zeller@actimage.com"
+    },
+    {
+      "name": "Sebastien Malot",
+      "email": "sebastien.malot@pm.gouv.fr"
     }
   ],
   "repository": {
@@ -56,7 +60,8 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.72",
+    "@gouvfr/dsfr-forge": "=1.0.75",
+    "@gouvfr/dsfr-kit": "=1.0.75",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.14.3",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/node/directive/components/button/button-leaf-directive.js

@@ -19,7 +19,7 @@ class ButtonLeafDirective extends Node {
     return super.structure({
       ...data,
       attributes: {
-        ...data.attributes,
+        ...data.attributeSet,
         url: link.url
       },
       children: children

package/src/node/directive/doc/changelog-leaf-directive.js

@@ -1,5 +1,6 @@
 import { Node } from '../../node.js'
-import { convertHTMLEntities, gitmoji, log } from '@gouvfr/dsfr-forge'
+import { convertHTMLEntities } from '@gouvfr/dsfr-kit'
+import { gitmoji, log } from '@gouvfr/dsfr-forge'
 
 class ChangelogLeafDirective extends Node {
   structure (data) {

package/src/node/generic/code-node.js

@@ -1,5 +1,5 @@
 import { Node } from '../node.js';
-import { convertHTMLEntities } from '@gouvfr/dsfr-forge';
+import { convertHTMLEntities } from '@gouvfr/dsfr-kit';
 
 class CodeNode extends Node {
   constructor (data) {

package/src/node/generic/inline-code-node.js

@@ -1,5 +1,5 @@
 import { Node } from '../node.js';
-import { convertHTMLEntities } from '@gouvfr/dsfr-forge';
+import { convertHTMLEntities } from '@gouvfr/dsfr-kit';
 
 class InlineCodeNode extends Node {
   constructor (data) {

package/src/node/node.js

@@ -1,6 +1,7 @@
 import { Renderable } from '../core/renderable.js';
 import { nodeFactory } from './node-factory.js';
-import { normalize, TagAttributes } from '@gouvfr/dsfr-forge';
+import { normalize } from '@gouvfr/dsfr-kit';
+import { TagAttributes } from '@gouvfr/dsfr-forge';
 class Node extends Renderable {
   constructor (data, tagName = null, isSelfClosing = false, hasNormalizedId = false) {
     super(data);

package/src/page/body/cgu.js

@@ -0,0 +1,61 @@
+import { Renderable } from '../../core/renderable.js';
+import { nodeFactory } from '../../node/node-factory.js';
+
+class CGU extends Renderable {
+  constructor (data) {
+    super(data);
+    this._requireCGU = data.cgu.required;
+    this._version = data.cgu.version;
+    this._content = nodeFactory.create({
+      type: 'root',
+      children: data.cgu.nodes
+    });
+  }
+
+  async render () {
+    if (!this._requireCGU) {
+      return '';
+    }
+
+    const content = await this._content.render();
+
+    const cleanContent = content.replace(/<h2\s/g, '<h2 class="fr-h5"')
+    .replace(/<h3\s/g, '<h3 class="fr-h6"')
+    .replace(/<h4\s/g, '<h4 class="fr-text fr-text--bold"')
+    .replace(/<h5\s/g, '<h5 class="fr-text"');
+
+    return `<dialog id="modal-cgu" class="fr-modal" aria-labelledby="modal-cgu-title" data-cgu-version="${this._version}" data-fr-concealing-backdrop="false">
+      <div class="fr-container fr-container--fluid fr-container-md">
+        <div class="fr-grid-row fr-grid-row--center">
+          <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
+            <div class="fr-modal__body">
+              <div class="fr-modal__content dsfr-doc-modal-cgu">
+                <div tabindex="-1" class="dsfr-doc-modal-cgu__intro fr-background-alt--blue-france">
+                  <svg aria-hidden="true" class="fr-artwork dsfr-doc-modal-cgu__intro-pictogram" viewBox="0 0 90 90" width="90px" height="90px">
+                    <use class="fr-artwork-decorative" href="/dist/artwork/pictograms/document/document-signature.svg#artwork-decorative"></use>
+                    <use class="fr-artwork-minor" href="/dist/artwork/pictograms/document/document-signature.svg#artwork-minor"></use>
+                    <use class="fr-artwork-major" href="/dist/artwork/pictograms/document/document-signature.svg#artwork-major"></use>
+                  </svg>
+                  <h2 id="modal-cgu-title" class="fr-h5">
+                    Bienvenue dans les ressources du Système de Design de l’État, soumises à l’acceptation des conditions générales d’utilisation
+                  </h2>
+                  <p class="fr-modal__desc">
+                    Nous vous prions de lire et d'accepter les conditions générales d'utilisation avant d'accéder aux ressources du DSFR.
+                  </p>
+                </div>
+                <div>${cleanContent}</div>
+                <div class="dsfr-doc-modal-cgu__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
+                  <button type="button" id="button-cgu-accept" class="fr-btn">Accepter</button>
+                  <button type="button" id="button-cgu-deny" class="fr-btn fr-btn--secondary">Refuser</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </dialog>
+    `;
+  }
+}
+
+export { CGU };

package/src/page/html.js

@@ -7,6 +7,7 @@ import { Main } from './body/main.js';
 import { Scripts } from './scripts/scripts.js';
 import { AnalyticsConfig } from './scripts/analytics-config.js';
 import { HtmlRenderable } from '../core/html-renderable.js';
+import { CGU } from './body/cgu.js'
 
 class Html extends HtmlRenderable {
   constructor (data) {
@@ -18,6 +19,7 @@ class Html extends HtmlRenderable {
     this._main = new Main(data);
     this._footer = new Footer(data.resource.footer);
     this._displayModal = new DisplayModal(data);
+    this._cgu = new CGU(data);
     this._scripts = new Scripts(data);
     this._analyticsConfig = new AnalyticsConfig(data);
   }
@@ -27,13 +29,14 @@ class Html extends HtmlRenderable {
       <html lang="${this.data.lang}" data-fr-theme>
         ${await this._head.render()}
         <body>
-          ${await this._skiplink.render()}
-          ${await this._header.render()}
-          ${await this._main.render()}
-          ${await this._footer.render()}
-          ${await this._displayModal.render()}
-          ${await this._analyticsConfig.render()}
-          ${await this._scripts.render()}
+        ${await this._skiplink.render()}
+        ${await this._header.render()}
+        ${await this._main.render()}
+        ${await this._footer.render()}
+        ${await this._displayModal.render()}
+        ${await this._cgu.render()}
+        ${await this._analyticsConfig.render()}
+        ${await this._scripts.render()}
         </body>
       </html>`);
   }

package/src/page/page.js

@@ -1,14 +1,13 @@
 import fs from 'fs';
 import yaml from 'yaml';
 import { Html } from './html.js';
-import { log } from '@gouvfr/dsfr-forge';
+import { log, readYAMLSync } from '@gouvfr/dsfr-forge';
 import { Renderable } from '../core/renderable.js'
 
 class Page extends Renderable {
   constructor (src) {
     log.info(`Reading page ${src}`);
-    const dataFile = fs.readFileSync(src, 'utf8');
-    const data = yaml.parse(dataFile);
+    const data = readYAMLSync(src);
     super(data);
     this._src = src;
     this._dest = `${this.data.url}/index.html`;

package/src/script/main/cmp/tarteaucitron/services.js

@@ -7838,7 +7838,7 @@ export const faciliti = {
         (function (w, d, s, f) {
             w[f] = w[f] || {
                 conf: function () {
-                    (w[f].data = w[f].data || []).push(arguments);
+                    (w[f].provider = w[f].data || []).push(arguments);
                 },
             };
             var l = d.createElement(s),

package/src/script/main/core/get-query.js

@@ -1,6 +1,6 @@
 const paramsString = window.location.search;
 const searchParams = new URLSearchParams(paramsString);
-import { normalizeTerm } from '@gouvfr/dsfr-forge/src/html/normalize.js';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
 
 const getQuery = () => {
     return normalizeTerm(searchParams.get('query'));

package/src/script/main/elements/consent-cgu.js

@@ -0,0 +1,99 @@
+import { Element } from '../core/element.js'
+
+class ConsentCGU extends Element {
+  get buttonAccept () {
+    return this.element.querySelector('#button-cgu-accept');
+  }
+
+  get buttonDeny () {
+    return this.element.querySelector('#button-cgu-deny');
+  }
+
+  get modalContent () {
+    return this.element.querySelector('.fr-modal__body');
+  }
+
+  init() {
+    this.buttonAccept.addEventListener(
+      'click',
+      this.handleButtonAcceptClick.bind(this)
+    );
+    this.buttonDeny.addEventListener(
+      'click',
+      this.handleButtonDenyClick.bind(this)
+    );
+
+    this.handleConsent();
+  }
+
+  handleConsent() {
+    const modal = document.getElementById('modal-cgu');
+    const cguVersion = modal?.getAttribute('data-cgu-version') || null;
+    const cguVersionSplit = cguVersion ? cguVersion.split('.') : [];
+    const cookieVersion = document.cookie.split('; ').find(row => row.startsWith('cgu-version='))?.split('=')[1];
+    const cookieVersionSplit = cookieVersion ? cookieVersion.split('.') : [];
+    const isSameVersion = cookieVersion && (cookieVersionSplit[0] === cguVersionSplit[0] && cookieVersionSplit[1] === cguVersionSplit[1]);
+
+    if (isSameVersion) {
+      if (modal) modal.remove();
+    } else {
+      if (modal) {
+        window.dsfr(modal).modal.disclose();
+        requestAnimationFrame(() => {
+          modal.querySelector('.dsfr-doc-modal-cgu__intro')?.focus();
+        });
+        document.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            if (modal?.classList.contains('fr-modal--opened') && !modal.classList.contains('dsfr-doc-modal-cgu-accepted')) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+            }
+          }
+        }, { capture: true });
+      }
+    }
+  }
+
+  getConfirmModalContent() {
+    return `
+    <div class="fr-modal__header">
+        <button aria-controls="modal-cgu" title="Fermer" type="button" id="button-cgu-accepted-close" class="fr-btn fr-btn--close">Fermer</button>
+    </div>
+    <div class="fr-modal__content dsfr-doc-modal-cgu-accepted__content">
+      <svg aria-hidden="true" class="fr-artwork fr-artwork--green-emeraude dsfr-doc-modal-cgu-accepted__pictogram" viewBox="0 0 80 80" width="80px" height="80px">
+        <use class="fr-artwork-decorative" href="/dist/artwork/pictograms/system/success.svg#artwork-decorative"></use>
+        <use class="fr-artwork-minor" href="/dist/artwork/pictograms/system/success.svg#artwork-minor"></use>
+        <use class="fr-artwork-major" href="/dist/artwork/pictograms/system/success.svg#artwork-major"></use>
+      </svg>
+      <p id="modal-cgu-title" role="alert" class="fr-h4">Merci, votre consentement a été enregistré</p>
+      <button type="button" id="button-cgu-accepted-confirm" aria-controls="modal-cgu" class="fr-btn dsfr-doc-modal-cgu-accepted__button">Accéder à la documentation</button>
+      <p class="dsfr-doc-modal-cgu-accepted__info">Le formulaire « Conditions générales d’utilisation du Système de Design de l’État » s’inscrit dans le cadre d’un traitement de données personnelles géré par la Direction des Services Administratifs et Financiers du Premier ministre (DSAF). Vous disposez de droits sur vos données personnelles collectées et utilisées dans ce cadre (opposition, accès, rectification, suppression, limitation, portabilité, testament numérique). Pour en savoir plus, consulter la page “Données personnelles”.</p>
+    </div>`;
+  }
+
+  handleButtonAcceptClick() {
+    this.modalContent.innerHTML = this.getConfirmModalContent();
+    this.element.classList.add('dsfr-doc-modal-cgu-accepted');
+    const buttonClose = this.modalContent.querySelector('#button-cgu-accepted-close');
+    if (buttonClose) buttonClose.focus();
+    const cguVersion = this.element.getAttribute('data-cgu-version');
+    this.element.removeAttribute('data-fr-concealing-backdrop');
+    document.cookie = `cgu-version=${cguVersion}; path=/; max-age=${60 * 60 * 24 * 365 * 2}`;
+
+    fetch('/api/cgu_consent', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        version: cguVersion
+      })
+    });
+  }
+
+  handleButtonDenyClick() {
+    window.location.href = '/';
+  }
+}
+
+export default ConsentCGU;

package/src/script/main/elements/search-bar/index.js

@@ -1,6 +1,6 @@
 import { Element } from '../../core/element.js';
 import { ResultsDropdown } from './results/results-dropdown.js';
-import { normalizeTerm } from '@gouvfr/dsfr-forge/src/html/normalize.js';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
 
 class SearchBar extends Element {
   constructor (element) {

package/src/script/main/index.js

@@ -2,12 +2,14 @@ import './minisearch/index.js';
 import { instantiateElements } from './core/element.js'
 import CopySnippet from './elements/copy-snippet.js';
 import CopyLink from './elements/copy-link.js';
+import ConsentCGU from './elements/consent-cgu.js';
 import Storybook from './elements/storybook.js';
 import { SearchBar } from './elements/search-bar/index.js';
 import { ConsentManagementPlatform } from './cmp/index.js';
 
 window.onload = async () => {
   await instantiateElements('.code-snippet--copy', CopySnippet);
+  await instantiateElements('#modal-cgu', ConsentCGU);
   await instantiateElements('.dsfr-doc-anchor-heading__button', CopyLink);
   await instantiateElements('.dsfr-doc-storybook-leaf iframe', Storybook);
   await instantiateElements('#search', SearchBar);

package/src/script/main/minisearch/index.js

@@ -1,5 +1,5 @@
 import MiniSearch from 'minisearch';
-import { normalizeTerm } from '@gouvfr/dsfr-forge/src/html/normalize.js';
+import { normalizeTerm } from '@gouvfr/dsfr-kit';
 
 const LOAD_OPTIONS = {
   fields: ['title', 'keywords', 'summary', 'excerpt', 'text'],

package/src/style/main/components/_dsfr-doc-modal-cgu.scss

@@ -0,0 +1,63 @@
+.dsfr-doc-modal-cgu {
+  &__intro {
+    padding: 2rem 1rem 1.5rem 1rem;
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @media (min-width: 48em) {
+      padding: 2rem 4.5rem 1.5rem 4.5rem;
+    }
+
+    &-pictogram {
+      margin-bottom: 1rem;
+    }
+  }
+
+  &-accepted {
+    &__content {
+      padding: 0.5rem 1rem 0 1rem;
+      margin-bottom: 0;
+      text-align: center;
+
+      @media (min-width: 48em) {
+        padding: 0.5rem 3rem 0.5rem 3rem;
+      }
+    }
+
+    &__pictogram {
+      margin-bottom: 1rem;
+
+      @media (min-width: 48em) {
+        width: 130px;
+        height: 130px;
+      }
+    }
+
+    &__button {
+      margin-top: 0.5rem;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+
+    &__info {
+      margin-top: 2.5rem;
+      font-size: 0.75rem;
+      line-height: 1.25rem;
+      color: var(--text-mention-grey);
+      text-align: left;
+    }
+  }
+
+  &__buttons {
+    margin-bottom: -1rem;
+  }
+}
+
+
+#modal-cgu {
+  backdrop-filter: blur(7px);
+}

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

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