@gouvfr/dsfr-roller 1.0.7 → 1.0.8

package/package.json

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

package/src/component/components/button.js

@@ -26,8 +26,8 @@ class Button extends Component {
       blank,
       self: !blank || this.data.self === 'true',
       disabled: this.data.disabled === 'true',
-      classes: this.data.classes.split(','),
-      attributes: yaml.parse(this.data.attributes),
+      classes: typeof this.data.classes === 'string' ? this.data.classes.split(',') : this.data.classes,
+      attributes: typeof this.data.attributes === 'string' ? yaml.parse(this.data.attributes) : this.data.attributes,
       icon: this.data.icon,
       iconPlace: this.data['icon-place'],
     }

package/src/component/components/header.js

@@ -21,7 +21,7 @@ class Header extends Component {
       id: 'search',
       modalId: 'search-modal',
       input: { placeholder: this.data.search.label, label: this.data.search.label },
-      button: { id: 'search-button', label: this.data.search.label, title: this.data.search.title ?? this.data.search.label, attributes: { 'data-href': this.data.search.url } }
+      button: { id: 'search-button', label: this.data.search.label, title: this.data.search.title ?? this.data.search.label, markup: 'a', href: this.data.search.url, attributes: { 'data-href': this.data.search.url } }
     };
 
     return {

package/src/node/directive/{doc → components/accordion}/accordion-container-directive.js

@@ -1,14 +1,14 @@
-import { Node } from '../../node.js'
+import { Node } from '../../../node.js'
 import { log } from '@gouvfr/dsfr-forge';
 
 class AccordionContainerDirective extends Node {
   structure (data) {
-    if (!data.attributes.id) {
+    if (!data.properties.id) {
       log.warn('AccordionContainerDirective: missing "accordion id"');
       return data;
     }
 
-    const accordionId = data.attributes.id;
+    const accordionId = data.properties.id;
     const titleChildren = data.children.filter(child => child?.data?.directiveLabel)?.[0]?.children;
     const contentChildren = data.children.filter(child => !child?.data?.directiveLabel);
     const titleType = titleChildren[0].value.startsWith('#') ? 'heading' : 'paragraph';
@@ -33,7 +33,7 @@ class AccordionContainerDirective extends Node {
               classes: ['fr-accordion__btn'],
               attributes: {
                 type: 'button',
-                'aria-expanded': data.attributes['aria-expanded'] || false,
+                'aria-expanded': data.properties['aria-expanded'] || false,
                 'aria-controls': accordionId
               },
               children: titleChildren

package/src/node/directive/{doc → components/accordion}/accordions-group-container-directive.js

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js'
+import { Node } from '../../../node.js'
 
 class AccordionsGroupContainerDirective extends Node {
   constructor (data) {

package/src/node/directive/{doc → components/button}/button-leaf-directive.js

@@ -1,10 +1,10 @@
-import { Node } from '../../node.js';
-import { Button } from '../../../component/components/button.js';
+import { Node } from '../../../node.js';
+import { Button } from '../../../../component/components/button.js';
 
 class ButtonLeafDirective extends Node {
   constructor (data) {
     super(data);
-    this.button = new Button(this.data.attributes);
+    this.button = new Button(this.data.properties);
   }
 
   structure (data) {

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

@@ -0,0 +1,114 @@
+import { Node } from '../../../node.js'
+
+class CardContainerDirective extends Node {
+  structure (data) {
+    this._data = data;
+    const horizontal = data.properties.horizontal === true;
+    const download = data.properties.download === true;
+    const image = Node.getImageChild(data);
+    const contentChildren = data.children.filter(child => !Node.getImageChild(child));
+    const contentTitle = contentChildren.find(child => child.type === 'heading');
+    const contentDescription = contentChildren.find(child => child.type === 'paragraph');
+    const hintStart = this.structureHintStart;
+    const hintEnd = this.structureHintEnd;
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-card', 'fr-enlarge-link', horizontal ? 'fr-card--horizontal' : '', download ? 'fr-card--download' : ''],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-card__body'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-card__content'],
+              children: [
+                {
+                  classes: ['fr-card__title'],
+                  ...contentTitle,
+                },
+                {
+                  classes: ['fr-card__desc'],
+                  ...contentDescription
+                },
+                hintStart,
+                hintEnd
+              ]
+            }
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-card__header'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-card__img'],
+              children: [
+                {
+                  classes: ['fr-responsive-img'],
+                  ...image
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+
+  get structureHintStart() {
+    let structureHintStart = {};
+    if (this._data.properties.hintStart) {
+      structureHintStart = {
+        type: 'htmlContainer',
+        tagName: 'div',
+        classes: ['fr-card__start'],
+        children: [
+          {
+            type: 'paragraph',
+            classes: ['fr-card__detail'],
+            children: {
+              type: 'text',
+              value: this._data.properties.hintStart
+            }
+          }
+        ]
+      }
+    }
+    return structureHintStart;
+  }
+
+  get structureHintEnd() {
+    let structureHintStart = {};
+    if (this._data.properties.hintEnd) {
+      structureHintStart = {
+        type: 'htmlContainer',
+        tagName: 'div',
+        classes: ['fr-card__end'],
+        children: [
+          {
+            type: 'paragraph',
+            classes: ['fr-card__detail'],
+            children: {
+              type: 'text',
+              value: this._data.properties.hintEnd
+            }
+          }
+        ]
+      }
+    }
+    return structureHintStart;
+  }
+
+}
+
+CardContainerDirective.NAME = 'fr-card';
+
+export { CardContainerDirective };

package/src/node/directive/{doc → components/table}/table-container-directive.js

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js';
+import { Node } from '../../../node.js';
 import { log } from '@gouvfr/dsfr-forge';
 
 const VALIGN = new Map([
@@ -9,7 +9,7 @@ const VALIGN = new Map([
 class TableContainerDirective extends Node {
   constructor (data) {
     super(data);
-    this.applyAttributes(data.attributes);
+    this.applyProperties(data.properties);
   }
 
   structure (data) {
@@ -26,16 +26,16 @@ class TableContainerDirective extends Node {
     return data;
   }
 
-  applyAttributes (attributes) {
+  applyProperties (properties) {
     const table = this.findDescendantsByType('table')[0];
     if (!table) return;
 
-    if (attributes.scroll === 'false') table.attributes.addClass('fr-table--no-scroll');
-    if (attributes.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;
 
-    const valign = attributes.valign ? attributes.valign.split(',') : null;
+    const valign = properties.valign ? properties.valign.split(',') : null;
     if (valign?.length === 1 && VALIGN.has(valign[0])) {
       valign.length = cellCount;
       valign.fill(valign[0]);
@@ -51,6 +51,6 @@ class TableContainerDirective extends Node {
   }
 }
 
-TableContainerDirective.NAME = 'dsfr-doc-table';
+TableContainerDirective.NAME = 'dsfr-doc-table'; //TODO: fr-table ?
 
 export { TableContainerDirective };

package/src/node/directive/{doc → components/tabs}/tab-container-directive.js

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js';
+import { Node } from '../../../node.js';
 
 class TabContainerDirective extends Node {
   structure (data) {

package/src/node/directive/{doc → components/tabs}/tabs-container-directive.js

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js';
+import { Node } from '../../../node.js';
 import { log } from '@gouvfr/dsfr-forge';
 import { TabContainerDirective } from './tab-container-directive.js';
 

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

@@ -0,0 +1,135 @@
+import { Node } from '../../../node.js'
+
+class TileContainerDirective extends Node {
+  structure (data) {
+    const col = data.properties.col || '';
+    const colSm = data.properties.colSm || '';
+    const colMd = data.properties.colMd || '';
+    const colLg = data.properties.colLg || '';
+
+    return super.structure(
+      col || colSm || colMd || colLg ? {
+        type: 'htmlContainer',
+        tagName: 'div',
+        classes: [
+          col ? `fr-col-${col}` : '',
+          colSm ? `fr-col-sm-${colSm}` : '',
+          colMd ? `fr-col-md-${colMd}` : '',
+          colLg ? `fr-col-lg-${colLg}` : ''
+        ],
+        children: [this.structureTile(data)]
+      } : this.structureTile(data)
+    );
+  }
+
+  structureTile(data) {
+    const noBorder = data.properties.noBorder || false;
+    const pictogramUrl = data.properties.pictogram;
+    const image = Node.getImageChild(data);
+    const contentChildren = data.children.filter(child => !Node.getImageChild(child));
+    const title = contentChildren[0];
+    const description = contentChildren[1];
+    const details = contentChildren[2];
+
+    return {
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-tile', noBorder ? 'fr-tile--no-border' : ''],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-tile__body'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-tile__content'],
+              children: [
+                {
+                  classes: ['fr-tile__title'],
+                  ...title
+                },
+                description ? {
+                  classes: ['fr-tile__desc'],
+                  ...description
+                } : {},
+                details ? {
+                  classes: ['fr-tile__detail'],
+                  ...details
+                } : {},
+              ]
+            },
+          ]
+        },
+        pictogramUrl || image ? {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-tile__header'],
+          children: [
+            pictogramUrl ? {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-tile__pictogram'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  classes: ['fr-artwork'],
+                  tagName: 'svg',
+                  attributes: {
+                    'aria-hidden': true,
+                    viewBox: '0 0 80 80',
+                    width: '80px',
+                    height: '80px'
+                  },
+                  children: [
+                    {
+                      type: 'htmlContainer',
+                      classes: ['fr-artwork-decorative'],
+                      tagName: 'use',
+                      attributes: {
+                        href: pictogramUrl + '#artwork-decorative'
+                      }
+                    },
+                    {
+                      type: 'htmlContainer',
+                      classes: ['fr-artwork-minor'],
+                      tagName: 'use',
+                      attributes: {
+                        href: pictogramUrl + '#artwork-minor'
+                      }
+                    },
+                    {
+                      type: 'htmlContainer',
+                      classes: ['fr-artwork-major'],
+                      tagName: 'use',
+                      attributes: {
+                        href: pictogramUrl + '#artwork-major'
+                      }
+                    }
+                  ]
+                }
+              ]
+            } : {},
+            image ? {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-tile__img'],
+              children: [
+                {
+                  classe: ['fr-responsive-img'],
+                  ...image
+                }
+              ]
+            } : {},
+          ]
+        } : {},
+      ]
+    }
+  }
+
+}
+
+TileContainerDirective.NAME = 'fr-tile';
+
+export { TileContainerDirective };

package/src/node/directive/core/grid-container-directive.js

@@ -0,0 +1,15 @@
+import { Node } from '../../node.js'
+
+class GridContainerDirective extends Node {
+  constructor (data) {
+    super(data, 'div');
+    this.attributes.addClass('fr-grid-row');
+    if (data.properties.gutters !== false) this.attributes.addClass('fr-grid-row--gutters');
+    if (data.properties.alignV) this.attributes.addClass(`fr-grid-row--${data.properties.alignV}`);
+    if (data.properties.alignH) this.attributes.addClass(`fr-grid-row--${data.properties.alignH}`);
+  }
+}
+
+GridContainerDirective.NAME = 'fr-grid';
+
+export { GridContainerDirective };

package/src/node/directive/doc/{anatomy-container-directive.js → guidance/anatomy-container-directive.js}

@@ -1,10 +1,10 @@
-import { Node } from '../../node.js'
+import { Node } from '../../../node.js'
 import { log } from '@gouvfr/dsfr-forge';
 
 class AnatomyContainerDirective extends Node {
   structure (data) {
     const image = Node.getImageChild(data);
-    const col = data.attributes?.col ?? 12;
+    const col = data.properties?.col ?? 12;
 
     if (!image) {
       log.warn('GuidelineContainerDirective: missing image');

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

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js'
+import { Node } from '../../../node.js'
 import { log } from '@gouvfr/dsfr-forge';
 
 class GuidelineContainerDirective extends Node {
@@ -10,8 +10,8 @@ class GuidelineContainerDirective extends Node {
       return data;
     }
 
-    const valid = data.attributes.valid.toLowerCase() === 'true';
-    const col = data.attributes.col || '12';
+    const valid = data.properties.valid.toLowerCase() === 'true';
+    const col = data.properties.col || '12';
     const description = data.children.filter(child => {
       switch (true) {
         case child?.data?.directiveLabel === true:

package/src/node/directive/doc/{guidelines-container-directive.js → guidance/guidelines-container-directive.js}

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js'
+import { Node } from '../../../node.js'
 
 class GuidelinesContainerDirective extends Node {
   constructor (data) {

package/src/node/directive/doc/{pin-leaf-directive.js → guidance/pin-leaf-directive.js}

@@ -1,4 +1,4 @@
-import { Node } from '../../node.js';
+import { Node } from '../../../node.js';
 
 class PinLeafDirective extends Node {
   structure (data) {

package/src/node/directive/doc/page-item-card-container-directive.js

@@ -0,0 +1,53 @@
+import { CardContainerDirective } from '../components/card/card-container-directive.js';
+
+class PageItemCardContainerDirective extends CardContainerDirective {
+  structure (data) {
+    data.properties = {
+      horizontal: false,
+      download: false,
+      ...data.properties,
+    };
+
+    data.children = [
+      {
+        type: 'image',
+        url: data.cover ?? '/static/img/placeholder.16x9.png',
+      },
+      {
+        type: 'heading',
+        depth: 2,
+        children: [
+          {
+            type: 'link',
+            url: data.url,
+            children: [
+              {
+                type: 'text',
+                value: data.text
+              },
+            ],
+          },
+        ],
+      }
+    ];
+
+    if (data.shortDescription || data.excerpt) {
+      data.children.push({
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value: data.shortDescription || data.excerpt,
+          },
+        ],
+      });
+    }
+
+    return super.structure(data);
+  }
+
+}
+
+PageItemCardContainerDirective.NAME = 'dsfr-doc-page-item-card';
+
+export { PageItemCardContainerDirective };

package/src/node/directive/doc/page-item-list-leaf-directive.js

@@ -0,0 +1,33 @@
+import { Node } from '../../node.js';
+
+class PageItemListLeafDirective extends Node {
+  structure (data) {
+    const children = data.items.map((item) => ({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-col-12', 'fr-col-sm-6', 'fr-col-lg-4'],
+      children: [
+        {
+          ...item,
+          type: 'containerDirective',
+          name: data.itemDirectiveName ?? 'dsfr-doc-page-item-card'
+        }
+      ]
+    }));
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: [
+        'fr-grid-row',
+        'fr-grid-row--gutters',
+        'fr-mb-12v',
+      ],
+      children: children,
+    });
+  }
+}
+
+PageItemListLeafDirective.NAME = 'dsfr-doc-page-item-list';
+
+export { PageItemListLeafDirective };

package/src/node/directive/doc/tab-navigation-container-directive.js

@@ -4,7 +4,7 @@ import { HtmlNode } from '../../generic/html-node.js';
 class TabNavigationContainerDirective extends Node {
     constructor(data) {
         super(data);
-        this._id = data.attributes.id || 'dsfr-doc-tab-navigation--collapse';
+        this._id = data.properties.id || 'dsfr-doc-tab-navigation--collapse';
         const list = this.findDescendantsByType('list')[0];
         list.attributes.setAttribute('role', 'tablist');
         const items = list.findDescendantsByType('listItem');

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

@@ -0,0 +1,44 @@
+import { Node } from '../../node.js';
+
+class VideoLeafDirective extends Node {
+  structure(data) {
+    let videoAttributes = {};
+    switch (data.properties.provider) {
+      case 'youtube':
+        videoAttributes = {
+          rel: 0,
+          controls: 1,
+          autoplay: 0,
+          mute: 0,
+          loop: 0,
+          loading: 1,
+        };
+        break;
+
+      case 'vimeo':
+        break;
+    }
+
+    data.attributes = {
+      ...(data.attributes || {}),
+      ...videoAttributes,
+      'data-videoid': data.properties.videoId,
+      width: data.properties.width || '100%',
+      height: data.properties.height || '100%',
+    };
+
+    return super.structure(data);
+  }
+
+  constructor(data) {
+    super(data, 'div');
+
+    this.attributes.addClass('fr-responsive-vid');
+    if (data.properties.provider)
+      this.attributes.addClass(`${data.properties.provider}_player`);
+  }
+}
+
+VideoLeafDirective.NAME = 'dsfr-doc-video';
+
+export { VideoLeafDirective };

package/src/node/directive/home/hp-analytics-container-directive.js

@@ -0,0 +1,67 @@
+import { Node } from '../../node.js';
+
+class HpAnalyticsContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const description = data.children[1];
+    const link = data.children[2];
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-analytics', 'fr-background-alt--blue-france'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-analytics__img'],
+              children: [
+                {
+                  type: 'image',
+                  classes: ['fr-responsive-img'],
+                  tagName: 'img',
+                  attributes: {
+                    src: data.imgUrl,
+                    alt: ''
+                  }
+                }
+              ]
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-analytics__content'],
+              children: [
+                {
+                  classes: ['dsfr-doc-hp-analytics__title'],
+                  ...title
+                },
+                {
+                  classes: ['dsfr-doc-hp-analytics__desc'],
+                  ...description
+                },
+                {
+                  classes: ['dsfr-doc-hp-analytics__link', 'fr-btn', 'fr-btn--secondary'],
+                  ...link.children[0],
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpAnalyticsContainerDirective.NAME = 'hp-analytics';
+
+export { HpAnalyticsContainerDirective };