@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap

@@ -20,8 +20,12 @@ exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the RAW edit
                 "color": "var(--logo-text-color)",
                 "fontFamily": "",
                 "fontSize": "",
+                "fontStyle": null,
+                "fontWeight": null,
                 "letterSpacing": "",
                 "lineHeight": "",
+                "textDecoration": null,
+                "textDecorationReset": null,
               },
               "type": "textStyle",
             },
@@ -96,8 +100,12 @@ exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the RAW edit
                 "color": "",
                 "fontFamily": "Montserrat",
                 "fontSize": "1.5em",
+                "fontStyle": null,
+                "fontWeight": null,
                 "letterSpacing": "0.05em",
                 "lineHeight": "1.4",
+                "textDecoration": null,
+                "textDecorationReset": null,
               },
               "type": "textStyle",
             },
@@ -132,8 +140,12 @@ exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the RAW edit
                 "color": "#FF0000",
                 "fontFamily": "",
                 "fontSize": "",
+                "fontStyle": null,
+                "fontWeight": null,
                 "letterSpacing": "",
                 "lineHeight": "",
+                "textDecoration": null,
+                "textDecorationReset": null,
               },
               "type": "textStyle",
             },

package/src/brand-page-maker/utils/apply-color-strategy.golden.test.ts

@@ -132,6 +132,8 @@ describe('GOLDEN — every strategy write, every section, every display style',
               type: sectionType,
               displayStyle,
               items: [{}],
+              // A success message style is written only when present; factories and migration-22 seed it.
+              successMessageStyle: { textStyleType: 'paragraph2' },
               title: {
                 type: 'doc',
                 content: [

package/src/brand-page-maker/utils/apply-color-strategy.test.ts

@@ -11,6 +11,7 @@ import {
   FIELD_SLOT_MAP,
   resolveColorStrategy,
   SECTION_RAISED_LAYER,
+  STYLE_FIELDS_OUTSIDE_CONFIG,
 } from '@shared/color-strategies/color-strategies';
 import { pageStrategyAnchors } from '@shared/color-strategies/page-anchors';
 import type { ColorStrategy } from '@shared/color-strategies/models';
@@ -1578,6 +1579,183 @@ describe('headingStyle and nameStyle follow their siblings (BP-5886 3C-text)', (
   });
 });
 
+describe('the success message takes the description’s colour (BP-5969)', () => {
+  const configs = CONTENT_SETTINGS_CONFIGS() as Record<string, any>;
+  const strategies = [
+    'duotone',
+    'duotone-inverse',
+    'utility-1',
+    'utility-2',
+  ] as const;
+
+  describe.each(['support-me', 'request-payment', 'shop-section'])(
+    '%s',
+    (type) => {
+      it.each(strategies)(
+        '%s: the success message gets the description’s palette reference',
+        (strategyId) => {
+          const values = buildColorStrategyValues(
+            configs[type],
+            {
+              type,
+              descriptionStyle: { textStyleType: 'paragraph2' },
+              successMessageStyle: {
+                textStyleType: 'paragraph2',
+                fontFamily: 'Inter',
+                color: '#123456',
+                backgroundColor: '#FFFF00',
+              },
+            },
+            strategyId,
+          ) as any;
+
+          expect(values.descriptionStyle.color).toMatch(/^var\(--/);
+          expect(values.successMessageStyle.color).toBe(
+            values.descriptionStyle.color,
+          );
+          // Its role and overrides stay; only the colour is the strategy's.
+          expect(values.successMessageStyle.textStyleType).toBe('paragraph2');
+          expect(values.successMessageStyle.fontFamily).toBe('Inter');
+          expect(values.successMessageStyle).not.toHaveProperty(
+            'backgroundColor',
+          );
+        },
+      );
+    },
+  );
+
+  // The message's runs carry their own colour, which beats the style object's.
+  it.each(['support-me', 'request-payment', 'shop-section'])(
+    '%s: a rich-text success message takes the description’s palette reference in its runs',
+    (type) => {
+      const values = buildColorStrategyValues(
+        configs[type],
+        {
+          type,
+          descriptionStyle: { textStyleType: 'paragraph2' },
+          successMessageStyle: { textStyleType: 'paragraph2' },
+          successMessage: {
+            type: 'doc',
+            content: [
+              {
+                type: 'paragraph',
+                content: [
+                  {
+                    type: 'text',
+                    text: 'Thanks',
+                    marks: [{ type: 'textStyle', attrs: { color: '#e11d48' } }],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        'duotone',
+      ) as any;
+      const run = values.successMessage?.content[0].content[0];
+
+      expect(
+        run?.marks.find((mark: any) => mark.type === 'textStyle').attrs.color,
+      ).toBe(values.descriptionStyle.color);
+    },
+  );
+
+  it('writes no success message style the section lacks, so none is created without a role', () => {
+    const values = buildColorStrategyValues(
+      configs['support-me'],
+      {
+        type: 'support-me',
+        descriptionStyle: { textStyleType: 'paragraph2' },
+      },
+      'duotone',
+    );
+
+    expect(values).toHaveProperty('descriptionStyle');
+    expect(values).not.toHaveProperty('successMessageStyle');
+  });
+
+  it('writes no success message style when it exists but has no canonical role yet (textAlign only)', () => {
+    const values = buildColorStrategyValues(
+      configs['support-me'],
+      {
+        type: 'support-me',
+        descriptionStyle: { textStyleType: 'paragraph2' },
+        successMessageStyle: { textAlign: 'center' },
+      },
+      'duotone',
+    );
+
+    expect(values).toHaveProperty('descriptionStyle');
+    expect(values).not.toHaveProperty('successMessageStyle');
+  });
+
+  it('writes no success message when the description is not being assigned', () => {
+    const values = buildColorStrategyValues(
+      {
+        type: 'support-me',
+        fields: {
+          backgroundStyle: {
+            type: 'color',
+            valueConvertor: backgroundConvertor,
+          },
+          descriptionStyle: {
+            type: 'text-style',
+            visibilityAssessor: () => false,
+          },
+        },
+      } as unknown as ContentSettingsConfig<any>,
+      {
+        type: 'support-me',
+        successMessageStyle: { textStyleType: 'paragraph2' },
+      },
+      'duotone',
+    );
+
+    expect(values).not.toHaveProperty('successMessageStyle');
+  });
+
+  it('leaves the contact form’s success message as it was', () => {
+    const values = buildColorStrategyValues(
+      configs['contact-form'],
+      {
+        type: 'contact-form',
+        descriptionStyle: { textStyleType: 'paragraph2' },
+        successMessageStyle: { textStyleType: 'paragraph2' },
+        successMessage: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Thanks' }],
+            },
+          ],
+        },
+      },
+      'duotone',
+      { isBrandSite: true, brandPageType: 'brandSite' } as any,
+    );
+
+    expect(values).toHaveProperty('descriptionStyle');
+    expect(values).not.toHaveProperty('successMessageStyle');
+    expect(values).not.toHaveProperty('successMessage');
+  });
+
+  it('every field outside config has a slot and follows a field its config declares', () => {
+    Object.entries(STYLE_FIELDS_OUTSIDE_CONFIG).forEach(([type, fields]) => {
+      Object.entries(fields).forEach(([name, { follows: followed }]) => {
+        expect(
+          FIELD_SLOT_MAP[name],
+          `${type}.${name} has no slot`,
+        ).toBeDefined();
+        expect(
+          configs[type]?.fields?.[followed]?.type,
+          `${type}.${name} follows ${followed}, which its config does not declare`,
+        ).toBe('text-style');
+      });
+    });
+  });
+});
+
 /**
  * The unbound-inventory guard (BP-5886, 2026-08-11) — the audit that found the
  * stranded shapes heading, made permanent. Every colour-bearing field in every
@@ -1649,9 +1827,9 @@ describe('every colour field is bound or deliberately unbound (BP-5886)', () =>
   });
 
   it('knows its phantoms: bound names no config declares', () => {
-    // `successMessageStyle` is a content-model field (contact-form's success
-    // message) with no settings-config entry, so the config-driven applier can
-    // never write it. Kept bound as documentation of intent; this pins that the
+    // `successMessageStyle` is a content-model field with no settings-config
+    // entry. The applier reaches it only through `STYLE_FIELDS_OUTSIDE_CONFIG`
+    // (payment and shop); the contact form's stays unwritten. This pins that the
     // phantom set never grows silently.
     const phantoms = [
       ...Object.keys(FIELD_SLOT_MAP),

package/src/brand-page-maker/utils/apply-color-strategy.ts

@@ -3,6 +3,7 @@ import { BRAND_PAGE_TYPES, type BrandPageContext } from '@brand-page';
 import {
   FIELD_SLOT_MAP,
   raisedLayerFor,
+  STYLE_FIELDS_OUTSIDE_CONFIG,
   strategyRoleRefForField,
 } from '@shared/color-strategies/color-strategies';
 import {
@@ -16,6 +17,7 @@ import type {
   StrategyAnchors,
 } from '@shared/color-strategies/models';
 import { pairedRteTextField } from '@shared/color-strategies/rte-field-pairs';
+import { isCanonicalTextStyleType } from '@brand-page/models/styles.model';
 
 // A section colour field, narrowed to what the macro reads. Config is declared `<any>`,
 // so this keeps the applier honest without fighting the union.
@@ -24,6 +26,9 @@ interface ColorFieldLike {
   valueConvertor?: { convertBack: (value: string) => unknown };
   visibilityAssessor?: (content: unknown, context?: unknown) => boolean;
   disableTransparent?: DisableTransparent;
+  // A style field outside config names its own text field: it's kept out of
+  // `RTE_SECTION_FIELD_PAIRS`, which released migration-21 reads.
+  textField?: string;
 }
 
 /**
@@ -38,13 +43,17 @@ const ASSIGNABLE_FIELD_TYPES = new Set(['color', 'text-style']);
  * mapped to a slot, AND currently visible (the same `visibilityAssessor` the settings
  * panel uses). Shared by the picker's visibility gate and the applier, so the picker is
  * only shown when applying would actually change something.
+ *
+ * Plus any `STYLE_FIELDS_OUTSIDE_CONFIG` whose followed field made the list.
  */
 const assignableColorFields = (
   config: ContentSettingsConfig<any>,
   content: unknown,
   context?: BrandPageContext,
-): [string, ColorFieldLike][] =>
-  Object.entries(config.fields as Record<string, ColorFieldLike>).filter(
+): [string, ColorFieldLike][] => {
+  const assignable = Object.entries(
+    config.fields as Record<string, ColorFieldLike>,
+  ).filter(
     ([name, field]) =>
       !!field?.type &&
       ASSIGNABLE_FIELD_TYPES.has(field.type) &&
@@ -52,6 +61,28 @@ const assignableColorFields = (
       (!field.visibilityAssessor || field.visibilityAssessor(content, context)),
   );
 
+  // One with no canonical role yet is skipped: a colour written alone would link no role.
+  const outsideConfig = Object.entries(
+    STYLE_FIELDS_OUTSIDE_CONFIG[config.type] ?? {},
+  )
+    .filter(([name, { follows }]) => {
+      const style = (content as Record<string, unknown> | undefined)?.[name] as
+        | { textStyleType?: unknown }
+        | undefined;
+
+      return (
+        isCanonicalTextStyleType(style?.textStyleType) &&
+        assignable.some(([assigned]) => assigned === follows)
+      );
+    })
+    .map(([name, { textField }]): [string, ColorFieldLike] => [
+      name,
+      { type: 'text-style', textField },
+    ]);
+
+  return [...assignable, ...outsideConfig];
+};
+
 /**
  * Whether a strategy would actually assign at least one colour on THIS section as
  * it stands (mapped + visible). Used to hide the picker where applying would be a
@@ -188,9 +219,10 @@ export const buildColorStrategyValues = (
       // that doubles as the "nothing to do" test — no separate type guard here.
       const sectionType = contentRecord.type;
       const textField =
-        typeof sectionType === 'string'
+        field.textField ??
+        (typeof sectionType === 'string'
           ? pairedRteTextField(sectionType, name)
-          : undefined;
+          : undefined);
 
       if (textField) {
         const nextDoc = setRteTextColor(contentRecord[textField], ref);

package/src/brand-page-maker/utils/index.ts

@@ -5,5 +5,6 @@ export * from './url.util';
 export * from './slug.util';
 export * from './text.util';
 export * from './rich-text-editor.util';
-export * from './rte-render.util';
+export * from '@shared/rte-render.util';
 export * from './rte-sanitize.util';
+export * from './rte-authoring.util';