@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.test.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import { resolveTextColor } from '@brand-page/utils/text-style.util';
 import TextStyleFieldMixin from './TextStyleField.mixin';
 
@@ -41,22 +41,26 @@ describe('TextStyleField selectedTextStyle — colour cascade parity', () => {
     expect(style.color).toBe('var(--palette-2)');
   });
 
-  test("falls back to the global style's colour when the element has none", () => {
+  test('takes no colour from its role when the element has none (ADR-0020)', () => {
     const style = selectedTextStyle(panelContext({ textStyleType: 'titles' }));
 
-    expect(style.color).toBe('#111111');
+    // Role colour is retired — the swatch shows undefined (the page base coat applies by
+    // root inheritance), matching what the renderer paints.
+    expect(style.color).toBeUndefined();
   });
 
-  test('treats an empty element colour as unset', () => {
+  test('treats an empty element colour as unset (falls through; role ignored)', () => {
     const style = selectedTextStyle(
       panelContext({ textStyleType: 'titles', color: '' }),
     );
 
-    expect(style.color).toBe('#111111');
+    expect(style.color).toBeUndefined();
   });
 
-  test('still takes typography wholesale from the global style', () => {
-    // Only `color` cascades in Phase 1 — this pins that the rest is unchanged.
+  test('resolves typography per-property, element-first over the role (ADR-0019)', () => {
+    // ADR-0019 superseded the old all-or-nothing rule: the panel must match the
+    // renderer's per-property cascade, so an element override wins over the role
+    // (pre-ADR-0019 the panel took typography wholesale from the role's 32px).
     const style = selectedTextStyle(
       panelContext({
         textStyleType: 'titles',
@@ -65,6 +69,13 @@ describe('TextStyleField selectedTextStyle — colour cascade parity', () => {
       }),
     );
 
+    expect(style.fontSize).toBe('99px');
+  });
+
+  test('a non-overridden typography property falls back to the role', () => {
+    // The other arm of the cascade: with no element size, the role's size shows through.
+    const style = selectedTextStyle(panelContext({ textStyleType: 'titles' }));
+
     expect(style.fontSize).toBe('32px');
   });
 
@@ -81,7 +92,7 @@ describe('TextStyleField selectedTextStyle — colour cascade parity', () => {
 
     cases.forEach((elementStyle) => {
       expect(selectedTextStyle(panelContext(elementStyle)).color).toBe(
-        resolveTextColor(elementStyle, TITLES_GLOBAL),
+        resolveTextColor(elementStyle),
       );
     });
   });
@@ -123,12 +134,12 @@ describe('TextStyleField selectedTextStyle — container-aware default (middle r
     expect(style.color).toBe('#abcdef');
   });
 
-  test('no container default leaves the global-style fallback unchanged', () => {
+  test('no container default and no role colour leaves the swatch unset', () => {
     const style = selectedTextStyle(
       withContainerDefault({ textStyleType: 'titles' }, undefined),
     );
 
-    expect(style.color).toBe('#111111');
+    expect(style.color).toBeUndefined();
   });
 
   test('resolves identically to the renderer when a container default is supplied', () => {
@@ -142,7 +153,7 @@ describe('TextStyleField selectedTextStyle — container-aware default (middle r
       expect(
         selectedTextStyle(withContainerDefault(elementStyle, containerDefault))
           .color,
-      ).toBe(resolveTextColor(elementStyle, TITLES_GLOBAL, containerDefault));
+      ).toBe(resolveTextColor(elementStyle, containerDefault));
     });
   });
 });
@@ -176,14 +187,15 @@ describe('TextStyleField global panel — stored value only', () => {
       textStyleType: 'titles',
       fontSize: '99px',
     });
-    expect(resolved.color).toBe(TITLES_GLOBAL.color);
+    // ADR-0020: the role's colour does not cascade → a link-only element resolves to
+    // undefined (the page base coat).
+    expect(resolved.color).toBeUndefined();
   });
 });
 
-// Re-selecting a global text style must drop the element's own colour override so
-// it inherits the style's colour. Because the renderer resolves colour
-// element-first (resolveTextColor), leaving the override in place makes it keep
-// winning after the re-link — the reported regression.
+// BP-5969 (ADR-0020): re-selecting a role is a TYPOGRAPHY action — it KEEPS the element's
+// own colour. Colour is a separate axis (the role carries none), so a role switch no longer
+// clears colour; a full clean slate is the explicit "reset to global" action.
 const emitChange = (
   context: Record<string, unknown>,
   style: Record<string, unknown>,
@@ -212,8 +224,8 @@ const captureContext = (overrides: Record<string, unknown> = {}) => {
   };
 };
 
-describe('TextStyleField emitChange — linking drops the element colour override', () => {
-  test('linking a text style clears the element colour + background so it inherits the style', () => {
+describe('TextStyleField emitChange — linking a role keeps the element colour (ADR-0020)', () => {
+  test('linking a text style keeps the element colour + background (colour is a separate axis)', () => {
     const { context, emitted } = captureContext();
 
     emitChange(
@@ -230,10 +242,11 @@ describe('TextStyleField emitChange — linking drops the element colour overrid
     const { value } = emitted[0].payload;
 
     expect(value.textStyleType).toBe('titles');
-    expect(value.color).toBeUndefined();
-    expect(value.backgroundColor).toBeUndefined();
-    // The point of clearing: the shared cascade now falls through to the style.
-    expect(resolveTextColor(value, TITLES_GLOBAL)).toBe(TITLES_GLOBAL.color);
+    // Switching role is typography-only — the element's colour + background survive.
+    expect(value.color).toBe('var(--palette-2)');
+    expect(value.backgroundColor).toBe('#ffffff');
+    // And the renderer paints that kept element colour (element-first cascade).
+    expect(resolveTextColor(value)).toBe('var(--palette-2)');
   });
 
   test('changing colour (no text-style type) unlinks but KEEPS the new colour', () => {
@@ -252,7 +265,7 @@ describe('TextStyleField emitChange — linking drops the element colour overrid
 });
 
 describe('TextStyleField onSelectTextStyleType — user re-selecting a style', () => {
-  test('forwards the element value through emitChange with the picked type, clearing colour', () => {
+  test('forwards the element value through emitChange with the picked type, keeping colour', () => {
     const { context, emitted } = captureContext({
       value: {
         color: '#ff0000',
@@ -272,13 +285,50 @@ describe('TextStyleField onSelectTextStyleType — user re-selecting a style', (
     const { value } = emitted[0].payload;
 
     expect(value.textStyleType).toBe('titles');
-    expect(value.color).toBeUndefined();
+    // ADR-0020: switching role is typography-only — the element's colour survives.
+    expect(value.color).toBe('#ff0000');
+  });
+
+  // A button on Button text that kept its migrated font and line height, switched to
+  // Heading 1, must look like Heading 1 — not Heading 1 with Exo 2 and 1.5 left over.
+  test('switching role drops every typography override and keeps colour, background, alignment and auto-scale', () => {
+    const { context, emitted } = captureContext({
+      value: {
+        textStyleType: 'button',
+        fontFamily: 'Exo 2',
+        fontSize: '1.5em',
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+        letterSpacing: '0',
+        lineHeight: '1.5',
+        textDecoration: 'underline',
+        color: 'var(--palette-1)',
+        backgroundColor: 'var(--palette-0)',
+        textAlign: 'center',
+        applyAutoScale: true,
+      },
+      emitChange: TextStyleFieldMixin.methods!.emitChange,
+      textStyleTypeDropdownRef: 'ref-key',
+      $refs: {},
+    });
+
+    (
+      TextStyleFieldMixin.methods!.onSelectTextStyleType as (e: unknown) => void
+    ).call(context, { value: 'heading1' });
+
+    expect(emitted[0].payload.value).toEqual({
+      textStyleType: 'heading1',
+      color: 'var(--palette-1)',
+      backgroundColor: 'var(--palette-0)',
+      textAlign: 'center',
+      applyAutoScale: true,
+    });
   });
 });
 
 // A colour edit while linked keeps the link and layers a sticky colour override,
 // instead of detaching. The renderer resolves colour element-first, so the override
-// wins while typography stays synced. Re-selecting the style (above) resets it.
+// wins while typography stays synced. Re-selecting the role (above) keeps it too.
 const onSelectColor = (context: Record<string, unknown>, colorValue: string) =>
   (TextStyleFieldMixin.methods!.onSelectColor as (c: unknown) => void).call(
     context,
@@ -323,3 +373,263 @@ describe('TextStyleField onSelectColor — colour override keeps the link', () =
     expect(value.color).toBe('#ff0000');
   });
 });
+
+describe('TextStyleField — override UX (BP-5969 A5)', () => {
+  const method = (name: string) =>
+    (TextStyleFieldMixin.methods as Record<string, (...a: any[]) => any>)[name];
+  const computed = (name: string) =>
+    (
+      TextStyleFieldMixin.computed as unknown as Record<
+        string,
+        (...a: any[]) => any
+      >
+    )[name];
+
+  test('hasTypographyOverride is true when the block carries a cascade prop', () => {
+    expect(
+      computed('hasTypographyOverride').call(
+        panelContext({ textStyleType: 'titles', fontSize: '3em' }),
+      ),
+    ).toBe(true);
+  });
+
+  test('hasTypographyOverride is false for a fully-linked block', () => {
+    expect(
+      computed('hasTypographyOverride').call(
+        panelContext({ textStyleType: 'titles' }),
+      ),
+    ).toBe(false);
+  });
+
+  test("the dropdown title is the plain role label; the red asterisk is the dropdown's, driven by hasTypographyOverride", () => {
+    const options = {
+      textStyleTypeOptions: [
+        { value: 'heading3', isSelected: true, label: 'Heading 3' },
+      ],
+    };
+
+    expect(computed('selectedRoleLabel').call(options)).toBe('Heading 3');
+    expect(computed('selectedRoleType').call(options)).toBe('heading3');
+    expect(
+      computed('hasTypographyOverride').call(
+        panelContext({ textStyleType: 'heading3', fontSize: '3em' }),
+      ),
+    ).toBe(true);
+    expect(
+      computed('hasTypographyOverride').call(
+        panelContext({ textStyleType: 'heading3' }),
+      ),
+    ).toBe(false);
+  });
+
+  test('resetToGlobal keeps colour: only typography overrides clear', () => {
+    const emitted: { event: string; payload: any }[] = [];
+    const ctx = {
+      id: 'f',
+      name: 'titleStyle',
+      value: {
+        textStyleType: 'heading3',
+        textAlign: 'left',
+        applyAutoScale: true,
+        color: 'var(--palette-2)',
+        backgroundColor: '#ffeeaa',
+        fontSize: '3em',
+      },
+      $emit: (event: string, payload: any) => emitted.push({ event, payload }),
+    };
+
+    method('resetToGlobal').call(ctx);
+
+    expect(emitted[0].payload.value).toEqual({
+      textStyleType: 'heading3',
+      textAlign: 'left',
+      applyAutoScale: true,
+      color: 'var(--palette-2)',
+      backgroundColor: '#ffeeaa',
+    });
+  });
+
+  test('setting letter spacing to a zero-valued role keeps the block linked', () => {
+    const { context, emitted } = captureContext({
+      value: { textStyleType: 'heading1', textAlign: 'left' },
+      textStyleOptions: { heading1: { style: { letterSpacing: '0' } } },
+    });
+
+    context.overrideBaseStyle = () => ({
+      ...(context.value as Record<string, unknown>),
+    });
+    context.emitChange = TextStyleFieldMixin.methods!.emitChange;
+
+    method('onLetterSpacingChange').call(context, '0');
+
+    expect(emitted[0].payload.value).toEqual({
+      textStyleType: 'heading1',
+      textAlign: 'left',
+    });
+  });
+
+  test('saveToGlobal promotes overrides to the role, resets the block, re-normalizes siblings', () => {
+    const setTextStyleOption = vi.fn();
+    const renormalizeTextStylesForRole = vi.fn();
+    const emitted: { event: string; payload: any }[] = [];
+    const role = { fontSize: '2em', fontFamily: 'Lato' };
+
+    const ctx: Record<string, any> = {
+      id: 'f',
+      name: 'titleStyle',
+      value: {
+        textStyleType: 'heading3',
+        textAlign: 'left',
+        color: 'var(--palette-2)',
+        fontSize: '3em',
+      },
+      textStyleOptions: { heading3: { style: role } },
+      styleSettingsStore: { setTextStyleOption },
+      contentSettingsStore: { renormalizeTextStylesForRole },
+      $emit: (event: string, payload: any) => emitted.push({ event, payload }),
+    };
+
+    ctx.resetToGlobal = () => method('resetToGlobal').call(ctx);
+
+    method('saveToGlobal').call(ctx);
+
+    // only the typography override reaches the role — colour is never a role property
+    expect(setTextStyleOption).toHaveBeenCalledWith({
+      type: 'heading3',
+      style: { fontSize: '3em', fontFamily: 'Lato' },
+    });
+    // the block is reset to its role's typography and keeps its own colour
+    expect(emitted[0].payload.value.fontSize).toBeUndefined();
+    expect(emitted[0].payload.value.color).toBe('var(--palette-2)');
+    // siblings are re-normalized against the new role and the one before it
+    expect(renormalizeTextStylesForRole).toHaveBeenCalledWith('heading3', role);
+  });
+
+  test('saveToGlobal preserves role underline when the block adds strike', () => {
+    const setTextStyleOption = vi.fn();
+    const role = { textDecoration: 'underline' };
+    const ctx: Record<string, any> = {
+      value: { textStyleType: 'heading3', textDecoration: 'line-through' },
+      textStyleOptions: { heading3: { style: role } },
+      styleSettingsStore: { setTextStyleOption },
+      contentSettingsStore: { renormalizeTextStylesForRole: vi.fn() },
+      resetToGlobal: vi.fn(),
+    };
+
+    method('saveToGlobal').call(ctx);
+
+    expect(setTextStyleOption).toHaveBeenCalledWith({
+      type: 'heading3',
+      style: { textDecoration: 'underline line-through' },
+    });
+  });
+});
+
+describe('TextStyleField — collapsed-card typography preview (BP-5969)', () => {
+  const computedFn = (name: string) =>
+    (
+      TextStyleFieldMixin.computed as unknown as Record<
+        string,
+        (...a: any[]) => any
+      >
+    )[name];
+
+  // These computeds read `this.selectedTextStyle`, so the context supplies it
+  // directly — the resolution rule itself is covered by the cascade tests above.
+  const previewCtx = (selected: Record<string, unknown>) => ({
+    selectedTextStyle: selected,
+  });
+
+  test('renders the role name in its own resolved typography', () => {
+    const style = computedFn('textStylePreviewStyle').call(
+      previewCtx({
+        fontFamily: 'Candal',
+        fontSize: '1em', // 16px — under the cap
+        fontWeight: '700',
+        fontStyle: 'italic',
+        letterSpacing: '0.1em',
+        lineHeight: '1.2',
+        textDecoration: 'underline',
+      }),
+    );
+
+    expect(style.fontFamily).toBe('"Candal", sans-serif');
+    expect(style.fontSize).toBe('16px');
+    expect(style.fontWeight).toBe('700');
+    expect(style.fontStyle).toBe('italic');
+    expect(style.letterSpacing).toBe('0.1em');
+    // The preview is a single truncated line, so the role's line-height is
+    // intentionally not applied — it would only misalign the header row.
+    expect(style.lineHeight).toBeUndefined();
+    expect(style.textDecoration).toBe('underline');
+  });
+
+  test('quotes the font family and adds a generic fallback', () => {
+    const style = computedFn('textStylePreviewStyle').call(
+      previewCtx({ fontFamily: 'PT Serif', fontSize: '1em' }),
+    );
+
+    // Multi-word families must be a single quoted CSS token.
+    expect(style.fontFamily).toBe('"PT Serif", sans-serif');
+  });
+
+  test('does not double-quote an already-quoted family', () => {
+    const style = computedFn('textStylePreviewStyle').call(
+      previewCtx({ fontFamily: '"PT Serif"', fontSize: '1em' }),
+    );
+
+    expect(style.fontFamily).toBe('"PT Serif", sans-serif');
+  });
+
+  test('applies bold + italic + underline + strikethrough together', () => {
+    const style = computedFn('textStylePreviewStyle').call(
+      previewCtx({
+        fontFamily: 'Candal',
+        fontSize: '1em',
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+        textDecoration: 'underline line-through',
+      }),
+    );
+
+    expect(style.fontWeight).toBe('bold');
+    expect(style.fontStyle).toBe('italic');
+    expect(style.textDecoration).toBe('underline line-through');
+  });
+
+  test('caps the preview font size so large roles fit the header row', () => {
+    // H1 default is 2.5em (40px) which exceeds the 28px preview cap.
+    const style = computedFn('textStylePreviewStyle').call(
+      previewCtx({ fontFamily: 'Candal', fontSize: '2.5em' }),
+    );
+
+    expect(style.fontSize).toBe('28px');
+  });
+
+  test('falls back to sensible CSS defaults when props are absent', () => {
+    const style = computedFn('textStylePreviewStyle').call(previewCtx({}));
+
+    expect(style.fontFamily).toBe('inherit');
+    expect(style.fontWeight).toBe('normal');
+    expect(style.fontStyle).toBe('normal');
+    expect(style.letterSpacing).toBe('normal');
+    expect(style.textDecoration).toBe('none');
+  });
+
+  test('subtitle reports the real (uncapped) size as `Family • Sizepx`', () => {
+    const subtitle = computedFn('textStylePreviewSubtitle').call(
+      previewCtx({ fontFamily: 'Candal', fontSize: '2.5em' }),
+    );
+
+    // 2.5em against the 16px root = 40px, reported uncapped.
+    expect(subtitle).toBe('Candal • 40px');
+  });
+
+  test('subtitle omits an empty font family', () => {
+    const subtitle = computedFn('textStylePreviewSubtitle').call(
+      previewCtx({ fontSize: '1em' }),
+    );
+
+    expect(subtitle).toBe('16px');
+  });
+});