@gouvfr/dsfr-roller 1.0.16 → 1.0.18

package/env/local/env.json

@@ -1 +1,4 @@
-{}
+{
+  "env": "local",
+  "domain": "gva.et-gv.fr"
+}

package/env/prod/env.json

@@ -1 +1,4 @@
-{}
+{
+  "env": "prod",
+  "domain": "zmmt.systeme-de-design.gouv.fr"
+}

package/env/staging/env.json

@@ -1 +1,4 @@
-{}
+{
+  "env": "staging",
+  "domain": "gva.et-gv.fr"
+}

package/package.json

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

package/src/component/components/breadcrumb.js

@@ -24,6 +24,7 @@ class Breadcrumb extends Component {
     chunks.push(...missing);
 
     return {
+      id: `breadcrumb-${missing.join('-')}`,
       label: segment.label ?? segment.text,
       path: missing.join('/')
     };

package/src/component/components/header.js

@@ -20,6 +20,7 @@ class Header extends Component {
     const search = {
       id: 'search',
       modalId: 'search-modal',
+      btnId: 'search-modal-button',
       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, markup: 'a', href: this.data.search.url, attributes: { 'data-href': this.data.search.url } }
     };

package/src/component/components/translate.js

@@ -11,7 +11,7 @@ class Translate extends Component {
   async format () {
     return {
       id: 'translate',
-      button: { title: this.data.button, kind: 3 },
+      button: { title: this.data.button, kind: 3, id: 'header__tools--translate' },
       collapseId: 'translate-collapse',
       languages: this._formatLanguages(this.data.languages)
     };

package/src/component/ejs/version/version.ejs

@@ -31,6 +31,7 @@ const collapseId = version.collapseId || uniqueId('version');
       'aria-expanded': false,
       title: versionBtn.title
     };
+    versionBtn.id = 'header__tools--version';
     versionBtn.classes = versionBtn.classes !== undefined ? versionBtn.classes.concat(minBtnClasses) : minBtnClasses;
     versionBtn.attributes = versionBtn.attributes !== undefined ? {...minBtnAttrs, ...versionBtn.attributes} : minBtnAttrs;
 

package/src/core/format-link.js

@@ -1,6 +1,8 @@
 export const formatLink = (link) => {
   if (!link) return undefined;
   const url = link.url ?? link.href;
+  const segments = url && url.split('/');
+  if (segments) link.id = link.id ?? `link-${segments.join('-')}`;
   if (/^(https:|http:|www\.)\S*$/.test(url)) link.blank = true;
   link.href = url;
   link.label = link.label ?? link.text;

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

@@ -2,9 +2,20 @@ import { CardContainerDirective } from '../components/card/card-container-direct
 
 class PageItemCardContainerDirective extends CardContainerDirective {
   structure (data) {
+    const cols = {
+      col: data.properties?.col || 12,
+      colSm: data.properties?.colSm,
+      colMd: data.properties?.colMd,
+      colLg: data.properties?.colLg
+    }
+    if (!data.horizontal) {
+      cols.colSm = cols.colSm || 6;
+      cols.colLg = cols.colLg || 4;
+    }
     data.properties = {
-      horizontal: false,
-      download: false,
+      horizontal: data.horizontal || false,
+      download: data.download || false,
+      ...cols,
       ...data.properties,
     };
 
@@ -42,10 +53,8 @@ class PageItemCardContainerDirective extends CardContainerDirective {
         ],
       });
     }
-
     return super.structure(data);
   }
-
 }
 
 PageItemCardContainerDirective.NAME = 'dsfr-doc-page-item-card';

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

@@ -0,0 +1,47 @@
+import { Node } from '../../node.js'
+
+class PageItemHeadingContainerDirective extends Node {
+  structure (data) {
+    const children = [
+      {
+        type: 'heading',
+        depth: 3,
+        children: [
+          {
+            type: 'link',
+            url: data.url,
+            children: [
+              {
+                type: 'text',
+                value: data.text
+              },
+            ],
+          },
+        ],
+      }
+    ];
+
+    if (data.shortDescription || data.excerpt) {
+      children.push({
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value: data.shortDescription || data.excerpt,
+          },
+        ],
+      });
+    }
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-col-12'],
+      children: children,
+    });
+  }
+}
+
+PageItemHeadingContainerDirective.NAME = 'dsfr-doc-page-item-heading';
+
+export { PageItemHeadingContainerDirective };

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

@@ -1,19 +1,29 @@
 import { Node } from '../../node.js';
 
+const mapItem = (item) => {
+  const nodes = [
+    {
+        ...item,
+        type: 'containerDirective',
+        name: item.name ?? 'dsfr-doc-page-item-card',
+    }
+  ];
+
+  if (item.items) {
+    for (const childItem of item.items) {
+      nodes.push(...mapItem(childItem));
+    }
+  }
+
+  return nodes
+};
+
 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'
-        }
-      ]
-    }));
+    const children = [];
+    for (const item of data.items) {
+      children.push(...mapItem(item));
+    }
 
     return super.structure({
       type: 'htmlContainer',

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

@@ -1,15 +1,16 @@
 import { Node } from '../../node.js';
 
 class StorybookLeafDirective extends Node {
+  constructor (data) {
+    super(data, 'iframe');
+  }
 
-  // TODO:
-  //  - script externe pour le resize de l'iframe
-  //  - apossibilité de multiple storybook (baser sur id de la story ?)
-  //  - bug resize down
-  //  - bouton communication avec iframe pour changer le theme exemple
-  //  - changement theme iframe en fonction theme parent
   async render() {
-    return `<div class="storybook-leaf"><iframe ${this.renderAttributes()}></iframe></div>`;
+    return `
+      <div class="dsfr-doc-storybook-leaf">
+        ${await super.render()}
+      </div>
+    `;
   }
 }
 

package/src/node/node-factory.js

@@ -54,6 +54,7 @@ import { TabNavigationContainerDirective } from './directive/doc/tab-navigation-
 import { StorybookLeafDirective } from './directive/doc/storybook-leaf-directive.js';
 import { FigmaLeafDirective } from './directive/doc/figma-leaf-directive.js';
 import { PageItemListLeafDirective } from './directive/doc/page-item-list-leaf-directive.js';
+import { PageItemHeadingContainerDirective } from './directive/doc/page-item-heading-container-directive.js';
 import { PageItemCardContainerDirective } from './directive/doc/page-item-card-container-directive.js';
 import { VideoLeafDirective } from  './directive/doc/video-leaf-directive.js';
 import { ImageTextDirective } from './directive/doc/image-text-directive.js'
@@ -107,6 +108,7 @@ const DIRECTIVE_CONTAINERS = [
   AccordionsGroupContainerDirective,
   CardContainerDirective,
   PageItemCardContainerDirective,
+  PageItemHeadingContainerDirective,
   TileContainerDirective,
   GuidelineContainerDirective,
   GuidelinesContainerDirective,

package/src/node/node.js

@@ -11,7 +11,19 @@ class Node extends Renderable {
     this._children = Array.isArray(this.data.children) ? this.data.children.map(childData => nodeFactory.create(childData)) : [];
     if (typeof this.data?.attributes === 'object' && Object.keys(this.data.attributes).length > 0) {
       Object.entries(this.data.attributes).forEach(([key, value]) => {
-        this.attributes.setAttribute(key, value);
+        switch (key) {
+          case 'classes':
+            if (typeof value === 'string') {
+              this.attributes.setClasses(value.split(' '));
+            } else if (Array.isArray(value)) {
+              this.attributes.setClasses(value);
+            }
+            break;
+
+          default:
+            this.attributes.setAttribute(key, value);
+        }
+
       });
     }
     if (typeof this.data?.classes === 'object' && Array.isArray(this.data.classes)) {

package/src/page/head/analytics-config.js

@@ -0,0 +1,29 @@
+import { Renderable } from '../../core/renderable.js';
+
+class AnalyticsConfig extends Renderable {
+  constructor (data) {
+    super(data, 'analyticsConfig');
+    this._analytics = data.analytics;
+    this._analytics.domain = '$(1)';
+    this._analytics.site.environment = '$(2)';
+  }
+
+  async render () {
+    return `
+    <script>
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', '/env.json', false);
+      xhr.send(null);
+
+      if (xhr.status === 200) {
+        const env = JSON.parse(xhr.responseText);
+        const analytics = ${JSON.stringify(this._analytics).replace('"$(1)"', 'env.domain').replace('"$(2)"', 'env.env')};
+        window.dsfr = { analytics };
+      } else {
+        console.error('Failed to load JSON:', xhr.status, xhr.statusText);
+      }
+    </script>`;
+  }
+}
+
+export { AnalyticsConfig };

package/src/page/head/head.js

@@ -5,6 +5,7 @@ import { Renderable } from '../../core/renderable.js';
 import { Favicon } from './favicon.js';
 import { Resource } from './resource.js';
 import { Share } from './share.js';
+import { AnalyticsConfig } from './analytics-config.js';
 
 class Head extends Renderable {
 
@@ -16,6 +17,7 @@ class Head extends Renderable {
     this._resource = new Resource(data);
     this._share = new Share(data);
     this._stylesheets = new Stylesheets(data);
+    this._analyticsConfig = new AnalyticsConfig(data);
   }
 
   async render () {
@@ -30,6 +32,7 @@ class Head extends Renderable {
         ${await this._share.render()}
         ${await this._stylesheets.render()}
         ${await this._resource.render()}
+        ${await this._analyticsConfig.render()}
       </head>
     `;
   }

package/src/page/html.js

@@ -9,7 +9,7 @@ import { Scripts } from './scripts/scripts.js';
 import { HtmlRenderable } from '../core/html-renderable.js';
 
 class Html extends HtmlRenderable {
-  constructor(data) {
+  constructor (data) {
     super(data);
 
     this._head = new Head(data);

package/src/page/scripts/scripts.js

@@ -4,6 +4,7 @@ import { HIGHLIGHT_SCRIPTS } from './highlight.js'
 
 const DIST_FILES = [
   'dsfr',
+  'analytics/analytics',
 ];
 
 const DEFAULT_LIB_FILES = [

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

@@ -1,19 +1,55 @@
-import { Element } from '../core/element.js'
+import { Element } from '../core/element.js';
 
 class Storybook extends Element {
-  get iframe () {
+  get iframe() {
     return this.element;
   }
 
   init() {
-    this._iframeDoc = this.iframe.contentDocument;
-    if (!this._iframeDoc) return;
-    this.observeResize(this._iframeDoc.body);
+    this.isResized = false;
+    this.setIframeTheme();
+    this.listenChangeDisplay();
+    window.addEventListener('message', this.handleMessage.bind(this));
   }
 
-  resize () {
-    const height = this._iframeDoc.body?.scrollHeight ?? this._iframeDoc.documentElement?.scrollHeight;
-    this.iframe.style.height = isNaN(height) || !height ? '100%' : height + 'px';
+  handleMessage(event) {
+    const eventType = JSON.parse(event.data)?.event?.type;
+    if (!eventType) return;
+
+    if (eventType === 'storyRendered') {
+      this._iframeDoc = this.iframe.contentDocument;
+      if (!this._iframeDoc || this.isResized) return;
+
+      this.resize();
+      this.isResized = true;
+    }
+  }
+
+  resize() {
+    const height =
+      this._iframeDoc.body?.scrollHeight ??
+      this._iframeDoc.documentElement?.scrollHeight;
+    this.iframe.style.height =
+      isNaN(height) || !height ? '100%' : height + 'px';
+  }
+
+  setIframeTheme() {
+    const theme = document.documentElement.getAttribute('data-fr-theme');
+    if (theme) {
+      const url = new URL(window.location.origin + this.iframe.dataset.src);
+      url.searchParams.set('globals', `theme:${theme}`);
+      this.iframe.src = url.toString();
+    }
+  }
+
+  listenChangeDisplay() {
+    const display = document.getElementById('fr-display');
+    const radios = display.querySelectorAll('input');
+    radios.forEach((radio) => {
+      radio.addEventListener('change', () => {
+        this.setIframeTheme();
+      });
+    });
   }
 }
 

package/src/script/main/index.js

@@ -7,7 +7,7 @@ import { ConsentManagementPlatform } from './cmp/index.js';
 
 window.onload = async () => {
   await instantiateElements('.code-snippet--copy', CopySnippet);
-  await instantiateElements('.storybook-leaf iframe', Storybook);
+  await instantiateElements('.dsfr-doc-storybook-leaf iframe', Storybook);
   await instantiateElements('#search', SearchBar);
 };