Merge pull request #149 from froboy/DS-1656-alert-fix

feat: DS-1656 Add additional alert styles
open-y-subprojects · Dec 9, 2024 · 89b3584 · 89b3584
2 parents 1c0e642 + 51e631d
commit 89b3584
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 13 deletions.
diff --git a/assets/css/openy_node_alert.css b/assets/css/openy_node_alert.css
diff --git a/assets/css/openy_node_alert.css.map b/assets/css/openy_node_alert.css.map
diff --git a/assets/scss/openy_node_alert.scss b/assets/scss/openy_node_alert.scss
@@ -55,13 +55,22 @@
           background: var(--ylb-color-white, white);
         }
 
+        &.ws-alert-critical,
+        &.ws-alert-warning,
+        &.ws-alert-info,
+        &.ws-alert-dark {
+          .site-alert__dismiss {
+            color: currentColor;
+          }
+        }
+
         &.ws-alert-critical {
-          background-color: var(--ylb-color-red, red);
+          background-color: var(--ylb-color-red, #ed1c24);
           color: var(--ylb-color-white, white);
         }
 
         &.ws-alert-warning {
-          background-color: var(--ylb-color-orange-light, orange);
+          background-color: var(--ylb-color-orange-light, #fcaf17);
           color: var(--ylb-color-dark-grey-2, #231f20);
 
           .alert-icon {
@@ -70,7 +79,7 @@
         }
 
         &.ws-alert-info {
-          background-color: var(--ylb-color-blue-light, blue);
+          background-color: var(--ylb-color-blue-light, #00aeef);
           color: var(--ylb-color-dark-grey-2, #231f20);
 
           .alert-icon {
@@ -91,6 +100,48 @@
           }
         }
 
+        &.ws-alert-blue,
+        &.ws-alert-green,
+        &.ws-alert-purple,
+        &.ws-alert-red {
+          background-color: var(--ylb-color-light-grey-1, #f2f2f2);
+          border-top: 1px solid currentColor;
+          border-bottom: 1px solid currentColor;
+
+          .site-alert__cta {
+            .field-alert-link a {
+              // These have to be important to override styles in Carnation
+              // openy_carnation/src/scss/modules/site-alerts.scss.
+              background-color: white;
+              color: currentColor !important;
+              border-color: currentColor !important;
+
+              &:hover {
+                border-color: transparent !important;
+              }
+            }
+          }
+          .site-alert__dismiss {
+            color: currentColor;
+          }
+        }
+
+        &.ws-alert-blue {
+          color: var(--ylb-color-blue-dark, #0060af);
+        }
+
+        &.ws-alert-green {
+          color: var(--ylb-color-green-dark, #006b6b);
+        }
+
+        &.ws-alert-purple {
+          color: var(--ylb-color-purple-dark, #5c2e91);
+        }
+
+        &.ws-alert-red {
+          color: var(--ylb-color-red-dark, #a92b31);
+        }
+
         .site-alert__wrapper {
           .site-alert__icon {
             width: fit-content;

diff --git a/config/install/field.storage.node.field_alert_style.yml b/config/install/field.storage.node.field_alert_style.yml
@@ -15,16 +15,28 @@ settings:
       label: 'Classic'
     -
       value: ws-alert-critical
-      label: 'Urgent - Red'
+      label: 'Urgent - Danger (Red)'
     -
       value: ws-alert-warning
-      label: 'Urgent - Yellow'
+      label: 'Urgent - Warning (Yellow)'
     -
       value: ws-alert-info
-      label: 'Urgent - Blue'
+      label: 'Urgent - Info (Blue)'
     -
       value: ws-alert-dark
-      label: 'Urgent - Black'
+      label: 'Urgent - Dark (Black)'
+    -
+      value: ws-alert-blue
+      label: 'Info - Blue'
+    -
+      value: ws-alert-green
+      label: 'Info - Green'
+    -
+      value: ws-alert-purple
+      label: 'Info - Purple'
+    -
+      value: ws-alert-red
+      label: 'Info - Red'
   allowed_values_function: ''
 module: options
 locked: false

diff --git a/openy_node_alert.install b/openy_node_alert.install
@@ -410,6 +410,20 @@ function openy_node_alert_update_91001(&$sandbox): void {
   _openy_node_alert_update_existing_alerts($sandbox);
 }
 
+/**
+ * Add additional Alert Style options.
+ */
+function openy_node_alert_update_91002(): void
+{
+  $config_dir = \Drupal::service('extension.list.module')->getPath('openy_node_alert') . '/config/install/';
+  $configs = [
+    'field.storage.node.field_alert_style',
+  ];
+  $config_importer = \Drupal::service('openy_upgrade_tool.importer');
+  $config_importer->setDirectory($config_dir);
+  $config_importer->importConfigs($configs);
+}
+
 /**
  * Mark the bg-color, text-color, and icon-color fields not required.
  */