From 6a5ccbb0f52cf513ad1fbac73d00915f634b44da Mon Sep 17 00:00:00 2001 From: Peter Keszthelyi Date: Tue, 23 Sep 2025 18:31:41 +0200 Subject: [PATCH 1/5] UCPKN-3879: Allow passing attributes to modal header, body and footer. --- .../__snapshots__/modal.test.js.snap | 36 +++++++++---------- src/components/bcl-modal/modal.html.twig | 20 ++++++++--- src/data/modal/data.js | 4 +++ 3 files changed, 38 insertions(+), 22 deletions(-) diff --git a/src/components/bcl-modal/__snapshots__/modal.test.js.snap b/src/components/bcl-modal/__snapshots__/modal.test.js.snap index 671292dc8..7db686227 100644 --- a/src/components/bcl-modal/__snapshots__/modal.test.js.snap +++ b/src/components/bcl-modal/__snapshots__/modal.test.js.snap @@ -16,7 +16,7 @@ exports[`OE - modal renders correctly 1`] = ` class="modal-content" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -48,7 +48,7 @@ exports[`OE - modal renders correctly 1`] = `

', + header_attributes: new drupalAttribute().addClass("test-class"), body: getDummyText(7, true), + body_attributes: new drupalAttribute().addClass("test-class"), footer: '', + footer_attributes: new drupalAttribute().addClass("test-class"), }; From 70fce4884f514ea9e7bc0934388e09a608681e5f Mon Sep 17 00:00:00 2001 From: Peter Keszthelyi Date: Wed, 1 Oct 2025 11:18:27 +0200 Subject: [PATCH 2/5] UCPKN-3880: Allow passing attributes to toast elements, add custom content. --- .../__snapshots__/toasts.test.js.snap | 32 +++++++++++++++++-- src/components/bcl-toasts/toasts.html.twig | 17 +++++++--- src/data/toasts/data.js | 9 +++++- 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap index 4442e8de5..cc427a1e9 100644 --- a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap +++ b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap @@ -8,11 +8,22 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = ` class="toast" role="alert" > +
+ Toast title +
Hello, world! This is a toast message. @@ -35,6 +46,9 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = `
+

+ Toast custom content. +

`; @@ -127,7 +141,18 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = ` role="alert" >
+ Toast title +
+
Hello, world! This is a toast message. @@ -149,6 +174,9 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = `
+

+ Toast custom content. +

`; diff --git a/src/components/bcl-toasts/toasts.html.twig b/src/components/bcl-toasts/toasts.html.twig index 63a4bc9a0..1b3632db7 100644 --- a/src/components/bcl-toasts/toasts.html.twig +++ b/src/components/bcl-toasts/toasts.html.twig @@ -10,6 +10,11 @@ - toasts (object[]) format: [ { - body (string) (default: '') + - body_attributes (drupal attrs) + - header (string) (default: '') + - header_attributes (drupal attrs) + - button_attributes (drupal attrs) + - custom_content (string) (default: '') - role (string) (default: 'alert') - with_close (boolean) (default: true) - autohide (boolean) (default: false) @@ -66,6 +71,9 @@ {% set _with_body_wrapper = _toast.with_body_wrapper ?? false %} {% set _body_wrapper_classes = _toast.body_wrapper_classes|default('') %} {% set _toast_attributes = _toast.attributes ?: create_attribute() %} + {% set _body_attributes = _toast.body_attributes ?: create_attribute() %} + {% set _header_attributes = _toast.header_attributes ?: create_attribute() %} + {% set _button_attributes = _toast.button_attributes ?: create_attribute() %} {% set _toast_attributes = _toast_attributes.addClass(_classes).setAttribute('aria-atomic', 'true') %} {% if _aria_live is not empty %} {% set _toast_attributes = _toast_attributes.setAttribute('aria-live', _aria_live) %} @@ -82,16 +90,16 @@ {% if _with_close or (_toast.header is defined and _toast.header is not empty) %} -
+ {{- _toast.header|default('') -}} {% if _with_close %} - {% set button_attributes = create_attribute() + {% set _button_attributes = _button_attributes .addClass(['btn-close']) .setAttribute('aria-label', 'close') .setAttribute('data-bs-dismiss', 'toast') %} {%- include '@oe-bcl/bcl-button/button.html.twig' with { - attributes: button_attributes, + attributes: _button_attributes, clean_class: true } only -%} {% endif %} @@ -104,12 +112,13 @@ {% endif %} > {% endif %} -
+ {{- _body -}}
{% if _with_body_wrapper %}
{% endif %} + {{- _toast.custom_content|default('') -}} {% endfor %} {% endif %} diff --git a/src/data/toasts/data.js b/src/data/toasts/data.js index 83dfdb4e2..826d0efd2 100644 --- a/src/data/toasts/data.js +++ b/src/data/toasts/data.js @@ -1,14 +1,21 @@ +const drupalAttribute = require("drupal-attribute"); + module.exports = { toasts: [ { role: "alert", aria_live: "assertive", - with_close: false, + with_close: true, + header: "Toast title", + header_attributes: new drupalAttribute().addClass("test-class"), + button_attributes: new drupalAttribute().addClass("test-class"), body: `Hello, world! This is a toast message.
`, + body_attributes: new drupalAttribute().addClass("test-class"), + custom_content: "

Toast custom content.

", }, ], }; From b982b7db5c637da9b1883373fcb70e3aa765af18 Mon Sep 17 00:00:00 2001 From: Peter Keszthelyi Date: Fri, 10 Oct 2025 16:09:00 +0200 Subject: [PATCH 3/5] UCPKN-3880: Add test for toast without close button. --- .../__snapshots__/toasts.test.js.snap | 43 +++++++++++++++++++ src/components/bcl-toasts/toasts.test.js | 13 ++++++ 2 files changed, 56 insertions(+) diff --git a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap index cc427a1e9..8b5aa3df8 100644 --- a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap +++ b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap @@ -180,3 +180,46 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = ` `; + +exports[`OE - Toasts renders correctly with a single toast without close button 1`] = ` + + + +`; diff --git a/src/components/bcl-toasts/toasts.test.js b/src/components/bcl-toasts/toasts.test.js index 0b78a4088..585280cc2 100644 --- a/src/components/bcl-toasts/toasts.test.js +++ b/src/components/bcl-toasts/toasts.test.js @@ -19,6 +19,19 @@ describe("OE - Toasts", () => { return expect(render(demoSingle)).resolves.toMatchSnapshot(); }); + test(`renders correctly with a single toast without close button`, () => { + expect.assertions(1); + + const noCloseButton = { ...demoSingle }; + const noCloseButtonToast = { + ...noCloseButton.toasts[0], + with_close: false, + }; + noCloseButton.toasts = [noCloseButtonToast]; + + return expect(render(noCloseButton)).resolves.toMatchSnapshot(); + }); + test(`render correctly with body wrapper classes`, () => { expect.assertions(1); From 2dafe731653f4aa9522a2afe1a60b3e864956f17 Mon Sep 17 00:00:00 2001 From: Peter Keszthelyi Date: Fri, 10 Oct 2025 16:16:52 +0200 Subject: [PATCH 4/5] UCPKN-3880: Avoid overriding toast close button aria-label attribute. --- .../bcl-toasts/__snapshots__/toasts.test.js.snap | 12 ++++++------ src/components/bcl-toasts/toasts.html.twig | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap index 8b5aa3df8..fc2793800 100644 --- a/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap +++ b/src/components/bcl-toasts/__snapshots__/toasts.test.js.snap @@ -11,9 +11,9 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = `
- Toast title + Toast title ', - header_attributes: new drupalAttribute().addClass("test-class"), + header_attributes: new DrupalAttribute().addClass("test-class"), body: getDummyText(7, true), - body_attributes: new drupalAttribute().addClass("test-class"), + body_attributes: new DrupalAttribute().addClass("test-class"), footer: '', - footer_attributes: new drupalAttribute().addClass("test-class"), + footer_attributes: new DrupalAttribute().addClass("test-class"), }; diff --git a/src/data/toasts/data.js b/src/data/toasts/data.js index 826d0efd2..4d38f7405 100644 --- a/src/data/toasts/data.js +++ b/src/data/toasts/data.js @@ -1,4 +1,4 @@ -const drupalAttribute = require("drupal-attribute"); +const { DrupalAttribute } = require("drupal-attribute"); module.exports = { toasts: [ @@ -7,14 +7,14 @@ module.exports = { aria_live: "assertive", with_close: true, header: "Toast title", - header_attributes: new drupalAttribute().addClass("test-class"), - button_attributes: new drupalAttribute().addClass("test-class"), + header_attributes: new DrupalAttribute().addClass("test-class"), + button_attributes: new DrupalAttribute().addClass("test-class"), body: `Hello, world! This is a toast message.
`, - body_attributes: new drupalAttribute().addClass("test-class"), + body_attributes: new DrupalAttribute().addClass("test-class"), custom_content: "

Toast custom content.

", }, ],