Merge branch Stg into Main (#606)

* Merge branch Dev into Stg (#605)

* feat(SNW-177): Add text alignment to Grid component (#603)

* feat(SNW-179): Add paragraph title alignment to TextColumnDouble component (#604)

src/components/dynamic/basic/CtaButton.vue

@@ -42,7 +42,8 @@ export default {
     },
     url: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     margin_top: {
       type: String,

src/components/dynamic/basic/Grid.vue

@@ -14,7 +14,11 @@
       <div v-if="data.image" class="grid-card__image">
         <ResponsiveImage :src="data.image" />
       </div>
-      <div v-if="data.title || data.description" class="grid-card__info">
+      <div
+        v-if="data.title || data.description"
+        class="grid-card__info"
+        :style="textAlignment(data)"
+      >
         <span v-if="data.title" class="grid-card__info__title">
           {{ data.title }}
         </span>
@@ -104,6 +108,20 @@ export default {
       };
     },
   },
+  methods: {
+    textAlignment({ title_alignment = "left", body_alignment = "left" }) {
+      const alignment = {
+        left: "left",
+        center: "center",
+        right: "right",
+      };
+
+      return {
+        "--title-alignment": alignment[title_alignment] || alignment.left,
+        "--body-alignment": alignment[body_alignment] || alignment.left,
+      };
+    },
+  },
 };
 </script>
 
@@ -156,6 +174,7 @@ export default {
         line-height: 30px;
         color: var(--title-color);
         word-break: break-word;
+        text-align: var(--title-alignment);
 
         @include respond_to(">=l") {
           font-size: 22px;
@@ -170,6 +189,7 @@ export default {
         line-height: 150%;
         color: var(--text-color);
         word-break: break-word;
+        text-align: var(--body-alignment);
       }
     }
   }

src/components/dynamic/carousel/CustomCarousel.vue

@@ -32,6 +32,7 @@
         class="card"
         :url="card.url"
         :externalLink="card.is_external_link"
+        :style="textAlignment(card)"
       >
         <ResponsiveImage
           v-if="card.image"
@@ -111,6 +112,18 @@ export default {
         carousel.scrollLeft -= 300;
       }
     },
+    textAlignment({ title_alignment = "left", body_alignment = "left" }) {
+      const alignment = {
+        left: "left",
+        center: "center",
+        right: "right",
+      };
+
+      return {
+        "--title-alignment": alignment[title_alignment] || alignment.left,
+        "--body-alignment": alignment[body_alignment] || alignment.left,
+      };
+    },
   },
 };
 </script>
@@ -222,11 +235,13 @@ export default {
         margin: 0;
         word-break: break-word;
         color: var(--color-analog-primary-white);
+        text-align: var(--title-alignment);
       }
 
       &__text {
         margin: 0;
         word-break: break-word;
+        text-align: var(--body-alignment);
       }
     }
   }

src/components/dynamic/columns/TextColumnDouble.vue

@@ -17,13 +17,10 @@
         :alignment="main_title_alignment"
         :color="component_colors ? component_colors.title_color : ''"
       />
-      <div class="text-column-double__col">
-        <div class="text-column-double__col-1">
+      <div class="text-column-double__content" :style="titlesAlignment">
+        <div class="col-1">
           <DynamicImage v-if="first_image" :image="first_image" />
-          <h4
-            v-if="first_paragraph_title"
-            class="text-column-double__col__title"
-          >
+          <h4 v-if="first_paragraph_title" class="title">
             {{ first_paragraph_title }}
           </h4>
           <DynamicBody
@@ -42,12 +39,9 @@
             :links="first_footer_links"
           />
         </div>
-        <div class="text-column-double__col-2">
+        <div class="col-2">
           <DynamicImage v-if="second_image" :image="second_image" />
-          <h4
-            v-if="second_paragraph_title"
-            class="text-column-double__col__title"
-          >
+          <h4 v-if="second_paragraph_title" class="title">
             {{ second_paragraph_title }}
           </h4>
           <DynamicBody
@@ -230,6 +224,16 @@ export default {
       required: false,
       default: () => [],
     },
+    first_title_alignment: {
+      type: String,
+      required: false,
+      default: "left",
+    },
+    second_title_alignment: {
+      type: String,
+      required: false,
+      default: "left",
+    },
   },
   computed: {
     paddingTop() {
@@ -240,6 +244,20 @@ export default {
       const size = sizes[this.padding_bottom];
       return size ? `${size}-bottom` : "small-bottom";
     },
+    titlesAlignment() {
+      const first = this.first_title_alignment;
+      const second = this.second_title_alignment;
+      const alignment = {
+        left: "left",
+        center: "center",
+        right: "right",
+      };
+
+      return {
+        "--first-title-alignment": alignment[first] || alignment.left,
+        "--second-title-alignment": alignment[second] || alignment.left,
+      };
+    },
   },
   methods: {
     titleId(title) {
@@ -259,7 +277,7 @@ export default {
     padding-inline: 0;
   }
 
-  &__col {
+  &__content {
     width: 100%;
     display: grid;
     gap: 26px;
@@ -268,6 +286,15 @@ export default {
     @include respond-to(">=m") {
       grid-template-columns: repeat(2, 1fr);
     }
+    .col {
+      &-1 .title {
+        text-align: var(--first-title-alignment);
+      }
+
+      &-2 .title {
+        text-align: var(--second-title-alignment);
+      }
+    }
   }
 }
 

src/components/dynamic/heros/FullImageButtonsContent.vue

@@ -5,6 +5,7 @@
         <section class="hero-wrapper" :class="containerStyles">
           <ResponsiveImage
             v-if="image"
+            class="hero-bg"
             :imageClass="imagePosition"
             :src="image"
             high-quality
@@ -143,7 +144,7 @@ export default {
     padding: 0;
   }
 
-  .responsive-image {
+  .hero-bg.responsive-image {
     position: absolute;
     z-index: 0;
     height: 100%;