@designcrowd/library.brand-page 5.18.1 → 5.18.2-ast-padding-1

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

@@ -17,6 +17,12 @@ export const ALIGN_LEFT_BIG_IMAGE = 'left-aligned-big-image';
 export const ALIGN_CARD_CENTER_IMAGE = 'center-card-aligned-image';
 export const ALIGN_CARD_CENTER = 'center-card-aligned';
 export const ALIGN_CARD_LEFT_IMAGE = 'left-card-aligned-image';
+export const ALIGN_TOP_CARD_IMAGE = 'top-card-aligned-image';
+export const ALIGN_BOTTOM_CARD_IMAGE = 'bottom-card-aligned-image';
+export const ALIGN_MIDDLE_CARD_IMAGE = 'middle-card-aligned-image';
+export const ALIGN_TOP_FULL_IMAGE = 'top-aligned-full-image';
+export const ALIGN_BOTTOM_FULL_IMAGE = 'bottom-aligned-full-image';
+export const ALIGN_MIDDLE_FULL_IMAGE = 'middle-aligned-full-image';
 
 export const MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH = 3;
 
@@ -32,6 +38,26 @@ 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: their
+ * padding sits on the section root and reveals the background colour around
+ * the image block (same as the banner), while the spacing inside/over the
+ * image stays fixed — existing pages rendered the image flush to the section
+ * edges.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
+  '': 0, // collapsible (default on Brand Page / Brand Contact)
+  [ALIGN_CENTERED]: 24,
+  [ALIGN_CARD_CENTER]: 32,
+  [ALIGN_CARD_CENTER_IMAGE]: 0,
+  [TEXT_ONLY]: 32,
+  [ALIGN_LEFT_FULL_IMAGE]: 0,
+  [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
+
 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

@@ -454,7 +454,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -751,6 +751,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -774,6 +775,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -897,7 +899,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1194,6 +1196,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1224,6 +1227,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1347,7 +1351,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 15,
+    "v": 16,
   },
   "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-16.ts

@@ -0,0 +1,51 @@
+import type { MigrationData } from '../migration.util';
+import type { ContactFormContent } from '../../models';
+import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING } from '../../constants';
+
+/**
+ * Tier 2 Padding Control (BP-5699): 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.
+ */
+const TIER2_DEFAULT_PADDING: Partial<Record<string, number>> = {
+  text: 12,
+  'images-section': 32,
+  'social-links': 32,
+  'shapes-section': 32,
+  'booking-section': 32,
+};
+
+export const migration16 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Contact Form's previous hard-coded spacing varies by layout, so it's
+      // keyed by layoutStyle rather than a single per-type value.
+      const value =
+        content.type === 'contact-form'
+          ? CONTACT_FORM_LAYOUT_DEFAULT_PADDING[
+              (content as ContactFormContent).layoutStyle ?? ''
+            ]
+          : TIER2_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,6 +24,9 @@ import {
   createInitialTestimonialSectionContent,
 } from '@brand-page-maker/models';
 import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
@@ -1464,6 +1467,67 @@ describe('migration.util', () => {
       expect(content.layoutStyle).toBe(TEXT_ONLY);
     });
 
+    test('migration16 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],
+    ])(
+      'migration16 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('migration16 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('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [

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

@@ -18,6 +18,7 @@ import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
+import { migration16 } from './migration/migration-16';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -141,6 +142,12 @@ const MIGRATION_TABLE = [
     migrateFn: migration15,
     description: 'Adding default mediaOverlayStyle to background styles',
   },
+  {
+    version: 16,
+    migrateFn: migration16,
+    description:
+      'Tier 2 Padding Control (BP-5699): backfill existing top/bottom spacing as explicit padding for text (12px), images, social links, shapes and booking (32px), and contact form (per layout)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -201,6 +201,34 @@ const SETTINGS_STYLE_FIElD_GROUPS = (): ContentSettingsFieldGroup[] => {
   ];
 };
 
+/**
+ * Shared Top/Bottom padding sliders (BP-5687). Reuses the same `slider` control
+ * as the Divider block (track + editable number box), range 0–100, continuous.
+ * Spread into a block's `fields` to expose the Padding Control on that block.
+ * Pass the Style field-group id for blocks that use grouped panels.
+ */
+const PADDING_CONTROL_FIELDS = (
+  groupId?: string,
+): {
+  topPadding: ContentSettingsField<Content>;
+  bottomPadding: ContentSettingsField<Content>;
+} => ({
+  topPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`topPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+  bottomPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`bottomPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+});
+
 const DEFAULT_TITLE_STYLE_SETTINGS_FILED =
   (): ContentSettingsField<Content> => ({
     type: 'text-style',
@@ -1097,6 +1125,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       defaultValue: false,
       visibilityAssessor: imageGalleryFieldVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddImageContents,
@@ -1136,6 +1165,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       label: contentSettingsTr(`muteLabel`),
       valueConvertor: videoContentStateConvertor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddVideoContents,
@@ -1287,6 +1317,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       valueConvertor: backgroundColorConvertor,
       groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
     },
+    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
   },
   isEnabled: true,
   isLocked: false,
@@ -1736,6 +1767,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG =
         type: 'address',
         title: contentSettingsTr(`addressTitle`),
       },
+      ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1787,6 +1819,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG =
       },
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1971,6 +2004,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         defaultValue: {},
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
+      ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2038,6 +2072,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`itemStyleLabel`),
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2193,6 +2228,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
       },
+      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,
@@ -2656,6 +2692,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
             ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
             : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -2829,6 +2866,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
       },
+      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -2942,6 +2980,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
             ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
             : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -3202,6 +3241,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
         validator: urlValidator,
         defaultValue: '',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,

package/src/brand-page-maker/convertors/banner-align-display-style.convertor.ts

@@ -9,6 +9,12 @@ import {
   ALIGN_LEFT_BIG_IMAGE,
   ALIGN_CARD_CENTER_IMAGE,
   ALIGN_CARD_LEFT_IMAGE,
+  ALIGN_TOP_CARD_IMAGE,
+  ALIGN_BOTTOM_CARD_IMAGE,
+  ALIGN_MIDDLE_CARD_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -46,6 +52,54 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
           iconViewBox: '0 0 110 64',
           dataAttribute: 'data-test-btn-text-only',
         },
+        {
+          title: '',
+          value: ALIGN_TOP_CARD_IMAGE,
+          isSelected: value === ALIGN_TOP_CARD_IMAGE,
+          iconName: 'display-style-banner-10',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-top-card-image',
+        },
+        {
+          title: '',
+          value: ALIGN_BOTTOM_CARD_IMAGE,
+          isSelected: value === ALIGN_BOTTOM_CARD_IMAGE,
+          iconName: 'display-style-banner-11',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-bottom-card-image',
+        },
+        {
+          title: '',
+          value: ALIGN_MIDDLE_CARD_IMAGE,
+          isSelected: value === ALIGN_MIDDLE_CARD_IMAGE,
+          iconName: 'display-style-banner-12',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-middle-card-image',
+        },
+        {
+          title: '',
+          value: ALIGN_TOP_FULL_IMAGE,
+          isSelected: value === ALIGN_TOP_FULL_IMAGE,
+          iconName: 'display-style-banner-13',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-top-full-image',
+        },
+        {
+          title: '',
+          value: ALIGN_BOTTOM_FULL_IMAGE,
+          isSelected: value === ALIGN_BOTTOM_FULL_IMAGE,
+          iconName: 'display-style-banner-14',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-bottom-full-image',
+        },
+        {
+          title: '',
+          value: ALIGN_MIDDLE_FULL_IMAGE,
+          isSelected: value === ALIGN_MIDDLE_FULL_IMAGE,
+          iconName: 'display-style-banner-15',
+          iconViewBox: '0 0 110 64',
+          dataAttribute: 'data-test-btn-middle-full-image',
+        },
         {
           title: '',
           value: BIG_IMAGE,
@@ -107,7 +161,13 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
       !selectedOption ||
       selectedOption.value === ALIGN_CENTERED ||
       selectedOption.value === BIG_IMAGE ||
-      selectedOption.value === ALIGN_CARD_CENTER_IMAGE
+      selectedOption.value === ALIGN_CARD_CENTER_IMAGE ||
+      selectedOption.value === ALIGN_TOP_CARD_IMAGE ||
+      selectedOption.value === ALIGN_BOTTOM_CARD_IMAGE ||
+      selectedOption.value === ALIGN_MIDDLE_CARD_IMAGE ||
+      selectedOption.value === ALIGN_TOP_FULL_IMAGE ||
+      selectedOption.value === ALIGN_BOTTOM_FULL_IMAGE ||
+      selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE
     ) {
       textAlign = 'center';
     }