@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/src/brand-page/components/page-header/PageHeader.mixin.ts

@@ -1,8 +1,13 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { BrandPageContext } from '@brand-page/models';
-import type { PageHeaderViewModel } from '@brand-page/view-models';
+import type {
+  ButtonViewModel,
+  PageHeaderViewModel,
+} from '@brand-page/view-models';
 import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
+import { hasVisibleNavigation } from '../../utils/route.util';
+import { guardPreviewClick } from '../../utils/context.util';
 
 export default defineComponent({
   props: {
@@ -37,16 +42,11 @@ export default defineComponent({
         padding: '1.5rem 0', // var(--page-padding) 0
       };
     },
+    headerButtonViewModel(): ButtonViewModel | undefined {
+      return this.viewModel.headerButtonViewModel;
+    },
     showNav(): boolean {
-      const visibleNavItems = this.context.nav.navItems.filter(
-        (item) => !item.isHidden,
-      );
-
-      return (
-        visibleNavItems.length > 1 ||
-        (visibleNavItems.length === 1 &&
-          visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden))
-      );
+      return hasVisibleNavigation(this.context.nav.navItems);
     },
   },
   emits: ['header-container-click'],
@@ -54,5 +54,9 @@ export default defineComponent({
     onHeaderContainerClick() {
       this.$emit('header-container-click');
     },
+    // Preview only: deliberately inert — no link-follow, no Header Settings open.
+    onHeaderCtaClick(event: MouseEvent): void {
+      guardPreviewClick(event, this.context);
+    },
   },
 });

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="showNav || viewModel.logo.isVisible" :style="containerCss">
+  <div
+    v-if="showNav || viewModel.logo.isVisible || headerButtonViewModel"
+    :style="containerCss"
+  >
     <div class="c-page-header-container" @click="onHeaderContainerClick()">
       <HeaderLayout
         :nav-id="navId"
@@ -8,6 +11,7 @@
         :logo-width="
           viewModel.logo?.logoImageWidth || LOGO_SLIDER_DESKTOP_MAX + 'rem'
         "
+        :has-cta="Boolean(headerButtonViewModel)"
       >
         <template #logo>
           <Logo
@@ -29,6 +33,15 @@
             @click.stop
           />
         </template>
+        <template v-if="headerButtonViewModel" #cta>
+          <!-- Test hook is per-instance (nav-1/nav-2/side menu) since both viewport headers stay in the DOM. -->
+          <Button
+            :data-test-header-cta-button="navId"
+            :view-model="headerButtonViewModel"
+            :context="context"
+            @click.capture="onHeaderCtaClick"
+          />
+        </template>
       </HeaderLayout>
     </div>
   </div>
@@ -38,12 +51,14 @@ import PageHeaderMixin from './PageHeader.mixin.ts';
 import Logo from '../logo/Logo.vue';
 import Navigation from '../navigation/Navigation.vue';
 import HeaderLayout from './HeaderLayout.vue';
+import Button from '../button/Button.vue';
 
 export default {
   components: {
     Navigation,
     Logo,
     HeaderLayout,
+    Button,
   },
   mixins: [PageHeaderMixin],
   emits: ['open-side-menu'],

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

@@ -0,0 +1,339 @@
+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-test-header-layout-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');
+    });
+
+    // Per-style row-vs-side menu is pinned in header-display.constants.test.ts; this just proves the wiring.
+    test('a side menu-classified style keeps the CTA out of the header row', async () => {
+      const wrapper = await mountHeader({
+        headerButton: aHeaderButton(),
+        displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+        isMobile: true,
+      });
+
+      expect(wrapper.find(CTA).exists()).toBe(false);
+    });
+
+    test('renders the CTA in the mobile hamburger row when the nav is hidden (single page: no icon, no side menu)', 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 visible button must bring the header back even when nav and logo are hidden.
+    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 button must neither follow its link nor open the header panel.
+    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/constants/sections/header-display.constants.test.ts

@@ -0,0 +1,44 @@
+import {
+  HEADER_DISPLAY,
+  headerRowRendersCta,
+} from './header-display.constants';
+
+// One predicate decides row vs side menu, so the button can never show in both.
+describe('headerRowRendersCta', () => {
+  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,
+  ])('%s with a visible nav: the side menu carries the CTA', (displayStyle) => {
+    expect(headerRowRendersCta(displayStyle, true)).toBe(false);
+  });
+
+  test.each([
+    HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+    HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_1,
+  ])(
+    '%s with the nav hidden: no side menu exists, the row carries it',
+    (displayStyle) => {
+      expect(headerRowRendersCta(displayStyle, false)).toBe(true);
+    },
+  );
+
+  test.each([
+    HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+    HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
+    HEADER_DISPLAY.DESKTOP_TAB_1,
+    HEADER_DISPLAY.MOBILE_TAB_1,
+    HEADER_DISPLAY.MOBILE_TAB_2,
+    HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+  ])('%s: the row carries the CTA', (displayStyle) => {
+    expect(headerRowRendersCta(displayStyle, true)).toBe(true);
+  });
+
+  test('an unknown/deprecated display style defaults to the row', () => {
+    expect(headerRowRendersCta('align-left', true)).toBe(true);
+  });
+});

package/src/brand-page/constants/sections/header-display.constants.ts

@@ -58,6 +58,8 @@ interface HeaderDisplayStyleConfig {
   supportLogo: boolean;
   supportedNavTypes: string[]; // NAVIGATION_DISPLAY
   option: ButtonGroupOption;
+  // Tile artwork that includes the header button; only styles with drawn variants set it.
+  withButtonIconName?: string;
 }
 
 export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
@@ -74,6 +76,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_1,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-1',
   },
   {
     viewMode: 'desktop',
@@ -87,6 +91,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_2,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-2',
   },
   {
     viewMode: 'desktop',
@@ -100,6 +106,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_3,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-3',
   },
   {
     viewMode: 'desktop',
@@ -113,6 +121,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_4,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-4',
   },
   {
     viewMode: 'desktop',
@@ -126,6 +136,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_5,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-5',
   },
   {
     viewMode: 'desktop',
@@ -139,6 +151,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_6,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-tab-display-style-with-button-6',
   },
   // desktop - tab with no logo
   {
@@ -198,6 +212,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-hamburger-display-style-with-button-1',
   },
   {
     viewMode: 'desktop',
@@ -216,6 +232,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-desktop-nav-style-hamburger-display-style-with-button-2',
   },
   // desktop - hamburger no logo
   {
@@ -285,6 +303,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.MOBILE_TAB_1,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-mobile-nav-style-tab-display-style-with-button-1',
   },
   {
     viewMode: 'mobile',
@@ -298,6 +318,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
       dataAttribute: HEADER_DISPLAY.MOBILE_TAB_2,
       isSelected: false,
     },
+    withButtonIconName:
+      'header-mobile-nav-style-tab-display-style-with-button-2',
   },
   // mobile - tab with no logo
   {
@@ -442,3 +464,16 @@ export const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[] = [
     },
   },
 ];
+
+/** True when the header row shows the button; mobile hamburger styles put it in the side menu instead (unless the nav is hidden — then there is no side menu). */
+export const headerRowRendersCta = (
+  displayStyle: string,
+  showNav: boolean,
+): boolean =>
+  !showNav ||
+  !HEADER_DISPLAY_STYLE_CONFIGS.some(
+    (config) =>
+      config.option.value === displayStyle &&
+      config.viewMode === 'mobile' &&
+      config.navType === 'hamburger',
+  );

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

@@ -0,0 +1,85 @@
+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 constructors copy fields one-by-one — a forgotten field is silently dropped on load.
+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();
+    });
+  });
+});