From ca229b506b1cc6784438a9eaef31c545551bcaf2 Mon Sep 17 00:00:00 2001
From: Mikael Meulle <21535-just_like_good_vibes@users.noreply.drupalcode.org>
Date: Wed, 5 Feb 2025 15:28:36 +0000
Subject: [PATCH] Issue #3487435 by just_like_good_vibes: transcription pattern
update
---
components/modal/modal.component.yml | 4 ++
components/modal/modal.twig | 2 +-
.../transcription/transcription.component.yml | 19 ++++++-
.../transcription.expanded.story.yml | 6 +++
.../transcription.preview.story.yml | 1 +
components/transcription/transcription.twig | 50 ++++++++-----------
6 files changed, 51 insertions(+), 31 deletions(-)
create mode 100644 components/transcription/transcription.expanded.story.yml
diff --git a/components/modal/modal.component.yml b/components/modal/modal.component.yml
index 342cb7a5..ede9e952 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 5f7308b1..0a09a9d1 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 c95c1f02..2e5f9851 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 00000000..bf263c4b
--- /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 e4944fa1..5b315028 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 93ba08b2..c5065f50 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>
--
GitLab