@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/components/save-contact/SaveContactWidget.test.ts

@@ -0,0 +1,100 @@
+import { describe, test, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import SaveContactWidget from './SaveContactWidget.vue';
+import { PageStyles } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// The label's own text isn't the concern here — only its typography. Real translation lookup
+// needs an i18next instance this unit test doesn't load.
+vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  saveContactWidgetTr: () => 'Save Contact',
+}));
+
+const BUTTON_ROLE = { fontFamily: 'Oswald', fontSize: '1em' };
+
+const mountWidget = async (options: {
+  buttonTextStyle?: Record<string, unknown>;
+  withRole?: boolean;
+}) => {
+  setActivePinia(createPinia());
+
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/:pathMatch(.*)*', component: { template: '<div />' } }],
+  });
+
+  await router.push('/');
+  await router.isReady();
+
+  const styles = new PageStyles();
+
+  styles.textStyles.textStyleOptions.button.style = {
+    ...styles.textStyles.textStyleOptions.button.style,
+    ...BUTTON_ROLE,
+  };
+
+  const wrapper = mount(SaveContactWidget, {
+    props: {
+      context: {
+        pages: [],
+        isPreview: true,
+        nav: { navItems: [] },
+      } as unknown as BrandPageContext,
+      buttonTextStyle: options.buttonTextStyle,
+      textStyles: styles.textStyles,
+    },
+    global: {
+      plugins: [router],
+      provide:
+        options.withRole === false
+          ? {}
+          : {
+              [TEXT_ROLE_OPTIONS_KEY]: computed(
+                () => styles.textStyles.textStyleOptions,
+              ),
+            },
+    },
+  });
+
+  await wrapper.vm.$nextTick();
+
+  return wrapper;
+};
+
+// TextWrapper's role class and typography style land on its innermost rendered element
+// (`element="p"`), not the outer wrapper div its parent's `class="c-button__label"` falls
+// through to.
+const labelEl = (wrapper: Awaited<ReturnType<typeof mountWidget>>) =>
+  wrapper.get('.c-button__label p');
+
+describe('SaveContactWidget — the label references the Button text role (BP-5969 R4)', () => {
+  test('the label carries the Button text role class', async () => {
+    const wrapper = await mountWidget({});
+
+    expect(labelEl(wrapper).classes()).toContain('bp-text-role-button');
+  });
+
+  test('the label carries no literal typography — only role references', async () => {
+    const wrapper = await mountWidget({});
+
+    const style = labelEl(wrapper).attributes('style');
+
+    expect(style).toContain('font-family: var(--role-font-family)');
+    expect(style).toContain('font-size: var(--role-font-size)');
+  });
+
+  test('an own override still holds as a literal', async () => {
+    const wrapper = await mountWidget({
+      buttonTextStyle: { textStyleType: 'button', fontFamily: 'Anton' },
+    });
+
+    expect(labelEl(wrapper).attributes('style')).toContain(
+      'font-family: Anton',
+    );
+  });
+});

package/src/brand-page/components/save-contact/SaveContactWidget.vue

@@ -52,7 +52,7 @@ import {
   getCurrentLocale,
 } from '@src/composables/useTranslate';
 import { hasProfileContent, saveContact } from '@brand-page/utils/vcard.util';
-import { isPreviewMode } from '@brand-page/utils';
+import { isPreviewMode, resolveSaveContactTitleStyle } from '@brand-page/utils';
 import { useConsent } from '../../composables/consent.composable';
 import PopupCard from './popup-card/PopupCard.vue';
 import Button from '../button/Button.vue';
@@ -62,6 +62,7 @@ interface Props {
   context: BrandPageContext;
   buttonStyles?: ButtonStyles;
   textStyles?: TextStyles;
+  buttonTextStyle?: TextStyleDeclaration;
   isPremium?: boolean;
   showPopupBranding?: boolean;
 }
@@ -172,8 +173,10 @@ const getButtonViewModel = computed((): any => {
       iconFillColor: {},
       selectedButtonStyleId: '',
     },
-    titleStyle: (props.textStyles?.textStyleOptions?.['buttons'].style ||
-      {}) as TextStyleDeclaration,
+    titleStyle: resolveSaveContactTitleStyle(
+      props.buttonTextStyle,
+      props.textStyles,
+    ),
   };
 });
 

package/src/brand-page/components/shop/PaymentModal.vue

@@ -43,7 +43,7 @@
         <div v-if="data.state === paymentState.Success">
           <TextWrapper
             :text="successMessage"
-            :text-style="uniformDescriptionStyle"
+            :text-style="successMessageStyle"
             element="p"
             class="tw-text-center"
           />
@@ -148,7 +148,7 @@ interface Props {
   isVisible: boolean;
   buttonStyle: ButtonStyles;
   shopPaymentConfig: BrandPagePaymentConfig;
-  descriptionStyle: TextStyleDeclaration | undefined;
+  successMessageStyle: TextStyleDeclaration | undefined;
   successMessage: string;
   isShippingEnabled: boolean;
 }
@@ -158,10 +158,6 @@ const props = withDefaults(defineProps<Props>(), {
   isShippingEnabled: false,
 });
 
-const uniformDescriptionStyle = computed<TextStyleDeclaration>(() => ({
-  color: props.descriptionStyle?.color || 'inherit', // Fallback to 'inherit' if undefined
-}));
-
 const cartSettingsStore = useCartStore();
 const cartDetails = computed(() => cartSettingsStore.cartItems);
 

package/src/brand-page/components/shop/PaymentShippingAddress.vue

@@ -8,6 +8,7 @@
     <!-- Full Name -->
     <TextInput
       v-model="shippingData.name"
+      element-classes="tw-font-sans"
       class="tw-mb-1"
       :placeholder="paymentShippingAddressTr('fullNamePlaceholder')"
       :error="Boolean(errors.name)"
@@ -21,6 +22,7 @@
     <!-- Address Line 1 -->
     <TextInput
       v-model="shippingData.line1"
+      element-classes="tw-font-sans"
       class="tw-mb-1 tw-mt-3"
       :placeholder="paymentShippingAddressTr('addressLine1Placeholder')"
       :error="Boolean(errors.line1)"
@@ -34,6 +36,7 @@
     <!-- Address Line 2 (optional) -->
     <TextInput
       v-model="shippingData.line2"
+      element-classes="tw-font-sans"
       class="tw-mb-1 tw-mt-3"
       :placeholder="paymentShippingAddressTr('addressLine2Placeholder')"
       :error="Boolean(errors.line2)"
@@ -72,6 +75,7 @@
       <div class="tw-flex-1">
         <TextInput
           v-model="shippingData.city"
+          element-classes="tw-font-sans"
           :placeholder="paymentShippingAddressTr('cityPlaceholder')"
           :error="Boolean(errors.city)"
           @blur="validateField('city')"
@@ -88,6 +92,7 @@
       <div class="tw-flex-1">
         <TextInput
           v-model="shippingData.state"
+          element-classes="tw-font-sans"
           :placeholder="paymentShippingAddressTr('statePlaceholder')"
           :error="Boolean(errors.state)"
           @blur="validateField('state')"
@@ -100,6 +105,7 @@
       <div class="tw-flex-1">
         <TextInput
           v-model="shippingData.postalCode"
+          element-classes="tw-font-sans"
           :placeholder="paymentShippingAddressTr('postalCodePlaceholder')"
           :error="Boolean(errors.postalCode)"
           @blur="validateField('postalCode')"

package/src/brand-page/components/shop/Shop.vue

@@ -52,7 +52,12 @@
             @on-product-detail="onShowProductDetailModal"
           />
         </div>
-        <p v-else class="tw-text-center tw-text-base tw-my-4">
+        <p
+          v-else
+          data-test-shop-no-products-message
+          class="tw-text-center tw-text-base tw-my-4"
+          :style="noProductsStyle"
+        >
           {{ shopTr(`noProducts`) }}
         </p>
         <ButtonStyleWrapper
@@ -114,7 +119,7 @@
       class="modal-payment"
       :is-visible="data.isPaymentModalVisible"
       :button-style="viewModel.buttonStyles"
-      :description-style="viewModel.descriptionStyle"
+      :success-message-style="viewModel.successMessageStyle"
       :shop-payment-config="shopPaymentConfig"
       :context="context"
       :success-message="viewModel.successMessage"
@@ -277,6 +282,14 @@ const itemStyle = computed((): BrandPageCssStyle => {
   };
 });
 
+// The view model resolves the colour (`0020-role-is-typography-only-colour-is-contrast-derived.md`:
+// no page base coat to inherit — the title's own colour, else its contrast colour).
+const noProductsStyle = computed(
+  (): BrandPageCssStyle => ({
+    color: props.viewModel.noProductsColor,
+  }),
+);
+
 const contentPaddingStyle = computed(() =>
   toContentPaddingStyle(props.viewModel),
 );

package/src/brand-page/components/shop/Shop.vue.test.ts

@@ -9,6 +9,7 @@ import {
   ButtonStyles,
   MEDIA_SIZES,
   type BrandPageContext,
+  type TextStyleDeclaration,
 } from '@brand-page/models';
 import type { ShopViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
@@ -145,21 +146,56 @@ describe('Shop', () => {
       ).toBe(true);
     });
   });
+
+  describe('no products message', () => {
+    // The view model resolves the colour (mapToShopViewModel: the title's own colour, else
+    // its contrast colour, ADR-0020) — Shop.vue only paints `noProductsColor` as given.
+    const noProductsMessage = (wrapper: ReturnType<typeof mountShop>) =>
+      wrapper.get('[data-test-shop-no-products-message]');
+
+    it('takes the title colour when the view model resolved one', () => {
+      const wrapper = mountShop(
+        createViewModel({ noProductsColor: 'var(--palette-3)' }),
+      );
+
+      expect(noProductsMessage(wrapper).attributes('style')).toContain(
+        'color: var(--palette-3)',
+      );
+    });
+
+    it('has no colour of its own when the view model resolved none', () => {
+      const wrapper = mountShop(
+        createViewModel({ noProductsColor: undefined }),
+      );
+
+      expect(
+        noProductsMessage(wrapper).attributes('style') ?? '',
+      ).not.toContain('color');
+    });
+  });
 });
 
+const SUCCESS_MESSAGE_STYLE: TextStyleDeclaration = {
+  textStyleType: 'paragraph2',
+  fontSize: '1em',
+  color: '#654321',
+  textAlign: 'center',
+};
+
 describe('PaymentModal', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
   });
 
-  const mountPaymentModal = (buttonStyle: any) =>
+  const mountPaymentModal = (buttonStyle: any, renderStubDefaultSlot = false) =>
     shallowMount(PaymentModal, {
+      global: { renderStubDefaultSlot },
       props: {
         context: createContext(),
         isVisible: true,
         buttonStyle,
         shopPaymentConfig: { paymentConfig: {} } as any,
-        descriptionStyle: undefined,
+        successMessageStyle: SUCCESS_MESSAGE_STYLE,
         successMessage: 'Thanks!',
         isShippingEnabled: false,
       },
@@ -213,6 +249,20 @@ describe('PaymentModal', () => {
 
     expect((flatCss as any).style).toBeUndefined();
   });
+
+  // The checkout success message is its own rich text, drawn with its own style.
+  it('renders the success message with its own style', async () => {
+    const wrapper = mountPaymentModal(new ButtonStyles(), true);
+
+    (wrapper.vm as any).data.state = 'success';
+    await flushPromises();
+
+    const message = wrapper
+      .findAllComponents({ name: 'TextWrapper' })
+      .find((text) => text.props('text') === 'Thanks!');
+
+    expect(message?.props('textStyle')).toEqual(SUCCESS_MESSAGE_STYLE);
+  });
 });
 
 // BP-5961 SAFETY-CRITICAL: in any preview the shop is browsable but checkout must be
@@ -308,4 +358,26 @@ describe('Shop checkout hard-block (BP-5961)', () => {
     expect(wrapper.findComponent(PaymentModal).exists()).toBe(true);
     expect(brandPageClient.createBrandPageCart).toHaveBeenCalledTimes(1);
   });
+
+  it('hands the checkout its success message style', async () => {
+    seedShopWithCartItem();
+
+    const wrapper = mount(Shop, {
+      props: {
+        context: createContext({ isPreview: false, isLivePreview: false }),
+        viewModel: createViewModel({
+          products: [PRODUCT],
+          successMessageStyle: SUCCESS_MESSAGE_STYLE,
+        }),
+        contentIndex: 0,
+      },
+      global: { stubs: HARD_BLOCK_STUBS },
+    });
+
+    await triggerCheckout(wrapper);
+
+    expect(
+      wrapper.findComponent(PaymentModal).props('successMessageStyle'),
+    ).toEqual(SUCCESS_MESSAGE_STYLE);
+  });
 });

package/src/brand-page/components/social-links/SocialLinks.stories.ts

@@ -52,9 +52,6 @@ const viewModel: SocialLinksViewModel = {
   iconBackgroundStyles: {},
   backgroundStyles: {},
   titleStyle: {
-    color: '#000000',
-    fontSize: '2.25rem',
-    fontWeight: 'bold',
     textAlign: 'center',
   },
   role: 'social-links',

package/src/brand-page/components/social-links/SocialLinks.vue.test.ts

@@ -9,7 +9,6 @@ import {
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
 } from '@brand-page/models';
 import { createPinia, setActivePinia } from 'pinia';
-import { FONT_SIZE_TITLE } from '../../constants';
 
 const createTestBrandPageContext = (): BrandPageContext => ({
   brandPageSlug: faker.person.firstName(),
@@ -93,8 +92,6 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
   iconBackgroundStyles: {},
   backgroundStyles: {},
   titleStyle: {
-    fontSize: FONT_SIZE_TITLE,
-    fontWeight: 'bold',
     textAlign: 'center',
   },
 });

package/src/brand-page/components/testimonial-section/__fixtures__/data.ts

@@ -42,9 +42,6 @@ export const viewModel: TestimonialSectionViewModel = {
     },
   ],
   titleStyle: {
-    color: 'rgba(0, 0, 0, 1)',
-    fontSize: '2.25rem',
-    fontWeight: 'bold',
     textAlign: 'center',
   },
   testimonialStyle: {

package/src/brand-page/components/text/Text.stories.ts

@@ -15,12 +15,7 @@ const BPviewModel: TextViewModel = {
   textItems: [],
   type: 'text',
   textStyle: {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-    fontFamily: 'Lato',
     textAlign: 'left',
-    overflowWrap: 'anywhere',
-    wordBreak: 'normal',
   },
   columnStyle: '1',
   backgroundColor: {},
@@ -37,7 +32,6 @@ const BSviewModel: TextViewModel = {
       id: 'text-item-1',
       text: 'lorem ipsum',
       textStyle: {
-        fontSize: '1rem',
         textAlign: 'left',
         textStyleType: 'paragraphs',
       },
@@ -46,7 +40,6 @@ const BSviewModel: TextViewModel = {
       id: 'text-item-2',
       text: 'lorem ipsum',
       textStyle: {
-        fontSize: '1rem',
         textAlign: 'left',
         textStyleType: 'paragraphs',
       },
@@ -54,12 +47,7 @@ const BSviewModel: TextViewModel = {
   ],
   type: 'text',
   textStyle: {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-    fontFamily: 'Lato',
     textAlign: 'left',
-    overflowWrap: 'anywhere',
-    wordBreak: 'normal',
   },
   columnStyle: '2',
   backgroundColor: {},
@@ -74,12 +62,7 @@ const BSEmptyTextItem: TextViewModel = {
   textItems: [],
   type: 'text',
   textStyle: {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-    fontFamily: 'Lato',
     textAlign: 'left',
-    overflowWrap: 'anywhere',
-    wordBreak: 'normal',
   },
   columnStyle: '1',
   backgroundColor: {},

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

@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import {
+  resolveTextStyle,
+  NEUTRAL_TYPOGRAPHY_VALUE,
+  TEXT_STYLE_CASCADE_PROPS,
+  type CascadeTypographyProp,
+} from '@brand-page/utils/text-style.util';
+import {
+  roleTypographyStyle,
+  fillRteRunTypography,
+} from '@brand-page/utils/text-role-css.util';
+
+/**
+ * T5.1 (R5) — the render replaced a fully-resolved literal style with a `var(--role-…)` reference
+ * that the browser resolves via the cascade. This proves the SWAP is invisible: resolving each
+ * reference this render produces against its role reproduces exactly what `resolveTextStyle`
+ * (the pre-token, fully-baked resolver) would have painted, for every property, plain and RTE
+ * alike — across no override, one override, a stored off value, and no role in scope.
+ */
+
+type Style = Partial<Record<CascadeTypographyProp, string>>;
+
+const ROLE_A: Style = {
+  fontFamily: 'Lato',
+  fontSize: '6.875em',
+  fontWeight: 'bold',
+  fontStyle: 'normal',
+  letterSpacing: 'normal',
+  lineHeight: '1.2',
+  textDecoration: 'none',
+};
+
+const ROLE_B: Style = {
+  fontFamily: 'Playwrite AT',
+  fontSize: '1em',
+  lineHeight: '1.4',
+  // fontWeight / fontStyle / letterSpacing / textDecoration deliberately unset — most roles
+  // leave these at their CSS-neutral default.
+};
+
+const ROLE_C: Style = {
+  fontFamily: 'Exo 2', // a digit family — proves quoting survives the round trip too
+  fontSize: '2.5em',
+  fontWeight: 'bold',
+  fontStyle: 'italic',
+  letterSpacing: '0.05em',
+  lineHeight: '1.5',
+  textDecoration: 'underline',
+};
+
+const NO_OVERRIDE: Style = {};
+const ONE_OVERRIDE: Style = { fontSize: '3em' };
+// A stored value equal to the CSS-neutral default under a role that sets the opposite (D3): a
+// deliberate "turn it off" that must survive as a literal, not fall back to the role's var.
+const STORED_OFF_VALUE: Style = {
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  textDecoration: 'none',
+};
+
+/** What a reference this render emits actually paints, once the browser resolves it. */
+const resolveRef = (
+  value: string | undefined,
+  prop: CascadeTypographyProp,
+  role: Style | undefined,
+): string | undefined => {
+  if (value == null) return NEUTRAL_TYPOGRAPHY_VALUE[prop]; // no supplier → CSS/inherited default
+
+  if (!value.startsWith('var(')) return value; // a literal override
+
+  return role?.[prop] ?? NEUTRAL_TYPOGRAPHY_VALUE[prop];
+};
+
+/** Treats an absent property as its CSS-neutral default — the two paint identically. */
+const normalize = (
+  value: string | undefined,
+  prop: CascadeTypographyProp,
+): string | undefined => value ?? NEUTRAL_TYPOGRAPHY_VALUE[prop];
+
+const runOnRte = (own: Style, role: Style | undefined) => {
+  const doc = {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text: 'Our mission' }],
+      },
+    ],
+  };
+
+  const filled = fillRteRunTypography(doc as never, role, own) as {
+    content: { content: { marks?: { attrs?: Record<string, string> }[] }[] }[];
+  };
+
+  return filled.content[0].content[0].marks?.find((m) => m.attrs)?.attrs ?? {};
+};
+
+describe('TextWrapper — plain/RTE parity against the pre-token resolver (BP-5969 R5)', () => {
+  const roles: [string, Style | undefined][] = [
+    ['a full role', ROLE_A],
+    ['a partial role', ROLE_B],
+    ['a role with an off-neutral default', ROLE_C],
+    ['no role', undefined],
+  ];
+  const owns: [string, Style][] = [
+    ['no override', NO_OVERRIDE],
+    ['one override', ONE_OVERRIDE],
+    ['a stored off value', STORED_OFF_VALUE],
+  ];
+
+  roles.forEach(([roleName, role]) => {
+    owns.forEach(([ownName, own]) => {
+      it(`plain: ${ownName} against ${roleName} matches resolveTextStyle per property`, () => {
+        const rendered = roleTypographyStyle(own, role);
+        const expected = resolveTextStyle(own, role);
+
+        TEXT_STYLE_CASCADE_PROPS.forEach((prop) => {
+          expect(normalize(resolveRef(rendered[prop], prop, role), prop)).toBe(
+            normalize(expected[prop], prop),
+          );
+        });
+      });
+
+      it(`RTE: ${ownName} against ${roleName} matches resolveTextStyle per property`, () => {
+        const rendered = runOnRte(own, role);
+        const expected = resolveTextStyle(own, role);
+
+        TEXT_STYLE_CASCADE_PROPS.forEach((prop) => {
+          expect(normalize(resolveRef(rendered[prop], prop, role), prop)).toBe(
+            normalize(expected[prop], prop),
+          );
+        });
+      });
+    });
+  });
+});