@gouvfr/dsfr-roller 1.0.67 → 1.0.70

package/package.json

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

package/src/component/components/badge.js

@@ -0,0 +1,28 @@
+import { Component } from '../component.js';
+
+class Badge extends Component {
+  constructor (data) {
+    super(data, 'badge');
+  }
+
+  get ejsPath () {
+    return 'src/dsfr/component/badge/template/ejs/badge.ejs';
+  }
+
+  async format () {
+    const classes = ['fr-mb-6v'];
+    classes.push(...(this.data.classes || []));
+    return {
+      markup: this.data.markup || 'span',
+      size: this.data.size || 'sm',
+      label: this.data.label ?? this.data.text,
+      id: this.data.id,
+      classes: classes,
+      attributes: this.data.attributes,
+      type: this.data.type || 'info',
+      icon: this.data.icon,
+    }
+  }
+}
+
+export { Badge };

package/src/component/components/sidemenu.js

@@ -1,23 +1,7 @@
 import { Component } from '../component.js';
 import { formatLink } from '../../core/format-link.js';
 import { log } from '@gouvfr/dsfr-forge';
-
-const Badges = {
-  BETA: {
-    id: 'beta',
-    type: 'info',
-    icon: false,
-    size: 'sm',
-  },
-  NEW: {
-    id: 'new',
-    type: 'new',
-    icon: true,
-    size: 'sm',
-  }
-}
-
-const BadgesMap = new Map(Object.values(Badges).map(badge => [badge.id, badge]));
+import { BadgesMap } from '../../page/body/badges-map.js';
 
 class Sidemenu extends Component {
   constructor (data, badgeLabels) {

package/src/node/directive/components/badge/badge-leaf-directive.js

@@ -0,0 +1,18 @@
+import { Node } from '../../../node.js';
+import { Badge } from '../../../../component/components/badge.js';
+
+class BadgeLeafDirective extends Node {
+  constructor (data) {
+    super(data);
+    this.badge = new Badge({...this.data.properties, ...this.data.attributes});
+  }
+
+  async render () {
+    const data = { label: await this.renderChildren() };
+    return this.badge.render(data);
+  }
+}
+
+BadgeLeafDirective.NAME = 'fr-badge';
+
+export { BadgeLeafDirective };

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

@@ -1,4 +1,5 @@
 import { Node } from '../../../node.js'
+import { Badges } from '../../../../page/body/badges.js';
 
 class CardContainerDirective extends Node {
   structure (data) {
@@ -30,6 +31,7 @@ class CardContainerDirective extends Node {
     const contentDescription = contentChildren.find(child => child.type === 'paragraph');
     const hintStart = this.structureHintStart;
     const hintEnd = this.structureHintEnd;
+    const badges = this.structureBadges;
     const classes = ['fr-card'];
     switch (true) {
       case data.properties.enlargeLink === true:
@@ -87,7 +89,8 @@ class CardContainerDirective extends Node {
                   ...image
                 }
               ]
-            }
+            },
+            badges
           ]
         } : {}
       ]
@@ -142,6 +145,13 @@ class CardContainerDirective extends Node {
     return structureHintStart;
   }
 
+  get structureBadges() {
+    let structureBadges = {};
+    if (this._data.badge) {
+      structureBadges = new Badges({ids: this._data.badge, resource: this._data.fragments.badge}).node;
+    }
+    return structureBadges;
+  }
 }
 
 CardContainerDirective.NAME = 'fr-card';

package/src/node/node-factory.js

@@ -40,7 +40,8 @@ import { HpFaqContainerDirective } from './directive/home/hp-faq-container-direc
 import { HpAnalyticsContainerDirective } from './directive/home/hp-analytics-container-directive.js';
 import { AccordionContainerDirective } from './directive/components/accordion/accordion-container-directive.js';
 import { AccordionsGroupContainerDirective } from './directive/components/accordion/accordions-group-container-directive.js';
-import { ButtonLeafDirective } from './directive/components/button/button-leaf-directive.js'
+import { ButtonLeafDirective } from './directive/components/button/button-leaf-directive.js';
+import { BadgeLeafDirective } from './directive/components/badge/badge-leaf-directive.js';
 import { CardContainerDirective } from './directive/components/card/card-container-directive.js';
 import { TableContainerDirective } from './directive/components/table/table-container-directive.js';
 import { TabContainerDirective } from './directive/components/tabs/tab-container-directive.js'
@@ -123,6 +124,7 @@ const DIRECTIVE_CONTAINERS = [
   PreventPermalinksContainerDirective
 ];
 const DIRECTIVE_LEAFS = [
+  BadgeLeafDirective,
   ButtonLeafDirective,
   StorybookLeafDirective,
   FigmaLeafDirective,

package/src/page/body/badges-map.js

@@ -0,0 +1,18 @@
+const BadgeVariants = {
+  BETA: {
+    id: 'beta',
+    type: 'info',
+    icon: false,
+    size: 'sm',
+  },
+  NEW: {
+    id: 'new',
+    type: 'new',
+    icon: true,
+    size: 'sm',
+  }
+};
+
+const BadgesMap = new Map(Object.values(BadgeVariants).map(badge => [badge.id, badge]));
+
+export { BadgesMap };

package/src/page/body/badges.js

@@ -0,0 +1,70 @@
+import { log } from '@gouvfr/dsfr-forge';
+import { BadgesMap } from './badges-map.js';
+
+class Badges {
+  constructor(data) {
+    let {ids, resource} = data;
+    if (typeof ids === 'string') ids = ids.split(',');
+    if (!Array.isArray(ids)) {
+      log.error(`Badge must be a string or an array of strings, received: ${typeof ids}`);
+      this._node = {};
+      return;
+    }
+    const badges = ids.map(id => this._formatBadge(id, resource));
+    if (badges.every(badge => Object.keys(badge).length === 0)) {
+      this._node = {};
+      return;
+    }
+    this._node = {
+      type: 'htmlContainer',
+      tagName: 'ul',
+      classes: ['fr-badges-group', 'fr-mb-2v'],
+      children: badges
+    };
+  }
+
+  _getIconClasses (icon) {
+    if (icon === false) {
+      return ['fr-badge--no-icon'];
+    }
+    if (icon === true) {
+      return [];
+    }
+    return [`fr-icon-${icon}`];
+  }
+
+  _formatBadge (id, resource) {
+    const badgeData = BadgesMap.get(id);
+    if (!badgeData) {
+      log.error(`Unknown badge type: ${id}`);
+      return {};
+    }
+    return {
+      type: 'htmlContainer',
+      tagName: 'li',
+      children: [
+        {
+          type: 'paragraph',
+          classes: [
+            'fr-badge',
+            `fr-badge--${badgeData.type}`,
+            `fr-badge--${badgeData.size}`,
+            ...this._getIconClasses(badgeData.icon)
+          ],
+          children: [
+            {
+              type: 'text',
+              value: resource[id],
+            }
+          ]
+        }
+      ]
+    };
+  }
+
+  get node () {
+    return this._node;
+  }
+}
+
+export { Badges };

package/src/page/head/resource.js

@@ -6,7 +6,8 @@ class Resource extends Renderable {
             meta: this._data.resource.meta,
             search: this._data.resource.search,
             pagination: this._data.resource.pagination,
-            consent: this._data.resource.consent
+            consent: this._data.resource.consent,
+            badge: this._data.resource.badge
         };
         return `<script>
             window.resource = ${JSON.stringify(resource)};

package/src/page/page.js

@@ -31,6 +31,7 @@ class Page extends Renderable {
       boost: this.data.boost,
       text: this._html.text,
       section: this.data.section,
+      badge: this.data.badge,
     }
   }
 

package/src/script/search/elements/result-card.js

@@ -1,46 +1,74 @@
+import { BadgesMap } from '../../../page/body/badges-map.js';
+
 class ResultCard {
-    constructor(data) {
-        this._title = data.title;
-        this._url = data.url;
-        this._desc = data.excerpt ?? data.summary;
-        this._cover = data.cover || '/static/img/placeholder.16x9.png';
-        this._section = data.section;
-    }
-
-    getTags() {
-        if (!this._section) return '';
-        return `<div class="fr-card__start">
-                    <ul class="fr-tags-group">
-                        <li>
-                            <p class="fr-tag">${this._section}</p>
-                        </li>
-                    </ul>
-                </div>`;
-    }
-
-    getCover() {
-        if (!this._cover) return '';
-        return `<div class="fr-card__header">
-                    <div class="fr-card__img">
-                        <img src="${this._cover}" alt="" class="fr-responsive-img">
-                    </div>
-                </div>`;
-    }
-
-    render() {
-        return `<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-8v">
-                    <div class="fr-card__body">
-                        <div class="fr-card__content">
-                            <h3 class="fr-card__title">
-                                <a href="${this._url}">${this._title}</a>
-                            </h3>
-                            ${this._desc ? `<p class="fr-card__desc">${this._desc}</p>` : ''}
-                            ${this.getTags()}
-                        </div>
-                    </div>
-                    ${this.getCover()}
-                </div>`;
-    }
+  constructor (data) {
+    this._title = data.title;
+    this._url = data.url;
+    this._desc = data.excerpt ?? data.summary;
+    this._cover = data.cover || '/static/img/placeholder.16x9.png';
+    this._section = data.section;
+    this._badge = data.badge || [];
+  }
+
+  getTags () {
+    if (!this._section) return '';
+    return `<div class="fr-card__start">
+      <ul class="fr-tags-group">
+        <li>
+          <p class="fr-tag">${this._section}</p>
+        </li>
+      </ul>
+    </div>`;
+  }
+
+  getBadges () {
+    if (!this._badge?.length) return '';
+
+    const badges = Array.isArray(this._badge) ? this._badge : this._badge.split(',').map(b => b.trim());
+    const badgeItems = badges
+      .map(badge => {
+        const badgeData = BadgesMap.get(badge);
+        if (!badgeData) return null;
+
+        const badgeLabel = window.resource?.badge?.[badge] || badge;
+        let iconClass = '';
+        if (badgeData.icon === false) {
+          iconClass = ' fr-badge--no-icon';
+        } else {
+          iconClass = ` fr-badge--icon-${badgeData.icon}`;
+        }
+        return `<li><span class="fr-badge fr-badge--${badgeData.type} fr-badge--${badgeData.size}${iconClass}">${badgeLabel}</span></li>`;
+      })
+      .filter(Boolean)
+      .join('');
+
+    return `<ul class="fr-badges-group fr-mb-2v">${badgeItems}</ul>`;
+  }
+
+  getCover () {
+    if (!this._cover) return '';
+    return `<div class="fr-card__header">
+      <div class="fr-card__img">
+        <img src="${this._cover}" alt="" class="fr-responsive-img">
+      </div>
+      ${this.getBadges()}
+    </div>`;
+  }
+
+  render () {
+    return `<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mb-8v">
+      <div class="fr-card__body">
+        <div class="fr-card__content">
+          <h3 class="fr-card__title">
+            <a href="${this._url}">${this._title}</a>
+          </h3>
+          ${this._desc ? `<p class="fr-card__desc">${this._desc}</p>` : ''}
+          ${this.getTags()}
+        </div>
+      </div>
+      ${this.getCover()}
+    </div>`;
+  }
 }
 
 export { ResultCard };

package/src/script/search/elements/search-page.js

@@ -7,39 +7,39 @@ import { Pagination } from '../../main/elements/pagination/index.js';
 const RESULTS_PER_PAGES = 10;
 
 class SearchPage extends Element {
-    constructor(element) {
-        super(element, 'searchPage');
-
-        this._query = getQuery();
-        this._searchBarInput = document.querySelector('#search-input');
-        this._resultsCount = document.querySelector('#results-count');
-        this._resultsList = document.querySelector('#results-cards');
-        this._container = element.querySelector('#results-page--container');
-    }
+  constructor(element) {
+    super(element, 'searchPage');
+
+    this._query = getQuery();
+    this._searchBarInput = document.querySelector('#search-input');
+    this._resultsCount = document.querySelector('#results-count');
+    this._resultsList = document.querySelector('#results-cards');
+    this._container = element.querySelector('#results-page--container');
+  }
 
-    async init() {
-        await window.searchEngine.init('searchPage');
+  async init() {
+    await window.searchEngine.init('searchPage');
 
-        if (this._query) {
-            this._searchBarInput.value = this._query;
-            const results = window.searchEngine.search(this._query);
+    if (this._query) {
+      this._searchBarInput.value = this._query;
+      const results = window.searchEngine.search(this._query);
 
-            const count = new ResultsCount(results.length);
-            const resultsList = new ResultsList(results, RESULTS_PER_PAGES);
+      const count = new ResultsCount(results.length);
+      const resultsList = new ResultsList(results, RESULTS_PER_PAGES);
 
-            this._resultsCount.innerHTML = count.render();
-            document.title = `${document.title} - ${count.render()}`;
+      this._resultsCount.innerHTML = count.render();
+      document.title = `${document.title} - ${count.render()}`;
 
-            this._container.appendChild(resultsList.element);
-            resultsList.init();
+      this._container.appendChild(resultsList.element);
+      resultsList.init();
 
-            if (results.length > RESULTS_PER_PAGES) {
-                const pagination = new Pagination(results, RESULTS_PER_PAGES);
-                this._container.appendChild(pagination.element);
-                pagination.init();
-            }
-        }
+      if (results.length > RESULTS_PER_PAGES) {
+        const pagination = new Pagination(results, RESULTS_PER_PAGES);
+        this._container.appendChild(pagination.element);
+        pagination.init();
+      }
     }
+  }
 }
 
 export { SearchPage };

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

@@ -4,6 +4,7 @@ import { Breadcrumb } from '../../component/components/breadcrumb.js';
 import { TOC } from '../../page/body/toc.js';
 import { Edit } from '../../page/body/edit.js';
 import { Mesh } from '../../page/body/mesh.js';
+import { Badges } from '../../page/body/badges.js';
 
 class EditorialTemplate extends Template {
   constructor (data) {
@@ -20,6 +21,12 @@ class EditorialTemplate extends Template {
   structure (data) {
     this._hasEditUrl = data?.editUrl != null;
     this._hasMesh = data?.mesh?.items?.length;
+    this._hasBadge = data?.badge != null;
+
+    if (this._hasBadge) {
+      const badges = new Badges({ids: data.badge, resource: data.resource.badge});
+      data.nodes.unshift(badges.node);
+    }
 
     if (this._hasEditUrl) {
       const edit = new Edit({...data.resource.edit, editUrl: data.editUrl, blankLabel: data.fragments.blank});