@gouvfr/dsfr-roller 1.0.66 → 1.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr-roller",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "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.66",
+    "@gouvfr/dsfr-forge": "=1.0.68",
     "@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/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.js

@@ -0,0 +1,86 @@
+import { log } from '@gouvfr/dsfr-forge';
+
+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]));
+
+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/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});