@designcrowd/library.brand-page 6.2.13 → 6.2.14

package/package.json

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

package/src/brand-page/utils/container-text-color.util.ts

@@ -9,8 +9,8 @@
  * reason `resolveTextColor` lives in one place (`text-style.util.ts`).
  *
  * MIGRATION-22 SNAPSHOT DEPENDENCY: the v21 -> v22 colour bake calls
- * `containerTextColorDefaults` and `titleSurfaceContrastFill`. Pin that migration's behaviour
- * before changing either helper after it releases.
+ * `containerTextColorDefaults`, `titleSurfaceContrastFill` and `isButtonLabelField`. Pin that
+ * migration's behaviour before changing any of them after it releases.
  */
 import type {
   Content,
@@ -180,7 +180,7 @@ const NON_SECTION_SURFACE_KEYS = new Set<ContentTextStylePropertyKey>([
  * contrast the PAGE instead and collide with the fill (the default theme paints both from the same
  * brand role, hiding the text).
  */
-const isButtonLabelField = (
+export const isButtonLabelField = (
   content: Content,
   key: ContentTextStylePropertyKey,
 ): boolean => key === 'titleStyle' && isButtonContent(content);

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/new-brandcontact-every-section.v22.json

@@ -646,8 +646,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -665,8 +664,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -684,8 +682,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -708,8 +705,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "fieldRole": "button"
         },

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/new-brandpage-every-section.v22.json

@@ -646,8 +646,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -665,8 +664,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -684,8 +682,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -708,8 +705,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "fieldRole": "button"
         },

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/new-brandsite-every-section.v22.json

@@ -646,8 +646,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -665,8 +664,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -684,8 +682,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "url": "",
           "colorReplacements": [],
@@ -708,8 +705,7 @@
             "textStyleType": "button",
             "textAlign": "center",
             "lineHeight": "1.5",
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "fieldRole": "button"
         },

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/real-brandcontact.v22.json

@@ -659,8 +659,7 @@
             "textAlign": "center",
             "lineHeight": "1.5",
             "applyAutoScale": false,
-            "textStyleType": "button",
-            "color": "var(--palette-0)"
+            "textStyleType": "button"
           },
           "colorReplacements": [],
           "page": ""

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/real-brandpage-general-link.v22.json

@@ -531,8 +531,7 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": false,
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "modalImageUrl": "",
           "clickActionField": "url",
@@ -551,8 +550,7 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": false,
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "modalImageUrl": "https://bc-user-uploads.brandcrowd.com/public/media-uat4/b0377e32-964c-430d-b0c4-05062e5d240d/fb0ec8f5-713e-43e0-8a0a-469109ca5876.png",
           "clickActionField": "modalImageUrl",
@@ -571,8 +569,7 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": false,
-            "letterSpacing": "0",
-            "color": "var(--palette-1)"
+            "letterSpacing": "0"
           },
           "modalImageUrl": "",
           "clickActionField": "page",

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/real-brandpage-links.v22.json

@@ -659,8 +659,7 @@
             "textAlign": "center",
             "lineHeight": "1.5",
             "applyAutoScale": false,
-            "textStyleType": "button",
-            "color": "var(--palette-0)"
+            "textStyleType": "button"
           },
           "colorReplacements": [],
           "page": ""

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

@@ -48,6 +48,11 @@ import { DETACHED_UNSET_EFFECTIVE } from '../text-role-reconnect.util';
 import * as textRoleCss from '../text-role-css.util';
 import * as rteRoleLift from '../rte-role-lift.util';
 import { applyTextContrast } from '../container-text-color.util';
+import {
+  resolveColorReference,
+  STRATEGY_COPY_MIN_CONTRAST,
+} from '../color-palette.util';
+import Color from 'color';
 import {
   PRODUCTION_BUTTON_DEFAULTS,
   PRODUCTION_HEADER_BUTTON_STYLE,
@@ -3103,6 +3108,89 @@ describe('migration-22 · bakeElementColours (D — freeze resolved colour)', ()
   });
 });
 
+describe('migration-22 · standalone button label colour (plain text on the one global button fill)', () => {
+  // The old logo-token sites: the page text colour, and so the base coat, is also the button fill.
+  const linkButtonSite = (content: Record<string, unknown>): BrandPageModel => {
+    const options = TextStyles.GetDefaultTextStyle().textStyleOptions;
+
+    setRoleColor(options.paragraphs.style, 'var(--palette-0)');
+    setRoleColor(options.buttons.style, 'var(--palette-1)');
+
+    return {
+      pages: [{ contents: [content] }],
+      styles: {
+        textStyles: { textFontFamily: 'lato', textStyleOptions: options },
+        buttonStyles: {
+          style: {
+            backgroundColor: 'var(--palette-0)',
+            color: 'var(--palette-1)',
+          },
+        },
+        colors: [
+          { id: 'palette-0', value: '#1b2a41', type: 'palette' },
+          { id: 'palette-1', value: '#f4f1de', type: 'palette' },
+        ],
+      },
+      brandPageType: BRAND_PAGE_TYPES.default,
+    } as unknown as BrandPageModel;
+  };
+
+  // WCAG ratio of what the label finally draws (its own colour, else the button text colour it
+  // inherits) on the global button fill.
+  const labelContrastOnFill = (
+    model: BrandPageModel,
+    label: { color?: string },
+  ): number => {
+    const { buttonStyles, colors } = model.styles;
+    const resolve = (value: string): string =>
+      resolveColorReference(value, colors, { withRoleDefaults: true });
+
+    return Color(resolve(label.color || buttonStyles.style.color!)).contrast(
+      Color(resolve(buttonStyles.style.backgroundColor!)),
+    );
+  };
+
+  it.each(['general-link', 'email', 'facebook'])(
+    'a %s label on no role reads on the global button fill',
+    async (type) => {
+      const model = await runMigration22(
+        linkButtonSite({
+          type,
+          title: 'Get A Quote',
+          titleStyle: { textAlign: 'center', fontFamily: 'Lato' },
+        }),
+      );
+      const content = model.pages[0].contents[0] as unknown as {
+        title: unknown;
+        titleStyle: { color?: string; textStyleType?: string };
+      };
+
+      expect(typeof content.title).toBe('string'); // not RTE: no run mark can hold a colour
+      expect(content.titleStyle.textStyleType).toBe('button');
+      expect(
+        labelContrastOnFill(model, content.titleStyle),
+      ).toBeGreaterThanOrEqual(STRATEGY_COPY_MIN_CONTRAST);
+    },
+  );
+
+  it('a label on the retired Buttons role still reads on the global button fill', async () => {
+    const model = await runMigration22(
+      linkButtonSite({
+        type: 'general-link',
+        title: 'Reviews',
+        titleStyle: { textStyleType: 'buttons' },
+      }),
+    );
+    const { titleStyle } = model.pages[0].contents[0] as unknown as {
+      titleStyle: { color?: string };
+    };
+
+    expect(labelContrastOnFill(model, titleStyle)).toBeGreaterThanOrEqual(
+      STRATEGY_COPY_MIN_CONTRAST,
+    );
+  });
+});
+
 describe('migration-22 · convertPlainRteFields (B1 — plain text → Tiptap doc)', () => {
   it('converts a plain-string RTE field to a Tiptap doc', async () => {
     const content = {

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

@@ -44,6 +44,7 @@ import {
 } from '@shared/color-strategies/rte-field-pairs';
 import {
   containerTextColorDefaults,
+  isButtonLabelField,
   titleSurfaceContrastFill,
 } from '../container-text-color.util';
 import {
@@ -776,8 +777,9 @@ const roleColour = (
  * and the role colour (E) changes no pixels. migration-21 already baked element→frame→role
  * colour into RTE runs, so the only uncoloured runs reaching here inherit the base coat;
  * non-RTE fields (21 left them alone) resolve element→container-default→role→base coat.
- * `buttonTextStyle` is excluded — the button label takes its colour from `buttonStyles`,
- * never the base coat. A social-links section's unset icon fill is frozen here too.
+ * `buttonTextStyle` and a link button's `titleStyle` are excluded — the button label takes its
+ * colour from `buttonStyles`, never the base coat. A social-links section's unset icon fill is
+ * frozen here too.
  */
 export const bakeElementColours = (
   brandPageModel: BrandPageModel,
@@ -812,6 +814,11 @@ export const bakeElementColours = (
       for (const key of Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS)) {
         if (key === 'buttonTextStyle' || rteStyleFields.has(key)) continue;
 
+        // A link button's label sits on the global button fill, not the page the base coat
+        // contrasts: left bare it inherits the button text colour (`isButtonLabelField`).
+        if (isButtonLabelField(content, key as ContentTextStylePropertyKey))
+          continue;
+
         const style = fields[key] as RawStyleObject | undefined;
 
         if (!style || !isBlankColorValue(style.color)) continue;

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

@@ -25,7 +25,10 @@ import {
 import { applyTextContrast } from '@brand-page/utils/container-text-color.util';
 import { authorContentRteFields } from '@brand-page-maker/utils/rte-authoring.util';
 import * as contentFactories from './content-settings';
-import { isTiptapDocument } from '@brand-page-maker/utils';
+import {
+  isTiptapDocument,
+  mapBrandPageContentToContentSettingsItem,
+} from '@brand-page-maker/utils';
 import { setLocaleAsync } from '@src/composables/useTranslate';
 import {
   BRAND_PAGE_TYPES,
@@ -215,6 +218,51 @@ describe('createInitialBannerSectionContent — RTE source detail', () => {
   });
 });
 
+describe('createInitialMailingListContent — default title', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  const blocksOf = (doc: unknown) =>
+    (
+      doc as {
+        content?: {
+          attrs?: { textAlign?: string };
+          content?: { text?: string }[];
+        }[];
+      }
+    ).content ?? [];
+
+  it('is a centred doc, matching its title style', () => {
+    const content = createInitialMailingListContent(opts);
+    const blocks = blocksOf(content.title);
+
+    expect(blocks[0].content?.[0]?.text).toBe('Join mailing list');
+
+    for (const block of blocks) {
+      expect(block.attrs?.textAlign).toBe('center');
+    }
+
+    expect(content.titleStyle.textAlign).toBe('center');
+  });
+
+  // The editor loads a block with no title through this factory alone, without the add-content
+  // step that stamps alignment from the style, so the doc has to carry it.
+  it('is centred on an existing block with no title when the editor loads it', () => {
+    const item = mapBrandPageContentToContentSettingsItem(
+      { id: 'ml-1', type: 'mailing-list', buttonText: 'SUBSCRIBE' } as never,
+      opts,
+    );
+    const blocks = blocksOf(item.settings.content.title);
+
+    expect(blocks[0].content?.[0]?.text).toBe('Join mailing list');
+
+    for (const block of blocks) {
+      expect(block.attrs?.textAlign).toBe('center');
+    }
+  });
+});
+
 // Every text a factory creates is linked to one of the ten roles at birth, so nothing new needs the
 // reconnect, and saves no typography of its own, so every role edit reaches it. The two button
 // factories are curried by their content type, and capitalise their translated title, so they need

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

@@ -306,7 +306,9 @@ export const createInitialMailingListContent = (
     type: 'mailing-list',
     topPadding: 0,
     bottomPadding: 0,
-    title: rteDoc(contentSettingsTr(`mailingListTitle`)),
+    // Centred in the doc itself: the editor fills a loaded block's missing title from this factory
+    // alone, without the add-content step that stamps alignment from `titleStyle`.
+    title: rteDoc(contentSettingsTr(`mailingListTitle`), 'center'),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
     titleStyle: {