@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/components/text-wrapper/TextWrapper.test.ts

@@ -0,0 +1,358 @@
+import { mount } from '@vue/test-utils';
+import { computed, reactive } from 'vue';
+import { describe, it, expect } from 'vitest';
+import TextWrapper from './TextWrapper.vue';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+/**
+ * BP-5969 (role-var model) — the page-scoped role class only DEFINES the role vars
+ * (`--role-*`); it applies none of them. Plain-text fields have no runs, so the element
+ * applies the four role refs (`font-family: var(--role-font-family)`, …); an override is a
+ * literal that beats the ref. (RTE applies via its run marks instead — not covered here.)
+ * These tests pin the plain-text render seam; full pixel-identity is the visual-regression gate.
+ */
+
+// The resolved (view-model) style a linked heading1 with NO override carries — role
+// typography filled in, since the view-model still resolves.
+const HEADING1_ROLE = {
+  fontFamily: 'Lato',
+  fontSize: '2.5em',
+  fontWeight: '700',
+  lineHeight: '1.2',
+};
+
+const roleOptions = { heading1: { style: HEADING1_ROLE } };
+
+const mountWrapper = (
+  textStyle: Record<string, unknown>,
+  text: unknown,
+  { withPage = true } = {},
+) =>
+  mount(TextWrapper, {
+    props: { textStyle, text, element: 'p' },
+    global: withPage
+      ? { provide: { [TEXT_ROLE_OPTIONS_KEY]: computed(() => roleOptions) } }
+      : {},
+  });
+
+const rteDocWithOverride = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'Mission',
+          marks: [{ type: 'textStyle', attrs: { fontSize: '3em' } }],
+        },
+      ],
+    },
+  ],
+};
+
+const roleEl = (wrapper: ReturnType<typeof mountWrapper>) =>
+  wrapper.get('.bp-text-role-heading1');
+
+describe('TextWrapper — role-var plain-text typography (BP-5969)', () => {
+  it('applies the role vars on the plain-text element when the block matches its role', () => {
+    const el = roleEl(
+      mountWrapper(
+        { ...HEADING1_ROLE, textStyleType: 'heading1' },
+        'Our mission',
+      ),
+    );
+
+    // the class DEFINES the vars; the plain-text element APPLIES them (no runs to carry them)
+    expect(el.attributes('style')).toMatch(
+      /font-family:\s*var\(--role-font-family\)/,
+    );
+    expect(el.attributes('style')).toMatch(
+      /font-size:\s*var\(--role-font-size\)/,
+    );
+    // BP-5969 D4: weight is var-backed too, not baked as a literal copy of the role's value.
+    expect(el.attributes('style')).toMatch(
+      /font-weight:\s*var\(--role-font-weight\)/,
+    );
+  });
+
+  it('inlines an override literal; the rest stay role var refs', () => {
+    const el = roleEl(
+      mountWrapper(
+        { ...HEADING1_ROLE, fontSize: '3em', textStyleType: 'heading1' },
+        'Our mission',
+      ),
+    );
+
+    expect(el.attributes('style')).toMatch(/font-size:\s*3em/);
+    // family equals the role → stays a var ref (the override only replaces font-size)
+    expect(el.attributes('style')).toMatch(
+      /font-family:\s*var\(--role-font-family\)/,
+    );
+  });
+
+  it('carries NO inline typography on the RTE element — overrides ride the run marks', () => {
+    const el = roleEl(
+      mountWrapper({ textStyleType: 'heading1' }, rteDocWithOverride),
+    );
+
+    // the element has only the role class (var declarations); the size override is on the run span,
+    // not baked onto the element (a second level would double-em the run's size).
+    expect(el.attributes('style') ?? '').not.toMatch(/font-size/);
+    expect(el.html()).toMatch(/font-size:\s*3em/);
+  });
+
+  it('bakes the full resolved typography inline when no Page role options are provided', () => {
+    const el = roleEl(
+      mountWrapper(
+        { ...HEADING1_ROLE, textStyleType: 'heading1' },
+        'Our mission',
+        {
+          withPage: false,
+        },
+      ),
+    );
+
+    // fallback = pre-token render: every prop inline, pixel-identical
+    expect(el.attributes('style')).toMatch(/font-size:\s*2\.5em/);
+    expect(el.attributes('style')).toMatch(/font-family/);
+  });
+});
+
+describe('TextWrapper — plain-text typography property rules (BP-5969 Brief 3)', () => {
+  const heading2Role = {
+    heading2: {
+      style: {
+        fontFamily: 'Lato',
+        fontSize: '5.25em',
+        fontWeight: 'bold',
+        lineHeight: '1.2',
+      },
+    },
+  };
+
+  const mountHeading2 = (
+    textStyle: Record<string, unknown>,
+    roleOverride = heading2Role,
+  ) =>
+    mount(TextWrapper, {
+      props: {
+        textStyle: { ...textStyle, textStyleType: 'heading2' },
+        text: 'Our mission',
+        element: 'p',
+      },
+      global: {
+        provide: { [TEXT_ROLE_OPTIONS_KEY]: computed(() => roleOverride) },
+      },
+    });
+
+  const heading2El = (wrapper: ReturnType<typeof mountHeading2>) =>
+    wrapper.get('.bp-text-role-heading2');
+
+  it('plain text carries only role references', () => {
+    const style = heading2El(mountHeading2({})).attributes('style');
+
+    expect(style).toMatch(/font-family:\s*var\(--role-font-family\)/);
+    expect(style).toMatch(/font-size:\s*var\(--role-font-size\)/);
+    expect(style).toMatch(/line-height:\s*var\(--role-line-height\)/);
+    expect(style).toMatch(/font-weight:\s*var\(--role-font-weight\)/);
+    // the role sets none of these — no supplier, so no property at all (not even a literal
+    // CSS-neutral default): nothing else applies letter-spacing near a TextWrapper.
+    expect(style).not.toMatch(/letter-spacing/);
+    expect(style).not.toMatch(/font-style/);
+    expect(style).not.toMatch(/text-decoration/);
+  });
+
+  it('plain override is the only literal', () => {
+    const style = heading2El(mountHeading2({ fontFamily: 'Exo 2' })).attributes(
+      'style',
+    );
+
+    expect(style).toMatch(/font-family:\s*"Exo 2"/);
+    expect(style).toMatch(/font-size:\s*var\(--role-font-size\)/);
+    expect(style).toMatch(/font-weight:\s*var\(--role-font-weight\)/);
+  });
+
+  it('plain honours a stored off value', () => {
+    const style = heading2El(
+      mountHeading2({ fontWeight: 'normal' }),
+    ).attributes('style');
+
+    // D3: a bold role with an explicit "not bold" override stays a literal, not the role ref.
+    expect(style).toMatch(/font-weight:\s*normal/);
+    expect(style).not.toMatch(/font-weight:\s*var/);
+  });
+
+  it('plain and rich text paint the same', () => {
+    const rteDoc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'Our mission' }],
+        },
+      ],
+    };
+
+    const mountRte = (textStyle: Record<string, unknown>) =>
+      mount(TextWrapper, {
+        props: {
+          textStyle: { ...textStyle, textStyleType: 'heading2' },
+          text: rteDoc,
+          element: 'p',
+        },
+        global: {
+          provide: { [TEXT_ROLE_OPTIONS_KEY]: computed(() => heading2Role) },
+        },
+      });
+
+    // A genuine override (D3): both paint the literal, not the role ref.
+    expect(heading2El(mountHeading2({ fontWeight: 'normal' })).html()).toMatch(
+      /font-weight:\s*normal/,
+    );
+    expect(mountRte({ fontWeight: 'normal' }).html()).toMatch(
+      /font-weight:\s*normal/,
+    );
+
+    // No override: both follow the role via its var.
+    expect(heading2El(mountHeading2({})).attributes('style')).toMatch(
+      /font-weight:\s*var\(--role-font-weight\)/,
+    );
+    expect(mountRte({}).html()).toMatch(
+      /font-weight:\s*var\(--role-font-weight\)/,
+    );
+  });
+
+  it('renders a local RTE strike as a role-aware class so a global underline can compose', async () => {
+    const rteDoc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Our mission',
+              marks: [
+                {
+                  type: 'textStyle',
+                  attrs: { textDecoration: 'line-through' },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+    const roleWithUnderline = {
+      heading2: {
+        style: { ...heading2Role.heading2.style, textDecoration: 'underline' },
+      },
+    };
+
+    const wrapper = mountHeading2({}, roleWithUnderline);
+
+    await wrapper.setProps({ text: rteDoc });
+
+    expect(wrapper.html()).toContain('bp-rte-text-decoration-linethrough');
+  });
+
+  it('keeps a local RTE decoration inline without Page role CSS', () => {
+    const wrapper = mount(TextWrapper, {
+      props: {
+        textStyle: { textStyleType: 'heading2' },
+        text: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: 'Our mission',
+                  marks: [
+                    {
+                      type: 'textStyle',
+                      attrs: { textDecoration: 'line-through' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        element: 'p',
+      },
+    });
+
+    expect(wrapper.html()).toContain('text-decoration: line-through');
+    expect(wrapper.html()).not.toContain('bp-rte-text-decoration-');
+  });
+
+  it('a role edit reaches plain text', async () => {
+    const role = reactive(JSON.parse(JSON.stringify(heading2Role)));
+    const wrapper = mount(TextWrapper, {
+      props: {
+        textStyle: { textStyleType: 'heading2' },
+        text: 'Our mission',
+        element: 'p',
+      },
+      global: {
+        provide: {
+          [TEXT_ROLE_OPTIONS_KEY]: computed(() => role),
+        },
+      },
+    });
+
+    expect(heading2El(wrapper).attributes('style')).not.toMatch(
+      /font-style|text-decoration/,
+    );
+
+    role.heading2.style.fontStyle = 'italic';
+    role.heading2.style.textDecoration = 'underline';
+    await wrapper.vm.$nextTick();
+
+    const style = heading2El(wrapper).attributes('style');
+
+    expect(style).toMatch(/font-style:\s*var\(--role-font-style\)/);
+    expect(style).toMatch(/text-decoration:\s*var\(--role-text-decoration\)/);
+  });
+
+  it('autoscale uses the role size', async () => {
+    const container = document.createElement('div');
+
+    container.setAttribute(
+      'data-fluid-text',
+      JSON.stringify({ default: 1200 }),
+    );
+    Object.defineProperty(container, 'clientWidth', {
+      value: 600,
+      configurable: true,
+    });
+    document.body.appendChild(container);
+
+    const wrapper = mount(TextWrapper, {
+      props: {
+        textStyle: { textStyleType: 'heading2', applyAutoScale: true },
+        text: 'Our mission',
+        element: 'p',
+      },
+      global: {
+        provide: { [TEXT_ROLE_OPTIONS_KEY]: computed(() => heading2Role) },
+      },
+      attachTo: container,
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const fontSize = parseFloat(
+      (wrapper.element as HTMLElement).style.fontSize,
+    );
+
+    expect(fontSize).toBeGreaterThan(0);
+    expect(fontSize).toBeLessThan(100);
+
+    wrapper.unmount();
+    container.remove();
+  });
+});

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -8,13 +8,13 @@
   >
     <div
       class="tw-w-full empty-para"
-      :style="isRTEContent ? textStyleRTE : style"
+      :style="isRTEContent ? textStyleRTE : wrapperStyle"
     >
       <component
         :is="element"
-        :class="[padding, { 'tw-inline': !isRTEContent }]"
+        :class="[padding, roleClass, { 'tw-inline': !isRTEContent }]"
         class="tw-box-decoration-clone"
-        :style="isRTEContent ? {} : textStyles"
+        :style="innerStyle"
         v-html="sanitizeText"
       />
     </div>
@@ -31,19 +31,28 @@ import {
 import {
   type FluidTextData,
   type TextStyleDeclaration,
+  CANONICAL_TEXT_STYLE_TYPES,
+  type CanonicalTextStyleType,
 } from '@brand-page/models';
+import {
+  textRoleClassName,
+  fillRteRunTypography,
+  roleTypographyStyle,
+  TEXT_ROLE_OPTIONS_KEY,
+} from '@brand-page/utils/text-role-css.util';
+import { TEXT_STYLE_CASCADE_PROPS } from '@brand-page/utils/text-style.util';
 import {
   computed,
   reactive,
   onMounted,
   onUnmounted,
   getCurrentInstance,
+  inject,
   watch,
 } from 'vue';
 
 interface Props {
   textStyle: TextStyleDeclaration | undefined;
-  // BP-5787: an RTE field is a legacy inline-HTML string or a Tiptap JSON doc.
   text: RichTextValue;
   element?: string;
   slug?: string;
@@ -86,9 +95,45 @@ const textStyleRTE = computed(() => {
   };
 });
 
-// Render either form (legacy HTML string or Tiptap JSON) to final HTML.
-// For a string this returns it unchanged, so the legacy path is unaffected.
-const renderedHtml = computed(() => renderRteToHtml(props.text));
+const canonicalRoleType = computed<CanonicalTextStyleType | undefined>(() => {
+  const type = props.textStyle?.textStyleType;
+
+  return type &&
+    (CANONICAL_TEXT_STYLE_TYPES as readonly string[]).includes(type)
+    ? (type as CanonicalTextStyleType)
+    : undefined;
+});
+
+const roleClass = computed(() =>
+  canonicalRoleType.value
+    ? textRoleClassName(canonicalRoleType.value)
+    : undefined,
+);
+
+const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+const roleStyle = computed(() =>
+  canonicalRoleType.value
+    ? roleOptions?.value?.[canonicalRoleType.value]?.style
+    : undefined,
+);
+
+const renderedHtml = computed(() => {
+  const text = props.text;
+
+  if (canonicalRoleType.value && isTiptapDocument(text)) {
+    return renderRteToHtml(
+      fillRteRunTypography(
+        text,
+        roleStyle.value as Record<string, string> | undefined,
+        props.textStyle as unknown as Record<string, string> | undefined,
+      ),
+      { textDecorationClasses: roleStyle.value !== undefined },
+    );
+  }
+
+  return renderRteToHtml(text);
+});
 
 const isRTEContent = computed(() => {
   return isTiptapDocument(props.text) || hasRTEContent(renderedHtml.value);
@@ -102,7 +147,9 @@ const sanitizeText = computed(() => {
   return renderedHtml.value;
 });
 
-const fontSize = computed<any>(() => props.textStyle.fontSize);
+const fontSize = computed<any>(
+  () => props.textStyle.fontSize || roleStyle.value?.fontSize,
+);
 
 watch(fontSize, () => {
   applyScale();
@@ -120,6 +167,24 @@ const padding = computed(() =>
     : '',
 );
 
+const wrapperStyle = computed(() => {
+  const stripped: Record<string, unknown> = { ...style.value };
+
+  for (const prop of TEXT_STYLE_CASCADE_PROPS) delete stripped[prop];
+
+  return stripped;
+});
+
+const innerStyle = computed(() => ({
+  ...textStyles.value,
+  ...(isRTEContent.value
+    ? {}
+    : roleTypographyStyle(
+        props.textStyle as unknown as Record<string, string>,
+        roleStyle.value as Record<string, string> | undefined,
+      )),
+}));
+
 onMounted(() => {
   if (props.textStyle.applyAutoScale) {
     setTargetContainer();
@@ -142,8 +207,8 @@ const applyScaleWithDelay = () => {
   }, 350);
 };
 
-// Traversing back up the node tree to find the correct container element
-// There can be more than one due to template setting side bar if we use document selector
+// Walk up from this node, not a document-wide query: the template settings sidebar can render a
+// second matching container.
 const setTargetContainer = () => {
   let p = (currentInstance as any).vnode.el.parentNode;
   while (p) {
@@ -159,10 +224,8 @@ const setTargetContainer = () => {
   }
 };
 
-// minimum font size that will apply the scale
 const minFontSizeInPxToDisableScale = 14;
 
-// Controlled rate that we can apply to baseChangeRate to control the strength of scale,
 const customStrengthRate = 0.3;
 
 const applyScale = () => {
@@ -174,14 +237,15 @@ const applyScale = () => {
     ...renderedHtml.value.matchAll(
       /style="(?:[^"]*?)\bfont-size\s*:\s*(?<fontSize>[^;"']+)[^"]*?"/gm,
     ),
-  ].map((x) => parseFloat(x.groups?.fontSize || '1em'));
+  ]
+    .map((x) => parseFloat(x.groups?.fontSize || '1em'))
+    .filter((size) => !Number.isNaN(size));
 
-  const currentFontSize =
-    fontSizeMatchInRTEText.length > 0
-      ? Math.max(...fontSizeMatchInRTEText)
-      : props.textStyle.fontSize || '1em';
+  const baseFontSize = parseFloat(
+    `${props.textStyle.fontSize || roleStyle.value?.fontSize || '1em'}`,
+  );
 
-  const fontSizeValue = parseFloat(`${currentFontSize}`);
+  const fontSizeValue = Math.max(baseFontSize, ...fontSizeMatchInRTEText);
   const fontSizeValueInPx = fontSizeValue * 16;
   if (fontSizeValueInPx < minFontSizeInPxToDisableScale) {
     data.wrapperStyle.fontSize = '100%';
@@ -193,18 +257,14 @@ const applyScale = () => {
   const targetMaxWidth = data.targetContainerData.default;
 
   if (currentTargetContainerWidth < targetMaxWidth) {
-    // Base change rate which is rate of container size change
     const baseChangeRate = currentTargetContainerWidth / targetMaxWidth;
 
-    // Controlled rate that we can apply to baseChangeRate to control the strength of scale,
     const controlledChangeRate =
       baseChangeRate + (1 - baseChangeRate) * customStrengthRate;
 
-    // VariableRate that determines the how much windowSizeChangeRate to actually apply
     const variableFontRate = minFontSizeInPxToDisableScale / fontSizeValueInPx;
     const variableRate = 1 - variableFontRate;
 
-    // using math power to apply variable factor
     const finalChangeRate = Math.pow(controlledChangeRate, variableRate);
 
     const scaledPercentage = Math.min(finalChangeRate * 100, 100);

package/src/brand-page/constants/font.constants.ts

@@ -5,6 +5,19 @@ export const DISPLAY_TEXT_HEADINGS = 'Headings';
 export const DISPLAY_TEXT_BODY = 'Paragraphs';
 export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
 
+// BP-5969 — display names for the 10 global text roles (English fallback; the
+// panel/picker use i18n `styleSettingsTr(<role>)`, these back it up).
+export const DISPLAY_TEXT_HEADING_1 = 'Heading 1';
+export const DISPLAY_TEXT_HEADING_2 = 'Heading 2';
+export const DISPLAY_TEXT_HEADING_3 = 'Heading 3';
+export const DISPLAY_TEXT_HEADING_4 = 'Heading 4';
+export const DISPLAY_TEXT_HEADING_5 = 'Heading 5';
+export const DISPLAY_TEXT_HEADING_6 = 'Heading 6';
+export const DISPLAY_TEXT_PARAGRAPH_1 = 'Paragraph 1';
+export const DISPLAY_TEXT_PARAGRAPH_2 = 'Paragraph 2';
+export const DISPLAY_TEXT_PARAGRAPH_3 = 'Paragraph 3';
+export const DISPLAY_TEXT_BUTTON = 'Button';
+
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
 
@@ -20,6 +33,30 @@ export const LINE_HEIGHT_TITLE = '1.3';
 export const LINE_HEIGHT_HEADINGS = '1.4';
 export const LINE_HEIGHT_BODY = '1.5';
 
+// BP-5969 — §4 default typography for the 10 global text roles. Sizes in `em`
+// (relative to the 16px root). Weights/letter-spacing are new: the legacy 4
+// roles carried none, so these apply to new sites only — existing sites keep
+// their persisted role definitions (migration-22 preserves appearance).
+// Weight is strictly binary (BP-5969): headings default `bold`, body + button
+// `normal`. No semibold tier — the RTE exposes only a normal/bold toggle, so the
+// role defaults use the same `bold`/`normal` keywords that toggle (and every weight
+// reader) speaks, not numeric weights.
+//
+// Sizes are a display scale in em @ 16px root; the px each em resolves to is noted
+// inline. Headings anchor H1 110px → H6 16px; body runs 22/18/14; button stays 16px.
+export const TEXT_ROLE_STYLE_DEFAULTS = {
+  heading1: { fontSize: '6.875em', fontWeight: 'bold', lineHeight: '1.2' }, // 110px
+  heading2: { fontSize: '5.25em', fontWeight: 'bold', lineHeight: '1.2' }, // 84px
+  heading3: { fontSize: '3.1875em', fontWeight: 'bold', lineHeight: '1.25' }, // 51px
+  heading4: { fontSize: '2.1875em', fontWeight: 'bold', lineHeight: '1.3' }, // 35px
+  heading5: { fontSize: '1.4375em', fontWeight: 'bold', lineHeight: '1.35' }, // 23px
+  heading6: { fontSize: '1em', fontWeight: 'bold', lineHeight: '1.4' }, // 16px
+  paragraph1: { fontSize: '1.375em', fontWeight: 'normal', lineHeight: '1.5' }, // 22px
+  paragraph2: { fontSize: '1.125em', fontWeight: 'normal', lineHeight: '1.5' }, // 18px
+  paragraph3: { fontSize: '0.875em', fontWeight: 'normal', lineHeight: '1.6' }, // 14px
+  button: { fontSize: '1em', fontWeight: 'normal', lineHeight: '1.2' }, // 16px
+} as const;
+
 export const DEFAULT_FONT_SIZE = 12;
 
 export const MIN_TEXT_SIZE_PX = 12;

package/src/brand-page/models/footer-icon-color.test.ts

@@ -23,6 +23,28 @@ describe('footer icon colour fallback', () => {
           .fill,
       ).toBe('#abcdef');
     });
+
+    test('does not mint a legacy copyright role once migration-22 has run', () => {
+      const model = new BrandPageModel({ v: GetLatestModelVersion() });
+
+      expect(model.pageFooterDesktop.copyrightStyle).toEqual({
+        textAlign: 'center',
+      });
+      expect(model.pageFooterMobile.copyrightStyle).toEqual({
+        textAlign: 'center',
+      });
+    });
+
+    test('keeps the legacy copyright role for pre-v22 migration input', () => {
+      const model = new BrandPageModel({ v: 21 });
+
+      expect(model.pageFooterDesktop.copyrightStyle.textStyleType).toBe(
+        'paragraphs',
+      );
+      expect(model.pageFooterMobile.copyrightStyle.textStyleType).toBe(
+        'paragraphs',
+      );
+    });
   });
 
   describe('through migration', () => {