Merge pull request #180 from openeuropa/OEL-1178

OEL-1178: Updates on status messages.
openeuropa · Feb 17, 2022 · 12b4565 · 12b4565
2 parents b0ea3cb + b4bfb90
commit 12b4565
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 8 deletions.
diff --git a/templates/overrides/misc/status-messages.html.twig b/templates/overrides/misc/status-messages.html.twig
@@ -21,18 +21,16 @@
  * @ingroup themeable
  */
 #}
-
+{% set _mapping = {
+  'status': 'success',
+  'warning': 'warning',
+  'error': 'danger'
+} %}
 <div data-drupal-messages>
   {% for type, messages in message_list %}
-
-    {% set style = '' %}
-    {% set style = (type == 'status') ? 'info' : style %}
-    {% set style = (type == 'warning') ? 'warning' : style %}
-    {% set style = (type == 'error') ? 'danger' : style %}
-
     {% for message in messages %}
       {{ pattern('alert', {
-        'style': style,
+        'variant': _mapping[type] ?? '',
         'message': message,
         'dismissible': true
       }) }}

diff --git a/tests/src/Kernel/fixtures/markup_rendering.yml b/tests/src/Kernel/fixtures/markup_rendering.yml
@@ -108,3 +108,94 @@ submit_disabled:
       'input[type=submit].form-submit.button.btn': 1
       'input[value=Save]': 1
       'input.btn-primary': 1
+status_messages_error:
+  render:
+    '#theme': 'status_messages'
+    '#message_list':
+      'error':
+        - 'Error message.'
+  assert:
+    count:
+      'div[data-drupal-messages=""]': 1
+      'div.alert': 1
+      'div.alert-danger': 1
+      'div.alert-success': 0
+      'div.alert-warning': 0
+      'div[data-drupal-messages=""] > div.alert': 1
+      'button.btn-close': 1
+    equals:
+      '.alert-content': 'Error message.'
+    contains:
+      'svg': '/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#dash-circle-fill'
+status_messages_success:
+  render:
+    '#theme': 'status_messages'
+    '#message_list':
+      'status':
+        - 'Success message.'
+  assert:
+    count:
+      'div[data-drupal-messages=""]': 1
+      'div.alert': 1
+      'div.alert-danger': 0
+      'div.alert-success': 1
+      'div.alert-warning': 0
+      'div[data-drupal-messages=""] > div.alert': 1
+      'button.btn-close': 1
+    equals:
+      '.alert-content': 'Success message.'
+    contains:
+      'svg': '/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#check-circle-fill'
+status_messages_warning:
+  render:
+    '#theme': 'status_messages'
+    '#message_list':
+      'warning':
+        - 'Warning message.'
+  assert:
+    count:
+      'div[data-drupal-messages=""]': 1
+      'div.alert': 1
+      'div.alert-danger': 0
+      'div.alert-success': 0
+      'div.alert-warning': 1
+      'div[data-drupal-messages=""] > div.alert': 1
+      'button.btn-close': 1
+    equals:
+      '.alert-content': 'Warning message.'
+    contains:
+      'svg': '/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#exclamation-triangle-fill'
+status_messages_multiple:
+  render:
+    '#theme': 'status_messages'
+    '#message_list':
+      'status':
+        - 'Success message 1.'
+        - 'Success message 2.'
+      'warning':
+        - 'Warning message 1.'
+      'error':
+        - 'Error message 1.'
+        - 'Error message 2.'
+        - 'Error message 3.'
+  assert:
+    count:
+      'div[data-drupal-messages=""]': 1
+      'div.alert': 6
+      'div.alert-danger': 3
+      'div.alert-success': 2
+      'div.alert-warning': 1
+      'div[data-drupal-messages=""] > div.alert': 6
+      'div[data-drupal-messages=""] > div.alert-success:nth-child(1)': 1
+      'div[data-drupal-messages=""] > div.alert-success:nth-child(2)': 1
+      'div[data-drupal-messages=""] > div.alert-warning:nth-child(3)': 1
+      'div[data-drupal-messages=""] > div.alert-danger:nth-child(4)': 1
+      'div[data-drupal-messages=""] > div.alert-danger:nth-child(5)': 1
+      'div[data-drupal-messages=""] > div.alert-danger:nth-child(6)': 1
+    equals:
+      'div[data-drupal-messages=""] > div:nth-child(1) .alert-content': 'Success message 1.'
+      'div[data-drupal-messages=""] > div:nth-child(2) .alert-content': 'Success message 2.'
+      'div[data-drupal-messages=""] > div:nth-child(3) .alert-content': 'Warning message 1.'
+      'div[data-drupal-messages=""] > div:nth-child(4) .alert-content': 'Error message 1.'
+      'div[data-drupal-messages=""] > div:nth-child(5) .alert-content': 'Error message 2.'
+      'div[data-drupal-messages=""] > div:nth-child(6) .alert-content': 'Error message 3.'