Notice component design (#2089)

* notice component layout * notice component styling * format * fixed icon container size and removed unused text variable
cds-snc · Feb 27, 2025 · 6b37474 · 6b37474
1 parent dcf232c
commit 6b37474
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 38 deletions.
diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
diff --git a/app/assets/stylesheets/tailwind/components/notice.css b/app/assets/stylesheets/tailwind/components/notice.css
@@ -0,0 +1,12 @@
+.notice-info .notice-icon {
+  @apply text-blue-slightlight border-blue-border;
+}
+.notice-success .notice-icon {
+  @apply text-green border-green-border;
+}
+.notice-error .notice-icon {
+  @apply text-red-mellow border-red-300;
+}
+.notice-warning .notice-icon {
+  @apply text-yellow-500 border-yellow-300;
+}
diff --git a/app/assets/stylesheets/tailwind/style.css b/app/assets/stylesheets/tailwind/style.css
@@ -33,6 +33,7 @@
 @import "./components/previous-next-navigation.css";
 @import "./components/list-entry.css";
 @import "./components/message.css";
+@import "./components/notice.css";
 @import "./components/fullscreen-table.css";
 @import "./components/tick-cross.css";
 @import "./components/stick-at-top-when-scrolling.css";

diff --git a/app/templates/components/notice.html b/app/templates/components/notice.html
@@ -2,59 +2,40 @@
   @param type - One of: 'info', 'success', 'error', 'warning'
   @param message - Text to display in notice (can include HTML)
 #}
-{% macro notice(type, title, headingLevel) %}
+{% macro notice(type, title, headingLevel=2) %}
   {# set icon/colors based on type #}
   {% 
     set display = {
       'info': {
         'icon': 'fa-circle-info',
-        'color': 'text-blue-500',
-        'border': 'border-blue-500',
-        'bg': 'bg-blue-100'
+        'label': _('Information'),
       },
       'success': {
         'icon': 'fa-circle-check',
-        'color': 'text-green',
-        'border': 'border-green',
-        'bg': 'bg-green-light'
+        'label': _('Success'),
       },
       'error': {
         'icon': 'fa-triangle-exclamation',
-        'color': 'text-red',
-        'border': 'border-red',
-        'bg': 'bg-red-light'
+        'label': _('Error'),
       },
       'warning': {
         'icon': 'fa-circle-exclamation',
-        'color': 'text-orange',
-        'border': 'border-orange',
-        'bg': 'bg-orange-light'
+        'label': _('Warning'),
       }
     }
   %}
-  {# Text for screen readers instead of icon #}
-  {%
-    set screen_reader_text = {
-      'info': _('Information'),
-      'success': _('Success'),
-      'error': _('Error'),
-      'warning': _('Warning'),
-    }
-  %}
-  <div class="notice notice-{{ type }} overflow-hidden rounded-lg px-12 pt-12 border-4 {{display[type]['border']}} {{display[type]['bg']}}" role="alert" data-testid="notice">
-    <div class="flex gap-4 items-baseline">
-        <div class="notice-icon {{ display[type]['color'] }}" data-testid="notice-icon">
-          <i aria-hidden="true" class="mb-2 fa-solid fa-lg {{ display[type]['icon'] }}"></i>
-          <span class="sr-only" data-testid="notice-icon-text">{{ screen_reader_text[type] }}: </span>
-        </div>
-        <div class="notice-content ml-6 pb-12">
-            {% if headingLevel is defined and headingLevel is number and headingLevel >= 1 and headingLevel <= 3 %}
-                <h{{ headingLevel }} class="notice-heading heading-small md:heading-large mt-4" >{{ title }}</h{{ headingLevel }} data-testid="notice-heading">
-            {% else %}
-                <div data-testid="notice-heading">{{ title }}</div>
-            {% endif %}
-            <div data-testid="notice-message">{{ caller() }}</div>
-        </div>
+  <div class="notice notice-{{ type }} flex gap-gutterHalf items-baseline" role="alert" data-testid="notice">
+    <div class="notice-icon border-l-[6px] translate-x-gutterHalf self-stretch py-gutterHalf min-w-10" data-testid="notice-icon">
+      <i aria-hidden="true" class="fa-solid fa-lg -translate-x-1/2 -mx-[3px] bg-white py-2 {{ display[type]['icon'] }}"></i>
+      <span class="sr-only" data-testid="notice-icon-text">{{ display[type]['label'] }}: </span>
+    </div>
+    <div class="notice-content text-black flex flex-col gap-gutterHalf pt-gutterHalf">
+        {% if headingLevel is number and headingLevel >= 1 and headingLevel <= 3 %}
+            <h{{ headingLevel }} class="text-title" >{{ title }}</h{{ headingLevel }} data-testid="notice-heading">
+        {% else %}
+            <div class="text-large" data-testid="notice-heading">{{ title }}</div>
+        {% endif %}
+        <div class="*:last:mb-0" data-testid="notice-message">{{ caller() }}</div>
     </div>
   </div>
 {% endmacro %}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -157,6 +157,8 @@ module.exports = {
       yellow: {
         DEFAULT: "#ffbf47",
         light: "#FFE7BB",
+        300: "#c18b00",
+        500: "#986200",
       },
       green: {
         DEFAULT: "#00672F",