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

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -1,11 +1,10 @@
 <template>
   <div data-component="social-links">
     <div
-      class="tw-pb-8"
       :class="{
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="containerStyles"
+      :style="[containerStyles, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <TextWrapper
@@ -14,7 +13,7 @@
         :text="title"
         element="h1"
         :class="textAlignClass"
-        class="tw-py-8"
+        class="tw-pb-8"
       />
       <SocialLinksItems
         :id="id"
@@ -34,6 +33,7 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
 import type { BrandPageContext, LinksItem } from '@brand-page/models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -51,6 +51,10 @@ const containerStyles = computed((): BrandPageCssStyle => {
   return props.viewModel.backgroundStyles || {};
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const iconStyle = computed((): BrandPageCssStyle => {
   return props.viewModel.iconFillStyles || {};
 });

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"
+    :style="[viewModel.backgroundStyle, contentPaddingStyle]"
   >
     <div
       :class="{
@@ -201,16 +201,127 @@
     </div>
   </section>
 </template>
-<script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 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';
 
-export default {
-  components: { Carousel, Media, Icon, TextWrapper },
-  mixins: [TestimonialSectionMixin],
+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');
+    }
+  }
 };
+
+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>
@@ -221,17 +332,15 @@ export default {
   --line-height: 1.5;
   --name-spacing: 0.75rem;
   --title-spacing: 1rem;
-  @apply tw-relative tw-p-24 tw-box-border tw-max-w-full;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  @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. */
   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"
+      :style="[containerStyle, contentPaddingStyle]"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="containerStyle">
+    <div v-else :style="[containerStyle, contentPaddingStyle]">
       <div
-        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,7 +41,10 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -51,6 +54,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -83,7 +90,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-py-3 tw-px-6';
+  return '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 tw-py-8"
+      class="tw-relative tw-w-full tw-box-border"
       :class="{
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
     >
       <div
         :class="[
@@ -148,7 +148,11 @@ import {
   MEDIA_ONLY,
 } from '../../constants';
 import { isHexTransparent } from '@brand-page/utils/color.util';
-import { escapeContentText, getRenderText } from '@brand-page/utils';
+import {
+  escapeContentText,
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {
@@ -171,6 +175,10 @@ 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,6 +1,7 @@
 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,
@@ -22,6 +23,10 @@ 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">
+  <div class="c-video" :style="contentPaddingStyle">
     <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.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_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_WEIGHT_PROFILE_NAME = '800';
 export const FONT_WEIGHT_NORMAL = 'normal';

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

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

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

@@ -155,7 +155,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -229,7 +229,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -384,7 +384,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -400,7 +400,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -416,7 +416,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -432,7 +432,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -605,7 +605,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -679,7 +679,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -849,7 +849,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -865,7 +865,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -881,7 +881,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -897,7 +897,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,

package/src/brand-page/utils/content-padding.util.test.ts

@@ -0,0 +1,29 @@
+import { describe, test, expect } from 'vitest';
+import { contentPaddingStyle } from './content-padding.util';
+
+describe('content-padding.util', () => {
+  test('contentPaddingStyle should map stored padding to px values', () => {
+    expect(contentPaddingStyle({ topPadding: 53, bottomPadding: 24 })).toEqual({
+      paddingTop: '53px',
+      paddingBottom: '24px',
+    });
+  });
+
+  test('contentPaddingStyle should default missing values to 0 for content created before the field existed', () => {
+    expect(contentPaddingStyle({})).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+    expect(contentPaddingStyle({ topPadding: 16 })).toEqual({
+      paddingTop: '16px',
+      paddingBottom: '0px',
+    });
+  });
+
+  test('contentPaddingStyle should keep an explicit 0 rather than treating it as unset', () => {
+    expect(contentPaddingStyle({ topPadding: 0, bottomPadding: 0 })).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+  });
+});