@designcrowd/library.brand-page 5.18.9-ast-padding-2 → 5.18.9

package/src/brand-page/components/testimonial-section/TestimonialSection.mixin.ts

@@ -0,0 +1,132 @@
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import ComponentCommonMixin from '../mixins/component-common.mixin';
+import type { TestimonialSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { getRenderText } from '@brand-page/utils';
+import type { DebounceHandle } from 'lodash.debounce';
+import debounce from 'lodash.debounce';
+import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
+
+const DEBOUNCE_WAIT_MS = 100;
+
+export default defineComponent({
+  mixins: [ComponentCommonMixin],
+  props: {
+    viewModel: {
+      type: Object as PropType<TestimonialSectionViewModel>,
+      required: true,
+    },
+    isPreview: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    context: {
+      type: Object as PropType<BrandPageContext>,
+      required: true,
+    },
+    contentIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      debouncedForceCarouselUpdate: undefined as DebounceHandle | undefined,
+      carouselRef: 'testimonial-carousel',
+    };
+  },
+  created() {
+    this.debouncedForceCarouselUpdate = debounce(() => {
+      this.forceCarouselUpdate();
+    }, DEBOUNCE_WAIT_MS);
+  },
+  computed: {
+    textAlignClass() {
+      return {
+        'c_testimonial-big-image-text-item':
+          this.viewModel.displayStyle === 'big-image',
+        'tw-mb-2': this.viewModel.displayStyle !== 'big-image',
+      };
+    },
+    navigationUniqueIndexer() {
+      return `testimonial-${this.viewModel.id}`;
+    },
+    swiperOptions() {
+      return {
+        autoHeight: true,
+        navigation: {
+          prevEl: `.carousel__button-prev--${this.navigationUniqueIndexer}`,
+          nextEl: `.carousel__button-next--${this.navigationUniqueIndexer}`,
+        },
+        pagination: {
+          el: `.pagination--${this.navigationUniqueIndexer}`,
+          clickable: true,
+        },
+      };
+    },
+  },
+  methods: {
+    renderText(val: string): string {
+      if (val) {
+        return getRenderText(val);
+      }
+
+      return '';
+    },
+    forceCarouselUpdate() {
+      const shouldUpdateCarousel = Boolean(
+        this.isPreview &&
+          (this.viewModel.items.length > 1 ||
+            this.viewModel.displayStyle === 'big-image') &&
+          this.$refs[this.carouselRef],
+      );
+
+      if (shouldUpdateCarousel) {
+        this.$refs[this.carouselRef].update();
+
+        return true;
+      }
+
+      return false;
+    },
+    forceCarouselUpdateSlideWidth() {
+      if (this.forceCarouselUpdate()) {
+        try {
+          const width =
+            this.$refs[this.carouselRef].swiper.slidesEl.scrollWidth;
+
+          this.$refs[this.carouselRef].swiper.slidesEl.children.forEach(
+            (slide: HTMLElement) => {
+              const slideWidth = parseFloat(slide.style.width);
+
+              if (slideWidth !== width) {
+                slide.style.width = width + 'px';
+              }
+            },
+          );
+        } catch (error) {
+          console.warn('Testimonial: Unable to auto update slide width');
+        }
+      }
+    },
+  },
+  watch: {
+    viewModel: {
+      handler() {
+        this.debouncedForceCarouselUpdate();
+      },
+      deep: true,
+    },
+    isMobileDevice(next, old) {
+      if (next !== old) {
+        setTimeout(
+          this.forceCarouselUpdateSlideWidth,
+          DEVICE_CSS_TRANSITION_DELAY + 1,
+        );
+      }
+    },
+  },
+});

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -3,7 +3,7 @@
     data-component="testimonial-section"
     class="c_testimonial-image"
     style="container-type: inline-size"
-    :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+    :style="viewModel.backgroundStyle"
   >
     <div
       :class="{
@@ -201,127 +201,16 @@
     </div>
   </section>
 </template>
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+<script>
 import { Carousel, Icon } from '@designcrowd/fe-shared-lib';
+import TestimonialSectionMixin from './TestimonialSection.mixin.ts';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
-import type { TestimonialSectionViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
-import debounce from 'lodash.debounce';
-import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
 
-const DEBOUNCE_WAIT_MS = 100;
-
-const props = withDefaults(
-  defineProps<{
-    viewModel: TestimonialSectionViewModel;
-    context: BrandPageContext;
-    isPreview?: boolean;
-    isMobileDevice?: boolean;
-    contentIndex?: number;
-  }>(),
-  {
-    isPreview: false,
-    isMobileDevice: undefined,
-    contentIndex: undefined,
-  },
-);
-
-const carouselRef = ref<any>();
-
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
-const textAlignClass = computed(() => ({
-  'c_testimonial-big-image-text-item':
-    props.viewModel.displayStyle === 'big-image',
-  'tw-mb-2': props.viewModel.displayStyle !== 'big-image',
-}));
-
-const navigationUniqueIndexer = computed(
-  () => `testimonial-${props.viewModel.id}`,
-);
-
-const swiperOptions = computed(() => ({
-  autoHeight: true,
-  navigation: {
-    prevEl: `.carousel__button-prev--${navigationUniqueIndexer.value}`,
-    nextEl: `.carousel__button-next--${navigationUniqueIndexer.value}`,
-  },
-  pagination: {
-    el: `.pagination--${navigationUniqueIndexer.value}`,
-    clickable: true,
-  },
-}));
-
-const renderText = (val: string): string => (val ? getRenderText(val) : '');
-
-const forceCarouselUpdate = (): boolean => {
-  const shouldUpdateCarousel = Boolean(
-    props.isPreview &&
-      (props.viewModel.items.length > 1 ||
-        props.viewModel.displayStyle === 'big-image') &&
-      carouselRef.value,
-  );
-
-  if (shouldUpdateCarousel) {
-    carouselRef.value.update();
-
-    return true;
-  }
-
-  return false;
-};
-
-const forceCarouselUpdateSlideWidth = (): void => {
-  if (forceCarouselUpdate()) {
-    try {
-      const width = carouselRef.value.swiper.slidesEl.scrollWidth;
-
-      carouselRef.value.swiper.slidesEl.children.forEach(
-        (slide: HTMLElement) => {
-          const slideWidth = parseFloat(slide.style.width);
-
-          if (slideWidth !== width) {
-            slide.style.width = width + 'px';
-          }
-        },
-      );
-    } catch (error) {
-      console.warn('Testimonial: Unable to auto update slide width');
-    }
-  }
+export default {
+  components: { Carousel, Media, Icon, TextWrapper },
+  mixins: [TestimonialSectionMixin],
 };
-
-const debouncedForceCarouselUpdate = debounce(() => {
-  forceCarouselUpdate();
-}, DEBOUNCE_WAIT_MS);
-
-watch(
-  () => props.viewModel,
-  () => {
-    debouncedForceCarouselUpdate();
-  },
-  { deep: true },
-);
-
-watch(
-  () => props.isMobileDevice,
-  (next, old) => {
-    if (next !== old) {
-      setTimeout(
-        forceCarouselUpdateSlideWidth,
-        DEVICE_CSS_TRANSITION_DELAY + 1,
-      );
-    }
-  },
-);
 </script>
 
 <style scoped>
@@ -332,15 +221,17 @@ watch(
   --line-height: 1.5;
   --name-spacing: 0.75rem;
   --title-spacing: 1rem;
-  @apply tw-relative tw-box-border tw-max-w-full;
-  /* Top/bottom padding is config-bound via the Padding Control sliders (BP-5703),
-     applied as an inline style on the root. Horizontal padding stays responsive. */
+  @apply tw-relative tw-p-24 tw-box-border tw-max-w-full;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
 @media (min-width: 767px) {
   .c_testimonial-image {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
     padding-left: 4rem;
     padding-right: 4rem;
   }

package/src/brand-page/components/text/Text.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="!context.isBrandSite"
-      :style="[containerStyle, contentPaddingStyle]"
+      :style="containerStyle"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="[containerStyle, contentPaddingStyle]">
+    <div v-else :style="containerStyle">
       <div
-        class="c-text-container tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,10 +41,7 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -54,10 +51,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -90,7 +83,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-px-6';
+  return 'tw-py-3 tw-px-6';
 });
 
 const renderText = computed(() => {

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -1,12 +1,12 @@
 <template>
   <section data-component="text-media-section">
     <div
-      class="tw-relative tw-w-full tw-box-border"
+      class="tw-relative tw-w-full tw-box-border tw-py-8"
       :class="{
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      :style="viewModel.backgroundStyle"
     >
       <div
         :class="[
@@ -148,11 +148,7 @@ import {
   MEDIA_ONLY,
 } from '../../constants';
 import { isHexTransparent } from '@brand-page/utils/color.util';
-import {
-  escapeContentText,
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { escapeContentText, getRenderText } from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {
@@ -175,10 +171,6 @@ const props = defineProps({
   },
 });
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const items = computed(() => props.viewModel.items);
 
 const shouldDisplayText = computed(

package/src/brand-page/components/video/Video.mixin.ts

@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { VideoViewModel } from '@brand-page/view-models';
-import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import {
   DISPLAY_STYLE_PREVIEW,
@@ -23,10 +22,6 @@ export default defineComponent({
     title: 'Video',
   }),
   computed: {
-    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
-      return toContentPaddingStyle(this.viewModel);
-    },
-
     arrowStyle(): BrandPageCssStyle {
       return {
         color: this.viewModel.buttonStyles.style?.color,

package/src/brand-page/components/video/Video.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-video" :style="contentPaddingStyle">
+  <div class="c-video">
     <div v-if="viewModel.videoUrl">
       <!-- Start -->
       <div

package/src/brand-page/constants/font.constants.ts

@@ -8,10 +8,10 @@ export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
 
-export const FONT_SIZE_TITLE = '2.25em';
-export const FONT_SIZE_HEADINGS = '1.5em';
-export const FONT_SIZE_BODY = '1em';
-export const FONT_SIZE_PROFILE_NAME = '1.5em';
+export const FONT_SIZE_TITLE = '2.25rem';
+export const FONT_SIZE_HEADINGS = '1.5rem';
+export const FONT_SIZE_BODY = '1rem';
+export const FONT_SIZE_PROFILE_NAME = '1.5rem';
 
 export const FONT_WEIGHT_PROFILE_NAME = '800';
 export const FONT_WEIGHT_NORMAL = 'normal';

package/src/brand-page/constants/misc.constants.ts

@@ -38,64 +38,6 @@ export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
 
-/**
- * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
- * had hard-coded before the sliders existed. Single source for new-block
- * defaults (content-settings) and the migration backfill for existing pages.
- * The image layouts (full-image divided and card-over-image) are 0: the bg
- * image expands with the section padding (banner-style), so the default starts
- * flush at the edges; the spacing inside/over the image stays fixed.
- */
-export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
-  '': 0, // collapsible (default on Brand Page / Brand Contact)
-  [ALIGN_CENTERED]: 32,
-  [ALIGN_CARD_CENTER]: 32,
-  [ALIGN_CARD_CENTER_IMAGE]: 0,
-  [TEXT_ONLY]: 32,
-  [ALIGN_LEFT_FULL_IMAGE]: 0,
-  [ALIGN_RIGHT_FULL_IMAGE]: 0,
-};
-
-/**
- * Banner: full-bleed display styles (divided + full-width stacked) render the
- * image flush to the section edges, so their top/bottom padding defaults to 0 to
- * match prod — the standard 32 would push the image off the edges. Every other
- * banner style keeps 32. Used by the banner display-style convertor and the
- * migration backfill, mirroring contact-form's per-layout map above.
- */
-export const BANNER_DEFAULT_PADDING = 32;
-export const BANNER_FULL_BLEED_DISPLAY_STYLES = [
-  ALIGN_LEFT_FULL_IMAGE,
-  ALIGN_RIGHT_FULL_IMAGE,
-  ALIGN_TOP_FULL_IMAGE,
-  ALIGN_BOTTOM_FULL_IMAGE,
-  ALIGN_MIDDLE_FULL_IMAGE,
-];
-export const bannerDisplayStyleDefaultPadding = (
-  displayStyle?: string,
-): number =>
-  displayStyle && BANNER_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
-    ? 0
-    : BANNER_DEFAULT_PADDING;
-
-/**
- * About: a flat 32 for every display style, including the two full-image styles.
- * The full-image About renders the image inside the padded container, so the
- * standard 32 band is the intended look. Used by the About display-style
- * convertor and the migration backfill.
- */
-export const ABOUT_DEFAULT_PADDING = 32;
-
-/**
- * Testimonials: a single top/bottom value across both breakpoints, replacing the
- * old 32px mobile / 80px desktop split. The same value applies to every display
- * style (centered / big-image / columns) — they share one root, so padding does
- * not vary by style. Used by the new-block default and the migration backfill.
- * Default (BP-5703): 48px — the single value chosen for both breakpoints (replaces
- * the old 32px mobile / 80px desktop split).
- */
-export const TESTIMONIAL_DEFAULT_PADDING = 48;
-
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

package/src/brand-page/models/content.model.ts

@@ -51,8 +51,6 @@ export interface Content {
   id: string;
   type: ContentType;
   personalisationRole?: PersonalisationRole;
-  topPadding?: number;
-  bottomPadding?: number;
 
   // Overrides for personalisation
   imageUrlOverride?: string;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -292,7 +292,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "contents": [
           {
             "backgroundStyle": {},
-            "bottomPadding": 32,
             "buttonLinkType": "url",
             "buttonPageId": "",
             "buttonText": "Get Started",
@@ -331,7 +330,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
               "textAlign": "center",
               "wordBreak": "normal",
             },
-            "topPadding": 32,
             "type": "banner-section",
             "url": "",
           },
@@ -456,7 +454,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -753,7 +751,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
-            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -777,7 +774,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
-            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -901,7 +897,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1198,7 +1194,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
-            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1229,7 +1224,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
-            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1353,7 +1347,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -156,7 +156,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1em",
+          "fontSize": "1rem",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -230,7 +230,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1em",
+          "fontSize": "1rem",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -410,7 +410,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1em",
+              "fontSize": "1rem",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -426,7 +426,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1.5em",
+              "fontSize": "1.5rem",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -442,7 +442,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1em",
+              "fontSize": "1rem",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -458,7 +458,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "2.25em",
+              "fontSize": "2.25rem",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,