@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed, nextTick } from 'vue';
+import MailingList from './MailingList.vue';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// B1 — MailingList.mixin.test.ts calls the mixin's computed directly (`.call(thisArg)`), which
+// never runs MailingList.vue's own `setup()` (the manual `...MailingListMixin.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('MailingList subscribe button — role wiring (real mount, BP-5969 B1)', () => {
+  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 mountMailingList = () =>
+    mount(MailingList, {
+      props: {
+        viewModel,
+        isPreview: false,
+        context: {} as any,
+      },
+      global: {
+        provide: {
+          [TEXT_ROLE_OPTIONS_KEY]: computed(() => ({
+            button: { style: buttonRole },
+          })),
+        },
+      },
+    });
+
+  it('the subscribe button carries the role class and a role reference, mounted through Vue', async () => {
+    const wrapper = mountMailingList();
+
+    // `show` flips true in `mounted()` — a reactive update, not reflected until the next tick.
+    await nextTick();
+
+    const button = wrapper.get('button');
+
+    expect(button.classes()).toContain('bp-text-role-button');
+    expect(button.attributes('style')).toContain(
+      'font-size: var(--role-font-size)',
+    );
+  });
+});

package/src/brand-page/components/navigation/button-carousel/ButtonCarouselNavigation.mixin.ts

@@ -1,12 +1,19 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import type {
   BrandPageContext,
   NavigationDesktop,
   NavigationMobile,
+  TextStyleOptions,
 } from '../../../models';
 import type { NavViewModel } from '../../../view-models';
 import debounce from 'lodash.debounce';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '../../../utils/text-role-css.util';
 
 export default defineComponent({
   props: {
@@ -31,6 +38,15 @@ export default defineComponent({
       required: true,
     },
   },
+  // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `ButtonCarouselNavigation.vue`
+  // invokes this one itself and spreads its return into its own `setup()`.
+  setup() {
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+    return {
+      roleOptions,
+    };
+  },
   data() {
     return {
       hasInteracted: false,
@@ -82,6 +98,40 @@ export default defineComponent({
       window.removeEventListener(`viewport:updated`, this.update);
     }
   },
+  computed: {
+    // One role backs the whole tab bar: `selectedButtonStyle` carries only override deltas
+    // over the default, never its own `textStyleType`.
+    navRoleType(): string | undefined {
+      return this.navigation.defaultButtonStyle?.textStyleType;
+    },
+    navRoleClass(): string | undefined {
+      return roleClassFor(this.navRoleType);
+    },
+    navRoleStyle(): BrandPageCssStyle | undefined {
+      return roleStyleFor(
+        this.navRoleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+    },
+    defaultTabStyle(): BrandPageCssStyle {
+      return {
+        ...this.navigation.defaultButtonStyle,
+        ...roleTypographyStyle(
+          this.navigation.defaultButtonStyle,
+          this.navRoleStyle,
+        ),
+      };
+    },
+    selectedTabStyle(): BrandPageCssStyle {
+      return {
+        ...this.navigation.selectedButtonStyle,
+        ...roleTypographyStyle(
+          this.navigation.selectedButtonStyle,
+          this.navRoleStyle,
+        ),
+      };
+    },
+  },
   methods: {
     isCurrentPage(navItem: { relativePath: string }) {
       return navItem.relativePath === this.context.currentPageRelativePath;

package/src/brand-page/components/navigation/button-carousel/ButtonCarouselNavigation.test.ts

@@ -0,0 +1,114 @@
+import { describe, test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import ButtonCarouselNavigation from './ButtonCarouselNavigation.vue';
+import { NavigationDesktop } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
+import type { NavItemViewModel, NavViewModel } from '@brand-page/view-models';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+const PARAGRAPH1_ROLE = {
+  fontFamily: 'Anton',
+  fontSize: '1em',
+  fontWeight: 'normal',
+};
+
+const roleOptions = { paragraph1: { style: PARAGRAPH1_ROLE } };
+
+// The real Carousel (fe-shared-lib, Swiper-backed) isn't the concern here — only that this
+// component's own tab bindings reference the role. The stub renders every card through the
+// `#slide` scoped slot, the same contract `Carousel` provides.
+const CarouselStub = {
+  props: ['cards'],
+  template:
+    '<div><template v-for="slide in cards" :key="slide.pageId"><slot name="slide" :slide="slide" /></template></div>',
+};
+
+const navItem = (overrides: Partial<NavItemViewModel> = {}): NavItemViewModel =>
+  ({
+    pageId: 'home',
+    slug: 'my-brand',
+    displayName: 'Home',
+    routeName: 'home-route',
+    routeParams: { slug: 'my-brand' },
+    isRoot: true,
+    isHidden: false,
+    relativePath: '',
+    nestedNavItems: [],
+    ...overrides,
+  }) as NavItemViewModel;
+
+const mountNav = async (options: {
+  navItems: NavItemViewModel[];
+  withRole?: boolean;
+}) => {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: '/:slug',
+        name: 'home-route',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+
+  router.push('/my-brand');
+  await router.isReady();
+
+  const navigation = new NavigationDesktop({
+    defaultButtonStyle: { textStyleType: 'paragraph1' },
+    selectedButtonStyle: { fontWeight: 'bold' },
+  });
+
+  const context = {
+    currentPageRelativePath: '',
+    isPreview: false,
+    isTemplate: false,
+  } as BrandPageContext;
+
+  const pageNavigation: NavViewModel = { navItems: options.navItems } as never;
+
+  return mount(ButtonCarouselNavigation, {
+    props: {
+      navId: 'nav-1',
+      context,
+      slug: 'my-brand',
+      navigation,
+      pageNavigation,
+    },
+    global: {
+      plugins: [router],
+      stubs: { Carousel: CarouselStub },
+      provide:
+        options.withRole === false
+          ? {}
+          : { [TEXT_ROLE_OPTIONS_KEY]: computed(() => roleOptions) },
+    },
+  });
+};
+
+describe('ButtonCarouselNavigation — role-var typography (BP-5969 R4)', () => {
+  test('a tab references the role for every role-defined property, plus the role class', async () => {
+    const wrapper = await mountNav({ navItems: [navItem()] });
+
+    const tab = wrapper.get('[data-component="button-carousel-navigation"]');
+
+    expect(tab.attributes('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+    expect(tab.attributes('style')).toContain(
+      'font-size: var(--role-font-size)',
+    );
+    expect(wrapper.find('.bp-text-role-paragraph1').exists()).toBe(true);
+  });
+
+  test('with no role in scope, the tab bakes its own values literally', async () => {
+    const wrapper = await mountNav({ navItems: [navItem()], withRole: false });
+
+    const tab = wrapper.get('[data-component="button-carousel-navigation"]');
+
+    expect(tab.attributes('style')).not.toContain('var(--role-');
+  });
+});

package/src/brand-page/components/navigation/button-carousel/ButtonCarouselNavigation.vue

@@ -4,6 +4,7 @@
       v-if="pageNavigation && pageNavigation.navItems.length"
       :class="[
         'c-nav-button-list',
+        navRoleClass,
         disablePrev && 'disable-prev',
         disableNext && 'disable-next',
         loading ? 'loading' : 'ready',
@@ -26,8 +27,8 @@
             class="tw-block tw-text-center tw-no-underline tw-p-4 tw-whitespace-nowrap"
             :style="[
               isCurrentPage(slide.routeParams)
-                ? navigation.selectedButtonStyle
-                : navigation.defaultButtonStyle,
+                ? selectedTabStyle
+                : defaultTabStyle,
             ]"
           >
             {{ slide.displayName }}
@@ -44,6 +45,11 @@ import ButtonCarouselNavigationMixin from './ButtonCarouselNavigation.mixin.ts';
 export default {
   components: { Carousel },
   mixins: [ButtonCarouselNavigationMixin],
+  setup() {
+    return {
+      ...ButtonCarouselNavigationMixin.setup(),
+    };
+  },
 };
 </script>
 

package/src/brand-page/components/navigation/navigation-carousel/NavigationCarousel.test.ts

@@ -0,0 +1,182 @@
+import { describe, test, expect, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import NavigationCarousel from './NavigationCarousel.vue';
+import { NavigationDesktop } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
+import type { NavItemViewModel, NavViewModel } from '@brand-page/view-models';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// NavigationCarousel calls `new ResizeObserver(...)`.
+global.ResizeObserver = class {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+} as unknown as typeof ResizeObserver;
+
+const PARAGRAPH1_ROLE = {
+  fontFamily: 'Anton',
+  fontSize: '1em',
+  fontWeight: 'normal',
+  lineHeight: '1.2',
+};
+
+const roleOptions = { paragraph1: { style: PARAGRAPH1_ROLE } };
+
+const navItem = (overrides: Partial<NavItemViewModel> = {}): NavItemViewModel =>
+  ({
+    pageId: 'home',
+    slug: 'my-brand',
+    displayName: 'Home',
+    routeName: 'home-route',
+    routeParams: { slug: 'my-brand' },
+    isRoot: true,
+    isHidden: false,
+    relativePath: '',
+    nestedNavItems: [],
+    ...overrides,
+  }) as NavItemViewModel;
+
+const mountCarousel = async (options: {
+  navItems: NavItemViewModel[];
+  currentPageRelativePath?: string;
+  withRole?: boolean;
+}) => {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: '/:slug',
+        name: 'home-route',
+        component: { template: '<div />' },
+      },
+      {
+        path: '/:slug/:pageSlug',
+        name: 'page-route',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+
+  router.push('/my-brand');
+  await router.isReady();
+
+  const navigation = new NavigationDesktop({
+    defaultButtonStyle: { textStyleType: 'paragraph1' },
+    selectedButtonStyle: { fontWeight: 'bold' },
+  });
+
+  const context = {
+    currentPageRelativePath: options.currentPageRelativePath ?? '',
+    isPreview: false,
+  } as BrandPageContext;
+
+  const pageNavigation: NavViewModel = { navItems: options.navItems } as never;
+
+  return mount(NavigationCarousel, {
+    props: { context, slug: 'my-brand', navigation, pageNavigation },
+    global: {
+      plugins: [router],
+      provide:
+        options.withRole === false
+          ? {}
+          : { [TEXT_ROLE_OPTIONS_KEY]: computed(() => roleOptions) },
+    },
+    attachTo: document.body,
+  });
+};
+
+describe('NavigationCarousel — role-var typography (BP-5969 R4)', () => {
+  let wrapper: Awaited<ReturnType<typeof mountCarousel>> | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = undefined;
+  });
+
+  test('the component root carries the nav role class', async () => {
+    wrapper = await mountCarousel({ navItems: [navItem()] });
+
+    expect(wrapper.classes()).toContain('bp-text-role-paragraph1');
+  });
+
+  test('a default tab references the role for every role-defined property', async () => {
+    wrapper = await mountCarousel({ navItems: [navItem()] });
+
+    const style = wrapper.get('.carousel-link').attributes('style');
+
+    expect(style).toContain('font-family: var(--role-font-family)');
+    expect(style).toContain('font-size: var(--role-font-size)');
+    expect(style).toContain('line-height: var(--role-line-height)');
+  });
+
+  test('the chevrons reference the role too', async () => {
+    wrapper = await mountCarousel({ navItems: [navItem(), navItem()] });
+
+    const chevron = wrapper.get('.scroll-chevron');
+
+    expect(chevron.attributes('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+  });
+
+  test('the selected tab keeps its own override; the rest still reference the role', async () => {
+    wrapper = await mountCarousel({
+      navItems: [navItem({ relativePath: '' })],
+      currentPageRelativePath: '',
+    });
+
+    const style = wrapper.get('.carousel-link').attributes('style');
+
+    // `selectedButtonStyle: { fontWeight: 'bold' }` is a genuine override over the paragraph1
+    // role's `normal` — it must stay a literal, not a `var(--role-font-weight)` ref.
+    expect(style).toContain('font-weight: bold');
+    expect(style).toContain('font-family: var(--role-font-family)');
+  });
+
+  test('with no role in scope, the tab bakes its own values literally', async () => {
+    wrapper = await mountCarousel({
+      navItems: [navItem()],
+      withRole: false,
+    });
+
+    const style = wrapper.get('.carousel-link').attributes('style');
+
+    expect(style).not.toContain('var(--role-');
+  });
+
+  test('a hovered tab with nested items reveals a dropdown carrying the nav role class', async () => {
+    wrapper = await mountCarousel({
+      navItems: [
+        navItem({
+          nestedNavItems: [
+            navItem({
+              pageId: 'sub',
+              displayName: 'Sub Page',
+              relativePath: 'sub-page',
+              routeName: 'page-route',
+              routeParams: { slug: 'my-brand', pageSlug: 'sub-page' },
+              nestedNavItems: [],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    await wrapper.get('.carousel-item').trigger('mouseenter');
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    await wrapper.vm.$nextTick();
+
+    const dropdown = document.querySelector('.dropdown-menu');
+
+    expect(dropdown).not.toBeNull();
+    expect(dropdown?.classList.contains('bp-text-role-paragraph1')).toBe(true);
+
+    const item = dropdown?.querySelector('.dropdown-item') as HTMLElement;
+
+    expect(item?.getAttribute('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+  });
+});

package/src/brand-page/components/navigation/navigation-carousel/NavigationCarousel.vue

@@ -3,6 +3,7 @@
     ref="containerRef"
     data-component="navigation-carousel"
     class="tw-flex tw-items-center tw-gap-2"
+    :class="navRoleClass"
   >
     <div
       :class="[
@@ -14,7 +15,7 @@
         name="chevron-left"
         size="sm"
         class="scroll-chevron"
-        :style="navigation.defaultButtonStyle"
+        :style="defaultLinkStyle"
         @click="scrollLeft"
       />
     </div>
@@ -41,11 +42,10 @@
               name: navItem.routeName,
               params: navItem.routeParams as any,
             }"
+            data-test-nav-item
             class="carousel-link"
             :style="[
-              isNavItemActive(navItem)
-                ? navigation.selectedButtonStyle
-                : navigation.defaultButtonStyle,
+              isNavItemActive(navItem) ? selectedLinkStyle : defaultLinkStyle,
             ]"
             @click="onLinkClick"
             @mousedown.prevent
@@ -67,9 +67,7 @@
               },
             ]"
             :style="[
-              isNavItemActive(navItem)
-                ? navigation.selectedButtonStyle
-                : navigation.defaultButtonStyle,
+              isNavItemActive(navItem) ? selectedLinkStyle : defaultLinkStyle,
             ]"
             @click.stop="
               onChevronClick(`${navItem.relativePath}_${i}`, navItem)
@@ -86,6 +84,7 @@
           :class="[
             'dropdown-menu',
             { 'dropdown-menu--mobile': isMobileDisplay },
+            navRoleClass,
           ]"
           :style="dropdownStyle"
           @mouseenter="onDropdownEnter"
@@ -117,7 +116,7 @@
         name="chevron-right"
         size="sm"
         class="scroll-chevron"
-        :style="navigation.defaultButtonStyle"
+        :style="defaultLinkStyle"
         @click="scrollRight"
       />
     </div>
@@ -125,7 +124,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import {
+  computed,
+  ref,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  watch,
+  inject,
+} from 'vue';
 import { Icon } from '@designcrowd/fe-shared-lib';
 import type { NavItemViewModel, NavViewModel } from '../../../view-models';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
@@ -133,7 +140,14 @@ import type {
   BrandPageContext,
   NavigationDesktop,
   NavigationMobile,
+  TextStyleOptions,
 } from '../../../models';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '../../../utils/text-role-css.util';
 
 interface Props {
   context: BrandPageContext;
@@ -144,6 +158,41 @@ interface Props {
 
 const props = defineProps<Props>();
 
+// The live role options, provided by `Page`. Absent (rendered outside Page) → `roleStyle` is
+// undefined and the tabs/chevrons/dropdown bake the nav style's own values, as before this change.
+const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+const navRoleType = computed(
+  () => props.navigation.defaultButtonStyle?.textStyleType,
+);
+
+// One role backs the whole nav bar: `selectedButtonStyle` carries only override deltas over the
+// default, never its own `textStyleType`.
+const navRoleClass = computed(() => roleClassFor(navRoleType.value));
+
+const navRoleStyle = computed(() =>
+  roleStyleFor(
+    navRoleType.value,
+    roleOptions?.value as TextStyleOptions | undefined,
+  ),
+);
+
+// The class defines the role's vars; this fills in the refs (or a literal override) for
+// whichever typography the tab/chevron/dropdown item doesn't already set itself.
+const withRoleTypography = (
+  own: BrandPageCssStyle | undefined,
+): BrandPageCssStyle => ({
+  ...own,
+  ...roleTypographyStyle(own, navRoleStyle.value),
+});
+
+const defaultLinkStyle = computed(() =>
+  withRoleTypography(props.navigation.defaultButtonStyle),
+);
+const selectedLinkStyle = computed(() =>
+  withRoleTypography(props.navigation.selectedButtonStyle),
+);
+
 const hoveredSlide = ref<string | null>(null);
 const hoveredNavItem = ref<NavItemViewModel | null>(null);
 const slideRefs = ref<Record<string, HTMLElement>>({});
@@ -555,9 +604,7 @@ const navItems = computed(() => props.pageNavigation.navItems);
 
 const getDropdownItemStyle = (navItem: NavItemViewModel) => {
   const isActive = isNavItemActive(navItem);
-  const baseStyle = isActive
-    ? props.navigation.selectedButtonStyle
-    : props.navigation.defaultButtonStyle;
+  const baseStyle = isActive ? selectedLinkStyle.value : defaultLinkStyle.value;
 
   return {
     ...baseStyle,

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.ts

@@ -1,13 +1,20 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import type {
   BrandPageContext,
   NavigationDesktop,
   NavigationMobile,
+  TextStyleOptions,
 } from '../../../models';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
 import { guardPreviewClick } from '../../../utils/context.util';
 import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '../../../utils/text-role-css.util';
 
 export default defineComponent({
   props: {
@@ -36,6 +43,15 @@ export default defineComponent({
     },
   },
   emits: ['close-side-menu'],
+  // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `NavigationSideMenu.vue`
+  // invokes this one itself and spreads its return into its own `setup()`.
+  setup() {
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+    return {
+      roleOptions,
+    };
+  },
   data() {
     return {
       expandedItems: {} as Record<string, boolean>, // Keep track of which navs are expanded
@@ -55,11 +71,32 @@ export default defineComponent({
         { fontSize: 'initial', lineHeight: 'initial' },
       );
     },
+    navRoleType(): string | undefined {
+      return this.styles.hamburgerMenuStyle.defaultButtonStyle?.textStyleType;
+    },
+    navRoleClass(): string | undefined {
+      return roleClassFor(this.navRoleType);
+    },
+    navRoleStyle(): BrandPageCssStyle | undefined {
+      return roleStyleFor(
+        this.navRoleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+    },
     defaultButtonStyle(): BrandPageCssStyle {
-      return this.styles.hamburgerMenuStyle.defaultButtonStyle;
+      const own = this.styles.hamburgerMenuStyle.defaultButtonStyle;
+
+      return { ...own, ...roleTypographyStyle(own, this.navRoleStyle) };
+    },
+    sidebarStyle(): BrandPageCssStyle {
+      const { fontSize: _fontSize, ...rest } = this.defaultButtonStyle;
+
+      return rest;
     },
     selectedButtonStyle(): BrandPageCssStyle {
-      return this.styles.hamburgerMenuStyle.selectedButtonStyle;
+      const own = this.styles.hamburgerMenuStyle.selectedButtonStyle;
+
+      return { ...own, ...roleTypographyStyle(own, this.navRoleStyle) };
     },
     // Prevents us from doubling down on em sizing of font
     defaultWrapperStyle(): BrandPageCssStyle {