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

package/src/brand-page-maker/convertors/contact-layout-style.convertor.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest';
+import { contactLayoutStyleConvertor } from './contact-layout-style.convertor';
+import {
+  ALIGN_CENTERED,
+  ALIGN_CARD_CENTER,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  TEXT_ONLY,
+} from '@brand-page/constants';
+
+const configWithSelected = (selected: string) => ({
+  options: contactLayoutStyleConvertor
+    .convert(selected)
+    .options.map((option) => ({
+      ...option,
+      isSelected: option.value === selected,
+    })),
+});
+
+describe('contact-layout-style.convertor', () => {
+  test.each([
+    [ALIGN_CARD_CENTER, 32, 'center'],
+    [ALIGN_CENTERED, 24, 'center'],
+    [ALIGN_CARD_CENTER_IMAGE, 0, 'center'],
+    [TEXT_ONLY, 32, 'left'],
+    [ALIGN_LEFT_FULL_IMAGE, 0, 'left'],
+  ])(
+    'convertBack should apply the default padding and text alignment for %s',
+    (layoutStyle, padding, textAlign) => {
+      const result = contactLayoutStyleConvertor.convertBack(
+        configWithSelected(layoutStyle),
+      );
+
+      expect(result).toStrictEqual({
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
+        titleStyle: {
+          textAlign,
+        },
+        descriptionStyle: {
+          textAlign,
+        },
+        buttonTextStyle: {
+          textAlign: 'center',
+        },
+      });
+    },
+  );
+});

package/src/brand-page-maker/convertors/contact-layout-style.convertor.ts

@@ -6,6 +6,7 @@ import {
   ALIGN_CARD_CENTER_IMAGE,
   TEXT_ONLY,
   ALIGN_CARD_CENTER,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 import type { ContactFormContent } from '@brand-page';
 
@@ -84,8 +85,15 @@ export const contactLayoutStyleConvertor: ValueConvertor<
       textAlign = 'left';
     }
 
+    // Switching layout adopts that layout's canonical look — same as the
+    // textAlign resets below — including its default block padding.
+    const padding =
+      CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
+
     return {
       layoutStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/models/content-settings.ts

@@ -24,6 +24,7 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -171,6 +172,8 @@ export const createInitialImageGalleryContent = (): ImageGalleryContent => {
     galleryStyles: {
       galleryType: 'grid',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -182,6 +185,8 @@ export const createInitialVideoContent = (): VideoContent => {
     displayStyle: DISPLAY_STYLE_PREVIEW,
     mute: false,
     videoUrl: '',
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -239,6 +244,8 @@ export const createInitialTextContent = (
           ]
         : undefined,
     type: 'text',
+    topPadding: 12,
+    bottomPadding: 12,
     textSize: {
       fontSize: FONT_SIZE_BODY,
       lineHeight: LINE_HEIGHT_BODY,
@@ -282,6 +289,8 @@ export const createInitialMapContent = (): MapContent => {
       formattedAddress: '',
       placeId: '',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -291,6 +300,8 @@ export const createInitialMailingListContent = (
   return {
     id: uuid.v4(),
     type: 'mailing-list',
+    topPadding: 0,
+    bottomPadding: 0,
     title: contentSettingsTr(`mailingListTitle`),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
@@ -324,6 +335,8 @@ export const createInitialRequestPaymentContent = (
     successMessage: '',
     title: contentSettingsTr(`buyNowTitle`),
     type: 'request-payment',
+    topPadding: 0,
+    bottomPadding: 0,
     fillColor: {},
     defaultBorderColor: {},
     selectedBorderColor: {},
@@ -415,6 +428,8 @@ export const createInitialSupportMeContent = (
     successMessage: contentSettingsTr(`successSupportPlaceholder`),
     description: contentSettingsTr(`makeADonationDescription`),
     type: 'support-me',
+    topPadding: 0,
+    bottomPadding: 0,
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
@@ -453,14 +468,21 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     console.error('userState.emailAddress should not be undefined');
   }
 
+  // New blocks inherit the padding their initial layout previously had
+  // hard-coded — same source as the migration backfill for existing pages.
+  const layoutStyle =
+    options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
+  const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
+
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`contactUsTitle`),
     description: '',
     buttonText: contentSettingsTr(`sendPlaceholder`),
     displayStyle: DISPLAY_STYLE_PREVIEW,
-    layoutStyle:
-      options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+    layoutStyle,
+    topPadding: padding,
+    bottomPadding: padding,
     imageUrl: '',
     fields: [
       {
@@ -599,6 +621,8 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     buttonText: contentSettingsTr(`bookNowLabel`),
     url: '',
     type: 'booking-section',
+    topPadding: 32,
+    bottomPadding: 32,
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -628,6 +652,8 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`imagesTitle`),
     description: '',
     type: 'images-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     aspectRatio: 'Default',
     areImagesFullWidth: false,
@@ -793,6 +819,8 @@ export const createInitialSocialLinksContent = (
   return {
     id: uuid.v4(),
     type: 'social-links',
+    topPadding: 32,
+    bottomPadding: 32,
     title: contentSettingsTr(`followUsOnTitle`),
     links: [
       {
@@ -846,6 +874,8 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`shapesTitle`),
     description: '',
     type: 'shapes-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     items: [
       {

package/src/bundles/bundled-translations.json

@@ -1525,6 +1525,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.vue

@@ -56,7 +56,7 @@
     >
       <li
         v-for="(field, index) in fields"
-        :key="`content-settings-item-field-${id}-${index}`"
+        :key="`content-settings-item-field-${id}-${field.name}`"
         class="tw-cursor-pointer"
         :class="{
           'tw-mb-3': index !== fields.length - 1,

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -25,8 +25,8 @@
     >
       <ul>
         <li
-          v-for="(field, fieldIndex) in group.fields"
-          :key="`content-settings-item-group-field-${id}-${group.id}-${fieldIndex}`"
+          v-for="field in group.fields"
+          :key="`content-settings-item-group-field-${id}-${group.id}-${field.name}`"
         >
           <ContentSettingsItemField
             v-if="

package/src/shared/content-settings/components/slider-field/SliderField.mixin.ts

@@ -45,6 +45,15 @@ export default defineComponent({
       sliderValue: value,
     };
   },
+  watch: {
+    // The value can change outside the slider (e.g. a layout switch
+    // re-applying default padding, or undo) — keep the display in sync.
+    value(newValue: string | undefined) {
+      this.sliderValue = this.valueConvertor
+        ? this.valueConvertor.convert(newValue as any)
+        : newValue;
+    },
+  },
   computed: {
     innerMinLength(): number {
       return this.minLength ?? 0;

package/src/utils/minify-brand-page-metadata.ts

@@ -205,7 +205,17 @@ const minifyContent = (
   editor: Editor,
   assets?: AssetEntry[],
 ): MinifiedContent => {
-  const base: MinifiedContent = { id: content.id, type: content.type };
+  const base: MinifiedContent = {
+    id: content.id,
+    type: content.type,
+    // Padding Control (BP-5687) — shared across every block, persist when set.
+    ...(typeof content.topPadding === 'number' && {
+      topPadding: content.topPadding,
+    }),
+    ...(typeof content.bottomPadding === 'number' && {
+      bottomPadding: content.bottomPadding,
+    }),
+  };
   const c = content as any;
 
   // Helper: include imageUrl and its asset key if available

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.d.ts

@@ -1,103 +0,0 @@
-import type { PropType } from 'vue';
-import type { BannerSectionViewModel, ButtonViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<BannerSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    containerClientWidth: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    containerClientHeight: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {
-    shouldStackOnTop: boolean;
-}, {
-    displayAlignClass(): "" | "tw-items-center tw-w-full" | "tw-items-start tw-w-2/3" | "tw-items-end tw-w-2/3" | "tw-items-end";
-    displayButtonClass(): "" | "tw-justify-start" | "tw-justify-center" | "tw-justify-end";
-    isLeftImageAligned(): boolean;
-    isRightImageAligned(): boolean;
-    isDividedContent(): boolean;
-    isCardBannerContent(): boolean;
-    isCardAlignedOnLeft(): boolean;
-    getbuttonViewModel(): ButtonViewModel;
-    shouldShowButton(): boolean;
-    isHorizontalAligned(): boolean;
-    isBigImageAligned(): boolean;
-    renderText(): string;
-    hasDescriptionText(): boolean;
-    overlayColor(): BrandPageCssStyle;
-    opacity(): number;
-    backgroundOverlay(): BrandPageCssStyle;
-}, {
-    onResize(): void;
-}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<BannerSectionViewModel>;
-        required: true;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    containerClientWidth: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    containerClientHeight: {
-        type: PropType<number | undefined>;
-        required: false;
-        default: undefined;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    containerClientWidth: number | undefined;
-    containerClientHeight: number | undefined;
-    contentIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -1,178 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { isURL, hasValidButton as shouldShowButtonUtil, } from '../../../utils/validator.util';
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../../constants';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
-import { hasRTEContent } from '@brand-page-maker/utils';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        containerClientWidth: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-        containerClientHeight: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            shouldStackOnTop: false,
-        };
-    },
-    mounted() {
-        this.$nextTick(() => {
-            window.addEventListener('resize', this.onResize);
-        });
-    },
-    unmounted() {
-        if (typeof window !== undefined) {
-            window.removeEventListener(`resize`, this.onResize);
-        }
-    },
-    computed: {
-        displayAlignClass() {
-            switch (this.viewModel.displayStyle) {
-                case ALIGN_CENTERED:
-                    return 'tw-items-center tw-w-full';
-                case BIG_IMAGE:
-                    return 'tw-items-center tw-w-full';
-                case ALIGN_LEFT_ALIGNED:
-                    return 'tw-items-start tw-w-2/3';
-                case ALIGN_RIGHT_ALIGNED:
-                    return 'tw-items-end tw-w-2/3';
-                case ALIGN_LEFT_BIG_IMAGE:
-                    return 'tw-items-start tw-w-2/3';
-                case ALIGN_CARD_CENTER_IMAGE:
-                    return 'tw-items-center tw-w-full';
-                case ALIGN_CARD_LEFT_IMAGE:
-                    return 'tw-items-end';
-                default:
-                    return '';
-            }
-        },
-        displayButtonClass() {
-            if (this.viewModel.buttonTextStyle) {
-                switch (this.viewModel.buttonTextStyle.textAlign) {
-                    case 'left':
-                        return 'tw-justify-start';
-                    case 'center':
-                        return 'tw-justify-center';
-                    case 'right':
-                        return 'tw-justify-end';
-                    default:
-                        return '';
-                }
-            }
-            else {
-                return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-                    this.viewModel.displayStyle === ALIGN_CENTERED
-                    ? 'tw-justify-center'
-                    : 'tw-justify-start';
-            }
-        },
-        isLeftImageAligned() {
-            if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isRightImageAligned() {
-            if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isDividedContent() {
-            if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isCardBannerContent() {
-            if (this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE) {
-                return true;
-            }
-            return false;
-        },
-        isCardAlignedOnLeft() {
-            return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
-        },
-        getbuttonViewModel() {
-            const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
-            buttonViewModel.buttonLinkType = buttonLinkType;
-            buttonViewModel.pageSlug = pageSlug;
-            return buttonViewModel;
-        },
-        shouldShowButton() {
-            return shouldShowButtonUtil({
-                buttonText: this.viewModel.buttonText,
-                buttonViewModel: this.viewModel.buttonViewModel,
-            });
-        },
-        isHorizontalAligned() {
-            return (this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
-                this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
-                this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE);
-        },
-        isBigImageAligned() {
-            return (this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
-                this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE);
-        },
-        renderText() {
-            if (!this.viewModel.description) {
-                return '';
-            }
-            if (hasRTEContent(this.viewModel.description)) {
-                return this.viewModel.description;
-            }
-            else {
-                return getRenderText(this.viewModel.description);
-            }
-        },
-        hasDescriptionText() {
-            if (hasRTEContent(this.viewModel.description)) {
-                return escapeContentText(this.viewModel.description) !== '';
-            }
-            else {
-                return this.viewModel?.description?.length > 0;
-            }
-        },
-        overlayColor() {
-            return this.viewModel.overlayColor || 'rgb(0,0,0)';
-        },
-        opacity() {
-            return this.viewModel.overlayOpacity;
-        },
-        backgroundOverlay() {
-            return {
-                background: this.overlayColor.backgroundColor,
-                opacity: `${this.opacity}%`,
-            };
-        },
-    },
-    methods: {
-        onResize() {
-            this.shouldStackOnTop = window.innerWidth < 640;
-        },
-    },
-});