Merge pull request #983 from Safelite/feature/humphries/alignment-fix

Fix justification issue in subheader component

src/iss-components/site-sub-header/site-sub-header.vue

@@ -3,7 +3,7 @@
         <div
             class="subheader-primary d-flex overflow-hidden">
             <h5
-                :class="[justifySubheaderSubText, headerColor]"
+                :class="[justifySubheader, headerColor]"
                 class="fw-normal mb-0 subheader-primary">
                 <span>
                     {{ content }}
@@ -15,13 +15,13 @@
             </h5>
         </div>
         <div
-            v-if="hasSubText"
+            v-if="hasSecondaryText"
-            :class="[justifySubheader, subHeaderClasses, subHeaderMarginClasses]"
+            :class="[justifySubheaderSecondaryText, subHeaderClasses, subHeaderMarginClasses]"
-            class="subheader-secondary d-flex align-items-center overflow-hidden">
+            class="subheader-secondary d-flex align-items-start overflow-hidden">
             <p
                 class="dark-header"
-                :class="[alternateFormatting, subTextClasses]">
+                :class="[alternateFormatting, secondaryTextClasses]">
-                <span v-html="subText"> </span>
+                <span v-html="secondaryText"> </span>
             </p>
         </div>
     </div>
@@ -49,7 +49,7 @@ export default {
         hasBackButton: Boolean,
         issContainingPage: String,
         justification: String,
-        justificationSubText: String,
+        justificationSecondaryText: String,
         stripRteStyle: Boolean,
         subContentProperty: String,
         subHeaderClasses: String,
@@ -57,7 +57,7 @@ export default {
             type: String,
             default: 'mt-1'
         },
-        subTextClasses: String
+        secondaryTextClasses: String
     },
     emits: ['click-event'],
     computed: {
@@ -67,33 +67,33 @@ export default {
                 this.contentProperty ?? 'SubHeaderText'
             );
         },
-        subText() {
+        secondaryText() {
-            let subTextFromCms = this.getCmsContent(
+            let secondaryTextFromCms = this.getCmsContent(
                 this.cmsWidgetName,
                 this.subContentProperty ?? 'SecondaryText'
             );
 
             if (this.stripRteStyle) {
-                subTextFromCms = stripRteStyle(subTextFromCms);
+                secondaryTextFromCms = stripRteStyle(secondaryTextFromCms);
             }
 
-            let subText = '';
+            let secondaryText = '';
-            if (this.doesCopyContainRouterLink(subTextFromCms)) {
+            if (this.doesCopyContainRouterLink(secondaryTextFromCms)) {
-                splitCopyOnCMSPlaceHolder(subTextFromCms).forEach((sc) => {
+                splitCopyOnCMSPlaceHolder(secondaryTextFromCms).forEach((sc) => {
                     if (this.doesCopyContainRouterLink(sc)) {
-                        subText += getRouterLinkHtmlStringFromCopy(sc);
+                        secondaryText += getRouterLinkHtmlStringFromCopy(sc);
                     } else {
-                        subText += sc;
+                        secondaryText += sc;
                     }
                 });
             } else {
-                subText = subTextFromCms;
+                secondaryText = secondaryTextFromCms;
             }
 
-            return subText ?? '';
+            return secondaryText ?? '';
         },
-        hasSubText() {
+        hasSecondaryText() {
-            return this.subText.length > 0;
+            return this.secondaryText.length > 0;
         },
         backButtonAccessibleText() {
             return this.getCmsContent(
@@ -102,15 +102,15 @@ export default {
             );
         },
         headerColor() {
-            return this.subText ? 'dark-header' : 'light-header';
+            return this.secondaryText ? 'dark-header' : 'light-header';
         },
         justifySubheader() {
-            return this.justification?.toLowerCase() === 'left'
+            return this.justification?.toLowerCase() === 'center'
-                ? 'justify-content-left'
+                ? 'justify-content-center'
-                : 'justify-content-center';
+                : 'justify-content-left';
         },
-        justifySubheaderSubText() {
+        justifySubheaderSecondaryText() {
-            return this.justificationSubText?.toLowerCase() === 'center'
+            return this.justificationSecondaryText?.toLowerCase() === 'center'
                 ? 'justify-content-center'
                 : 'justify-content-left';
         },

src/layouts/payment-method/payment-method.vue

@@ -15,7 +15,7 @@
                     <siteSubHeader
                         class="mb-5 mt-4 px-3"
                         cmsWidgetName="SiteSubHeaderWidget"
-                        subTextClasses="text-center"
+                        secondaryTextClasses="text-center"
                         subHeaderClasses="mt-4" />
                     <div class="main-content-container">
                         <hr class="my-0" />

src/layouts/schedule-page/schedule-page.vue

@@ -14,7 +14,7 @@
                 <div class="schedule-page-container iss-heritage-content-container-width">
                     <siteSubHeader
                         cmsWidgetName="ScheduleSubHeaderWidget"
-                        subTextClasses="text-center small sub-text"
+                        secondaryTextClasses="text-center small sub-text"
                         class="mt-4" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock