@designcrowd/library.brand-page 6.0.18 → 6.0.19-ast-btns

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

@@ -0,0 +1,67 @@
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+/**
+ * BP-5800 — decouple the section container background from the global button fill.
+ *
+ * These blocks' outer container historically took its background from the button
+ * fill colour (`containerStyle = { ...buttonStyles }`). They now own a
+ * `backgroundStyle`; seed its `backgroundColor` from the current button fill so
+ * existing sites render identically while the colour becomes independently editable.
+ *
+ * runAlways + idempotent: only seeds when the colour is unset, so it never overrides
+ * a colour the user has set.
+ */
+const CONTAINER_BACKGROUND_TYPES = new Set<string>([
+  'contact-form',
+  'mailing-list',
+  'request-payment',
+  'support-me',
+]);
+
+type WithBackgroundStyle = {
+  backgroundStyle?: { backgroundColor?: string };
+};
+
+export const migration19 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+  const buttonFill =
+    brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
+
+  if (buttonFill === undefined) {
+    return migrationResult;
+  }
+
+  const isBrandSite =
+    brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      if (!CONTAINER_BACKGROUND_TYPES.has(content.type)) {
+        return;
+      }
+
+      // contact-form already paints its own backgroundStyle on brand-site (default
+      // transparent); only its BP/BC container takes the button fill. mailing-list /
+      // payment use the button-fill container on every type, so they always seed.
+      if (content.type === 'contact-form' && isBrandSite) {
+        return;
+      }
+
+      const block = content as WithBackgroundStyle;
+
+      if (block.backgroundStyle?.backgroundColor !== undefined) {
+        return;
+      }
+
+      block.backgroundStyle = {
+        ...block.backgroundStyle,
+        backgroundColor: buttonFill,
+      };
+    });
+  });
+
+  return migrationResult;
+};

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

@@ -21,6 +21,7 @@ import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
+import { migration19 } from './migration/migration-19';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -167,6 +168,15 @@ const MIGRATION_TABLE = [
     description:
       'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
   },
+  {
+    version: 19,
+    migrateFn: migration19,
+    // runAlways: re-apply on every load so already-published sites pick up the seed
+    // without a version bump. Idempotent — only seeds backgroundColor when unset.
+    runAlways: true,
+    description:
+      'BP-5800: seed own container backgroundStyle from the button fill colour for contact-form, mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/view-model.util.ts

@@ -887,6 +887,7 @@ const mapToShopViewModel = (
   styles: PageStyles,
 ): ShopViewModel => {
   const buttonStyles = new ButtonStyles({
+    selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     style: {
       ...styles.buttonStyles.style,
     },

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

@@ -139,6 +139,7 @@ import {
   personalisationOverrideVisibility,
 } from '../assessors';
 import {
+  contactFormBackgroundColorDefaultGetter,
   logoBackgroundColorDefaultGetter,
   paymentFillColorFieldDefaultGetter,
   paymentTextAndBorderColorFieldDefaultGetter,
@@ -1824,6 +1825,16 @@ 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),
+      backgroundStyle: {
+        type: 'color',
+        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: true,
     isLocked: false,
@@ -2009,6 +2020,16 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
       ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
+      backgroundStyle: {
+        type: 'color',
+        groupId: REQUEST_PAYMENT_GROUPS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2077,6 +2098,16 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
       ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+      backgroundStyle: {
+        type: 'color',
+        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2232,6 +2263,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         showToggle: false,
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
+        defaultGetter: contactFormBackgroundColorDefaultGetter,
       },
     },
     isEnabled: true,

package/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.ts

@@ -0,0 +1,23 @@
+import { RGBAtoHex } from '@utils/helpers';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+import type { DefaultGetter } from '../models';
+
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export const contactFormBackgroundColorDefaultGetter: DefaultGetter<
+  BrandPageCssStyle
+> = (brandPage): BrandPageCssStyle => {
+  if (brandPage.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+    return {};
+  }
+
+  return {
+    backgroundColor: RGBAtoHex(
+      brandPage.styles.buttonStyles.style.backgroundColor,
+    ),
+  };
+};

package/src/brand-page-maker/default-getters/index.ts

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/src/brand-page-maker/models/button-styles-config.ts

@@ -379,7 +379,11 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-brushstroke',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
   {
     id: 'BUTTON_STYLE_20',
@@ -396,7 +400,11 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-arrow',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
   {
     id: 'BUTTON_STYLE_21',
@@ -413,6 +421,10 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-paper',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
 ];

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

@@ -319,6 +319,7 @@ export const createInitialMailingListContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 
@@ -364,6 +365,7 @@ export const createInitialRequestPaymentContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 
@@ -461,6 +463,7 @@ export const createInitialSupportMeContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 

package/src/metadata-builder/builders/section-rules/banner-section.rules.ts

@@ -31,6 +31,12 @@ const CHECKS: SectionCheck[] = [
       'left-aligned-full-image',
       'center-card-aligned-image',
       'left-card-aligned-image',
+      'top-card-aligned-image',
+      'bottom-card-aligned-image',
+      'middle-card-aligned-image',
+      'top-aligned-full-image',
+      'bottom-aligned-full-image',
+      'middle-aligned-full-image',
     ],
     'banner-section',
   ),

package/src/metadata-builder/parsers/section-tool-arguments.ts

@@ -363,7 +363,13 @@ export interface BannerSectionArguments {
     | 'right-aligned-full-image'
     | 'left-aligned-full-image'
     | 'center-card-aligned-image'
-    | 'left-card-aligned-image';
+    | 'left-card-aligned-image'
+    | 'top-card-aligned-image'
+    | 'bottom-card-aligned-image'
+    | 'middle-card-aligned-image'
+    | 'top-aligned-full-image'
+    | 'bottom-aligned-full-image'
+    | 'middle-aligned-full-image';
   title_style?: TextStyleArguments;
   description_style?: TextStyleArguments;
   button_text_style?: ButtonTextStyleArguments;

package/src/metadata-builder/sanitizers/__tests__/section-args-validator.test.ts

@@ -148,6 +148,19 @@ describe('field enum validation', () => {
     expect(errors).toHaveLength(0);
   });
 
+  it.each([
+    'top-card-aligned-image',
+    'bottom-card-aligned-image',
+    'middle-card-aligned-image',
+    'top-aligned-full-image',
+    'bottom-aligned-full-image',
+    'middle-aligned-full-image',
+  ])('passes on new stacked banner display_style %s (BP-5724)', (style) => {
+    const errors = validateBannerSection({ display_style: style } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+
   it('validates icon_style for social-links', () => {
     const errors = validateSocialLinks(
       { icon_style: 'not-a-real-style' } as any,

package/src/shared/style-settings/components/StyleSettings.vue

@@ -165,6 +165,7 @@
             <button
               v-for="(buttonStyleConfig, index) in availableButtonStyleConfigs"
               :key="index"
+              :data-test-button-style="buttonStyleConfig.id"
               class="c-button-style tw-cursor-pointer tw-border-0 tw-bg-white tw-px-3 tw-rounded tw-transition-all tw-duration-300 tw-transform hover:tw-bg-grayscale-200 tw-h-14"
               :class="{
                 'c-button-style--selected !tw-shadow-[0_0_0_2px] !tw-shadow-info-500':