Merge pull request #489 from UN-OCHA/OPS-10532-status-messages

chore: style status messages for 10.3

common_design.info.yml

@@ -36,6 +36,8 @@ regions:
 libraries-extend:
   core/drupal.dropbutton:
     - common_design/cd-dropbutton
+  core/drupal.message:
+    - common_design/messages
 
 libraries-override:
   core/modernizr:

common_design.libraries.yml

@@ -8,6 +8,15 @@ global-styling:
   dependencies:
     - common_design/cd-core
 
+# Style status messages when they come via bigpipe.
+# @see https://www.drupal.org/project/drupal/issues/3456176
+messages:
+  css:
+    component:
+      components/cd-alert/cd-alert.css: {}
+  js:
+    js/messages.js: {}
+
 # Roboto Condensed and Slab.
 # @see https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/fonts/advanced-users
 fonts-advanced:

js/messages.js

@@ -0,0 +1,67 @@
+/**
+ * @file
+ * Message template overrides.
+ */
+
+((Drupal) => {
+  'use strict';
+
+  /**
+   * Overrides message theme function.
+   *
+   * @param {object} message
+   *   The message object.
+   * @param {string} message.text
+   *   The message text.
+   * @param {object} options
+   *   The message context.
+   * @param {string} options.type
+   *   The message type.
+   * @param {string} options.id
+   *   ID of the message, for reference.
+   *
+   * @return {HTMLElement}
+   *   A DOM Node.
+   */
+
+  Drupal.theme.message = ({text}, {type, id}) => {
+    const messagesTypes = Drupal.Message.getMessageTypeLabels();
+    const messageWrapper = document.createElement('div');
+
+    messageWrapper.setAttribute('class', `messages messages--${type} cd-alert cd-alert--${type}`);
+    messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
+    var iconType = 'about';
+    var role = 'status';
+    switch (type) {
+      case 'error':
+        iconType = 'error';
+        role = 'alert';
+        break;
+      case 'warning':
+        iconType = 'alert';
+        break;
+      case 'status':
+        iconType = 'selected';
+    }
+    messageWrapper.setAttribute('data-drupal-message-id', id);
+    messageWrapper.setAttribute('data-drupal-message-type', type);
+
+    messageWrapper.innerHTML = `
+    <div role="${role}" aria-label="${type}">
+      <svg class="cd-icon cd-icon--${iconType}" aria-hidden="true" focusable="false" width="24" height="24">
+        <use xlink:href="#cd-icon--${iconType}"></use>
+      </svg>
+      <div class="cd-alert__container cd-max-width">
+        <div class="cd-alert__title">
+          <h2 class="visually-hidden">${messagesTypes[type]}</h2>
+        </div>
+        <div class="cd-alert__message [ cd-flow ]">
+          ${text}
+        </div>
+      </div>
+    </div>
+  `;
+
+    return messageWrapper;
+  };
+})(Drupal);