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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.2-ast-padding-2",
+  "version": "5.18.2-ast-padding-3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -58,6 +58,28 @@ export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
   [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;
+
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

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

@@ -1,6 +1,9 @@
 import type { MigrationData } from '../migration.util';
-import type { ContactFormContent } from '../../models';
-import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING } from '../../constants';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import {
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  bannerDisplayStyleDefaultPadding,
+} from '../../constants';
 
 /**
  * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
@@ -16,7 +19,6 @@ const BLOCK_DEFAULT_PADDING: Partial<Record<string, number>> = {
   'shapes-section': 32,
   'booking-section': 32,
   'shop-section': 16,
-  'banner-section': 32,
   'about-section': 32,
 };
 
@@ -27,14 +29,23 @@ export const migration16 = async (
 
   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 ?? ''
-            ]
-          : BLOCK_DEFAULT_PADDING[content.type];
+      // 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;

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

@@ -27,6 +27,9 @@ 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,
@@ -1528,6 +1531,48 @@ describe('migration.util', () => {
       expect(content.bottomPadding).toBe(32);
     });
 
+    test('migration16 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],
+    ])(
+      'migration16 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('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [

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

@@ -1308,6 +1308,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       variant: 'icon',
       visibilityAssessor: brandSiteTypeVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     backgroundColor: {
       type: 'color',
       defaultValue: {},
@@ -1317,7 +1318,6 @@ 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,
@@ -2205,6 +2205,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         variant: 'icon',
         visibilityAssessor: brandSiteTypeVisibilityAssessor,
       },
+      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -2228,7 +2229,6 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
       },
-      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,
@@ -2632,6 +2632,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.image),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       aspectRatio: {
         type: 'radio',
         role: 'multi',
@@ -2694,7 +2695,6 @@ 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,
@@ -2832,6 +2832,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         optionsConvertor: socialLinksIconDisplayStyleConvertor,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
       titleStyle: {
         type: 'text-style',
         groupId: SOCIAL_LINKS_GROUPS.style,
@@ -2868,7 +2869,6 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
       },
-      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -2945,6 +2945,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       size: IMAGE_SIZE_FIELD(),
       title: TEXT_MEDIA_TITLE_FIELD(),
       description: TEXT_MEDIA_DESCRIPTION_FIELD(),
@@ -3164,7 +3165,6 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
       },
     ],
     fields: {
-      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -3208,6 +3208,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
         visibilityAssessor: (c, b) =>
           personalisationOverrideVisibility(c, b, 'buttonText'),
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       backgroundStyle: {
         type: 'color',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
@@ -3244,7 +3245,6 @@ 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

@@ -15,6 +15,7 @@ import {
   ALIGN_TOP_FULL_IMAGE,
   ALIGN_BOTTOM_FULL_IMAGE,
   ALIGN_MIDDLE_FULL_IMAGE,
+  bannerDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -172,8 +173,15 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
       textAlign = 'center';
     }
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign resets above — including its default block padding. Full-bleed
+    // image styles default to 0 (image flush to the edges); the rest to 32.
+    const padding = bannerDisplayStyleDefaultPadding(selectedOption?.value);
+
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },