@gouvfr/dsfr-roller 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "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.31",
+    "@gouvfr/dsfr-forge": "=1.0.33",
     "@gouvfr/dsfr-publisher": "npm:@gouvfr/dsfr@1.13.2",
     "deepmerge": "^4.3.1",
     "ejs": "^3.1.10",

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

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/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/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;
 
@@ -71,6 +72,17 @@
         }
       }
     }
+
+    &__link--extended {
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   @media (min-width: 36em) {

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

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

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

@@ -2,7 +2,15 @@
   --block-spacing: 1.5rem;
 }
 
-#content-editorial {
+.dsfr-doc-preview {
+  padding: 1rem;
+  border: 1px solid var(--border-default-grey);
+  margin-bottom: 2rem;
+}
+
+.content-editorial {
+  margin-bottom: var(--block-spacing);
+
   img {
     max-width: 100%;
     height: auto;
@@ -20,6 +28,10 @@
     }
   }
 
+  .fr-breadcrumb__list {
+    margin-bottom: 0;
+  }
+
   :not(.fr-callout) > p {
     & + {
       dl,
@@ -38,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 !== undefined;
+    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">