@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/__fixtures__/production-text-style-resolver.fixture.ts

@@ -0,0 +1,52 @@
+import type { TextStyleDeclaration, TextStyleOptions } from '../models';
+import type { TextStyleType } from '../models/styles.model';
+
+/**
+ * A frozen copy of how production (`origin/develop` before BP-5969, `view-model.util.ts`) resolved
+ * a text field's typography: the "before" for tests that keep a migrated field's look. Never point
+ * it at the current renderer; it is what published sites drew.
+ *
+ * A field on a role the site defines drew ONLY that role's typography
+ * (`getTextStyleByContentTextStyleProperty`): its own values, and the mapper defaults applied before
+ * it (`mapToButtonViewModel`'s label line height, `mapToProfileViewModel`'s sizes), never showed.
+ * A field on no role, or on a role the site lacks, drew its own values over those defaults.
+ * Colour is not modelled.
+ */
+
+// `mapToButtonViewModel`: an unset label line height.
+export const PRODUCTION_BUTTON_DEFAULTS: Record<string, string> = {
+  lineHeight: '1.4',
+};
+
+// `mapToProfileViewModel`: an unset size and line height, per field.
+export const PRODUCTION_PROFILE_DEFAULTS: Record<
+  string,
+  Record<string, string>
+> = {
+  titleStyle: { fontSize: '1em', lineHeight: '1.5' },
+  descriptionStyle: { fontSize: '1em', lineHeight: '1.5' },
+  nameStyle: { fontSize: '1.5em', lineHeight: '1.4' },
+};
+
+// `mapToHeaderButtonViewModel`: the style an absent header button style drew.
+export const PRODUCTION_HEADER_BUTTON_STYLE = {
+  textStyleType: 'buttons',
+} as TextStyleDeclaration;
+
+export const productionTypography = (
+  style: TextStyleDeclaration | undefined,
+  options: TextStyleOptions,
+  mapperDefaults: Record<string, string> = {},
+): Record<string, unknown> => {
+  const mapped: Record<string, unknown> = { ...style };
+
+  for (const [prop, value] of Object.entries(mapperDefaults)) {
+    mapped[prop] ||= value;
+  }
+
+  const option = style?.textStyleType
+    ? options[style.textStyleType as TextStyleType]
+    : undefined;
+
+  return option ? { ...option.style } : mapped;
+};

package/src/brand-page/components/about-section/AboutSection.vue.test.ts

@@ -55,20 +55,10 @@ const createTestAboutViewModel = (): AboutSectionViewModel => ({
   paragraph: '',
   colorReplacements: [],
   titleStyle: {
-    fontSize: '2.25rem',
-    lineHeight: '2.5rem',
-    fontFamily: 'Lato',
     textAlign: 'center',
-    overflowWrap: 'anywhere',
-    wordBreak: 'normal',
   },
   paragraphStyle: {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-    fontFamily: 'Lato',
     textAlign: 'center',
-    overflowWrap: 'anywhere',
-    wordBreak: 'normal',
   },
   backgroundStyle: {},
   role: 'about-section',

package/src/brand-page/components/contact-form/ContactForm.mixin.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, test } from 'vitest';
+import ContactFormMixin from './ContactForm.mixin';
+
+const computedFor = (
+  name:
+    | 'submitButtonStyle'
+    | 'submitButtonTextStyle'
+    | 'submitButtonRoleType'
+    | 'submitButtonRoleClass',
+  thisArg: Record<string, unknown>,
+): Record<string, unknown> =>
+  (
+    ContactFormMixin.computed![name] as unknown as (
+      this: unknown,
+    ) => Record<string, unknown>
+  ).call(thisArg);
+
+// The submit label on Button: the size must be applied once, on the label. On both the
+// <button> and the label, the em sizes multiply (Heading 1's 6.875em × 6.875em ≈ 750px).
+describe('ContactForm submit button', () => {
+  const buttonRole = {
+    fontFamily: 'Lato',
+    fontSize: '1em',
+    fontWeight: 'normal',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    buttonStyles: {
+      style: {
+        color: 'var(--palette-1)',
+        backgroundColor: 'var(--palette-0)',
+        borderColor: 'var(--palette-1)',
+      },
+    },
+    buttonTextStyle: {
+      textStyleType: 'button',
+      fontFamily: 'Lato',
+      fontSize: '6.875em',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+      letterSpacing: '0px',
+      textAlign: 'center',
+      applyAutoScale: true,
+      overflowWrap: 'anywhere',
+      wordBreak: 'normal',
+    },
+  };
+
+  const roleOptions = { button: { style: buttonRole } };
+
+  test('the button carries a role reference for every role-defined property except size', () => {
+    expect(
+      computedFor('submitButtonStyle', { viewModel, roleOptions }),
+    ).toEqual({
+      ...viewModel.buttonStyles.style,
+      fontFamily: 'var(--role-font-family)',
+      fontWeight: 'var(--role-font-weight)',
+      lineHeight: 'var(--role-line-height)',
+      // the role doesn't set letter-spacing, and the block's own '0px' isn't the CSS-neutral
+      // ('normal') either — a genuine own value, so it stays a literal.
+      letterSpacing: '0px',
+    });
+  });
+
+  test('the box carries the role class', () => {
+    expect(
+      computedFor('submitButtonRoleClass', { viewModel, roleOptions }),
+    ).toBe('bp-text-role-button');
+  });
+
+  test('the label carries the whole text style, role included, so it renders through its role', () => {
+    expect(computedFor('submitButtonTextStyle', { viewModel })).toEqual(
+      viewModel.buttonTextStyle,
+    );
+  });
+
+  test('an own text colour still colours the button', () => {
+    const style = computedFor('submitButtonStyle', {
+      viewModel: {
+        ...viewModel,
+        buttonTextStyle: { ...viewModel.buttonTextStyle, color: '#123456' },
+      },
+      roleOptions,
+    });
+
+    expect(style.color).toBe('#123456');
+  });
+
+  test('a stored off value stays a literal against a role that sets the opposite', () => {
+    const style = computedFor('submitButtonStyle', {
+      viewModel: {
+        ...viewModel,
+        buttonTextStyle: { ...viewModel.buttonTextStyle, fontWeight: 'bold' },
+      },
+      roleOptions: {
+        button: { style: { ...buttonRole, fontWeight: 'normal' } },
+      },
+    });
+
+    expect(style.fontWeight).toBe('bold');
+  });
+
+  test('with no role in scope, the box bakes the button text style literally, minus size', () => {
+    const style = computedFor('submitButtonStyle', {
+      viewModel,
+      roleOptions: undefined,
+    });
+
+    // Only the 7 role-var typography properties come from `roleTypographyStyle` — alignment and
+    // the autoscale/wrap flags are the label's concern (`submitButtonTextStyle`, unchanged) and
+    // were always redundant on the box (it already carries `tw-text-center`).
+    expect(style).toEqual({
+      ...viewModel.buttonStyles.style,
+      fontFamily: 'Lato',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+      letterSpacing: '0px',
+    });
+    expect(
+      computedFor('submitButtonRoleClass', {
+        viewModel,
+        roleOptions: undefined,
+      }),
+    ).toBe('bp-text-role-button');
+  });
+});

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import type { ContactFormViewModel } from '@brand-page/view-models';
 import type {
@@ -7,6 +7,7 @@ import type {
   FormFieldType,
 } from '@brand-page/models';
 import { FORM_FIELD_TYPES } from '@brand-page/models';
+import type { TextStyleOptions } from '@brand-page/models';
 import {
   getEmailValidationError,
   getMessageValidationError,
@@ -33,6 +34,12 @@ import {
 } from '@brand-page/utils';
 import { hasRTEContent, type RichTextValue } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '@brand-page/utils/text-role-css.util';
 
 export interface FieldValue {
   value: string;
@@ -66,9 +73,13 @@ export default defineComponent({
   },
   setup() {
     const recaptcha = useReCaptcha();
+    // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+    // the button box bakes the button text style's own values, as before this change.
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
 
     return {
       recaptcha,
+      roleOptions,
     };
   },
   data: () => ({
@@ -87,26 +98,32 @@ export default defineComponent({
       );
     },
 
+    submitButtonRoleClass(): string | undefined {
+      return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+    },
+
+    // The size goes on the label alone: an em size on both the button and the label
+    // multiplies (Heading 1's 6.875em twice is ~750px). The rest stays, since the button's
+    // font sets the line box the label sits in.
     submitButtonStyle(): BrandPageCssStyle {
       const buttonStyle = { ...this.viewModel.buttonStyles?.style };
-      const buttonTextStyle = {
+      const roleStyle = roleStyleFor(
+        this.viewModel.buttonTextStyle?.textStyleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+
+      return {
         ...buttonStyle,
-        ...this.viewModel.buttonTextStyle,
-        color: this.viewModel.buttonTextStyle.color || buttonStyle.color,
+        ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle, {
+          omit: ['fontSize'],
+        }),
+        color: this.viewModel.buttonTextStyle?.color || buttonStyle.color,
       };
-
-      return buttonTextStyle;
     },
 
     submitButtonTextStyle(): BrandPageCssStyle {
-      const buttonTextStyle = {
-        applyAutoScale: this.viewModel.buttonTextStyle.applyAutoScale,
-        fontSize: this.viewModel.buttonTextStyle.fontSize,
-        letterSpacing: this.viewModel.buttonTextStyle.letterSpacing,
-        lineHeight: this.viewModel.buttonTextStyle.lineHeight,
-        wordBreak: this.viewModel.buttonTextStyle.wordBreak,
-        overflowWrap: this.viewModel.buttonTextStyle.overflowWrap,
-      };
+      const { backgroundColor: _backgroundColor, ...buttonTextStyle } =
+        this.viewModel.buttonTextStyle;
 
       return buttonTextStyle;
     },

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -55,6 +55,7 @@
               <TextInput
                 v-if="value.field.type !== 'text-area'"
                 v-model="value.value"
+                element-classes="tw-font-sans"
                 :placeholder="`${value.field.name}${
                   value.field.required ? '*' : ''
                 }`"
@@ -95,6 +96,7 @@
               <button
                 class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
                 :style="submitButtonStyle"
+                :class="submitButtonRoleClass"
               >
                 <TextWrapper
                   :text-style="submitButtonTextStyle"
@@ -169,6 +171,7 @@
                   <TextInput
                     v-if="value.field.type !== 'text-area'"
                     v-model="value.value"
+                    element-classes="tw-font-sans"
                     :placeholder="`${value.field.name}${
                       value.field.required ? '*' : ''
                     }`"
@@ -212,10 +215,13 @@
                     <button
                       class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
                       :style="submitButtonStyle"
-                      :class="{
-                        'tw-w-full': isMobileDevice,
-                        'tw-min-w-[120px]': isDecorativeSubmitStyle,
-                      }"
+                      :class="[
+                        submitButtonRoleClass,
+                        {
+                          'tw-w-full': isMobileDevice,
+                          'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                        },
+                      ]"
                     >
                       <TextWrapper
                         :text-style="submitButtonTextStyle"
@@ -297,6 +303,7 @@
                 <TextInput
                   v-if="value.field.type !== 'text-area'"
                   v-model="value.value"
+                  element-classes="tw-font-sans"
                   :placeholder="`${value.field.name}${
                     value.field.required ? '*' : ''
                   }`"
@@ -340,10 +347,13 @@
                   <button
                     class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
                     :style="submitButtonStyle"
-                    :class="{
-                      'tw-w-full': isMobileDevice,
-                      'tw-min-w-[120px]': isDecorativeSubmitStyle,
-                    }"
+                    :class="[
+                      submitButtonRoleClass,
+                      {
+                        'tw-w-full': isMobileDevice,
+                        'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                      },
+                    ]"
                   >
                     <TextWrapper
                       :text-style="submitButtonTextStyle"
@@ -441,6 +451,7 @@
                       <TextInput
                         v-if="value.field.type !== 'text-area'"
                         v-model="value.value"
+                        element-classes="tw-font-sans"
                         :placeholder="`${value.field.name}${
                           value.field.required ? '*' : ''
                         }`"
@@ -488,10 +499,13 @@
                         <button
                           class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
                           :style="submitButtonStyle"
-                          :class="{
-                            'tw-w-full': isMobileDevice,
-                            'tw-min-w-[120px]': isDecorativeSubmitStyle,
-                          }"
+                          :class="[
+                            submitButtonRoleClass,
+                            {
+                              'tw-w-full': isMobileDevice,
+                              'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                            },
+                          ]"
                         >
                           <TextWrapper
                             :text-style="submitButtonTextStyle"

package/src/brand-page/components/contact-form/ContactForm.vue.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import ContactForm from './ContactForm.vue';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// B1 — ContactForm.mixin.test.ts calls the mixin's computed directly (`.call(thisArg)`), which
+// never runs ContactForm.vue's own `setup()` (the manual `...ContactFormMixin.setup()` spread a
+// mixin's own setup needs — Vue's `mixins:` merge never runs it). A real mount proves the
+// injection actually wires up, not just the computed's logic in isolation. Kept in its own file
+// for readability, not because combining a bare mixin import with a real mount crashes —
+// Payment.test.ts does both in one file without issue.
+describe('ContactForm submit button — role wiring (real mount, BP-5969 B1)', () => {
+  const buttonRole = {
+    fontFamily: 'Lato',
+    fontSize: '1em',
+    fontWeight: 'normal',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    fields: [],
+    buttonStyles: {
+      style: { backgroundColor: 'var(--palette-0)', borderStyle: 'solid' },
+    },
+    buttonText: 'Send',
+    buttonTextStyle: {
+      textStyleType: 'button',
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+    },
+  };
+
+  const mountContactForm = () =>
+    mount(ContactForm, {
+      props: {
+        context: { isBrandSite: false } as any,
+        viewModel,
+        isPreview: false,
+      } as any,
+      global: {
+        provide: {
+          [TEXT_ROLE_OPTIONS_KEY]: computed(() => ({
+            button: { style: buttonRole },
+          })),
+        },
+      },
+    });
+
+  it('the submit button carries the role class and a role reference, mounted through Vue', () => {
+    const button = mountContactForm().get('button');
+
+    expect(button.classes()).toContain('bp-text-role-button');
+    expect(button.attributes('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+  });
+});

package/src/brand-page/components/mailing-list/MailingList.mixin.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest';
+import MailingListMixin from './MailingList.mixin';
+
+const computedFor = (
+  name: 'buttonStyle' | 'buttonRoleClass',
+  thisArg: Record<string, unknown>,
+): Record<string, unknown> =>
+  (
+    MailingListMixin.computed![name] as unknown as (
+      this: unknown,
+    ) => Record<string, unknown>
+  ).call(thisArg);
+
+// The subscribe button holds its own plain text (no TextWrapper) — so unlike the contact-form
+// and payment boxes, it must carry EVERY role-defined property, size included.
+describe('MailingList subscribe button', () => {
+  const buttonRole = {
+    fontFamily: 'Lato',
+    fontSize: '1em',
+    fontWeight: 'normal',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    styles: {
+      style: { backgroundColor: 'var(--palette-0)', borderStyle: 'solid' },
+    },
+    buttonTextStyle: {
+      textStyleType: 'button',
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+    },
+  };
+
+  const roleOptions = { button: { style: buttonRole } };
+
+  it('carries a role reference for every role-defined property, including size', () => {
+    expect(computedFor('buttonStyle', { viewModel, roleOptions })).toEqual({
+      backgroundColor: 'var(--palette-0)',
+      borderStyle: 'solid',
+      fontFamily: 'var(--role-font-family)',
+      fontSize: 'var(--role-font-size)',
+      fontWeight: 'var(--role-font-weight)',
+      lineHeight: 'var(--role-line-height)',
+    });
+  });
+
+  it('carries the role class', () => {
+    expect(computedFor('buttonRoleClass', { viewModel, roleOptions })).toBe(
+      'bp-text-role-button',
+    );
+  });
+
+  it('an own colour still wins', () => {
+    const style = computedFor('buttonStyle', {
+      viewModel: {
+        ...viewModel,
+        buttonTextStyle: { ...viewModel.buttonTextStyle, color: '#123456' },
+      },
+      roleOptions,
+    });
+
+    expect(style.color).toBe('#123456');
+  });
+
+  it('an own size stays a literal against the role', () => {
+    const style = computedFor('buttonStyle', {
+      viewModel: {
+        ...viewModel,
+        buttonTextStyle: { ...viewModel.buttonTextStyle, fontSize: '1.25em' },
+      },
+      roleOptions,
+    });
+
+    expect(style.fontSize).toBe('1.25em');
+  });
+
+  it('with no role in scope, bakes the button text style literally', () => {
+    expect(
+      computedFor('buttonStyle', { viewModel, roleOptions: undefined }),
+    ).toEqual({
+      backgroundColor: 'var(--palette-0)',
+      borderStyle: 'solid',
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'normal',
+      lineHeight: '1.2',
+    });
+  });
+});

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
@@ -8,13 +8,19 @@ import {
   isPreviewMode,
 } from '@brand-page/utils';
 import { sectionFrameStyle } from '@brand-page/utils/button.util';
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, TextStyleOptions } from '@brand-page/models';
 import {
   contentSettingsTr,
   mailingListTr,
 } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '@brand-page/utils/text-role-css.util';
 
 const MAX_NAME_LENGTH = 200;
 
@@ -40,10 +46,14 @@ export default defineComponent({
   },
   setup() {
     const recaptcha = useReCaptcha();
+    // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+    // the button bakes the button text style's own values, as before this change.
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
 
     return {
       mailingListTr,
       recaptcha,
+      roleOptions,
     };
   },
   data() {
@@ -94,6 +104,12 @@ export default defineComponent({
       return Boolean(this.submitError);
     },
 
+    buttonRoleClass(): string | undefined {
+      return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+    },
+
+    // The button holds its own plain text, not a `TextWrapper` — so unlike the contact-form and
+    // payment boxes, its typography is applied here in full, size included.
     buttonStyle(): BrandPageCssStyle {
       const buttonStyle = { ...this.viewModel.styles?.style };
 
@@ -104,7 +120,16 @@ export default defineComponent({
         buttonStyle.backgroundColor = buttonStyle.backgroundColor;
       }
 
-      return { ...buttonStyle, ...this.viewModel.buttonTextStyle };
+      const roleStyle = roleStyleFor(
+        this.viewModel.buttonTextStyle?.textStyleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+
+      return {
+        ...buttonStyle,
+        ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle),
+        color: this.viewModel.buttonTextStyle?.color ?? buttonStyle.color,
+      };
     },
 
     buttonText(): string {

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -22,6 +22,7 @@
         <TextInput
           v-if="isNameRequired"
           v-model="name"
+          element-classes="tw-font-sans"
           :placeholder="mailingListTr('namePlaceholder')"
           :label="mailingListTr('nameLabel')"
           :show-label-screen-reader-only="true"
@@ -35,6 +36,7 @@
         </p>
         <TextInput
           v-model="email"
+          element-classes="tw-font-sans"
           :placeholder="mailingListTr('emailPlaceholder')"
           :label="mailingListTr('emailLabel')"
           :show-label-screen-reader-only="true"
@@ -55,10 +57,13 @@
             :style="buttonStyle"
             :disabled="isFormDisabled"
             class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
-            :class="{
-              'tw-cursor-pointer hover:tw-underline': !isFormDisabled,
-              'tw-cursor-wait': isSubmitting,
-            }"
+            :class="[
+              buttonRoleClass,
+              {
+                'tw-cursor-pointer hover:tw-underline': !isFormDisabled,
+                'tw-cursor-wait': isSubmitting,
+              },
+            ]"
           >
             {{ buttonText }}
           </button>