@designcrowd/library.brand-page 6.1.16 → 6.1.17-ast-header-button

package/src/brand-page/components/page-header/PageHeader.vue.test.ts

@@ -0,0 +1,378 @@
+import { vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import PageHeader from './PageHeader.vue';
+import {
+  BRAND_PAGE_TYPES,
+  BUTTON_LINK_TYPE,
+  MEDIA_SIZES,
+  PageHeaderDesktop,
+  PageHeaderMobile,
+  PageStyles,
+  type BrandPageContext,
+  type HeaderButton,
+} from '@brand-page/models';
+import {
+  HEADER_DISPLAY,
+  type HeaderDisplayStyle,
+} from '@src/brand-page/constants';
+import type { NavItemViewModel } from '@brand-page/view-models';
+import { mapToPageHeaderViewModel } from '@brand-page/utils';
+
+// NavigationCarousel calls `new ResizeObserver(...)`, so this has to be constructible.
+global.ResizeObserver = class {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+} as unknown as typeof ResizeObserver;
+
+const CTA = '[data-test-header-cta-button]';
+const SLUG = 'my-brand';
+
+const navItems = (): NavItemViewModel[] =>
+  [
+    {
+      pageId: 'home',
+      slug: SLUG,
+      displayName: 'Home',
+      routeName: 'home-route',
+      routeParams: { slug: SLUG },
+      isRoot: true,
+      isHidden: false,
+      relativePath: '',
+      nestedNavItems: [],
+    },
+    {
+      pageId: 'page-2',
+      slug: SLUG,
+      displayName: 'Second Page',
+      routeName: 'page-route',
+      routeParams: { slug: SLUG, pageSlug: 'second-page' },
+      isRoot: false,
+      isHidden: false,
+      relativePath: 'second-page',
+      nestedNavItems: [],
+    },
+  ] as NavItemViewModel[];
+
+const createContext = (): BrandPageContext =>
+  ({
+    brandPageSlug: SLUG,
+    brandPageToken: '',
+    isMobile: false,
+    isPreview: false,
+    isProduction: false,
+    isServerRender: false,
+    options: { mediaSizes: MEDIA_SIZES.sizeThumb },
+    isTemplate: false,
+    isDesignCom: false,
+    pageTitle: 'My Brand',
+    runtimeEnvironment: '',
+    stripePublishableKey: undefined,
+    recaptchaSiteKey: undefined,
+    customDomain: undefined,
+    brandPageType: BRAND_PAGE_TYPES.brandSite,
+    isBrandPage: false,
+    isBrandPageOrIsBrandContact: false,
+    isBrandSite: true,
+    isBrandContact: false,
+    pages: [],
+    isCapturingPreview: false,
+    nav: { navItems: navItems() },
+  }) as BrandPageContext;
+
+const aHeaderButton = (
+  overrides: Partial<HeaderButton> = {},
+): HeaderButton => ({
+  isVisible: true,
+  text: 'Book now',
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+  url: 'https://example.com/book',
+  buttonTextStyle: { textStyleType: 'buttons' },
+  ...overrides,
+});
+
+const mountHeader = async (options: {
+  headerButton?: HeaderButton;
+  displayStyle?: HeaderDisplayStyle;
+  isLogoVisible?: boolean;
+  navItems?: NavItemViewModel[];
+  isMobile?: boolean;
+  isPreview?: boolean;
+}) => {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: '/:slug/:pageSlug',
+        name: 'page-route',
+        component: { template: '<div />' },
+      },
+      {
+        path: '/:slug',
+        name: 'home-route',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+
+  router.push(`/${SLUG}`);
+  await router.isReady();
+
+  const HeaderModel = options.isMobile ? PageHeaderMobile : PageHeaderDesktop;
+  const context = createContext();
+
+  if (options.navItems) {
+    context.nav.navItems = options.navItems;
+  }
+
+  if (options.isPreview) {
+    context.isPreview = true;
+  }
+
+  const viewModel = mapToPageHeaderViewModel(
+    new HeaderModel({
+      headerButton: options.headerButton,
+      isLogoVisible: options.isLogoVisible ?? true,
+      ...(options.displayStyle ? { displayStyle: options.displayStyle } : {}),
+    }),
+    new PageStyles(),
+    [],
+  );
+
+  return mount(PageHeader, {
+    propsData: { navId: 'nav-1', viewModel, context },
+    global: { plugins: [router] },
+  });
+};
+
+describe('PageHeader - header call-to-action button (BP-5852)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  describe('visibility', () => {
+    test('renders no CTA when the header has no button', async () => {
+      const wrapper = await mountHeader({});
+
+      expect(wrapper.find(CTA).exists()).toBe(false);
+      expect(
+        wrapper.find('[data-component="header-layout-cta"]').exists(),
+      ).toBe(false);
+    });
+
+    test('renders no CTA when the button is configured but hidden', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({ isVisible: false }),
+      });
+
+      expect(wrapper.find(CTA).exists()).toBe(false);
+    });
+
+    test('renders the CTA when the button is visible', async () => {
+      const wrapper = await mountHeader({ headerButton: aHeaderButton() });
+
+      expect(wrapper.find(CTA).exists()).toBe(true);
+      expect(wrapper.get(CTA).text()).toContain('Book now');
+    });
+
+    test('falls back to "Contact Us" when the label is empty', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({ text: '' }),
+      });
+
+      expect(wrapper.get(CTA).text()).toContain('Contact Us');
+    });
+
+    // The header row is CTA-free on the mobile hamburger styles — the drawer carries
+    // the button there (NavigationSideMenu).
+    test.each([
+      HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_2,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_3,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_4,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_2,
+      HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
+    ])('renders no CTA in the %s header row', async (displayStyle) => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        displayStyle,
+        isMobile: true,
+      });
+
+      expect(wrapper.find(CTA).exists()).toBe(false);
+    });
+
+    test.each([
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
+    ])('renders the CTA in the %s header row', async (displayStyle) => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        displayStyle,
+      });
+
+      expect(wrapper.find(CTA).exists()).toBe(true);
+    });
+
+    test('renders the CTA in the mobile hamburger row when the nav is hidden (single page: no icon, no drawer)', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+        isMobile: true,
+        navItems: [navItems()[0]],
+      });
+
+      expect(wrapper.find(CTA).exists()).toBe(true);
+    });
+  });
+
+  describe('render gate', () => {
+    // A single-page site with a hidden logo renders no header at all today; a visible
+    // CTA has to bring the header wrapper back.
+    const singlePageNav = () => [navItems()[0]];
+
+    test('renders no header when there is no nav, no logo and no button', async () => {
+      const wrapper = await mountHeader({
+        isLogoVisible: false,
+        navItems: singlePageNav(),
+      });
+
+      expect(wrapper.find('[data-component="header-layout"]').exists()).toBe(
+        false,
+      );
+    });
+
+    test('renders the header when only the button is visible', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        isLogoVisible: false,
+        navItems: singlePageNav(),
+      });
+
+      expect(wrapper.find('[data-component="header-layout"]').exists()).toBe(
+        true,
+      );
+      expect(wrapper.find(CTA).exists()).toBe(true);
+    });
+  });
+
+  describe('layout hooks', () => {
+    test('flags the layout with has-header-cta only while a CTA renders', async () => {
+      const withButton = await mountHeader({
+        headerButton: aHeaderButton(),
+      });
+      const without = await mountHeader({});
+
+      expect(
+        withButton.get('[data-component="header-layout"]').classes(),
+      ).toContain('has-header-cta');
+      expect(
+        without.get('[data-component="header-layout"]').classes(),
+      ).not.toContain('has-header-cta');
+    });
+  });
+
+  describe('link kinds', () => {
+    test('renders an external url as a new-tab anchor', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({ url: 'https://example.com/book' }),
+      });
+
+      const anchor = wrapper.get(`${CTA} a`);
+
+      expect(anchor.attributes('href')).toBe('https://example.com/book');
+      // target/rel are the external-anchor branch; the router-link branch has neither.
+      expect(anchor.attributes('target')).toBe('_blank');
+      expect(anchor.attributes('rel')).toBe('noopener');
+    });
+
+    test('renders a picked page as an in-app router link', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({
+          buttonLinkType: BUTTON_LINK_TYPE.page,
+          buttonPageId: 'page-2',
+          url: undefined,
+        }),
+      });
+
+      const anchor = wrapper.get(`${CTA} a`);
+
+      expect(anchor.attributes('href')).toBe(`/${SLUG}/second-page`);
+      expect(anchor.attributes('target')).toBeUndefined();
+    });
+
+    test('renders an email address as a mailto link', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({
+          buttonLinkType: BUTTON_LINK_TYPE.mailTo,
+          url: 'hi@example.com',
+        }),
+      });
+
+      expect(wrapper.get(`${CTA} a`).attributes('href')).toBe(
+        'mailto:hi@example.com',
+      );
+    });
+
+    test('renders a phone number as a tel link', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton({
+          buttonLinkType: BUTTON_LINK_TYPE.tel,
+          url: '+61400000000',
+        }),
+      });
+
+      expect(wrapper.get(`${CTA} a`).attributes('href')).toBe(
+        'tel:+61400000000',
+      );
+    });
+  });
+
+  describe('maker click guard', () => {
+    // In the maker preview the CTA is fully inert: it must not select the header
+    // panel (no bubble) and must not follow its link (default prevented).
+    test('a preview CTA click neither bubbles to the header container nor follows the link', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        isPreview: true,
+      });
+
+      const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      });
+
+      wrapper.get(`${CTA} a`).element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(wrapper.emitted('header-container-click')).toBeUndefined();
+    });
+
+    test('a published CTA click follows the link (default not prevented)', async () => {
+      const wrapper = await mountHeader({ headerButton: aHeaderButton() });
+
+      const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      });
+
+      wrapper.get(`${CTA} a`).element.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    test('still reports a click on the header container itself in preview', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        isPreview: true,
+      });
+
+      await wrapper.get('.c-page-header-container').trigger('click');
+
+      expect(wrapper.emitted('header-container-click')).toHaveLength(1);
+    });
+  });
+});

package/src/brand-page/models/header-button.model.test.ts

@@ -0,0 +1,86 @@
+import { describe, test, expect } from 'vitest';
+import {
+  BrandPageModel,
+  BUTTON_LINK_TYPE,
+  PageHeaderDesktop,
+  PageHeaderMobile,
+  type HeaderButton,
+} from './index';
+
+const aHeaderButton = (): HeaderButton => ({
+  isVisible: true,
+  text: 'Contact Us',
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+  url: 'https://example.com',
+  buttonTextStyle: { textStyleType: 'buttons' },
+  fillColor: '#123456',
+  borderColor: '#654321',
+});
+
+// The header constructors copy known fields one-by-one, so an uncopied field is
+// silently dropped on every deserialize.
+describe('header button persistence', () => {
+  describe('PageHeader* constructor', () => {
+    test('keeps a persisted headerButton on both viewports', () => {
+      expect(
+        new PageHeaderDesktop({ headerButton: aHeaderButton() }).headerButton,
+      ).toEqual(aHeaderButton());
+      expect(
+        new PageHeaderMobile({ headerButton: aHeaderButton() }).headerButton,
+      ).toEqual(aHeaderButton());
+    });
+
+    test('leaves headerButton unset when absent (no default seeded)', () => {
+      expect(new PageHeaderDesktop().headerButton).toBeUndefined();
+      expect(new PageHeaderMobile().headerButton).toBeUndefined();
+    });
+
+    test('keeps a page link button with buttonPageId', () => {
+      const button: HeaderButton = {
+        isVisible: true,
+        text: 'About',
+        buttonLinkType: BUTTON_LINK_TYPE.page,
+        buttonPageId: 'page-2',
+      };
+
+      expect(
+        new PageHeaderDesktop({ headerButton: button }).headerButton,
+      ).toEqual(button);
+    });
+  });
+
+  describe('BrandPageModel round-trip', () => {
+    test('survives deserialization from persisted JSON on both viewports', () => {
+      const model = new BrandPageModel({
+        styles: {},
+        pages: [],
+        pageHeaderDesktop: { headerButton: aHeaderButton() },
+        pageHeaderMobile: { headerButton: aHeaderButton() },
+      });
+
+      expect(model.pageHeaderDesktop.headerButton).toEqual(aHeaderButton());
+      expect(model.pageHeaderMobile.headerButton).toEqual(aHeaderButton());
+    });
+
+    test('survives a second pass through the model (re-serialize then re-hydrate)', () => {
+      const first = new BrandPageModel({
+        styles: {},
+        pages: [],
+        pageHeaderDesktop: { headerButton: aHeaderButton() },
+        pageHeaderMobile: { headerButton: aHeaderButton() },
+      });
+
+      const second = new BrandPageModel(JSON.parse(JSON.stringify(first)));
+
+      expect(second.pageHeaderDesktop.headerButton).toEqual(aHeaderButton());
+      expect(second.pageHeaderMobile.headerButton).toEqual(aHeaderButton());
+    });
+
+    test('an existing site with no headerButton stays without one', () => {
+      const model = new BrandPageModel({ styles: {}, pages: [] });
+
+      expect(model.pageHeaderDesktop.headerButton).toBeUndefined();
+      expect(model.pageHeaderMobile.headerButton).toBeUndefined();
+    });
+  });
+});

package/src/brand-page/models/index.ts

@@ -713,6 +713,17 @@ export class NavModel {
   }
 }
 
+export interface HeaderButton {
+  isVisible: boolean;
+  text: string;
+  buttonLinkType: ButtonLinkType;
+  url?: string;
+  buttonPageId?: string;
+  buttonTextStyle?: TextStyleDeclaration;
+  fillColor?: string;
+  borderColor?: string;
+}
+
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 
 export abstract class AbstractPageHeaderStyles {
@@ -742,6 +753,9 @@ export abstract class AbstractPageHeaderStyles {
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
+  /** Absent means no header call-to-action button — never seed a default. */
+  headerButton?: HeaderButton;
+
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
       throw new Error('"viewport" is required');
@@ -779,6 +793,8 @@ export abstract class AbstractPageHeaderStyles {
       ...(options.backgroundStyle || {}),
       backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
     };
+
+    this.headerButton = options.headerButton;
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -156,6 +156,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -231,6 +232,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -653,6 +655,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -728,6 +731,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -1134,6 +1138,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {
@@ -1209,6 +1214,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoImage": {

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -141,6 +141,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         "backgroundOpacity": 100,
       },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoDraftToken": "",
@@ -217,6 +218,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         "backgroundOpacity": 100,
       },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+      "headerButton": undefined,
       "isLogoOptional": false,
       "isLogoVisible": true,
       "logoDraftToken": "",

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -140,6 +140,7 @@ BrandPageModel {
       "backgroundOpacity": 100,
     },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+    "headerButton": undefined,
     "isLogoOptional": false,
     "isLogoVisible": true,
     "logoDraftToken": "",
@@ -216,6 +217,7 @@ BrandPageModel {
       "backgroundOpacity": 100,
     },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+    "headerButton": undefined,
     "isLogoOptional": false,
     "isLogoVisible": true,
     "logoDraftToken": "",
@@ -601,6 +603,7 @@ BrandPageModel {
       "backgroundOpacity": 100,
     },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
+    "headerButton": undefined,
     "isLogoOptional": false,
     "isLogoVisible": true,
     "logoDraftToken": "",
@@ -677,6 +680,7 @@ BrandPageModel {
       "backgroundOpacity": 100,
     },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
+    "headerButton": undefined,
     "isLogoOptional": false,
     "isLogoVisible": true,
     "logoDraftToken": "",

package/src/brand-page/utils/button.util.ts

@@ -45,6 +45,14 @@ export const getBoxShadowValue = (buttonStyles: ButtonStyles): string => {
   return boxShadow;
 };
 
+export const BUTTON_VARIANTS = {
+  section: 'section',
+  header: 'header',
+} as const;
+
+export type ButtonVariant =
+  (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];
+
 // The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
 // is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
 // decoration needs the button to be reasonably wide to render legibly, so narrow