@gouvfr/dsfr-roller/src/page/body/cgu.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

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._isCGUActive = data.cgu.isActive;
    this._content = nodeFactory.create({
      type: 'root',
      children: data.cgu.nodes
    });
  }

  async render () {
    if (!this._requireCGU || !this._isCGUActive) {
      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 };