@gouvfr/dsfr-roller/src/node/directive/components/card/card-container-directive.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

import { Node } from '../../../node.js'

class CardContainerDirective 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.structureCard(data)]
      } : this.structureCard(data)
    );
  }

  structureCard (data) {
    this._data = data;
    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;
    const classes = ['fr-card'];
    switch (true) {
      case data.properties.enlargeLink === true:
      case data.properties.enlargeLink !== false && contentTitle?.children[0]?.type === 'link':
        classes.push('fr-enlarge-link');
        break;
    }
    if (data.properties.horizontal) classes.push('fr-card--horizontal');
    if (data.properties.download) classes.push('fr-card--download');

    return {
      type: 'htmlContainer',
      tagName: 'div',
      classes: classes,
      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
              ]
            }
          ]
        },
        image ? {
          type: 'htmlContainer',
          tagName: 'div',
          classes: ['fr-card__header'],
          children: [
            {
              type: 'htmlContainer',
              tagName: 'div',
              classes: ['fr-card__img'],
              children: [
                {
                  classes: ['fr-responsive-img'],
                  attributes: {
                    alt: ' ',
                  },
                  ...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 };