@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/store/content-settings-store.ts

@@ -11,8 +11,16 @@ import type {
   UpdateMultipleItemValuesPayload,
   ValidateItemPayload,
 } from '../models';
-import type { ColorReplacement, Content } from '@brand-page';
-import { applyCardTextContrast } from '@brand-page/utils/container-text-color.util';
+import type { ColorReplacement, Content, TextStyleType } from '@brand-page';
+import { CONTENT_TEXT_STYLE_PROPERTY_KEYS } from '@brand-page';
+import { applyTextContrast } from '@brand-page/utils/container-text-color.util';
+import { normalizeTextStyleAgainstRole as normalizeAgainstRole } from '@brand-page/utils/text-style.util';
+import {
+  authorContentRteFields,
+  isTiptapDocument,
+  relinkRoleEqualMarks,
+} from '@brand-page-maker/utils';
+import { pairedRteTextField } from '../../color-strategies/rte-field-pairs';
 
 import {
   CONTENT_SETTINGS_CONFIGS,
@@ -43,7 +51,9 @@ import { useUiSideBarStore } from '../../side-bar/store';
 import {
   createDefaultContentItemGroupState,
   createDefaultContentItemState,
+  useUiNavigationStyleSettingsStore,
 } from '../../navigation-style-settings/store';
+import { useUiPageSettingsStore } from '../../page-settings/store';
 import {
   adminValidatorsDict,
   dummyValidator,
@@ -84,6 +94,21 @@ const armHistoryMergeForHydrationWrite = (isHydrationWrite?: boolean): void => {
   useHistoryStore().mergeNextMutation();
 };
 
+/**
+ * BP-5969 (ADR-0019): drop typography overrides equal to the block's current role value so the
+ * page-scoped role CSS class drives them — and a later role edit repaints the block instead of a
+ * stale value pinning it. Runs on every text-style write (sidebar edit, RTE link, mount
+ * re-derivation), keeping the persisted style sparse. Delegates to the shared, pure normalizer so
+ * the maker and the AI metadata builder share one authority; this wrapper supplies the store's
+ * live role table.
+ */
+const normalizeTextStyleAgainstRole = <T>(value: T): T =>
+  normalizeAgainstRole(
+    value,
+    useBrandPageMakerStore().brandPageData?.styles?.textStyles
+      ?.textStyleOptions,
+  );
+
 export const CONTENT_SETTINGS_MODES = {
   edit: 'edit',
   add: 'add',
@@ -411,13 +436,16 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      if (isSameValue(item.settings.content[payload.name], payload.value)) {
+      // BP-5969: a text-style write drops overrides equal to the role (no-op otherwise).
+      const value = normalizeTextStyleAgainstRole(payload.value);
+
+      if (isSameValue(item.settings.content[payload.name], value)) {
         return; // no-op write: don't validate, don't flip the modified flag
       }
 
       armHistoryMergeForHydrationWrite(payload.isHydrationWrite);
 
-      item.settings.content[payload.name] = payload.value;
+      item.settings.content[payload.name] = value;
 
       this.validateItem({
         id: payload.id,
@@ -494,9 +522,10 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       // (BP-5810's second act).
       armHistoryMergeForHydrationWrite(isHydrationWrite);
 
-      item.settings.content[`${name}Style`] = vueDeepMerge(
-        item.settings.content[`${name}Style`],
-        value,
+      // BP-5969: normalize the merged style so an override equal to the role is dropped
+      // (the class supplies it) — keeps the block following its role after a role edit.
+      item.settings.content[`${name}Style`] = normalizeTextStyleAgainstRole(
+        vueDeepMerge(item.settings.content[`${name}Style`], value),
       );
       this.validateItem({ id, name });
       this.onContentChanged();
@@ -510,6 +539,113 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
 
       return item.settings.content[`${name}Style`];
     },
+    // BP-5969 (A5 save-to-global): after a role's definition changes, re-normalize every
+    // block linked to it so any override that now equals the new role value is dropped and
+    // the block follows the role again. Walks the content text-style fields + text items.
+    // After "Apply changes to all": drop each sibling style override that now equals the role, and
+    // relink each sibling RTE run literal equal to the role before (`previousRole`) or after. The
+    // `active` editor has already relinked its own doc and still holds its debounced write, so that
+    // doc is written as given and that editor isn't remounted.
+    renormalizeTextStylesForRole(
+      type: string,
+      previousRole?: Record<string, unknown>,
+      active?: { id: string; name: string; index?: number; doc: unknown },
+    ): void {
+      const styleKeys = Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS);
+      const textStyleOptions =
+        useBrandPageMakerStore().brandPageData?.styles?.textStyles
+          ?.textStyleOptions;
+      const roles = [
+        textStyleOptions?.[type as TextStyleType]?.style as unknown as
+          | Record<string, unknown>
+          | undefined,
+        previousRole,
+      ];
+      let relinkedRte = false;
+      // A text item's editors share one field, so a relinked sibling item remounts the active one too.
+      let relinkedInActiveField = false;
+
+      const relink = (doc: unknown, inActiveField = false): unknown => {
+        if (!isTiptapDocument(doc)) return doc;
+
+        const relinked = relinkRoleEqualMarks(doc, roles);
+
+        if (relinked !== doc) {
+          relinkedRte = true;
+          relinkedInActiveField ||= inActiveField;
+        }
+
+        return relinked;
+      };
+
+      for (const item of this.items) {
+        const content = item.settings.content as unknown as Record<
+          string,
+          unknown
+        >;
+        const sectionType = (content.type as string | undefined) ?? item.type;
+
+        for (const key of styleKeys) {
+          const style = content[key] as { textStyleType?: string } | undefined;
+
+          if (style?.textStyleType !== type) continue;
+
+          content[key] = normalizeTextStyleAgainstRole(style);
+
+          const textField = pairedRteTextField(sectionType, key);
+
+          if (!textField) continue;
+
+          if (active && active.id === item.id && active.name === textField) {
+            content[textField] = active.doc;
+          } else {
+            content[textField] = relink(content[textField]);
+          }
+        }
+
+        const textItems = content.textItems as
+          | { text?: unknown; textStyle?: { textStyleType?: string } }[]
+          | undefined;
+
+        if (Array.isArray(textItems)) {
+          const isActiveField =
+            !!active && active.id === item.id && active.name === 'textItems';
+
+          textItems.forEach((textItem, index) => {
+            if (textItem.textStyle?.textStyleType !== type) return;
+
+            textItem.textStyle = normalizeTextStyleAgainstRole(
+              textItem.textStyle,
+            );
+            textItem.text =
+              isActiveField && active?.index === index
+                ? active.doc
+                : relink(textItem.text, isActiveField);
+          });
+        }
+      }
+
+      // Header and footer text links to the same roles but lives in its own stores.
+      useUiNavigationStyleSettingsStore().renormalizeTextStylesForRole(
+        type,
+        textStyleOptions,
+      );
+      useUiPageSettingsStore().renormalizeTextStylesForRole(
+        type,
+        textStyleOptions,
+      );
+
+      // A mounted sibling editor holds its own copy of the doc and would write it back.
+      if (relinkedRte) {
+        useHistoryStore().markRteResync(
+          active && !relinkedInActiveField
+            ? { except: { id: active.id, name: active.name } }
+            : undefined,
+        );
+      }
+
+      this.onContentChanged();
+    },
     // Re-bake a container-bound block's card text contrast after a text-style change cleared
     // the element colour (a reset), so a card title switched to another style still uses the
     // higher-contrast brand colour. A no-op for non-card content and for fields that keep an
@@ -529,7 +665,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
-      applyCardTextContrast(
+      applyTextContrast(
         item.settings.content,
         styles,
         brandPageMakerStore.brandPageType,
@@ -574,10 +710,14 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
 
       armHistoryMergeForHydrationWrite(isHydrationWrite);
 
-      item.settings.content.textItems[index!].textStyle = vueDeepMerge(
-        item.settings.content.textItems[index!].textStyle,
-        value,
-      );
+      // BP-5969: normalize so a text-item override equal to the role is dropped.
+      item.settings.content.textItems[index!].textStyle =
+        normalizeTextStyleAgainstRole(
+          vueDeepMerge(
+            item.settings.content.textItems[index!].textStyle,
+            value,
+          ),
+        );
       this.validateItem({ id, name });
       this.onContentChanged();
     },
@@ -695,13 +835,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       const styles = brandPageMakerStore.brandPageData?.styles;
 
       if (styles) {
-        applyCardTextContrast(
-          content,
-          styles,
-          brandPageMakerStore.brandPageType,
-        );
+        applyTextContrast(content, styles, brandPageMakerStore.brandPageType);
       }
 
+      // Author RTE-eligible fields as Tiptap docs at birth — the replacement for the retired
+      // runtime plain→RTE rewrap. Runs after applyTextContrast has resolved the element colour
+      // onto style.color; it moves that colour into the mark and clears the object (matching
+      // migration-22's B1→D→G), so new content shares the migrated shape.
+      authorContentRteFields(content, styles?.textStyles?.textStyleOptions);
+
       const settingsConfig = CONTENT_SETTINGS_CONFIGS()[content.type];
 
       const fields: Record<string, ContentItemFieldSettings> = Object.keys(

package/src/shared/logo-settings/components/EditLogoSettings.vue

@@ -111,6 +111,7 @@
               v-for="(logoColor, index) in logoColors"
               :id="index"
               :key="index"
+              :data-test-logo-color="index"
               :name="index"
               :value="convertFabricColorObjectToBpObject(logoColor.toColor)"
               :options="textColorOptions"

package/src/shared/logo-settings/components/LogoVariations.vue

@@ -9,6 +9,7 @@
       }"
     >
       <button
+        :data-test-logo-variation="i"
         class="c-media-btn tw-p-0 tw-border-none tw-cursor-pointer tw-transition-shadow tw-duration-200 tw-ease-out"
         :class="{
           'c-media-btn--selected': i === selectedVariation,

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.vue

@@ -33,6 +33,7 @@
     <div
       v-for="(option, index) in navigationStyleOptions"
       :key="index"
+      :data-test-navigation-style-option="option"
       class="tw-w-full"
       :class="{
         'tw-mb-4': index < navigationStyleOptions.length - 1,

package/src/shared/navigation-style-settings/store/index.test.ts

@@ -0,0 +1,295 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { NAVIGATION_DISPLAY, VIEWPORTS } from '@brand-page';
+import type { TextStyleDeclaration, TextStyleOptions } from '@brand-page';
+import {
+  omitTypography,
+  resolveTextStyle,
+} from '@brand-page/utils/text-style.util';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import TextStyleFieldMixin from '@shared/content-settings/components/text-style-field/TextStyleField.mixin';
+import { useUiNavigationStyleSettingsStore } from './index';
+
+/**
+ * BP-6146 — a B/I/U/S click on the nav's default text style used to bake ALL FOUR
+ * button-group props (`text-css-style-options.convertor`'s `convertBack` always writes
+ * `fontWeight`/`fontStyle`/`textDecoration`), including the ones the click never touched.
+ * The nav store just merges whatever it's given (`_setDefaultButtonStyle`), so those
+ * baked values became permanent overrides — a later role edit could no longer repaint
+ * them (`resolveTextStyle`'s element-first `||` means any present prop wins outright).
+ *
+ * `emitChange` now normalises against the role before emitting, dropping a value that
+ * merely repeats it (the same rule `content-settings-store` already applied to its own
+ * fields). This proves the nav — which writes straight to its own store, not
+ * content-settings-store — gets that normalisation too.
+ */
+describe('nav store — a B/I/U/S click keeps following later role edits (BP-6146)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('a Bold click on a role-linked nav default text style does not lock italic off the role', () => {
+    const styleSettingsStore = useUiStyleSettingsStore();
+    const navStore = useUiNavigationStyleSettingsStore();
+
+    // The button role currently draws italic; the nav is linked to it with no override.
+    styleSettingsStore.setTextStyleOption({
+      type: 'button',
+      style: {
+        ...styleSettingsStore.textStyles.textStyleOptions.button.style,
+        fontStyle: 'italic',
+      },
+    });
+
+    navStore.setNavigationStyleOptionValue({
+      section: PAGE_SECTIONS.header,
+      option: 'defaultTextStyle',
+      viewport: VIEWPORTS.desktop,
+      value: { textStyleType: 'button', textAlign: 'left' },
+    });
+
+    const navField = navStore.navigation[PAGE_SECTIONS.header][
+      VIEWPORTS.desktop
+    ] as unknown as { defaultButtonStyle: Record<string, unknown> };
+
+    // The real maker panel: TextStyleField's own emitChange, bound to the SAME role
+    // table the nav's TextStyleField instance reads (`styleSettingsStore.textStyles
+    // .textStyleOptions`). `onSelectTextCSSStyle`'s convertBack reflects the CURRENT
+    // resolved style for every untouched button, so a Bold click (italic/underline/
+    // strike all left alone) still writes fontStyle: 'italic' explicitly — the exact
+    // shape that used to get baked in.
+    const context = {
+      id: 'navigation-default-button-style',
+      name: 'defaultTextStyle',
+      showTextStyleTypeOptions: true,
+      textStyleTypeOptions: [{ value: 'button', isSelected: true }],
+      textStyleOptions: styleSettingsStore.textStyles.textStyleOptions,
+      value: navField.defaultButtonStyle,
+      $emit: (_event: string, payload: { value: Record<string, unknown> }) => {
+        navStore.setNavigationStyleOptionValue({
+          section: PAGE_SECTIONS.header,
+          option: 'defaultTextStyle',
+          viewport: VIEWPORTS.desktop,
+          value: payload.value,
+        });
+      },
+    };
+
+    (
+      TextStyleFieldMixin.methods!.emitChange as (
+        style: unknown,
+        type?: unknown,
+      ) => void
+    ).call(
+      context,
+      {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+        textDecoration: 'none',
+        textAlign: 'left',
+      },
+      'button',
+    );
+
+    // Bold click: italic must not get pinned as an override equal to the role.
+    expect(navField.defaultButtonStyle.fontStyle).toBeUndefined();
+
+    // A role edit later turns italic off. With no baked override, the nav follows it —
+    // the same element-first cascade the nav view mapper's `getTextStyleByContentTextStyle`
+    // resolves through (`resolveTextStyle`).
+    styleSettingsStore.setTextStyleOption({
+      type: 'button',
+      style: {
+        ...styleSettingsStore.textStyles.textStyleOptions.button.style,
+        fontStyle: 'normal',
+      },
+    });
+
+    const resolved = resolveTextStyle(
+      navField.defaultButtonStyle,
+      styleSettingsStore.textStyles.textStyleOptions.button.style,
+    );
+
+    expect(resolved.fontStyle).toBe('normal');
+  });
+});
+
+// The text-style field sends the nav's whole text style, so a typography prop it leaves out (a
+// Reset, a role pick) must go; merged over the old style it would keep overriding the role.
+describe('nav store — the text-style field owns the nav typography', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const store = () => useUiNavigationStyleSettingsStore();
+  const nav = (viewport: typeof VIEWPORTS.desktop | typeof VIEWPORTS.mobile) =>
+    store().navigation[PAGE_SECTIONS.header][viewport];
+
+  const writeTextStyle = (
+    viewport: typeof VIEWPORTS.desktop | typeof VIEWPORTS.mobile,
+    value: TextStyleDeclaration,
+  ) =>
+    store().setNavigationStyleOptionValue({
+      section: PAGE_SECTIONS.header,
+      option: 'defaultTextStyle',
+      viewport,
+      value,
+    });
+
+  test('Reset on a tab clears its override and keeps its colour and borders', () => {
+    nav(VIEWPORTS.desktop).defaultButtonStyle = {
+      ...nav(VIEWPORTS.desktop).defaultButtonStyle,
+      textStyleType: 'paragraph1',
+      fontFamily: 'Oswald',
+      color: '#123456',
+    };
+
+    writeTextStyle(
+      VIEWPORTS.desktop,
+      omitTypography(nav(VIEWPORTS.desktop).defaultButtonStyle),
+    );
+
+    const style = nav(VIEWPORTS.desktop).defaultButtonStyle;
+
+    expect(style.fontFamily).toBeUndefined();
+    expect(style.fontSize).toBeUndefined();
+    expect(style).toMatchObject({
+      textStyleType: 'paragraph1',
+      color: '#123456',
+      borderBottomWidth: '0px',
+    });
+  });
+
+  test('Reset on the hamburger clears its override', () => {
+    const menu = nav(VIEWPORTS.mobile).hamburgerMenuStyle;
+
+    menu.defaultButtonStyle = {
+      ...menu.defaultButtonStyle,
+      textStyleType: 'button',
+      fontFamily: 'Oswald',
+    };
+
+    writeTextStyle(VIEWPORTS.mobile, omitTypography(menu.defaultButtonStyle));
+
+    expect(
+      nav(VIEWPORTS.mobile).hamburgerMenuStyle.defaultButtonStyle,
+    ).toMatchObject({ textStyleType: 'button' });
+    expect(
+      nav(VIEWPORTS.mobile).hamburgerMenuStyle.defaultButtonStyle.fontFamily,
+    ).toBeUndefined();
+  });
+
+  test('a colour-only write still keeps the typography override', () => {
+    nav(VIEWPORTS.desktop).defaultButtonStyle = {
+      ...nav(VIEWPORTS.desktop).defaultButtonStyle,
+      textStyleType: 'paragraph1',
+      fontFamily: 'Oswald',
+    };
+
+    store().setNavigationStyleOptionValue({
+      section: PAGE_SECTIONS.header,
+      option: 'defaultBackgroundColor',
+      viewport: VIEWPORTS.desktop,
+      value: '#ffffff',
+    });
+
+    expect(nav(VIEWPORTS.desktop).defaultButtonStyle).toMatchObject({
+      fontFamily: 'Oswald',
+      backgroundColor: '#ffffff',
+    });
+  });
+
+  test('switching the tab layout keeps a linked nav on its role and its own override', () => {
+    nav(VIEWPORTS.desktop).defaultButtonStyle = {
+      ...omitTypography(nav(VIEWPORTS.desktop).defaultButtonStyle),
+      textStyleType: 'paragraph1',
+      fontSize: '1em',
+    };
+
+    store().setDisplayType({
+      section: PAGE_SECTIONS.header,
+      displayType: NAVIGATION_DISPLAY.TAB_2,
+      viewport: VIEWPORTS.desktop,
+    });
+
+    const style = nav(VIEWPORTS.desktop).defaultButtonStyle;
+
+    expect(style).toMatchObject({
+      textStyleType: 'paragraph1',
+      fontSize: '1em',
+      borderBottomWidth: '2px',
+    });
+    expect(style.fontFamily).toBeUndefined();
+  });
+
+  test('switching the tab layout still gives a nav on no role the layout font', () => {
+    nav(VIEWPORTS.desktop).defaultButtonStyle = {
+      ...nav(VIEWPORTS.desktop).defaultButtonStyle,
+      fontFamily: 'Oswald',
+    };
+
+    store().setDisplayType({
+      section: PAGE_SECTIONS.header,
+      displayType: NAVIGATION_DISPLAY.TAB_2,
+      viewport: VIEWPORTS.desktop,
+    });
+
+    expect(nav(VIEWPORTS.desktop).defaultButtonStyle).toMatchObject({
+      fontFamily: 'Lato',
+      fontSize: '1em',
+    });
+  });
+});
+
+describe('nav store — renormalizeTextStylesForRole', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const roles = {
+    paragraph1: { style: { fontFamily: 'Anton', fontSize: '1.5em' } },
+    button: { style: { fontFamily: 'Oswald', fontSize: '1em' } },
+  } as unknown as TextStyleOptions;
+
+  test('drops a now role-equal override on tabs and hamburgers and keeps a different one', () => {
+    const store = useUiNavigationStyleSettingsStore();
+    const header = store.navigation[PAGE_SECTIONS.header];
+
+    header[VIEWPORTS.desktop].defaultButtonStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Anton',
+      fontSize: '2em',
+    };
+    header[VIEWPORTS.mobile].hamburgerMenuStyle.defaultButtonStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Anton',
+    };
+
+    store.renormalizeTextStylesForRole('paragraph1', roles);
+
+    expect(header[VIEWPORTS.desktop].defaultButtonStyle).toEqual({
+      textStyleType: 'paragraph1',
+      fontSize: '2em',
+    });
+    expect(
+      header[VIEWPORTS.mobile].hamburgerMenuStyle.defaultButtonStyle,
+    ).toEqual({ textStyleType: 'paragraph1' });
+  });
+
+  test('leaves text on another role untouched', () => {
+    const store = useUiNavigationStyleSettingsStore();
+    const header = store.navigation[PAGE_SECTIONS.header];
+
+    header[VIEWPORTS.desktop].defaultButtonStyle = {
+      textStyleType: 'button',
+      fontFamily: 'Anton',
+    };
+
+    store.renormalizeTextStylesForRole('paragraph1', roles);
+
+    expect(header[VIEWPORTS.desktop].defaultButtonStyle.fontFamily).toBe(
+      'Anton',
+    );
+  });
+});