Issue #3487435 by just_like_good_vibes: transcription pattern update

components/modal/modal.component.yml

@@ -34,3 +34,7 @@ props:
         pack_id:
           enum:
             - dsfr
+    close_title:
+      title: "Close title"
+      description: "Title for the close button. Default is 'Close', translated."
+      type: string

components/modal/modal.twig

@@ -14,7 +14,7 @@
       <div{{ attributes.addClass('fr-col-12') }}>
         <div class="fr-modal__body">
           <div class="fr-modal__header">
-            <button class="fr-btn fr-btn--close" aria-controls="{{ modal_id }}" title="{{ 'Close'|t }}" type="button">{{ 'Close'|t }}</button>
+            <button class="fr-btn fr-btn--close" aria-controls="{{ modal_id }}" title="{{ close_title|default('Close'|t) }}" type="button">{{ 'Close'|t }}</button>
           </div>
           <div class="fr-modal__content">
             <h1 id="{{ modal_id ~ '-title' }}" class="fr-modal__title">

components/transcription/transcription.component.yml

 name: Transcription
 description: "Textual transcription for video, or detailed description for complex images"
 links:
-  - "https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/transcription/"
+  - "https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/transcription"
+  - "https://storybook.systeme-de-design.gouv.fr/?path=/docs/transcription--docs"
 slots:
   title:
     title: Title
-    description: 'Title for transcription button and modal. Default is "Transcription".'
+    description: 'Title for transcription. Default is "Transcription".'
   content:
     title: Content
+    description: "A transcription text (for video, or detailed description for complex images)."
 props:
   type: object
   properties:
@@ -15,3 +17,16 @@ props:
       title: "Transcription ID"
       description: "To generate unique id attributes if several transcriptions are in the same page. Default is randomly generated."
       $ref: "ui-patterns://identifier"
+    expanded:
+      title: "Expanded"
+      description: "Whether the transcription is expanded by default. Default is false."
+      $ref: "ui-patterns://boolean"
+      default: false
+    enlarge_text:
+      title: "Enlarge text"
+      description: "Text for the button to enlarge the transcription. Default is 'Enlarge' translated."
+      type: string
+    enlarge_aria_label:
+      title: "Enlarge aria label"
+      description: "Aria label for the button to enlarge the transcription. Default is 'Enlarge transcription' translated."
+      type: string

components/transcription/transcription.expanded.story.yml

+name: Transcription expanded by default
+slots:
+  content: "<p>Transcription text : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.</p>"
+  expanded: true
+  enlarge_text: "Agrandir le texte"
+  enlarge_aria_label: "Agrandir le texte de la transcription"

components/transcription/transcription.preview.story.yml

 name: Preview
 slots:
+  title: "Titre de la transcription"
   content: "<p>Transcription text : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.</p>"

components/transcription/transcription.twig

 {% set transcription_id = id|default('transcription-' ~ random()) %}
 
 {% set title = title|default('Transcription'|t) %}
-
+{% set collapse_id = 'fr-transcription__collapse-transcription' ~ transcription_id %}
+{% set modal_id = 'fr-transcription__modal-transcription-' ~ transcription_id %}
 <div{{ attributes.addClass('fr-transcription') }}>
-  <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-{{ transcription_id }}" type="button">
-    {{ title }}</button>
-  <div class="fr-collapse" id="fr-transcription__collapse-transcription-{{ transcription_id }}">
+  <button class="fr-transcription__btn" aria-expanded="{{ expanded ? 'true' : 'false' }}" aria-controls="{{ collapse_id }}" type="button">
+    {{ 'Transcription'|t }}</button>
+  <div class="fr-collapse {{ expanded ? 'fr-collapse--expanded' }}" id="{{ collapse_id }}">
     <div class="fr-transcription__footer">
       <div class="fr-transcription__actions-group">
-        <button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-{{ transcription_id }}" data-fr-opened="false" title="{{ 'Enlarge transcription'|t }}" type="button">
-          {{ 'Enlarge'|t }}
-        </button>
+        {{ include('ui_suite_dsfr:button', {
+          attributes: create_attribute()
+            .addClass(['fr-btn--fullscreen'])
+            .setAttribute('aria-controls', modal_id)
+            .setAttribute('data-fr-opened', 'false')
+            .setAttribute('aria-label', enlarge_aria_label|default('Enlarge transcription'|t))
+            .setAttribute('data-fr-js-modal-button', 'true'),
+          label: enlarge_text|default('Enlarge'|t),
+        }, with_context: false) }}
       </div>
     </div>
-    <dialog id="fr-transcription__modal-transcription-{{ transcription_id }}" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-{{ transcription_id }}-title">
-      <div class="fr-container fr-container--fluid fr-container-md">
-        <div class="fr-grid-row fr-grid-row--center">
-          <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
-            <div class="fr-modal__body">
-              <div class="fr-modal__header">
-                <button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-{{ transcription_id }}" title="{{ 'Close transcription modal'|t }}" type="button">
-                  {{ 'Close'|t }}
-                </button>
-              </div>
-              <div class="fr-modal__content">
-                <h1 id="fr-transcription__modal-transcription-{{ transcription_id }}-title" class="fr-modal__title">
-                  {{ title }}
-                </h1>
-                {{ content }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </dialog>
+    {% set modal_attributes = modal_attributes|default(create_attribute()) %}
+    {{ include('ui_suite_dsfr:modal', {
+      title: title,
+      body: content,
+      id: modal_id,
+      close_title: 'Close transcription modal'|t,
+      attributes: modal_attributes.addClass(['fr-col-12', 'fr-col-md-10', 'fr-col-lg-8']),
+    }, with_context: false) }}
   </div>
 </div>