UCPKN-3880: Pass attributes to modal and toast sections. (#693)

* UCPKN-3879: Allow passing attributes to modal header, body and footer.

* UCPKN-3880: Allow passing attributes to toast elements, add custom content.

* UCPKN-3880: Add test for toast without close button.

* UCPKN-3880: Avoid overriding toast close button aria-label attribute.

* UCPKN-3880: Updated tests.

---------

Co-authored-by: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>

Author: kp77

src/components/bcl-modal/__snapshots__/modal.test.js.snap

@@ -16,7 +16,7 @@ exports[`OE - modal renders correctly 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -32,7 +32,7 @@ exports[`OE - modal renders correctly 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             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`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"
@@ -86,7 +86,7 @@ exports[`OE - modal renders correctly small 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -102,7 +102,7 @@ exports[`OE - modal renders correctly small 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -118,7 +118,7 @@ exports[`OE - modal renders correctly small 1`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"
@@ -156,7 +156,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -172,7 +172,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -188,7 +188,7 @@ exports[`OE - modal renders correctly with fullscreen breakpoint 1`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"
@@ -226,7 +226,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -242,7 +242,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -258,7 +258,7 @@ exports[`OE - modal renders correctly with scrollable modal 1`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"
@@ -297,7 +297,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -313,7 +313,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -329,7 +329,7 @@ exports[`OE - modal renders correctly with static backdrop 1`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"
@@ -367,7 +367,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
         class="modal-content"
       >
         <div
-          class="modal-header"
+          class="test-class modal-header"
         >
           <h5
             class="modal-title"
@@ -383,7 +383,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
           />
         </div>
         <div
-          class="modal-body"
+          class="test-class modal-body"
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
@@ -399,7 +399,7 @@ exports[`OE - modal renders correctly with verticaly centered modal 1`] = `
           </p>
         </div>
         <div
-          class="modal-footer"
+          class="test-class modal-footer"
         >
           <button
             class="btn btn-secondary"

src/components/bcl-modal/modal.html.twig

@@ -14,7 +14,10 @@
   - body (block) (default: '')
   - footer (block) (default: '')
   - attributes (drupal attrs)
-  
+  - header_attributes (drupal attrs)
+  - body_attributes (drupal attrs)
+  - footer_attributes (drupal attrs)
+
   Blocks
     - header
     - messages
@@ -29,9 +32,12 @@
 {% set _verticaly_centered = verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
+{% set _header_attributes = header_attributes ?: create_attribute() %}
 {% set _messages = messages|default('') %}
 {% set _body = body|default('') %}
+{% set _body_attributes = body_attributes ?: create_attribute() %}
 {% set _footer = footer|default('') %}
+{% set _footer_attributes = footer_attributes ?: create_attribute() %}
 
 {% set _classes = ['modal', 'fade'] %}
 
@@ -62,16 +68,22 @@
   >
     <div class="modal-content">
       {% if header is not empty %}
-      <div class="modal-header">
+      <div
+        {{- _header_attributes.addClass(['modal-header']) -}}
+      >
         {%- block header _header -%}
       </div>
       {% endif %}
       {%- block messages _messages -%}
-      <div class="modal-body">
+      <div
+          {{- _body_attributes.addClass(['modal-body']) -}}
+      >
         {%- block body _body -%}
       </div>
       {% if footer is not empty %}
-      <div class="modal-footer">
+      <div
+          {{- _footer_attributes.addClass(['modal-footer']) -}}
+      >
         {%- block footer _footer -%}
       </div>
       {% endif %}

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"
   >
+    <div
+      class="test-class toast-header"
+    >
+      Toast title                    
+      <button
+        aria-label="Close"
+        class="test-class btn-close"
+        data-bs-dismiss="toast"
+        type="button"
+      />
+    </div>
     <div
       class="wrapper-class another-wrapper-class"
     >
       <div
-        class="toast-body"
+        class="test-class toast-body"
       >
         Hello, world! This is a toast message.
             
@@ -35,6 +46,9 @@ exports[`OE - Toasts render correctly with body wrapper classes 1`] = `
         </div>
       </div>
     </div>
+    <p>
+      Toast custom content.
+    </p>
   </div>
 </jest>
 `;
@@ -69,7 +83,7 @@ exports[`OE - Toasts render correctly with multiple toasts 1`] = `
             just now
           </small>
           <button
-            aria-label="close"
+            aria-label="Close"
             class="btn-close"
             data-bs-dismiss="toast"
             type="button"
@@ -101,7 +115,7 @@ exports[`OE - Toasts render correctly with multiple toasts 1`] = `
             2 seconds ago
           </small>
           <button
-            aria-label="close"
+            aria-label="Close"
             class="btn-close"
             data-bs-dismiss="toast"
             type="button"
@@ -127,7 +141,61 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = `
     role="alert"
   >
     <div
-      class="toast-body"
+      class="test-class toast-header"
+    >
+      Toast title                    
+      <button
+        aria-label="Close"
+        class="test-class btn-close"
+        data-bs-dismiss="toast"
+        type="button"
+      />
+    </div>
+    <div
+      class="test-class toast-body"
+    >
+      Hello, world! This is a toast message.
+            
+      <div
+        class="mt-2 pt-2 border-top"
+      >
+        <button
+          class="btn btn-primary btn-sm me-1"
+          type="button"
+        >
+          Take action
+        </button>
+        <button
+          class="btn btn-secondary btn-sm"
+          data-bs-dismiss="toast"
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+    <p>
+      Toast custom content.
+    </p>
+  </div>
+</jest>
+`;
+
+exports[`OE - Toasts renders correctly with a single toast without close button 1`] = `
+<jest>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    class="toast"
+    role="alert"
+  >
+    <div
+      class="test-class toast-header"
+    >
+      Toast title    
+    </div>
+    <div
+      class="test-class toast-body"
     >
       Hello, world! This is a toast message.
             
@@ -149,6 +217,9 @@ exports[`OE - Toasts renders correctly with a single toast 1`] = `
         </button>
       </div>
     </div>
+    <p>
+      Toast custom content.
+    </p>
   </div>
 </jest>
 `;

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)
     %}
-    <div class="toast-header">
+    <div{{ _header_attributes.addClass(['toast-header']) }}>
     {{- _toast.header|default('') -}}
     {% if _with_close %}
-      {% set button_attributes = create_attribute()
-                                .addClass(['btn-close'])
-                                .setAttribute('aria-label', 'close')
-                                .setAttribute('data-bs-dismiss', 'toast')
-      %}
+      {% if not _button_attributes.hasAttribute('aria-label') %}
+        {% set _button_attributes = _button_attributes.setAttribute('aria-label', 'Close') %}
+      {% endif %}
       {%- include '@oe-bcl/bcl-button/button.html.twig' with {
-        attributes: button_attributes,
+        attributes: _button_attributes
+          .addClass(['btn-close'])
+          .setAttribute('data-bs-dismiss', 'toast'),
         clean_class: true
       } only -%}
     {% endif %}
@@ -104,12 +112,13 @@
     {% endif %}
     >
   {% endif %}
-    <div class="toast-body">
+    <div{{ _body_attributes.addClass(['toast-body']) }}>
       {{- _body -}}
     </div>
   {% if _with_body_wrapper %}
     </div>
   {% endif %}
+  {{- _toast.custom_content|default('') -}}
   </div>
   {% endfor %}
 {% endif %}