@gouvfr/dsfr-roller 1.0.7 → 1.0.8

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

@@ -0,0 +1,78 @@
+import { Node } from '../../node.js';
+
+class HpCommunityContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const tiles = data.children.slice(1);
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-community'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              classes: ['dsfr-doc-hp-community__title'],
+              ...title
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-community__container'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-community__img', 'dsfr-doc-hp-community__img--light'],
+                  children: [
+                    {
+                      type: 'image',
+                      classes: ['fr-responsive-img'],
+                      attributes: {
+                        src: data.imgUrl,
+                        alt: ''
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-community__img', 'dsfr-doc-hp-community__img--dark'],
+                  children: [
+                    {
+                      type: 'image',
+                      classes: ['fr-responsive-img'],
+                      attributes: {
+                        src: data.imgDarkUrl,
+                        alt: ''
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-community__tiles'],
+                  children: tiles
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpCommunityContainerDirective.NAME = 'hp-community';
+
+export { HpCommunityContainerDirective };

package/src/node/directive/home/hp-community-tile-container-directive.js

@@ -0,0 +1,57 @@
+import { Node } from '../../node.js'
+
+class HpCommunityTileContainerDirective extends Node {
+  structure (data) {
+    const hasIcon = data.properties.icon !== undefined;
+    const contentTitle = data.children[0];
+    const contentDescription = data.children[1];
+    const contentLink = data.children.find(child => child.children[0].type === 'link');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-community-tile'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['dsfr-doc-hp-community-tile__img', hasIcon ? `fr-icon-${data.properties.icon}` : ''],
+          children: [
+            data.imgUrl ? {
+              type: 'image',
+              attributes: {
+                src: data.imgUrl,
+                alt: ''
+              }
+            } : {}
+          ]
+        },
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['dsfr-doc-hp-community-tile__content'],
+          children: [
+            {
+              classes: ['dsfr-doc-hp-community-tile__title'],
+              ...contentTitle
+            },
+            {
+              classes: ['dsfr-doc-hp-community-tile__desc'],
+              ...contentDescription
+            },
+            {
+              classes: ['dsfr-doc-hp-community-tile__link', 'fr-link', 'fr-link--icon-right', 'fr-icon-arrow-right-line'],
+              ...contentLink.children[0]
+            }
+          ]
+        }
+      ]
+    });
+
+  }
+
+}
+
+HpCommunityTileContainerDirective.NAME = 'hp-community-tile';
+
+export { HpCommunityTileContainerDirective };

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

@@ -0,0 +1,41 @@
+import { Node } from '../../node.js';
+
+class HpDiscoverContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const tiles = data.children.slice(1);
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-discover'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              classes: ['dsfr-doc-hp-discover__title'],
+              ...title
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-discover__tiles fr-grid-row fr-grid-row--gutters'],
+              children: tiles
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpDiscoverContainerDirective.NAME = 'hp-discover';
+
+export { HpDiscoverContainerDirective };

package/src/node/directive/home/hp-discover-tile-container-directive.js

@@ -0,0 +1,81 @@
+import { Node } from '../../node.js'
+
+class HpDiscoverTileContainerDirective extends Node {
+  structure (data) {
+    const image = Node.getImageChild(data);
+    const contentChildren = data.children.filter(child => !Node.getImageChild(child));
+    const contentTitle = contentChildren[0];
+    const contentDescription = contentChildren.slice(1).filter(child => child.children[0].type !== 'link');
+    const contentLink = contentChildren.find(child => child.children[0].type === 'link');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['fr-col-12', 'fr-col-sm-6', 'fr-col-lg-3'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['dsfr-doc-discover-tile'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-discover-tile__container'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-discover-tile__img'],
+                  children: [
+                    {
+                      classes: ['dsfr-doc-discover-tile__img--light'],
+                      ...image,
+                    },
+                    data.imgDarkUrl ? {
+                      classes: ['dsfr-doc-discover-tile__img--dark'],
+                      type: 'image',
+                      attributes: {
+                        src: data.imgDarkUrl,
+                        alt: image.alt
+                      }
+                    } : {}
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-discover-tile__content'],
+                  children: [
+                    {
+                      ...contentTitle,
+                      classes: ['fr-h4'],
+                    },
+                    ...contentDescription
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-discover-tile__link'],
+                  children: [
+                    {
+                      ...contentLink.children[0],
+                      classes: ['fr-link', 'fr-link--icon-right', 'fr-icon-arrow-right-line']
+                    }
+                  ]
+                }
+              ]
+            },
+          ]
+        }
+      ]
+    });
+
+  }
+
+}
+
+HpDiscoverTileContainerDirective.NAME = 'hp-discover-tile';
+
+export { HpDiscoverTileContainerDirective };

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

@@ -0,0 +1,60 @@
+import { Node } from '../../node.js';
+
+class HpFaqContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const link = data.children[1];
+    const accordions = data.children.filter(child => child.name === 'fr-accordions-group');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-faq'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['fr-grid-row fr-grid-row--gutters'],
+              children: [
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-faq__content', 'fr-col-12', 'fr-col-lg-4'],
+                  children: [
+                    {
+                      classes: ['dsfr-doc-hp-faq__title'],
+                      ...title
+                    },
+                    {
+                      classes: ['dsfr-doc-hp-faq__link', 'fr-link', 'fr-link--icon-right', 'fr-icon-arrow-right-line'],
+                      ...link
+                    }
+                  ]
+                },
+                {
+                  type: 'htmlContainer',
+                  tagName: 'div',
+                  classes: ['dsfr-doc-hp-faq__accordions', 'fr-col-12', 'fr-col-lg-8'],
+                  children: accordions
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpFaqContainerDirective.NAME = 'hp-faq';
+
+export { HpFaqContainerDirective };

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

@@ -0,0 +1,37 @@
+import { Node } from '../../node.js'
+
+class HpGoalsContainerDirective extends Node {
+  structure (data) {
+    const contentTitle = data.children[0];
+    const tiles = data.children.filter(child => child.name === 'fr-tile');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-goals'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              classes: ['dsfr-doc-hp-goals__title'],
+              ...contentTitle
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-goals__tiles'],
+              children: tiles
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpGoalsContainerDirective.NAME = 'hp-goals';
+
+export { HpGoalsContainerDirective };

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

@@ -0,0 +1,54 @@
+import { Node } from '../../node.js';
+
+class HpHeroContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+    this.imgFirstUrl = data.imgFirstUrl;
+    this.imgMdUrl = data.imgMdUrl;
+    this.imgDarkFirstUrl = data.imgDarkFirstUrl;
+    this.imgDarkMdUrl = data.imgDarkMdUrl;
+  }
+
+  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-hero__content'],
+      children: [
+        title,
+        description,
+        {
+          classes: ['dsfr-doc-hp-hero__link', 'fr-btn'],
+          ...link.children[0]
+        }
+      ]
+    });
+  }
+
+  async render () {
+    return `
+      <div class="dsfr-doc-hp-hero">
+        <div class="fr-container">
+          <div class="dsfr-doc-hp-hero__img">
+            <img class="fr-hidden-md" src="${this.imgFirstUrl}" alt="">
+            <img class="fr-hidden fr-unhidden-md" src="${this.imgMdUrl}" alt="">
+          </div>
+          <div class="dsfr-doc-hp-hero__img dsfr-doc-hp-hero__img--dark">
+            <img class="fr-hidden-md" src="${this.imgDarkFirstUrl}" alt="">
+            <img class="fr-hidden fr-unhidden-md" src="${this.imgDarkMdUrl}" alt="">
+          </div>
+
+          ${await super.render()}
+        </div>
+      </div>
+    `;
+  }
+}
+
+HpHeroContainerDirective.NAME = 'hp-hero';
+
+export { HpHeroContainerDirective };

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

@@ -0,0 +1,53 @@
+import { Node } from '../../node.js';
+
+class HpNewsContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const link = data.children[data.children.length - 1];
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-news', 'fr-background-alt--grey'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'h2',
+              classes: ['dsfr-doc-hp-news__title'],
+              children: title.children
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-news__cards', 'fr-grid-row', 'fr-grid-row--gutters'],
+              children: [data.children[1]]
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-news__link'],
+              children: [
+                {
+                  ...link.children[0],
+                  classes: ['fr-link', 'fr-link--icon-right', 'fr-icon-arrow-right-line']
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+HpNewsContainerDirective.NAME = 'hp-news';
+
+export { HpNewsContainerDirective };

package/src/node/directive/home/hp-showcase-card-container-directive.js

@@ -0,0 +1,81 @@
+import { Node } from '../../node.js';
+
+class HpShowcaseCardContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    this._data = data;
+    this._image = Node.getImageChild(data);
+    this._links = data.children[0]?.children?.filter(child => child.type === 'link');
+    this._structureImgDark = this.structureImgDark;
+    this._structureLinks = this.structureLinks;
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-showcase-card'],
+      children: [
+        {
+          type: 'link',
+          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' : ''],
+              ...this._image
+            },
+            this._structureImgDark,
+          ]
+        },
+        this._structureLinks
+      ]
+    });
+  }
+
+  get structureImgDark() {
+    let structureImgDark = {};
+    if (this._data.imgDarkUrl) structureImgDark = {
+      classes: ['fr-responsive-img', 'dsfr-doc-hp-showcase-card__img--dark'],
+      type: 'image',
+      attributes: {
+        src: this._data.imgDarkUrl,
+        alt: this._image.alt
+      }
+    }
+    return structureImgDark;
+  }
+
+  get structureLinks() {
+    let structureLinks = {
+      ...this._links[0],
+      classes: ['dsfr-doc-hp-showcase-card__link', 'fr-link'],
+    };
+    if (this._links.length > 1) {
+      structureLinks = {
+        type: 'htmlContainer',
+        tagName: 'ul',
+        classes: ['dsfr-doc-hp-showcase-card__links-group'],
+        children: this._links.map(link => {
+          return {
+            type: 'htmlContainer',
+            tagName: 'li',
+            children: [
+              {
+                ...link,
+                classes: ['dsfr-doc-hp-showcase-card__link', 'fr-link', 'fr-link--icon-right', 'fr-icon-arrow-right-line'],
+              }
+            ]
+          }
+        })
+      }
+    }
+    return structureLinks;
+  }
+}
+
+HpShowcaseCardContainerDirective.NAME = 'hp-showcase-card';
+
+export { HpShowcaseCardContainerDirective };

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

@@ -0,0 +1,55 @@
+import { Node } from '../../node.js';
+
+class HpShowcaseContainerDirective extends Node {
+  constructor (data) {
+    super(data);
+  }
+
+  structure (data) {
+    const title = data.children[0];
+    const showcaseCards = data.children.filter(child => child.name === 'hp-showcase-card');
+    const link = data.children.find(child => child.children[0].type === 'link');
+
+    return super.structure({
+      type: 'htmlContainer',
+      tagName: 'div',
+      classes: ['dsfr-doc-hp-showcase'],
+      children: [
+        {
+          type: 'htmlContainer',
+          tagName: 'div',
+          classes: ['fr-container'],
+          children: [
+            {
+              type: 'htmlContainer',
+              tagName: 'h2',
+              classes: ['dsfr-doc-hp-showcases__title'],
+              children: title.children
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-showcase__container'],
+              children: showcaseCards
+            },
+            {
+              type: 'htmlContainer',
+              tagName: 'div',
+              classes: ['dsfr-doc-hp-showcase__link'],
+              children: [
+                {
+                  classes: ['fr-btn', 'fr-btn--tertiary'],
+                  ...link.children[0]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    });
+  }
+}
+
+HpShowcaseContainerDirective.NAME = 'hp-showcase';
+
+export { HpShowcaseContainerDirective };