Merge pull request #433 from UN-OCHA/HID-2413

[HID-2413] CD v9.4.0
UN-OCHA · Apr 24, 2024 · 4fdb602 · 4fdb602
2 parents 1698172 + b8cfd92
commit 4fdb602
Show file tree

Hide file tree

Showing 57 changed files with 1,382 additions and 1,122 deletions.
diff --git a/assets/css/brand.css b/assets/css/brand.css
@@ -134,5 +134,16 @@
   --brand-primary--dark: var(--cd-blue--dark);
   --brand-highlight: var(--cd-highlight-red);
   --brand-grey: #e6eff2;
-  --brand-logo-width: 256px;
+
+  /**
+   * Site logos
+   *
+   * Specify the logo paths/dimensions here. The URL is relative to
+   * common_design/libraries/cd/cd-header/cd-logo.css
+   */
+  --brand-logo-mobile-width: 256px;
+  --brand-logo-desktop-width: 256px;
+
+  /* DEPRECATED: this variable will be removed in the future */
+  --brand-logo-width: var(--brand-logo-desktop-width);
 }
diff --git a/assets/css/cd-alert/README.md b/assets/css/cd-alert/README.md
@@ -1,31 +1,30 @@
 # Alert
 
 ## Purpose and Usage
+
 Provides feedback messages for user actions and site-wide notifications.
 
-- title
+- title (visually-hidden)
 - message
 - SVG icon
 
-All elements are optional.
+All elements are optional. Title and message are width-restricted using `cd-max-width`.
 
-Title and message are width-restricted using `cd-max-width` on said elements.
+Message can contain `<p>` or `<ul>` elements. If there is one message it outputs the markup, but will automatically switch to a `<ul>` if there is an array of messages.
 
-Message can contain `<p>` and `<ul>` elements.
+- If the alert is an error message, the wrapping div should have `role="alert"` which implicitly sets `aria-live="assertive"`.
+- If the alert is a warning or status message, the wrapping div should have `role="status"` which implicitly sets `aria-live="polite"`.
+- In both cases do NOT set the `aria-live` yourself. Let the `role` do the work.
 
-If the alert is a warning or an error message, the wrapping div should have role='alert' which is equivalent to 
-aria-live='assertive'.
-If the alert is a status message, the wrapping div should have aria-live='polite'.
 
 ## Caveats
-Uses SVG icon as an element in the markup, not a background image.
+
+Uses SVG icon as an element in the markup, not a background image. This allows dynamic coloring by way of the modifier classes listed in the next section:
 
 ### Variants
 
 ```
-.cd-alert // default
 .cd-alert--error
 .cd-alert--warning
 .cd-alert--status
-
 ```
diff --git a/assets/css/cd-alert/cd-alert.css b/assets/css/cd-alert/cd-alert.css
@@ -4,91 +4,62 @@
 
 .cd-alert {
   --cd-flow-space: 0.5rem;
+  --cd-alert-color: var(--cd-blue--bright);
+  --cd-alert-color-bg: var(--cd-white);
 
   margin: 1rem 0 2rem;
   padding: 1rem;
   color: var(--cd-grey--dark);
-  border: 1px solid var(--cd-blue--bright);
+  border: 1px solid var(--cd-alert-color);
   border-radius: 0.25rem;
-  background-color: var(--cd-white);
-  box-shadow: -8px 0 0 var(--cd-blue--bright);
+  background-color: var(--cd-alert-color-bg);
+  box-shadow: -8px 0 0 var(--cd-alert-color);
 }
 
-.cd-alert > div {
+.cd-alert > div[role] {
   display: flex;
   align-items: flex-start;
-}
-
-.cd-alert__title {
-  font-weight: 700;
+  gap: 1rem;
 }
 
 .cd-alert svg {
   flex: 0 0 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
-  fill: var(--cd-blue--bright);
-}
-
-[dir="ltr"] .cd-alert svg {
-  margin-right: 1rem;
+  fill: var(--cd-alert-color);
 }
 
-[dir="rtl"] .cd-alert svg {
-  margin-left: 1rem;
+.cd-alert__message p {
+  margin: 0;
 }
 
-.cd-alert a,
-.cd-alert a:hover,
-.cd-alert a:focus {
+.cd-alert__message a,
+.cd-alert__message a:hover,
+.cd-alert__message a:focus {
   color: inherit;
 }
 
-.cd-alert--error {
-  border: 1px solid var(--cd-red);
-  background: var(--cd-red--light);
-  box-shadow: -8px 0 0 var(--cd-red);
-}
+/**
+ * Message types
+ *
+ * The "info" type is the default style defined above in the `.cd-alert` rule.
+ * The remaining message types are defined here according to a modifier class.
+ */
 
-.cd-alert--error svg {
-  fill: var(--cd-red);
+/* Error */
+.cd-alert--error {
+  --cd-alert-color: var(--cd-red);
+  --cd-alert-color-bg: var(--cd-red--light);
 }
 
+/* Warning */
 .cd-alert--warning {
-  border: 1px solid var(--cd-orange);
-  background: var(--cd-orange--light);
-  box-shadow: -8px 0 0 var(--cd-orange);
-}
-
-.cd-alert--warning svg {
-  fill: var(--cd-orange);
+  --cd-alert-color: var(--cd-orange);
+  --cd-alert-color-bg: var(--cd-orange--light);
 }
 
+/* Status */
 .cd-alert--status {
-  border: 1px solid var(--cd-green);
-  background: var(--cd-green--light);
-  box-shadow: -8px 0 0 var(--cd-green);
-}
-
-.cd-alert--status svg {
-  fill: var(--cd-green);
-}
-
-.cd-alert__message ul {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-.cd-alert__message p + ul,
-.cd-alert__message p {
-  margin: 0.5rem 0 0;
-}
-
-.cd-alert__message > ul {
-  margin-top: 0;
-}
-
-.cd-alert__message p:first-child {
-  margin-top: 0;
+  --cd-alert-color: var(--cd-green);
+  --cd-alert-color-bg: var(--cd-green--light);
 }
diff --git a/assets/css/cd-alert/cd-alert.html.twig b/assets/css/cd-alert/cd-alert.html.twig
@@ -2,92 +2,42 @@
 {{ attach_library('common_design/cd-typography') }}
 {{ attach_library('common_design/cd-alert') }}
 
+{% set test_data = {
+  status_headings: {
+    error: 'Error message'|t,
+    warning: 'Warning message'|t,
+    status: 'Status message'|t,
+  },
+  message_list: {
+    'error': [
+      {'#markup': 'I am an error with a very important message and a link with <a href="###">more information</a>.'},
+      {'#markup': 'There may be many errors. When there is more than one they appear as a list.'},
+      {'#markup': 'If there\'s only one, it will not be a list.'},
+    ],
+    'warning': [
+      {'#markup': 'I am an alert that conveys a warning. <a href="###">Example link</a>'},
+    ],
+    'status': [
+      {'#markup': 'I am an alert that confirms a status, like when a page is saved successfully.'},
+    ],
+  },
+  attributes: create_attribute(),
+}
+%}
+
+{% include '@common_design/misc/status-messages.html.twig' with test_data %}
+
 <div class="cd-alert">
-  <div aria-live="polite">
+  <div role="status" aria-label="{{ 'Info message'|t }}">
     <svg class="cd-icon cd-icon--about" aria-hidden="true" focusable="false" width="16" height="16">
       <use xlink:href="#cd-icon--about"></use>
     </svg>
-    <div class="cd-alert__container cd-max-width [ cd-flow ]">
-      <div class="cd-alert__title">
-        This is the default informative alert.
-      </div>
-      <div class="cd-alert__message">
-        <p>I am an alert.</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="cd-alert">
-  <div aria-live="polite">
-    <div class="cd-alert__container cd-max-width [ cd-flow ]">
-      <div class="cd-alert__message">
-        <p>
-          I am a default alert with a less important message and a link to somewhere with <a href="#">more information</a>.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo mauris ac convallis imperdiet.
-          Maecenas sollicitudin est vel ultrices mattis.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="cd-alert cd-alert--error">
-  <div role="alert">
-    <svg class="cd-icon cd-icon--alert" aria-hidden="true" focusable="false" width="16" height="16">
-      <use xlink:href="#cd-icon--alert"></use>
-    </svg>
-    <div class="cd-alert__container cd-max-width [ cd-flow ]">
-      <div class="cd-alert__title">
-        Error. Pay attention to me.
-      </div>
-      <div class="cd-alert__message">
-        <p>
-          I am an alert that indicates an error, with a very important message and a link to somewhere with <a href="#">more information</a>.
-        </p>
-        <ul>
-          <li>There may be many errors.</li>
-          <li>We can list them here.</li>
-          <li>In a nice list.</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="cd-alert cd-alert--warning">
-  <div role="alert">
-    <svg class="cd-icon cd-icon--alert" aria-hidden="true" focusable="false" width="16" height="16">
-      <use xlink:href="#cd-icon--alert"></use>
-    </svg>
-    <div class="cd-alert__container cd-max-width [ cd-flow ]">
-      <div class="cd-alert__title">
-        Warning. Pay attention to me.
-      </div>
-      <div class="cd-alert__message">
-        <p>
-          I am an alert that conveys a warning.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="cd-alert cd-alert--status">
-  <div aria-live="polite">
-    <svg class="cd-icon cd-icon--selected" aria-hidden="true" focusable="false" width="16" height="16">
-      <use xlink:href="#cd-icon--selected"></use>
-    </svg>
-    <div class="cd-alert__container cd-max-width [ cd-flow ]">
+    <div class="cd-alert__container cd-max-width">
       <div class="cd-alert__title">
-        Status message.
+        <h2 class="visually-hidden">{{ 'Info message'|t }}</h2>
       </div>
-      <div class="cd-alert__message">
-        <p>
-          I am an alert that confirms a status, like when a page is saved successfully.
-        </p>
+      <div class="cd-alert__message [ cd-flow ]">
+        <p>I am the default alert. Drupal cannot output this message type, but if you're implementing the CD on a different platform, this is how an unmodified alert appears.</p>
       </div>
     </div>
   </div>