dsfr4drupal-1.x-dev/components/transcription/transcription.twig

{% set attributes = attributes|default(create_attribute()) %}
{% set button_label = button_label|default('Enlarge'|t) %}
{% set button_title = button_title|default('Enlarge transcription'|t) %}
{% set title = title|default('Transcription'|t) %}
{% set transcription_id = transcription_id|default('transcription-' ~ random()) %}
{% set collapse_id = 'fr-transcription-collapse-' ~ transcription_id %}
{% set modal_id = 'fr-transcription-modal-' ~ transcription_id %}
{% set modal_title = modal_title|default(title) %}
{% set expanded = expanded ?? false %}

<div{{ attributes.addClass('fr-transcription') }}>
  <button type="button" class="fr-transcription__btn" aria-expanded="{{ expanded ? 'true': 'false' }}" aria-controls="{{ collapse_id }}">
    {{ title }}
  </button>
  <div class="fr-collapse" id="{{ collapse_id }}">

    <div class="fr-transcription__footer">
      <div class="fr-transcription__actions-group">
        <button type="button" class="fr-btn fr-btn--fullscreen" aria-controls="{{ modal_id }}" data-fr-opened="false" title="{{ button_title }}">
          {{ button_label }}
        </button>
      </div>
    </div>

    {# Force "content" variable declaration to be used into block. #}
    {% embed 'dsfr4drupal:modal' with {
      content: content,
      html_id: modal_id,
      html_tag: 'div',
      size: 'lg',
      title: modal_title,
    } only %}
      {% block modal_content %}
        {{ content }}
      {% endblock %}
    {% endembed %}
  </div>
</div>