@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -42,8 +42,6 @@ import {
   DIVIDER_STYLES,
   MEDIA_TYPES,
   BUTTON_LINK_TYPE,
-  FONT_SIZE_BODY,
-  LINE_HEIGHT_BODY,
   MIN_TEXT_SIZE_PX,
   MAX_TEXT_SIZE_PX,
   TEXT_COLUMNS,
@@ -1269,10 +1267,6 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
     },
     textSize: {
       type: 'slider',
-      defaultValue: {
-        fontSize: FONT_SIZE_BODY,
-        lineHeight: LINE_HEIGHT_BODY,
-      },
       title: contentSettingsTr(`sizeTitle`),
       valueConvertor: textSizeValueConvertor,
       minLength: MIN_TEXT_SIZE_PX,

package/src/brand-page-maker/convertors/text-css-style-options.convertor.test.ts

@@ -0,0 +1,43 @@
+import { describe, test, expect } from 'vitest';
+import { textCSSStyleOptionsConvertor } from './text-css-style-options.convertor';
+
+const options = (selected: string[]) =>
+  ['bold', 'italic', 'underline', 'strikethrough'].map((value) => ({
+    value,
+    iconName: `maker-${value}`,
+    isSelected: selected.includes(value),
+  }));
+
+describe('text-css-style-options.convertor', () => {
+  test('writes explicit neutrals when every style is off, so an element can turn off its role styles', () => {
+    expect(
+      textCSSStyleOptionsConvertor.convertBack({ options: options([]) }),
+    ).toEqual({
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      textDecoration: 'none',
+    });
+  });
+
+  test('writes the selected styles', () => {
+    expect(
+      textCSSStyleOptionsConvertor.convertBack({
+        options: options(['bold', 'italic', 'underline', 'strikethrough']),
+      }),
+    ).toEqual({
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      textDecoration: 'underline line-through ',
+    });
+  });
+
+  test('reads the neutrals back as unselected', () => {
+    const converted = textCSSStyleOptionsConvertor.convert({
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      textDecoration: 'none',
+    });
+
+    expect(converted.options.every((option) => !option.isSelected)).toBe(true);
+  });
+});

package/src/brand-page-maker/convertors/text-css-style-options.convertor.ts

@@ -7,10 +7,12 @@ const VALUE_UNDERLINE = 'underline';
 const VALUE_STRIKETHROUGH = 'strikethrough';
 
 const FONT_STYLE_ITALIC = 'italic';
+const FONT_STYLE_NORMAL = 'normal';
 const FONT_WEIGHT_BOLD = 'bold';
 const FONT_WEIGHT_NORMAL = 'normal';
 const TEXT_DECORATION_UNDERLINE = 'underline';
 const TEXT_DECORATION_STRIKETHROUGH = 'line-through';
+const TEXT_DECORATION_NONE = 'none';
 
 export const textCSSStyleOptionsConvertor: OptionsConvertor<TextStyleDeclarationWithoutTextAlign> =
   {
@@ -55,10 +57,12 @@ export const textCSSStyleOptionsConvertor: OptionsConvertor<TextStyleDeclaration
         ? FONT_WEIGHT_BOLD
         : FONT_WEIGHT_NORMAL;
 
+      // "Off" is an explicit neutral, not unset: unset falls back to the linked role, so a role's
+      // italic/underline/strike could never be turned off on the element.
       const fontStyle = config.options.find((x) => x.value === VALUE_ITALIC)
         ?.isSelected
         ? FONT_STYLE_ITALIC
-        : undefined;
+        : FONT_STYLE_NORMAL;
 
       let textDecoration = '';
 
@@ -75,7 +79,7 @@ export const textCSSStyleOptionsConvertor: OptionsConvertor<TextStyleDeclaration
       return {
         fontWeight,
         fontStyle,
-        textDecoration,
+        textDecoration: textDecoration || TEXT_DECORATION_NONE,
       };
     },
   };

package/src/brand-page-maker/convertors/text-size-value.convertor.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { textSizeValueConvertor } from './text-size-value.convertor';
+
+describe('textSizeValueConvertor', () => {
+  it('converts an em fontSize to a rounded px string', () => {
+    expect(textSizeValueConvertor.convert({ fontSize: '1.5em' })).toBe('24');
+  });
+
+  it('falls back to the default size when fontSize is unset', () => {
+    expect(textSizeValueConvertor.convert({})).toBe('12');
+  });
+
+  // BP-5969 (R6, nit) — the hidden `textSize` field lost its `defaultValue`, so a text block that
+  // never wrote one now hands this convertor `undefined`, not `{}`.
+  it('tolerates an undefined value', () => {
+    expect(textSizeValueConvertor.convert(undefined)).toBe('12');
+  });
+
+  it('converts a px string back to an em fontSize', () => {
+    expect(textSizeValueConvertor.convertBack('24')).toEqual({
+      fontSize: '1.5em',
+    });
+  });
+});

package/src/brand-page-maker/convertors/text-size-value.convertor.ts

@@ -2,19 +2,23 @@ import type { ValueConvertor } from '../models';
 import { DEFAULT_FONT_SIZE } from '@brand-page/constants/';
 import { pxToEm, emToPx } from '../utils/text.util';
 
-export const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string> =
-  {
-    convertBackToMultipleValues: false,
+export const textSizeValueConvertor: ValueConvertor<
+  BrandPageCssStyle | undefined,
+  string
+> = {
+  convertBackToMultipleValues: false,
 
-    convert(value: BrandPageCssStyle): string {
-      if (!value.fontSize) return DEFAULT_FONT_SIZE.toString();
+  // R6 dropped `textSize`'s `defaultValue` (view-model.util.ts no longer backfills it), so this
+  // hidden field's own value is genuinely undefined now, not just missing `fontSize`.
+  convert(value: BrandPageCssStyle | undefined): string {
+    if (!value?.fontSize) return DEFAULT_FONT_SIZE.toString();
 
-      return Math.ceil(parseFloat(emToPx(value.fontSize))).toString();
-    },
+    return Math.ceil(parseFloat(emToPx(value.fontSize))).toString();
+  },
 
-    convertBack(valuePx: string): BrandPageCssStyle {
-      return {
-        fontSize: pxToEm(valuePx),
-      };
-    },
-  };
+  convertBack(valuePx: string): BrandPageCssStyle {
+    return {
+      fontSize: pxToEm(valuePx),
+    };
+  },
+};

package/src/brand-page-maker/default-getters/payment-text-and-border-color.default-getter.ts

@@ -1,30 +1,15 @@
-import type { TextContent } from '@brand-page';
-import { isTransparentColour } from '@brand-page/utils/color.util';
 import { RGBAtoHex } from '@utils/helpers';
 import type { DefaultGetter } from '../models';
 
+// BP-5969 (ADR-0020): a typography role carries no colour, so there is no single site
+// "default text colour" any more — colour is contrast-derived per surface and baked onto
+// content at birth (`applyTextContrast`). This getter returns the button-label colour as a
+// brand-legible starting point; the birth-time bake refines the actual per-surface colour.
 export const paymentTextAndBorderColorFieldDefaultGetter: DefaultGetter<
   BrandPageCssStyle
-> = (brandPage, id): BrandPageCssStyle => {
-  const content = brandPage.pages
-    .flatMap((p) => p.contents)
-    .find((c) => c.id === id) as TextContent;
-
-  const contentBackgroundColor =
-    content.backgroundColor?.background ||
-    content.backgroundColor?.backgroundColor;
-
-  const color: string =
-    contentBackgroundColor && !isTransparentColour(contentBackgroundColor)
-      ? RGBAtoHex(brandPage.styles.buttonStyles.style.color)
-      : RGBAtoHex(
-          brandPage.styles.textStyles.textStyleOptions.paragraphs?.style?.color,
-        );
-
-  return {
-    color,
-  };
-};
+> = (brandPage): BrandPageCssStyle => ({
+  color: RGBAtoHex(brandPage.styles.buttonStyles.style.color),
+});
 
 export const shopBorderColorFieldDefaultGetter: DefaultGetter<
   BrandPageCssStyle

package/src/brand-page-maker/default-getters/text-color.default-getter.ts

@@ -1,32 +1,16 @@
-import type { TextContent } from '@brand-page';
-import { isTransparentColour } from '@brand-page/utils/color.util';
 import { RGBAtoHex } from '@utils/helpers';
 import type { DefaultGetter } from '../models';
 
+// BP-5969 (ADR-0020): a typography role carries no colour, so there is no single site
+// "default text colour" any more — colour is contrast-derived per surface and baked onto
+// content at birth (`applyTextContrast`). This getter returns the button-label colour as a
+// brand-legible starting point; the birth-time bake refines the actual per-surface colour.
 export const textColorFieldDefaultGetter: DefaultGetter<BrandPageCssStyle> = (
   brandPage,
-  id,
 ): BrandPageCssStyle => {
   if (brandPage.pages.length === 0) {
     return {};
   }
 
-  const content = brandPage.pages
-    .flatMap((p) => p.contents)
-    .find((c) => c.id === id) as TextContent;
-
-  const contentBackgroundColor =
-    content.backgroundColor?.background ||
-    content.backgroundColor?.backgroundColor;
-
-  const color: string =
-    contentBackgroundColor && !isTransparentColour(contentBackgroundColor)
-      ? RGBAtoHex(brandPage.styles.buttonStyles.style.color)
-      : RGBAtoHex(
-          brandPage.styles.textStyles.textStyleOptions.paragraphs?.style?.color,
-        );
-
-  return {
-    color,
-  };
+  return { color: RGBAtoHex(brandPage.styles.buttonStyles.style.color) };
 };