@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -156,7 +156,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1rem",
+          "fontSize": "1em",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -230,7 +230,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1rem",
+          "fontSize": "1em",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -410,7 +410,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1rem",
+              "fontSize": "1em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -426,7 +426,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1.5rem",
+              "fontSize": "1.5em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -442,7 +442,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1rem",
+              "fontSize": "1em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -458,7 +458,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "2.25rem",
+              "fontSize": "2.25em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -472,6 +472,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 0,
   },
   "useOldLogoRenderSize": false,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -155,7 +155,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -229,7 +229,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -384,7 +384,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -400,7 +400,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -416,7 +416,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -432,7 +432,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -446,6 +446,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -605,7 +606,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -679,7 +680,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -849,7 +850,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -865,7 +866,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -881,7 +882,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -897,7 +898,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -911,6 +912,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

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-01_1.ts

@@ -1,4 +1,4 @@
-import type { BrandPageModel, LogoImageModel } from '../..';
+import type { LogoImageModel } from '../..';
 import type { MigrationData } from '../migration.util';
 
 import { migrateLogoImage } from './logo/logo.migration.util';

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

@@ -3,7 +3,6 @@ import {
   FONT_SIZE_HEADINGS,
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type GlobalTextStyleDeclaration,

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

@@ -2,7 +2,6 @@ import {
   BRAND_PAGE_TYPES,
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type BrandPageType,
   type ButtonContent,
   type ContactFormContent,

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

@@ -1,7 +1,6 @@
 import {
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type Content,

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

@@ -1,8 +1,4 @@
-import {
-  type BrandPageModel,
-  type TextContent,
-  type LogoImageModel,
-} from '../..';
+import { type TextContent, type LogoImageModel } from '../..';
 import type { MigrationData } from '../migration.util';
 import { isTextContent } from '../model.util';
 

package/src/brand-page/utils/migration/migration-05_2.ts

@@ -1,4 +1,4 @@
-import { type BrandPageModel, type ButtonContent } from '../..';
+import { type ButtonContent } from '../..';
 import type { MigrationData } from '../migration.util';
 
 export const migration05_2 = (

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

@@ -341,7 +341,7 @@ describe('migration08', () => {
       data: 'test-template-svg-data',
     });
 
-    const result = await migration08(migrationData, {
+    const _result = await migration08(migrationData, {
       isServerRender: false,
       isUserDraft: false,
     });

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

@@ -0,0 +1,77 @@
+import type { MigrationData } from '../migration.util';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import { BRAND_PAGE_TYPES } 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>> = {
+  '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 if (content.type === 'text') {
+        // Text outer padding is brand-page-type specific: 12 on Brand Site, 0 on
+        // Brand Page / Brand Contact - backfill per type so existing pages render unchanged.
+        value =
+          brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0;
+      } 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

@@ -1,5 +1,6 @@
 import { migrateBrandPageModel } from './migration.util';
 import { migrateNewLogoLogic } from './migration/migration-01';
+import { migration17 } from './migration/migration-17';
 import {
   BrandPageModel,
   type BrandPageData,
@@ -24,11 +25,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 +1472,288 @@ 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);
+    });
+
+    const runMigration17ForText = async (brandPageType: string) => {
+      const brandPageModel = {
+        brandPageType,
+        pages: [
+          {
+            slug: 'home',
+            title: 'Home',
+            contents: [{ type: 'text', id: 'text-1' }],
+          },
+        ],
+      } as any;
+
+      const result = await migration17({
+        brandPageModel,
+        useOldLogoRenderSize: false,
+      });
+
+      return result.brandPageModel.pages[0].contents[0] as any;
+    };
+
+    test('migration17 should backfill 12 text padding for brand site', async () => {
+      const text = await runMigration17ForText('brandSite');
+
+      expect(text.topPadding).toBe(12);
+      expect(text.bottomPadding).toBe(12);
+    });
+
+    test.each(['default', 'brandContact'])(
+      'migration17 should backfill 0 text padding for %s (Brand Page / Brand Contact)',
+      async (brandPageType) => {
+        const text = await runMigration17ForText(brandPageType);
+
+        expect(text.topPadding).toBe(0);
+        expect(text.bottomPadding).toBe(0);
+      },
+    );
+
     test('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [