@gouvfr/dsfr-roller 1.0.32 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "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,7 +56,7 @@
   ],
   "main": "./index.js",
   "dependencies": {
-    "@gouvfr/dsfr-forge": "=1.0.32",
+    "@gouvfr/dsfr-forge": "=1.0.34",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.13.2",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

package/src/component/components/display-modal.js

@@ -18,6 +18,7 @@ class DisplayModal extends Component {
       id: 'display-modal',
       title: this.data.resource.display.title,
       size: 'sm',
+      titleMarkup: 'p',
       closeButton: {
         label: this.data.fragments.button.close,
       },

package/src/component/components/sidemenu.js

@@ -34,7 +34,8 @@ class Sidemenu extends Component {
       collapseId: this.uniqueId(),
       buttonLabel: this.data.buttonLabel,
       titleId: this.uniqueId(),
-      title: this.data.text,
+      title: this.data.titleLabel,
+      modifier: 'sticky-full-height',
       items: this.data?.items?.map(item => this._formatItem(item)).filter(item => item)
     };
   }
@@ -50,8 +51,9 @@ class Sidemenu extends Component {
   }
 
   _formatLink (link) {
+    const text = link.titleId ? `${link.text} (<span lang="en">${link.titleId}</span>)` : link.text;
     const badge = link.badge ? this._formatBadge(link.badge) : '';
-    const label = link.badge ? link.text + badge : link.text;
+    const label = link.badge ? text + badge : text;
     return {
       ...formatLink(link),
       active: link.isCurrent,

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

@@ -30,8 +30,8 @@ class TableContainerDirective extends Node {
     const table = this.findDescendantsByType('table')[0];
     if (!table) return;
 
-    if (properties.scroll === 'false') table.attributes.addClass('fr-table--no-scroll');
-    if (properties.caption === 'false') table.attributes.addClass('fr-table--no-caption');
+    if (properties.scroll === false) table.attributes.addClass('fr-table--no-scroll');
+    if (properties.caption === false) table.attributes.addClass('fr-table--no-caption');
 
     const cellCount = table.children[0].children.length;
 

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

@@ -12,6 +12,7 @@ class GuidelineContainerDirective extends Node {
 
     const valid = data.properties.valid === true;
     const col = data.properties.col || '12';
+    const title = valid ? data.fragments.do : data.fragments.dont;
     const description = data.children.filter(child => {
       switch (true) {
         case child?.data?.directiveLabel === true:
@@ -22,7 +23,6 @@ class GuidelineContainerDirective extends Node {
           return true;
       }
     });
-    const title = valid ? data.fragments.do : data.fragments.dont;
 
     return super.structure({
       type: 'htmlContainer',
@@ -39,7 +39,7 @@ class GuidelineContainerDirective extends Node {
               classes: ['dsfr-doc-guideline__img'],
               attributes: {
                 src: image.url,
-                alt: title
+                alt: image.alt,
               }
             },
             {

package/src/node/directive/home/hp-showcase-card-container-directive.js

@@ -18,10 +18,9 @@ class HpShowcaseCardContainerDirective extends Node {
       classes: ['dsfr-doc-hp-showcase-card'],
       children: [
         {
-          type: 'link',
+          type: 'htmlContainer',
+          tagName: 'div',
           classes: ['dsfr-doc-hp-showcase-card__img'],
-          url: this._links[0].url,
-          title: this._links[0].title || this._links[0].children[0].value || this._image.alt,
           children: [
             {
               classes: ['fr-responsive-img', data.imgDarkUrl ? 'dsfr-doc-hp-showcase-card__img--light' : ''],
@@ -51,7 +50,7 @@ class HpShowcaseCardContainerDirective extends Node {
   get structureLinks() {
     let structureLinks = {
       ...this._links[0],
-      classes: ['dsfr-doc-hp-showcase-card__link', 'fr-link'],
+      classes: ['dsfr-doc-hp-showcase-card__link', 'dsfr-doc-hp-showcase-card__link--extended', 'fr-link'],
     };
     if (this._links.length > 1) {
       structureLinks = {

package/src/node/directive/home/hp-slice-video-container-directive.js

@@ -193,8 +193,7 @@ class HpSliceVideoContainerDirective extends Node {
                               classes: ['fr-modal__content'],
                               children: [
                                 {
-                                  type: 'htmlContainer',
-                                  tagName: 'h3',
+                                  type: 'paragraph',
                                   classes: ['fr-modal__title'],
                                   attributes: {
                                     id: modalId + '-title'

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

@@ -4,7 +4,7 @@ class ImageNode extends Node {
   constructor(data) {
     super(data, 'img', true);
     this.attributes.setAttribute('src', this.data.url);
-    if (this.data.alt) this.attributes.setAttribute('alt', this.data.alt);
+    this.attributes.setAttribute('alt', this.data.alt ?? '');
     if (this.data.title) this.attributes.setAttribute('title', this.data.title);
   }
 }

package/src/page/body/edit.js

@@ -0,0 +1,59 @@
+class Edit {
+  constructor(data) {
+    this._node = {
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-edit', 'fr-background-alt--blue-france', `fr-icon-${data.icon ?? 'edit-fill'}`],
+      children: [
+        {
+          type: 'heading',
+          classes: ['dsfr-doc-edit__title', 'fr-h5'],
+          depth: data.depth ?? 5,
+          children: [
+            {
+              type: 'text',
+              value: data.title
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          classes: ['dsfr-doc-edit__description'],
+          children: [
+            {
+              type: 'text',
+              value: data.description
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          classes: ['dsfr-doc-edit__link'],
+          children: [
+            {
+              type: 'link',
+              classes: ['fr-link'],
+              attributes: {
+                href: data.editUrl,
+                target: '_blank',
+                title: `${data.link} - ${data.blankLabel}`
+              },
+              children: [
+                {
+                  type: 'text',
+                  value: data.link
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+
+  get node () {
+    return this._node;
+  }
+}
+
+export { Edit };

package/src/page/body/toc.js

@@ -83,6 +83,9 @@ class TOC extends Renderable {
         depths = this._data.toc.split(',').map(depth => parseInt(depth.trim(), 10)).filter(depth => !isNaN(depth));
         mainList = filterHeadings(mainList, depths);
         break;
+      case 'number':
+        mainList = filterHeadings(mainList, [this._data.toc]);
+        break;
     }
 
     const summary = new Summary({ title: this.data?.fragments?.summary?.title, list: mainList });

package/src/page/head/share.js

@@ -13,6 +13,8 @@ class Share extends Renderable {
 
   async render() {
     return `
+      <meta name="description" content="${this._description}">
+
       <meta property="og:title" content="${this._title}">
       <meta property="og:description" content="${this._description}">
       <meta property="og:image" content="${this._cover}">

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

@@ -5,7 +5,7 @@ import tacLang from './tarteaucitron/lang';
 
 import {
   vimeo,
-  // youtube,
+  youtube,
   // dailymotion,
   // twitterembed,
   // instagram,
@@ -19,7 +19,7 @@ class ConsentManagementPlatform {
       getCurrentRepo() + this._data?.tarteaucitron?.legalNoticeLink;
     this._services = [
       vimeo,
-      // youtube,
+      youtube,
       // dailymotion,
       // twitterembed,
       // instagram,

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

@@ -436,9 +436,9 @@ export var tarteaucitron = {
                                             </button>
                                         </div>
                                         <div class="fr-modal__content">
-                                            <h2 class="fr-modal__title fr-h3" id="fr-consent-modal-title">
+                                            <p class="fr-modal__title fr-h3" id="fr-consent-modal-title">
                                                 ${tarteaucitron.lang.title}
-                                            </h2>
+                                            </p>
                                             <div class="fr-consent-manager">
                                                 <div class="fr-consent-service fr-consent-manager__header">
                                                     <fieldset class="fr-fieldset fr-fieldset--inline">
@@ -666,14 +666,14 @@ export var tarteaucitron = {
                     !tarteaucitron.parameters.AcceptAllCta
                 ) {
                     html += `<div tabindex="-1" id="tarteaucitronAlertBig" class="fr-consent-banner" ${modalAttrs}>`;
-                    html += `<h2 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h2>`;
+                    html += `<p class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</p>`;
                     html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${tarteaucitron.lang.alertBigPrivacy.content}</p></div>`;
                     html += `<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">`;
                     html += `<li><button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="consent-modal" aria-label="${tarteaucitron.lang.personalize} ${tarteaucitron.lang.modalWindow}" title="${tarteaucitron.lang.personalize} ${tarteaucitron.lang.modalWindow}" type="button" id="tarteaucitronPersonalize">${tarteaucitron.lang.personalize}</button></li>`;
                     html += '</ul></div>';
                 } else {
                     html += `<div tabindex="-1" id="tarteaucitronAlertBig" class="fr-consent-banner" ${modalAttrs}>`;
-                    html += `<h2 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h2>`;
+                    html += `<p class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</p>`;
                     html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${
                         tarteaucitron.parameters.highPrivacy
                             ? tarteaucitron.lang.alertBigPrivacy.content
@@ -925,7 +925,7 @@ export var tarteaucitron = {
                         // The setimeout at 1500 ms will prevent the location.reload event to be properly binded...
                         if (tarteaucitronNoAdBlocker === false) {
                             html = `<div id="tarteaucitronAlertBig" class="fr-consent-banner tarteaucitronAlertBig tarteaucitron-display-block" role="alert" aria-live="polite">`;
-                            html += `<h2 class="fr-h6">${tarteaucitron.lang.adblock}</h2>`;
+                            html += `<p class="fr-h6">${tarteaucitron.lang.adblock}</p>`;
                             html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${tarteaucitron.lang.adblock_call}</p></div>`;
                             html += `<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">`;
                             html += `<li><button class="fr-btn tarteaucitronCTAButton" aria-label="${tarteaucitron.lang.reload}" title="${tarteaucitron.lang.reload}" type="button" id="tarteaucitronCTAButton">${tarteaucitron.lang.reload}</button></li>`;

package/src/script/main/elements/storybook.js

@@ -12,7 +12,7 @@ class Storybook extends Element {
   }
 
   handleMessage(event) {
-    if (event.data?.type === 'storybook-height-change') {
+    if (event.data?.type === 'storybook-height-change' && this.iframe.id === event.data.iframeId) {
       this.setIframeHeight(event.data.height);
     }
   }

package/src/style/home/_showcase.scss

@@ -24,6 +24,7 @@
   }
 
   &-card {
+    position: relative;
     width: 100%;
     padding: 0;
 
@@ -42,6 +43,13 @@
         display: none;
       }
 
+      &:has(+ .dsfr-doc-hp-showcase-card__link--extended:hover) {
+        img,
+        svg {
+          transform: scale(1.05);
+        }
+      }
+
       img,
       svg {
         transition: transform 0.3s ease-out;
@@ -49,13 +57,6 @@
         width: 100%;
         height: auto;
       }
-
-      &:hover {
-        img,
-        svg {
-          transform: scale(1.05);
-        }
-      }
     }
 
     &__links-group {
@@ -71,6 +72,17 @@
         }
       }
     }
+
+    &__link--extended {
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 2.25rem);
+      }
+    }
   }
 
   @media (min-width: 36em) {
@@ -108,6 +120,10 @@
           }
         }
       }
+
+      &__link--extended::before {
+        height: calc(100% - 2.5rem);
+      }
     }
 
     &__title {

package/src/style/main/components/{_dsfr-doc-storybook.scss → _dsfr-doc-storybook-leaf.scss}

@@ -1,5 +1,5 @@
 .dsfr-doc-storybook-leaf {
-  iframe {
+  .dsfr-iframe-storybook-root {
     border: 1px solid var(--border-default-grey);
   }
 }

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

@@ -7,4 +7,4 @@
 @use 'dsfr-doc-searchbar';
 @use 'dsfr-doc-pagination';
 @use 'dsfr-doc-edit';
-@use 'dsfr-doc-storybook';
+@use 'dsfr-doc-storybook-leaf';

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

@@ -8,7 +8,9 @@
   margin-bottom: 2rem;
 }
 
-#content-editorial {
+.content-editorial {
+  margin-bottom: var(--block-spacing);
+
   img {
     max-width: 100%;
     height: auto;
@@ -26,6 +28,10 @@
     }
   }
 
+  .fr-breadcrumb__list {
+    margin-bottom: 0;
+  }
+
   :not(.fr-callout) > p {
     & + {
       dl,
@@ -44,27 +50,54 @@
     }
   }
 
-  // .fr-sr-only attributes
-  .fr-sidemenu {
-    &__title {
-      clip: rect(0, 0, 0, 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-      white-space: nowrap;
-      width: 1px;
-      border: 0;
-      display: block;
-    }
-  }
-
   pre code.hljs {
     border-radius: 0;
   }
 }
 
-.fr-footer {
-  margin-top: var(--block-spacing);
+.fr-summary ol {
+  margin-bottom: 0;
+}
+
+.fr-breadcrumb {
+  margin-top: 0;
+  @media (min-width: 48em) {
+    margin-top: 1rem;
+  }
+}
+
+.fr-sidemenu {
+
+  &__title {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    border: 0;
+    display: block;
+  }
+
+  .fr-sidemenu__inner {
+    @media (min-width: 48em) {
+      padding-top: 1.5rem;
+    }
+  }
+
+  div:not(.fr-collapse) {
+    .fr-sidemenu__list {
+      .fr-sidemenu__item {
+        &::before {
+          box-shadow: inset 0 -1px 0 0 var(--border-default-grey);
+        }
+
+        &:last-child::before {
+          box-shadow: none;
+        }
+      }
+    }
+  }
 }

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

@@ -2,45 +2,48 @@ import { Template } from '../template.js';
 import { Sidemenu } from '../../component/components/sidemenu.js';
 import { Breadcrumb } from '../../component/components/breadcrumb.js';
 import { TOC } from '../../page/body/toc.js';
-import { Edit } from '../../component/components/edit.js';
+import { Edit } from '../../page/body/edit.js';
 
 class EditorialTemplate extends Template {
   constructor (data) {
     super(data);
 
     this._hasSidemenu = data?.resource?.navigation?.sidemenu !== undefined;
-
-    this._hasEditUrl = data?.editUrl !== undefined;
-
     if (this._hasSidemenu) this._sidemenu = new Sidemenu(data.resource.navigation.sidemenu, data.resource.badge);
 
-    if (this._hasEditUrl) this._edit = new Edit({...data.resource.edit, editUrl: data.editUrl, blankLabel: this.data.fragments.blank});
-
     this._breadcrumb = new Breadcrumb(data.breadcrumb);
 
     this._toc = new TOC(data, this.content.nodes);
   }
 
+  structure (data) {
+    this._hasEditUrl = data?.editUrl != null;
+    if (this._hasEditUrl) {
+      const edit = new Edit({...data.resource.edit, editUrl: data.editUrl, blankLabel: data.fragments.blank});
+      data.nodes.push(edit.node);
+    }
+
+    return super.structure(data);
+  }
+
   async render () {
     const cols = [];
     if (this._hasSidemenu) {
       cols.push(`
-                <div class="fr-col-12 fr-col-md-4 fr-pt-12v">
+                <div class="fr-col-12 fr-col-md-4">
                     ${await this._sidemenu.render()}
                 </div>
             `);
     }
 
     cols.push(`
-                <div class="fr-col-12 fr-col-md-8" id="content-editorial">
+                <div class="content-editorial fr-col-12 fr-col-md-8">
                     ${await this._breadcrumb.render()}
                     ${await this._toc.render()}
                     ${await super.render()}
-                    ${await this._edit.render()}
                 </div>
             `);
 
-
     return `
             <div class="fr-container">
                 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">