@designcrowd/library.brand-page 5.18.7 → 5.18.8-ast-padding-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"
+    :style="[viewModel.backgroundStyle, contentPaddingStyle]"
   >
     <div
       :class="{
@@ -221,17 +221,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/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/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',
+    });
+  });
+});

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

@@ -0,0 +1,13 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export const contentPaddingStyle = (content: {
+  topPadding?: number;
+  bottomPadding?: number;
+}): { paddingTop: string; paddingBottom: string } => ({
+  paddingTop: `${content.topPadding ?? 0}px`,
+  paddingBottom: `${content.bottomPadding ?? 0}px`,
+});

package/src/brand-page/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/src/brand-page/utils/migration/migration-17.ts

@@ -0,0 +1,72 @@
+import type { MigrationData } from '../migration.util';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import {
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  TESTIMONIAL_DEFAULT_PADDING,
+  bannerDisplayStyleDefaultPadding,
+} from '../../constants';
+
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ *
+ * Exception — `testimonial-section` (BP-5703): testimonials had 32px mobile / 80px
+ * desktop and are intentionally collapsing to a single value across both breakpoints,
+ * so the backfill sets that single value rather than preserving the old desktop 80px.
+ * Existing testimonials will look tighter on desktop / roomier on mobile — by design.
+ */
+const BLOCK_DEFAULT_PADDING: Partial<Record<string, number>> = {
+  text: 12,
+  'images-section': 32,
+  'social-links': 32,
+  'shapes-section': 32,
+  'booking-section': 32,
+  'shop-section': 16,
+  'about-section': 32,
+  'testimonial-section': TESTIMONIAL_DEFAULT_PADDING,
+};
+
+export const migration17 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Contact Form and Banner previously varied their hard-coded spacing by
+      // layout/display style (full-bleed image layouts had no outer padding), so they're
+      // keyed by that rather than a single per-type value.
+      let value: number | undefined;
+
+      if (content.type === 'contact-form') {
+        value =
+          CONTACT_FORM_LAYOUT_DEFAULT_PADDING[
+            (content as ContactFormContent).layoutStyle ?? ''
+          ];
+      } else if (content.type === 'banner-section') {
+        value = bannerDisplayStyleDefaultPadding(
+          (content as BannerSectionContent).displayStyle,
+        );
+      } else {
+        value = BLOCK_DEFAULT_PADDING[content.type];
+      }
+
+      if (value === undefined) {
+        return;
+      }
+
+      if (content.topPadding === undefined) {
+        content.topPadding = value;
+      }
+
+      if (content.bottomPadding === undefined) {
+        content.bottomPadding = value;
+      }
+    });
+  });
+
+  return migrationResult;
+};

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

@@ -24,11 +24,18 @@ import {
   createInitialTestimonialSectionContent,
 } from '@brand-page-maker/models';
 import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
   LINE_HEIGHT_TITLE,
   TEXT_ONLY,
+  TESTIMONIAL_DEFAULT_PADDING,
 } from '../constants';
 
 describe('migration.util', () => {
@@ -1464,6 +1471,251 @@ describe('migration.util', () => {
       expect(content.layoutStyle).toBe(TEXT_ONLY);
     });
 
+    test('migration17 should backfill contact form padding from its layout style', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const collapsible = model.brandPageModel.pages[3]
+        .contents[0] as ContactFormContent;
+      const textOnly = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(collapsible.topPadding).toBe(0);
+      expect(collapsible.bottomPadding).toBe(0);
+      expect(textOnly.topPadding).toBe(32);
+      expect(textOnly.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_CARD_CENTER_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s contact form layout',
+      async (layoutStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[3].contents[1] as ContactFormContent
+        ).layoutStyle = layoutStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const content = model.brandPageModel.pages[3]
+          .contents[1] as ContactFormContent;
+
+        expect(content.topPadding).toBe(0);
+        expect(content.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should not overwrite contact form padding that is already set', async () => {
+      const brandPageModel = getBsModel();
+
+      (brandPageModel.pages[3].contents[1] as ContactFormContent).topPadding =
+        10;
+
+      const model = await migrateBrandPageModel(brandPageModel, {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const content = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(content.topPadding).toBe(10);
+      expect(content.bottomPadding).toBe(32);
+    });
+
+    test('migration17 should backfill 32 padding for standard banner display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[0] is a 'centered' banner (standard, not full-bleed).
+      const banner = model.brandPageModel.pages[0]
+        .contents[0] as BannerSectionContent;
+
+      expect(banner.topPadding).toBe(32);
+      expect(banner.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_TOP_FULL_IMAGE],
+      [ALIGN_BOTTOM_FULL_IMAGE],
+      [ALIGN_MIDDLE_FULL_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s full-bleed banner style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[0] as BannerSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const banner = model.brandPageModel.pages[0]
+          .contents[0] as BannerSectionContent;
+
+        expect(banner.topPadding).toBe(0);
+        expect(banner.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should backfill 32 padding for standard about display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[2] is a 'centered' about section (standard, not full-image).
+      const about = model.brandPageModel.pages[0]
+        .contents[2] as AboutSectionContent;
+
+      expect(about.topPadding).toBe(32);
+      expect(about.bottomPadding).toBe(32);
+    });
+
+    test.each([[ALIGN_LEFT_FULL_IMAGE], [ALIGN_RIGHT_FULL_IMAGE]])(
+      'migration17 should backfill 32 padding for the %s full-image about style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[2] as AboutSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const about = model.brandPageModel.pages[0]
+          .contents[2] as AboutSectionContent;
+
+        expect(about.topPadding).toBe(32);
+        expect(about.bottomPadding).toBe(32);
+      },
+    );
+
+    test('migration17 should backfill 16 padding for the shop section', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1' }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(16);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
+    test('migration17 should not overwrite shop padding that is already set', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1', topPadding: 40 }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(40);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
+    test('migration17 should backfill the single testimonial padding across both breakpoints', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'testimonials',
+            title: 'Testimonials',
+            contents: [{ type: 'testimonial-section', id: 'testimonial-1' }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const testimonial = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(testimonial.topPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+      expect(testimonial.bottomPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+    });
+
+    test('migration17 should not overwrite testimonial padding that is already set', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'testimonials',
+            title: 'Testimonials',
+            contents: [
+              {
+                type: 'testimonial-section',
+                id: 'testimonial-1',
+                topPadding: 40,
+              },
+            ],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const testimonial = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(testimonial.topPadding).toBe(40);
+      expect(testimonial.bottomPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+    });
+
     test('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [