diff --git a/components/modal/modal.component.yml b/components/modal/modal.component.yml
index 342cb7a5e1231670104565cd8a249666d496b168..ede9e9529788d8e94130d79033dbd1fb023aae0f 100644
--- a/components/modal/modal.component.yml
+++ b/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
diff --git a/components/modal/modal.twig b/components/modal/modal.twig
index 5f7308b14074729d6aaa710d41b140bb618f8474..0a09a9d16db1d78e741602b510c05577e69c8ace 100644
--- a/components/modal/modal.twig
+++ b/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">
diff --git a/components/transcription/transcription.component.yml b/components/transcription/transcription.component.yml
index c95c1f0259766144677d36a9654a982cf68f6050..2e5f9851ff32fa039f45a0dd5c85d3ddf37f1df3 100644
--- a/components/transcription/transcription.component.yml
+++ b/components/transcription/transcription.component.yml
@@ -1,13 +1,15 @@
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
diff --git a/components/transcription/transcription.expanded.story.yml b/components/transcription/transcription.expanded.story.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bf263c4b246323f8698a7768051f372635ad7e29
--- /dev/null
+++ b/components/transcription/transcription.expanded.story.yml
@@ -0,0 +1,6 @@
+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"
diff --git a/components/transcription/transcription.preview.story.yml b/components/transcription/transcription.preview.story.yml
index e4944fa1bd7642d578fc75a95eebd6fabffb92fc..5b315028a72d72f032ca1c93361c1f0432c28529 100644
--- a/components/transcription/transcription.preview.story.yml
+++ b/components/transcription/transcription.preview.story.yml
@@ -1,3 +1,4 @@
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>"
diff --git a/components/transcription/transcription.twig b/components/transcription/transcription.twig
index 93ba08b2f79b197e3cab9d9e0841c8f611e3474a..c5065f50c42e041e301b67975ede3bb14d259210 100644
--- a/components/transcription/transcription.twig
+++ b/components/transcription/transcription.twig
@@ -1,38 +1,32 @@
{% 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>