@designcrowd/library.brand-page 5.18.6 → 5.18.7-ast-padding-1

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -2,11 +2,13 @@
   <section data-component="contact-form">
     <div
       :class="{
-        'tw-flex': isCenteredLayout && !hasBgImage,
         'tw-block': !viewModel.layoutStyle,
-        'tw-relative': hasBgImage,
+        'tw-relative tw-overflow-hidden': hasBgImage,
       }"
-      :style="hasBgColor ? viewModel.backgroundStyle : {}"
+      :style="[
+        hasBgColor ? viewModel.backgroundStyle : {},
+        contentPaddingStyle,
+      ]"
     >
       <Media
         v-if="hasBgImage && isCenteredLayout"
@@ -108,110 +110,115 @@
       </Collapsible>
       <div
         v-else-if="isCenteredLayout"
-        class="contact-container tw-py-4"
-        :class="{
-          'tw-px-6 tw-py-8': hasCard,
-          'tw-py-6': !hasCard,
-          'tw-w-full': !hasBgImage,
-        }"
+        :class="{ 'tw-relative': hasBgImage, 'tw-flex': !hasBgImage }"
       >
         <div
-          :style="hasCard ? viewModel.cardStyle : {}"
-          class="tw-relative tw-block tw-px-6 tw-py-8 tw-rounded-2xl"
+          class="contact-container"
+          :class="{
+            'tw-px-6': hasCard,
+            'tw-py-8': hasBgImage,
+            'tw-w-full': !hasBgImage,
+          }"
         >
-          <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
-            <TextWrapper
-              v-if="viewModel.title"
-              :text-style="viewModel.titleStyle"
-              :text="viewModel.title"
-              element="h1"
-              class="tw-mb-4 tw-text-base"
-            />
-            <TextWrapper
-              v-if="renderText"
-              :text-style="viewModel.descriptionStyle"
-              :text="renderText"
-              element="div"
-              class="tw-mb-4 tw-text-base"
-            />
-            <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
-              <div
-                v-for="(value, index) in values"
-                :key="index"
-                class="tw-text-secondary-500 c-col-span-2"
-                :class="{
-                  'tw-col-span-2':
-                    value.field.type === 'text-area' || isMobileDevice,
-                }"
-              >
-                <TextInput
-                  v-if="value.field.type !== 'text-area'"
-                  v-model="value.value"
-                  :placeholder="`${value.field.name}${
-                    value.field.required ? '*' : ''
-                  }`"
-                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                  :show-label-screen-reader-only="true"
-                  size="sm"
-                  :error="!!value.error"
-                  :type="getTextInputTypeByFieldType(value.field.type)"
-                  class="tw-w-full"
-                  @input="onValueChange(index)"
-                />
-                <Textarea
-                  v-if="value.field.type === 'text-area'"
-                  v-model="value.value"
-                  :placeholder="`${value.field.name}${
-                    value.field.required ? '*' : ''
-                  }`"
-                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                  :show-label-screen-reader-only="true"
-                  size="sm"
-                  :error="!!value.error"
-                  :resize="false"
-                  class="tw-w-full"
-                  @input="onValueChange(index)"
-                />
-                <p v-if="!!value.error" class="form-error">
-                  {{ value.error }}
-                </p>
-              </div>
-              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
-                <button
-                  v-if="isSubmitButtonVisible"
-                  class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                  :style="submitButtonStyle"
-                  :class="{ 'tw-w-full': isMobileDevice }"
+          <div
+            :style="hasCard ? viewModel.cardStyle : {}"
+            class="tw-relative tw-block tw-px-6 tw-rounded-2xl"
+            :class="{ 'tw-py-8': hasCard }"
+          >
+            <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
+              <TextWrapper
+                v-if="viewModel.title"
+                :text-style="viewModel.titleStyle"
+                :text="viewModel.title"
+                element="h1"
+                class="tw-mb-4 tw-text-base"
+              />
+              <TextWrapper
+                v-if="renderText"
+                :text-style="viewModel.descriptionStyle"
+                :text="renderText"
+                element="div"
+                class="tw-mb-4 tw-text-base"
+              />
+              <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
+                <div
+                  v-for="(value, index) in values"
+                  :key="index"
+                  class="tw-text-secondary-500 c-col-span-2"
+                  :class="{
+                    'tw-col-span-2':
+                      value.field.type === 'text-area' || isMobileDevice,
+                  }"
                 >
-                  <TextWrapper
-                    :text-style="submitButtonTextStyle"
-                    :text="viewModel.buttonText"
-                    class="tw-text-center tw-text-base"
+                  <TextInput
+                    v-if="value.field.type !== 'text-area'"
+                    v-model="value.value"
+                    :placeholder="`${value.field.name}${
+                      value.field.required ? '*' : ''
+                    }`"
+                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                    :show-label-screen-reader-only="true"
+                    size="sm"
+                    :error="!!value.error"
+                    :type="getTextInputTypeByFieldType(value.field.type)"
+                    class="tw-w-full"
+                    @input="onValueChange(index)"
                   />
-                </button>
+                  <Textarea
+                    v-if="value.field.type === 'text-area'"
+                    v-model="value.value"
+                    :placeholder="`${value.field.name}${
+                      value.field.required ? '*' : ''
+                    }`"
+                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                    :show-label-screen-reader-only="true"
+                    size="sm"
+                    :error="!!value.error"
+                    :resize="false"
+                    class="tw-w-full"
+                    @input="onValueChange(index)"
+                  />
+                  <p v-if="!!value.error" class="form-error">
+                    {{ value.error }}
+                  </p>
+                </div>
+                <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
+                  <button
+                    v-if="isSubmitButtonVisible"
+                    class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                    :style="submitButtonStyle"
+                    :class="{ 'tw-w-full': isMobileDevice }"
+                  >
+                    <TextWrapper
+                      :text-style="submitButtonTextStyle"
+                      :text="viewModel.buttonText"
+                      class="tw-text-center tw-text-base"
+                    />
+                  </button>
+                </div>
               </div>
+              <div v-else class="tw-w-full tw-flex tw-justify-center">
+                <Loader />
+              </div>
+              <p
+                v-if="hasSubmitError"
+                class="tw-text-center tw-mt-2 form-error"
+              >
+                {{ submitError }}
+              </p>
+            </form>
+            <div v-else :style="successMessageColorStyle">
+              <TextWrapper
+                v-if="viewModel.successMessage"
+                :text="renderSuccessText"
+                element="p"
+                :class="'tw-my-0.5'"
+              />
             </div>
-            <div v-else class="tw-w-full tw-flex tw-justify-center">
-              <Loader />
-            </div>
-            <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
-              {{ submitError }}
-            </p>
-          </form>
-          <div v-else :style="successMessageColorStyle">
-            <TextWrapper
-              v-if="viewModel.successMessage"
-              :text="renderSuccessText"
-              element="p"
-              :class="'tw-my-0.5'"
-            />
           </div>
         </div>
       </div>
-      <div
-        v-else-if="isTextOnly"
-        class="tw-px-6 tw-py-8 tw-gap-2 contact-container"
-      >
+      <div v-else-if="isTextOnly" class="tw-px-6 tw-gap-2 contact-container">
         <span v-if="!hasSubmitted" class="tw-grid tw-grid-cols-2">
           <div
             v-if="!isSubmitting"
@@ -350,10 +357,7 @@
             }"
           >
             <div
-              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-w-full tw-justify-center c-py-6"
-              :class="{
-                'tw-py-6': isMobileDevice,
-              }"
+              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-py-6 tw-w-full tw-justify-center"
             >
               <span v-if="!hasSubmitted">
                 <TextWrapper
@@ -516,9 +520,6 @@ export default {
   .c-text-padding {
     @apply tw-px-0 tw-col-span-2;
   }
-  .c-py-6 {
-    @apply tw-py-6;
-  }
   .c-divided-container {
     @apply tw-flex-col;
   }

package/src/brand-page/components/image-gallery/ImageGallery.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { ImageGalleryViewModel } from '@brand-page/view-models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import type { ImageGalleryImageClickPayload } from './models';
@@ -34,6 +35,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     getContainerStyle(): BrandPageCssStyle {
       if (this.galleryType === 'carousel') {
         const maxWidth = this.containerClientWidth

package/src/brand-page/components/image-gallery/ImageGallery.vue

@@ -10,7 +10,7 @@
       'c-carousel-full-width':
         viewModel.isFullWidth && isPreview && galleryType === 'carousel',
     }"
-    :style="getContainerStyle"
+    :style="[getContainerStyle, contentPaddingStyle]"
   >
     <component
       :is="galleryType"

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -2,7 +2,10 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import {
+  getEmailValidationError,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 import {
   contentSettingsTr,
@@ -61,6 +64,10 @@ export default defineComponent({
     }
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasNameError(): boolean {
       return !!this.nameError;
     },

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section :style="contentPaddingStyle">
     <div
       v-if="show"
       class="tw-p-4"

package/src/brand-page/components/map/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-component="map">
+  <div data-component="map" :style="contentPaddingStyle">
     <div
       class="c-map"
       :class="{
@@ -22,6 +22,7 @@ import Placeholder from '../placeholder/Placeholder.vue';
 import type { MapViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { mapTr } from '@src/composables/useTranslate';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 interface Props {
@@ -37,6 +38,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const placeId = computed(() => props.viewModel?.address?.placeId);
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
 </script>
 <style scoped>
 .c-map {

package/src/brand-page/components/payment/request-payment/RequestPayment.mixin.ts

@@ -14,6 +14,7 @@ import type { RequestPaymentViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 
 const MAX_CUSTOM_REQUEST_CHARS = 500;
@@ -42,6 +43,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomerRequestDetailsValid(): boolean {
       return (
         !this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||

package/src/brand-page/components/payment/request-payment/RequestPayment.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="request-payment"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/payment/support-me/SupportMe.mixin.ts

@@ -4,7 +4,10 @@ import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
 import type { BrandPageContext, PaymentOption } from '../../../models';
 import type { SupportMeViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
-import { isPaymentAmountValid } from '../../../utils';
+import {
+  isPaymentAmountValid,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '../../../utils';
 import {
   DEFAULT_CURRENCY_SYMBOL,
   DEFAULT_CURRENCY_CODE,
@@ -33,6 +36,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomAmountFieldVisible(): boolean {
       return this.viewModel.supportMeConfig.paymentOptions.some(
         (o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME,

package/src/brand-page/components/payment/support-me/SupportMe.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="support-me"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/shop/Shop.vue

@@ -2,12 +2,12 @@
   <section>
     <div
       v-if="shouldShowContainer"
-      class="tw-relative outer-container tw-py-4"
+      class="tw-relative outer-container"
       :class="{
         'tw-my-8': context.isBrandSite,
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="backgroundStyle"
+      :style="[backgroundStyle, contentPaddingStyle]"
     >
       <div class="tw-p-4 inner-container">
         <div class="tw-flex tw-flex-col tw-gap-2">
@@ -140,6 +140,7 @@ import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { shopTr } from '@src/composables/useTranslate';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -260,6 +261,10 @@ const itemStyle = computed((): BrandPageCssStyle => {
   };
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const backgroundStyle = computed((): any => {
   return props.viewModel.backgroundStyle;
 });

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/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,54 @@ 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;
+
 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;