@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/models/index.ts

@@ -6,7 +6,6 @@
 //  +--------------------------------------------------------------------------+
 
 import type {
-  FontFamilyKey,
   ImagesSectionContentDisplayStyle,
   HeaderDisplayStyle,
   FooterDisplayStyle,
@@ -25,6 +24,7 @@ import { VIEWPORTS } from './brand-page-context.model';
 import { NavigationDesktop, NavigationMobile } from './navigation-styles.model';
 import type {
   TextStyleDeclaration,
+  RteTextRole,
   LegacyTextStylesInput,
 } from './styles.model';
 import { TEXT_STYLE_TYPES, TextStyles } from './styles.model';
@@ -324,8 +324,8 @@ export interface TextContent extends Content {
   /**
    * @deprecated Use `textStyle` instead. For backward compatibility.
    */
-  textSize: BrandPageCssStyle;
-  textStyle: TextStyleDeclaration;
+  textSize?: BrandPageCssStyle;
+  textStyle: RteTextRole;
   /**
    * @deprecated Use `textStyle` instead. For backward compatibility.
    */
@@ -346,9 +346,9 @@ export interface ProfileContent extends Content {
   colorReplacements: ColorReplacement[];
   mediaType?: string;
   size?: string;
-  descriptionStyle: TextStyleDeclaration;
-  nameStyle: TextStyleDeclaration;
-  titleStyle: TextStyleDeclaration;
+  descriptionStyle: RteTextRole;
+  nameStyle: RteTextRole;
+  titleStyle: RteTextRole;
 }
 
 export interface Address {
@@ -364,7 +364,7 @@ export interface MailingListContent extends Content {
   acceptedFields?: 'emailOnly' | 'nameAndEmail';
   title: RichTextValue;
   buttonText: string;
-  titleStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
   buttonTextStyle: TextStyleDeclaration;
   backgroundStyle?: BrandPageCssStyle;
 }
@@ -430,11 +430,11 @@ export interface ContactFormContent extends Content {
   responseEmail: string;
   imageUrl?: string;
   layoutStyle?: string | null;
-  titleStyle?: TextStyleDeclaration;
-  descriptionStyle?: TextStyleDeclaration;
+  titleStyle?: RteTextRole;
+  descriptionStyle?: RteTextRole;
   buttonTextStyle?: TextStyleDeclaration;
   backgroundStyle?: BrandPageCssStyle;
-  successMessageStyle?: TextStyleDeclaration;
+  successMessageStyle?: RteTextRole;
   cardStyle?: BrandPageCssStyle;
   colorReplacements?: ColorReplacement[];
   mediaType?: string;
@@ -452,8 +452,8 @@ export interface BannerSectionContent extends Content {
   email?: string;
   tel?: string;
   displayStyle: string;
-  titleStyle: TextStyleDeclaration;
-  descriptionStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
+  descriptionStyle: RteTextRole;
   backgroundStyle: BrandPageCssStyle;
   cardStyle: BrandPageCssStyle;
   colorReplacements: ColorReplacement[];
@@ -532,7 +532,7 @@ export interface TextItem {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
   text: RichTextValue;
-  textStyle: TextStyleDeclaration;
+  textStyle: RteTextRole;
 
   // overrides for personalisation
   textOverride?: string;
@@ -557,8 +557,8 @@ export interface MediaSection extends Content {
   description: RichTextValue;
   displayStyle: ImagesSectionContentDisplayStyle;
   items: TextShapeItem[] | TextMediaItem[];
-  titleStyle: TextStyleDeclaration;
-  descriptionStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
+  descriptionStyle: RteTextRole;
   headingStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
   backgroundStyle: BrandPageCssStyle;
@@ -589,7 +589,7 @@ export interface TestimonialSectionContent extends Content {
   title: RichTextValue;
   displayStyle: string;
   items: TestimonialItems[];
-  titleStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
   testimonialStyle: TextStyleDeclaration;
   nameStyle: TextStyleDeclaration;
   positionStyle: TextStyleDeclaration;
@@ -604,8 +604,8 @@ export interface AboutSectionContent extends Content {
   title: RichTextValue;
   paragraph: RichTextValue;
   displayStyle: string;
-  titleStyle: TextStyleDeclaration;
-  paragraphStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
+  paragraphStyle: RteTextRole;
   backgroundStyle: BrandPageCssStyle;
   colorReplacements: ColorReplacement[];
   mediaType?: string;
@@ -637,7 +637,7 @@ export interface SocialLinksContent extends Content {
   iconFillStyles: BrandPageCssStyle;
   iconBackgroundStyles: BrandPageCssStyle;
   backgroundStyles: BrandPageCssStyle;
-  titleStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
 }
 
 export const DIVIDER_STYLES = {
@@ -664,8 +664,8 @@ export interface BookingSectionContent extends Content {
   url: string;
   email?: string;
   tel?: string;
-  titleStyle: TextStyleDeclaration;
-  descriptionStyle: TextStyleDeclaration;
+  titleStyle: RteTextRole;
+  descriptionStyle: RteTextRole;
   backgroundStyle: BrandPageCssStyle;
   buttonPageId: string;
   buttonLinkType: ButtonLinkType;
@@ -867,8 +867,6 @@ export abstract class AbstractPageFooterStyles {
   logoTemplateImage: LogoTemplateImageModel | undefined;
   logoImageBase64Url?: string;
   socialLinks: LinksItem[];
-  /** @deprecated For backward compatibility only */
-  textFontFamily?: FontFamilyKey;
   viewport: ViewportsType;
   logoImageHeight: string | undefined;
   logoImageWidth: string | undefined;
@@ -888,8 +886,8 @@ export abstract class AbstractPageFooterStyles {
       `© ${new Date(
         Date.now(),
       ).getFullYear()} by [Company Name]. All Rights Reserved.`;
+    // Migration-01 reads the legacy role only for v0 input; newer data must never mint `paragraphs`.
     this.copyrightStyle = options.copyrightStyle || {
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
       textAlign: 'center',
     };
 
@@ -951,7 +949,17 @@ export abstract class AbstractPageFooterStyles {
     // explicit black, a not-yet-migrated model renders the SVG default. Seeding a site
     // text colour here need not read against the footer band.
     this.iconStyle = options.iconStyle ? { ...options.iconStyle } : {};
-    this.textFontFamily = options.textFontFamily;
+
+    // Retired (`0036-retire-text-font-family.md`): carried as stored, so construction keeps the
+    // released migrations' input unchanged (`legacy-migrations.md`); migration-22 deletes it.
+    const { textFontFamily } = options as unknown as {
+      textFontFamily?: unknown;
+    };
+
+    if (textFontFamily !== undefined) {
+      (this as unknown as Record<string, unknown>)['textFontFamily'] =
+        textFontFamily;
+    }
   }
 }
 
@@ -1018,6 +1026,7 @@ export interface CookieOptions {
 export interface SaveContactOptions {
   isSavingEnabled: boolean;
   hideBranding: boolean;
+  buttonTextStyle?: TextStyleDeclaration;
 }
 
 export class BrandPageModel {
@@ -1073,6 +1082,19 @@ export class BrandPageModel {
   constructor(options: BrandPageData) {
     this.v = options.v || 0;
 
+    const footerOptions = <T extends Partial<AbstractPageFooterStyles>>(
+      footer: T | undefined,
+    ): T | undefined =>
+      this.v < 22 && footer?.copyrightStyle === undefined
+        ? ({
+            ...footer,
+            copyrightStyle: {
+              textStyleType: TEXT_STYLE_TYPES.paragraphs,
+              textAlign: 'center',
+            },
+          } as T)
+        : footer;
+
     this.styles = new PageStyles(options.styles);
 
     // `textStyles.style` is retired, so it is read untyped here (the
@@ -1126,7 +1148,7 @@ export class BrandPageModel {
       // referencified by migration-21 — else legacy footer icons stay colourless.
       this.footerStyles = new PageFooterDesktop(
         {
-          ...options.footerStyles,
+          ...footerOptions(options.footerStyles),
         },
         theme,
       );
@@ -1154,12 +1176,12 @@ export class BrandPageModel {
       });
 
       this.pageFooterMobile = new PageFooterMobile(
-        options.pageFooterMobile,
+        footerOptions(options.pageFooterMobile),
         theme,
       );
 
       this.pageFooterDesktop = new PageFooterDesktop(
-        options.pageFooterDesktop,
+        footerOptions(options.pageFooterDesktop),
         theme,
       );
     }

package/src/brand-page/models/navigation-styles.model.test.ts

@@ -1,5 +1,9 @@
 import { describe, test, expect } from 'vitest';
-import { resolveSubNavItemBackgroundColor } from './navigation-styles.model';
+import {
+  NavigationDesktop,
+  NavigationMobile,
+  resolveSubNavItemBackgroundColor,
+} from './navigation-styles.model';
 
 // BP-5886 (colour-v2): the sub-nav item background is painted by two renderers
 // (tab-nav carousel dropdown + hamburger side menu). This helper is the single
@@ -47,3 +51,75 @@ describe('resolveSubNavItemBackgroundColor', () => {
     );
   });
 });
+
+// The hamburger's role comes from migration (starting role `button`), never from the constructor.
+describe('NavigationMobile hamburger default role', () => {
+  test('a new mobile nav leaves the hamburger default button style without a role', () => {
+    const navigation = new NavigationMobile();
+
+    expect(
+      navigation.hamburgerMenuStyle.defaultButtonStyle.textStyleType,
+    ).toBeUndefined();
+  });
+});
+
+// Typography defaults sit under the saved style, and an element's own value beats its role, so a
+// default on role-linked text would pin it. Unlinked text keeps them: it has no role to draw from,
+// and released migrations read this constructor's output.
+describe('navigation typography defaults', () => {
+  const TYPOGRAPHY = ['fontFamily', 'fontSize', 'fontWeight'] as const;
+
+  test('a nav on no role keeps the Lato 1em defaults on its tabs and hamburger', () => {
+    const navigation = new NavigationDesktop({
+      defaultButtonStyle: { textAlign: 'left' },
+    });
+
+    expect(navigation.defaultButtonStyle).toMatchObject({
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'normal',
+    });
+    expect(navigation.hamburgerMenuStyle.defaultButtonStyle.fontFamily).toBe(
+      'Lato',
+    );
+  });
+
+  test('a nav on a retired role keeps the defaults too', () => {
+    const navigation = new NavigationDesktop({
+      defaultButtonStyle: { textStyleType: 'buttons' },
+      hamburgerMenuStyle: { defaultButtonStyle: { textStyleType: 'buttons' } },
+    });
+
+    expect(navigation.defaultButtonStyle.fontFamily).toBe('Lato');
+    expect(navigation.hamburgerMenuStyle.defaultButtonStyle.fontFamily).toBe(
+      'Lato',
+    );
+  });
+
+  test('a role-linked tab and hamburger get no typography defaults', () => {
+    const navigation = new NavigationMobile({
+      defaultButtonStyle: { textStyleType: 'paragraph1' },
+      hamburgerMenuStyle: { defaultButtonStyle: { textStyleType: 'button' } },
+    });
+
+    for (const prop of TYPOGRAPHY) {
+      expect(navigation.defaultButtonStyle[prop]).toBeUndefined();
+      expect(
+        navigation.hamburgerMenuStyle.defaultButtonStyle[prop],
+      ).toBeUndefined();
+    }
+  });
+
+  test('a role-linked tab keeps its own override and its non-typography defaults', () => {
+    const navigation = new NavigationDesktop({
+      defaultButtonStyle: { textStyleType: 'paragraph1', fontSize: '1em' },
+    });
+
+    expect(navigation.defaultButtonStyle).toMatchObject({
+      fontSize: '1em',
+      borderBottomWidth: '0px',
+      textAlign: 'center',
+    });
+    expect(navigation.defaultButtonStyle.fontFamily).toBeUndefined();
+  });
+});

package/src/brand-page/models/navigation-styles.model.ts

@@ -14,10 +14,19 @@ import {
 
 import type { Theme, ViewportsType } from './index';
 import { VIEWPORTS } from './index';
-import type { TextStyleDeclaration } from './styles.model';
-import { TEXT_STYLE_TYPES } from './index';
+import {
+  CANONICAL_TEXT_STYLE_TYPES,
+  type TextStyleDeclaration,
+} from './styles.model';
 import cloneDeep from 'lodash.clonedeep';
 
+// A typography default sits under the saved style, and a style's own value beats its role, so
+// only text on none of the ten roles may get one. Released migrations read the unlinked output.
+const isRoleLinked = (style: Partial<TextStyleDeclaration> | undefined) =>
+  (CANONICAL_TEXT_STYLE_TYPES as readonly unknown[]).includes(
+    style?.textStyleType,
+  );
+
 export class NavigationMenuStyles {
   public defaultButtonStyle: TextStyleDeclaration;
   public selectedButtonStyle: BrandPageCssStyle;
@@ -149,11 +158,15 @@ abstract class NavigationStyles implements NavigationMenuStyles {
         borderRightWidth: '0px',
         borderTopWidth: '0px',
         color: theme?.primaryColor,
-        fontSize: FONT_SIZE_BODY,
-        fontFamily: FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-        textDecoration: DEFAULT_TEXT_DECORATION,
-        fontWeight: FONT_WEIGHT_NORMAL,
-        fontStyle: DEFAULT_FONT_STYLE,
+        ...(isRoleLinked(option?.defaultButtonStyle)
+          ? {}
+          : {
+              fontSize: FONT_SIZE_BODY,
+              fontFamily: FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+              textDecoration: DEFAULT_TEXT_DECORATION,
+              fontWeight: FONT_WEIGHT_NORMAL,
+              fontStyle: DEFAULT_FONT_STYLE,
+            }),
         textAlign: DEFAULT_TEXT_ALIGN,
       },
       option?.defaultButtonStyle || {},
@@ -183,14 +196,18 @@ abstract class NavigationStyles implements NavigationMenuStyles {
 
     this.isLogoVisible = option?.isLogoVisible || true;
 
+    const { fontFamily: _hamburgerFontFamily, ...linkedHamburgerDefaults } =
+      defaultHamburgerNavigation.defaultButtonStyle;
+
     this.hamburgerMenuStyle = new NavigationMenuStyles(
       option?.hamburgerMenuStyle || {},
       {
         defaultButtonStyle: {
-          ...defaultHamburgerNavigation.defaultButtonStyle,
+          ...(isRoleLinked(option?.hamburgerMenuStyle?.defaultButtonStyle)
+            ? linkedHamburgerDefaults
+            : defaultHamburgerNavigation.defaultButtonStyle),
           backgroundColor: theme?.secondaryColor,
           color: theme?.primaryColor,
-          textStyleType: option ? undefined : TEXT_STYLE_TYPES.buttons,
           textAlign: option?.defaultButtonStyle?.textAlign || 'left',
         },
         selectedButtonStyle: {

package/src/brand-page/models/payment.model.ts

@@ -1,6 +1,12 @@
 import type { Content } from './content.model';
 import type { ProductModel } from './shop.model';
 import type { TextStyleDeclaration } from './styles.model';
+import type { JSONContent } from '@tiptap/vue-3';
+
+// BP-5969: shop/request-payment/support-me title & description are now RTE — a Tiptap doc, or a
+// plain `string` on a pre-migration site. Structurally identical to models `RichTextValue`; inlined
+// here to avoid a cycle with models/index (which imports this file).
+type RteText = string | JSONContent;
 
 export const STRIPE_ADDRESS_LIMITS = {
   name: { min: 1, max: 350 },
@@ -131,11 +137,11 @@ export interface RequestPaymentConfig extends PaymentConfig {
 
 export interface RequestPaymentContent extends Content {
   type: 'request-payment';
-  description: string;
+  description: RteText;
   displayStyle: string;
   requestPaymentConfig: RequestPaymentConfig;
   successMessage: string;
-  title: string;
+  title: RteText;
   fillColor: BrandPageCssStyle;
   defaultBorderColor: BrandPageCssStyle;
   selectedBorderColor: BrandPageCssStyle;
@@ -145,6 +151,7 @@ export interface RequestPaymentContent extends Content {
   textColor?: BrandPageCssStyle;
   titleStyle?: TextStyleDeclaration;
   descriptionStyle?: TextStyleDeclaration;
+  successMessageStyle?: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
   buttonTextStyle?: TextStyleDeclaration;
   backgroundStyle?: BrandPageCssStyle;
@@ -159,17 +166,18 @@ export interface ShopContentConfig extends PaymentConfig {
 
 export interface ShopContent extends Content {
   type: 'shop-section';
-  description: string;
+  description: RteText;
   successMessage: string;
   products: ProductModel[];
   displayStyle: string;
   aspectRatio: string;
-  title: string;
+  title: RteText;
   fillColor: BrandPageCssStyle;
   defaultBorderColor: BrandPageCssStyle;
   textColor?: BrandPageCssStyle;
   titleStyle?: TextStyleDeclaration;
   descriptionStyle?: TextStyleDeclaration;
+  successMessageStyle?: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
   buttonTextStyle?: TextStyleDeclaration;
   backgroundStyle: BrandPageCssStyle;
@@ -182,14 +190,15 @@ export interface SupportMeConfig extends PaymentConfig {
 
 export interface SupportMeContent extends Content {
   type: 'support-me';
-  title: string;
-  description: string;
+  title: RteText;
+  description: RteText;
   displayStyle: string;
   successMessage: string;
   supportMeConfig: SupportMeConfig;
   titleStyle: TextStyleDeclaration;
   headingStyle: TextStyleDeclaration;
   descriptionStyle: TextStyleDeclaration;
+  successMessageStyle?: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
   backgroundStyle?: BrandPageCssStyle;

package/src/brand-page/models/styles.model.test.ts

@@ -0,0 +1,104 @@
+import { describe, test, expect, beforeAll } from 'vitest';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { TEXT_STYLE_TYPES_DISPLAY_NAME_MAP, TextStyles } from './styles.model';
+import { BrandPageModel } from './index';
+import { setLocaleAsync } from '@src/composables/useTranslate';
+
+const MAKER_LOCALE_COUNT = 7;
+
+const readLocales = (
+  dir: string,
+  prefix: string,
+): { file: string; json: Record<string, Record<string, string>> }[] =>
+  readdirSync(dir)
+    .filter((file) => file.startsWith(prefix) && file.endsWith('.json'))
+    .map((file) => ({
+      file,
+      json: JSON.parse(readFileSync(join(dir, file), 'utf-8')),
+    }));
+
+const styleSettingsLocales = readLocales(
+  join(__dirname, '../../shared/style-settings/components/i18n'),
+  'style-settings',
+);
+const textStyleFieldLocales = readLocales(
+  join(
+    __dirname,
+    '../../shared/content-settings/components/text-style-field/i18n',
+  ),
+  'text-style-field',
+);
+
+describe('text style role labels', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  test('the button role is labelled "Button text" and there is no "none" label', () => {
+    const labels = TEXT_STYLE_TYPES_DISPLAY_NAME_MAP();
+
+    expect(labels.button).toBe('Button text');
+    expect(labels).not.toHaveProperty('none');
+  });
+
+  test('every maker locale labels the button role', () => {
+    expect(styleSettingsLocales).toHaveLength(MAKER_LOCALE_COUNT);
+
+    for (const { file, json } of styleSettingsLocales) {
+      expect(json.styleSettingsSection.button, file).toBeTruthy();
+    }
+  });
+});
+
+describe('editTextStyles label', () => {
+  test('every maker locale has an editTextStyles label', () => {
+    expect(textStyleFieldLocales).toHaveLength(MAKER_LOCALE_COUNT);
+
+    for (const { file, json } of textStyleFieldLocales) {
+      expect(json.textStyleField.editTextStyles, file).toBeTruthy();
+    }
+  });
+});
+
+const hasOwn = (target: object, key: string): boolean =>
+  Object.prototype.hasOwnProperty.call(target, key);
+
+// Pinia's `$patch` deep-merges and never deletes a key, so any default would come back on save.
+describe('textFontFamily is retired (0036-retire-text-font-family.md)', () => {
+  test('a new TextStyles has no textFontFamily', () => {
+    expect(hasOwn(new TextStyles(), 'textFontFamily')).toBe(false);
+  });
+
+  test('the default TextStyles has no textFontFamily', () => {
+    expect(hasOwn(TextStyles.GetDefaultTextStyle(), 'textFontFamily')).toBe(
+      false,
+    );
+  });
+
+  test('a new BrandPageModel has no textFontFamily on its text styles or footers', () => {
+    const model = new BrandPageModel({});
+
+    expect(hasOwn(model.styles.textStyles, 'textFontFamily')).toBe(false);
+    expect(hasOwn(model.pageFooterDesktop!, 'textFontFamily')).toBe(false);
+    expect(hasOwn(model.pageFooterMobile!, 'textFontFamily')).toBe(false);
+  });
+
+  test('a stored value is carried through construction for migration-22 to read', () => {
+    const model = new BrandPageModel({
+      styles: { textStyles: { textFontFamily: 'quattrocentoSans' } },
+      pageFooterDesktop: { textFontFamily: 'oswald' },
+    });
+
+    expect(
+      (model.styles.textStyles as unknown as Record<string, unknown>)[
+        'textFontFamily'
+      ],
+    ).toBe('quattrocentoSans');
+    expect(
+      (model.pageFooterDesktop as unknown as Record<string, unknown>)[
+        'textFontFamily'
+      ],
+    ).toBe('oswald');
+  });
+});