From a7dd2c983c66e8949723f41296cc62aea3675feb Mon Sep 17 00:00:00 2001
From: Alex Humphries <Alex.Humphries@safelite.com>
Date: Fri, 30 Jan 2026 17:14:22 -0500
Subject: [PATCH] Fix alert icon alignment so that it aligns with first line of
 multiline alert header

---
 src/ux-components/alert/alert.vue | 59 ++++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 0537599f..b6c0e697 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -8,9 +8,21 @@
             cssClassNameForCmsWidget,
         ]">
         <div class="alert-header">
-            <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
-                <path fill-rule="nonzero" d="M10 .5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S4.477.5 10 .5zm.043 13.6a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm.77-9.2h-1.54l-.088.009a.502.502 0 0 0-.299.193.66.66 0 0 0-.125.47l.747 6.806.017.096c.065.249.263.425.495.426l.084-.008c.22-.042.396-.246.427-.51l.793-6.805.004-.102a.651.651 0 0 0-.127-.37.489.489 0 0 0-.388-.205z"/>
-            </svg>
+            <div class="alert-icon-container">
+                <svg
+                    class="alert-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="21"
+                    viewBox="0 0 20 21">
+                    <path
+                        fill-rule="nonzero"
+                        d="M10 .5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S4.477.5 10 .5zm.043 13.6a1
+                        1 0 1 0 0 2 1 1 0 0 0 0-2zm.77-9.2h-1.54l-.088.009a.502.502 0 0 0-.299.193.66.66 0 0
+                        0-.125.47l.747 6.806.017.096c.065.249.263.425.495.426l.084-.008c.22-.042.396-.246.427-.51l.793-6.805.004-.102a.651.651
+                        0 0 0-.127-.37.489.489 0 0 0-.388-.205z" />
+                </svg>
+            </div>
             <span class="m-0 alert-header-text">
                 {{ alertHeadline }}
             </span>
@@ -19,10 +31,18 @@
                 class="btn-collapse"
                 type="button"
                 @click="toggleCollapse">
-                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" viewBox="0 0 15 9"
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="15"
+                    height="9"
+                    viewBox="0 0 15 9"
                     class="btn-collapse-icon"
                     :class="{ 'rotated': !collapsed }">
-                    <path fill-rule="nonzero" d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0 1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806 0 0 0 7.5 0"/>
+                    <path
+                        fill-rule="nonzero"
+                        d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
+                        1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
+                        0 0 0 7.5 0" />
                 </svg>
             </button>
             <button
@@ -36,13 +56,16 @@
                     viewBox="0 0 23.7 23.7"
                     xml:space="preserve">
                     <path
-                        d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
+                        d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
+                        1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
+                        .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
                 </svg>
             </button>
         </div>
-        <div class="alert-body"
+        <div
             v-show="alertCopy"
-            :id="collapseId">
+            :id="collapseId"
+            class="alert-body">
             <template
                 v-for="paragraph in splitAlertCopyForParagraphTag"
                 :key="paragraph">
@@ -69,9 +92,7 @@
                                 :text="getRouterLinkDisplayTextFromCopy(copy)"
                                 href="#!"
                                 :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
-                                @click-event="
-                                    $emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))
-                                " />
+                                @clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
                         </span>
                         <span
                             v-else
@@ -132,10 +153,11 @@ export default {
         },
         startCollapsed: Boolean
     },
+    emits: ['textLinkClicked'],
     data() {
         return {
             collapsed: this.startCollapsed || false,
-            collapseElement: null,
+            collapseElement: null
         };
     },
     computed: {
@@ -159,7 +181,7 @@ export default {
             return this.isCollapsible
                 ? `${this.cmsWidgetName}-collapse`
                 : null;
-        },
+        }
     },
     mounted() {
         this.ensureAlertIsInViewPort();
@@ -198,7 +220,7 @@ export default {
             } else {
                 this.collapseElement.show();
             }
-        },
+        }
     }
 };
 </script>
@@ -210,13 +232,18 @@ export default {
     margin-bottom: 2rem;
     .alert-header {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: center;
         flex-direction: row;
         padding: .75rem 1rem .75rem 1rem;
         font-weight: 600;
         color: $black;
     }
+    .alert-icon-container {
+        display: flex;
+        align-items: center;
+        height: 1.625rem;
+    }
     .alert-icon {
         min-width: 1rem;
         max-height: 1rem;
@@ -259,7 +286,7 @@ export default {
         padding: .5rem 1rem .75rem 1rem;
         border-top: 1px solid;
         color: $darker-gray;
-        line-height: 26px;
+        line-height: 1.625rem;
         font-weight: 400;
     }
     &.alert-info {