@gouvfr/dsfr-nexus/src/interpret/dsfr/part/page/node/directive/storybook-leaf-directive-node.js

Le module `dsfr-nexus` est l'interface de ligne de commande (CLI) centrale du Système de Design de l’État - DSFR. Il offre des outils pour gérer et compiler les ressources du DSFR

import { DirectiveNode } from './directive-node.js';

class StorybookLeafDirectiveNode extends DirectiveNode {
  constructor (data, state) {
    super(data, state);
    const args = this.getObjectProperty('args');
    let encodedArgs = '';

    if (args) {
      encodedArgs = '&args=' + encodeURIComponent(
        Object.entries(args)
          .map(([key, value]) => `${key}:${value}`)
          .join(';')
      );
    }

    data.attributes = data.attributes || {};
    data.attributes.id = data.properties.id ?? data.properties.storyId;
    data.attributes.class = data.attributes.id.includes('--docs') ? 'dsfr-iframe-storybook-docs' : 'dsfr-iframe-storybook-root';
    data.attributes['data-src'] = `/${state.version.text}/storybook/iframe.html?id=${data.attributes.id}&nav=0${encodedArgs}`;
    data.attributes.style = `width: ${this.getStringProperty('width') || '100%'}; height: ${this.getStringProperty('height') || '100%'};`;
    data.attributes.scrolling = 'no';
    data.attributes.title = 'Storybook';
  }
}

StorybookLeafDirectiveNode.NAME = 'dsfr-doc-storybook';

export { StorybookLeafDirectiveNode };