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

package/src/brand-page/components/button/Button.vue

@@ -2,10 +2,11 @@
   <section class="tw-relative">
     <ButtonStyleWrapper
       v-if="isInternalLink"
-      class="bp-button tw-mb-4"
-      :class="{ 'tw-min-h-14': !isPreview }"
+      class="bp-button"
+      :class="wrapperClass"
       :selected-button-style-id="viewModel.styles.selectedButtonStyleId"
       :icon-color="iconColor"
+      :full-width="!isHeaderVariant"
     >
       <template #default="{ innerClass }">
         <router-link
@@ -33,11 +34,12 @@
               </template>
             </ButtonIcon>
             <span
-              v-if="!viewModel.iconUrl && !$slots.icon"
+              v-if="!viewModel.iconUrl && !$slots.icon && !isHeaderVariant"
               class="c-button__no-icon"
             />
             <TextWrapper
-              class="c-button__label c-button__label--offset-md"
+              class="c-button__label"
+              :class="labelClass"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
               element="p"
@@ -48,10 +50,11 @@
     </ButtonStyleWrapper>
     <ButtonStyleWrapper
       v-else
-      class="bp-button tw-mb-4"
-      :class="{ 'tw-min-h-14': !isPreview }"
+      class="bp-button"
+      :class="wrapperClass"
       :selected-button-style-id="viewModel.styles.selectedButtonStyleId"
       :icon-color="iconColor"
+      :full-width="!isHeaderVariant"
     >
       <template #default="{ innerClass }">
         <a
@@ -76,11 +79,12 @@
             </template>
           </ButtonIcon>
           <span
-            v-if="!$slots.icon && !viewModel.iconUrl"
+            v-if="!$slots.icon && !viewModel.iconUrl && !isHeaderVariant"
             class="c-button__no-icon"
           />
           <TextWrapper
-            class="c-button__label c-button__label--offset-md"
+            class="c-button__label"
+            :class="labelClass"
             :text-style="viewModel.titleStyle"
             :text="viewModel.title"
             element="p"
@@ -116,6 +120,10 @@ import {
   findNavItemByPageId,
   toRouteLocation,
 } from '@src/brand-page/utils/route.util';
+import {
+  BUTTON_VARIANTS,
+  type ButtonVariant,
+} from '@src/brand-page/utils/button.util';
 import ButtonIcon from './ButtonIcon.vue';
 import ButtonStyleWrapper from './ButtonStyleWrapper.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -126,15 +134,34 @@ const props = withDefaults(
     context: BrandPageContext;
     contentIndex?: number;
     isPreview?: boolean;
+    // 'section' is the standalone in-page button (the only historical shape).
+    // 'header' strips the section-only spacing — bottom margin, minimum height and
+    // the label offset that compensates for the icon gutter — so the button can sit
+    // inline in the header row. Defaults to 'section': existing callers are untouched.
+    variant?: ButtonVariant;
   }>(),
   {
     contentIndex: undefined,
     isPreview: false,
+    variant: BUTTON_VARIANTS.section,
   },
 );
 
 const isModalVisible = ref(false);
 
+const isHeaderVariant = computed(
+  (): boolean => props.variant === BUTTON_VARIANTS.header,
+);
+
+const wrapperClass = computed(() => ({
+  'tw-mb-4': !isHeaderVariant.value,
+  'tw-min-h-14': !props.isPreview && !isHeaderVariant.value,
+}));
+
+const labelClass = computed(() => ({
+  'c-button__label--offset-md': !isHeaderVariant.value,
+}));
+
 const buttonStyle = computed(
   (): BrandPageCssStyle => props.viewModel.styles?.style || {},
 );

package/src/brand-page/components/button/Button.vue.test.ts

@@ -130,6 +130,65 @@ const mountButton = async (currentPath: string) => {
   return { wrapper, router };
 };
 
+describe('Button - section (default) vs header variant', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountVariant = async (props: Record<string, unknown> = {}) => {
+    const router = createTestRouter();
+
+    router.push(OTHER_PAGE_PATH);
+    await router.isReady();
+
+    return mount(Button, {
+      propsData: {
+        context: createTestBrandPageContext(),
+        viewModel: createTestButtonViewModel({
+          url: 'https://example.com/pricing',
+          buttonLinkType: 'url',
+          clickActionField: 'url',
+          page: '',
+        }),
+        ...props,
+      },
+      global: { plugins: [router] },
+    });
+  };
+
+  // The variant prop must be inert for the 4 section consumers: same wrapper spacing,
+  // same icon gutter, same label offset. Guards the e2e visual snapshots.
+  it('keeps the section spacing and label offset by default', async () => {
+    const wrapper = await mountVariant();
+    const styleWrapper = wrapper.get('.bp-button');
+
+    expect(styleWrapper.classes()).toContain('tw-mb-4');
+    expect(styleWrapper.classes()).toContain('tw-min-h-14');
+    expect(wrapper.get('.c-button__label').classes()).toContain(
+      'c-button__label--offset-md',
+    );
+    expect(wrapper.find('.c-button__no-icon').exists()).toBe(true);
+  });
+
+  it('drops the section-only spacing, gutter and offset in the header variant', async () => {
+    const wrapper = await mountVariant({ variant: 'header' });
+    const styleWrapper = wrapper.get('.bp-button');
+
+    expect(styleWrapper.classes()).not.toContain('tw-mb-4');
+    expect(styleWrapper.classes()).not.toContain('tw-min-h-14');
+    expect(wrapper.get('.c-button__label').classes()).not.toContain(
+      'c-button__label--offset-md',
+    );
+    expect(wrapper.find('.c-button__no-icon').exists()).toBe(false);
+  });
+
+  it('keeps dropping tw-min-h-14 in preview, as before', async () => {
+    const wrapper = await mountVariant({ isPreview: true });
+
+    expect(wrapper.get('.bp-button').classes()).not.toContain('tw-min-h-14');
+  });
+});
+
 describe('Button - page link "back to top" behaviour (BP-5834)', () => {
   let scrollToSpy: ReturnType<typeof vi.spyOn>;
 

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

@@ -6,7 +6,7 @@ import type {
   NavigationMobile,
 } from '../../../models';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
-import type { NavItemViewModel } from '../../../view-models';
+import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
 
 export default defineComponent({
   props: {
@@ -26,6 +26,18 @@ export default defineComponent({
       type: Object as PropType<NavigationDesktop | NavigationMobile>,
       required: true,
     },
+    headerButtonViewModel: {
+      type: Object as PropType<ButtonViewModel>,
+      required: false,
+      default: undefined,
+    },
+    // The desktop drawer suppresses the header CTA — the desktop header row already
+    // renders it. Only the mobile drawer carries the button.
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   emits: ['close-side-menu'],
   data() {
@@ -74,6 +86,9 @@ export default defineComponent({
 
       return rest;
     },
+    showHeaderButton(): boolean {
+      return this.isMobile && Boolean(this.headerButtonViewModel);
+    },
     routes(): any[] {
       return this.visibleNavItems.map((navItem, _i) => {
         return {
@@ -114,6 +129,19 @@ export default defineComponent({
     closeSideMenu(): void {
       this.$emit('close-side-menu');
     },
+    // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
+    // prevent lands before the inner anchor/router-link fires. On the published site
+    // the click follows the link and the drawer closes behind it.
+    onDrawerCtaClick(event: MouseEvent): void {
+      if (this.context.isPreview) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        return;
+      }
+
+      this.closeSideMenu();
+    },
     toggleExpanded(pageId: string): void {
       const isCurrentlyExpanded = this.expandedItems[pageId];
 

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

@@ -91,18 +91,37 @@
           </template>
         </template>
       </div>
+      <div
+        v-if="showHeaderButton"
+        data-component="navigation-side-menu-cta"
+        class="c-drawer-cta"
+      >
+        <Button
+          data-test-header-cta-button="drawer"
+          :view-model="headerButtonViewModel"
+          :context="context"
+          :variant="BUTTON_VARIANTS.header"
+          @click.capture="onDrawerCtaClick"
+        />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { Icon } from '@designcrowd/fe-shared-lib';
 import NavigationSideMenuMixin from './NavigationSideMenu.mixin.ts';
+import Button from '../../button/Button.vue';
+import { BUTTON_VARIANTS } from '../../../utils/button.util';
 
 export default {
   components: {
     Icon,
+    Button,
   },
   mixins: [NavigationSideMenuMixin],
+  setup() {
+    return { BUTTON_VARIANTS };
+  },
 };
 </script>
 <style scoped>
@@ -146,4 +165,21 @@ export default {
 .c-chevron-expanded {
   transform: rotate(180deg);
 }
+
+.c-drawer-cta {
+  @apply tw-relative tw-p-4;
+}
+
+/* Hairline separator from the nav list, drawn in the drawer's own text colour so it
+   works on any panel background. A pseudo-element carries the fade — opacity on the
+   section itself would wash out the button. */
+.c-drawer-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.2;
+}
 </style>

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

@@ -0,0 +1,175 @@
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import NavigationSideMenu from './NavigationSideMenu.vue';
+import {
+  BRAND_PAGE_TYPES,
+  BUTTON_LINK_TYPE,
+  MEDIA_SIZES,
+  PageHeaderMobile,
+  PageStyles,
+  type BrandPageContext,
+  type HeaderButton,
+} from '@brand-page/models';
+import type { NavItemViewModel } from '@brand-page/view-models';
+import { mapToPageHeaderViewModel } from '@brand-page/utils';
+
+const CTA = '[data-test-header-cta-button]';
+const SLUG = 'my-brand';
+
+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,
+    currentPageRelativePath: '',
+    nav: {
+      navItems: [
+        {
+          pageId: 'home',
+          slug: SLUG,
+          displayName: 'Home',
+          routeName: 'home-route',
+          routeParams: { slug: SLUG },
+          isRoot: true,
+          isHidden: false,
+          relativePath: '',
+          nestedNavItems: [],
+        },
+      ] as NavItemViewModel[],
+    },
+  }) as BrandPageContext;
+
+const aHeaderButton = (): HeaderButton => ({
+  isVisible: true,
+  text: 'Book now',
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+  url: 'https://example.com/book',
+  buttonTextStyle: { textStyleType: 'buttons' },
+});
+
+const mountDrawer = async (options: {
+  isMobile?: boolean;
+  headerButton?: HeaderButton;
+  isPreview?: boolean;
+}) => {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: '/:slug',
+        name: 'home-route',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+
+  router.push(`/${SLUG}`);
+  await router.isReady();
+
+  const headerViewModel = mapToPageHeaderViewModel(
+    new PageHeaderMobile({ headerButton: options.headerButton }),
+    new PageStyles(),
+    [],
+  );
+
+  const context = createContext();
+
+  if (options.isPreview) {
+    context.isPreview = true;
+  }
+
+  return mount(NavigationSideMenu, {
+    propsData: {
+      context,
+      isSideMenuOpen: true,
+      slug: SLUG,
+      styles: headerViewModel.navigation,
+      headerButtonViewModel: headerViewModel.headerButtonViewModel,
+      isMobile: options.isMobile ?? false,
+    },
+    global: { plugins: [router] },
+  });
+};
+
+describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('renders the CTA in the mobile drawer', async () => {
+    const wrapper = await mountDrawer({
+      isMobile: true,
+      headerButton: aHeaderButton(),
+    });
+
+    expect(
+      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
+    ).toBe(true);
+    expect(wrapper.get(CTA).text()).toContain('Book now');
+  });
+
+  // The desktop hamburger header row already renders the button, so the desktop
+  // drawer must not repeat it.
+  test('renders no CTA in the desktop drawer', async () => {
+    const wrapper = await mountDrawer({
+      isMobile: false,
+      headerButton: aHeaderButton(),
+    });
+
+    expect(wrapper.find(CTA).exists()).toBe(false);
+  });
+
+  test('renders no CTA when the site has no header button', async () => {
+    const wrapper = await mountDrawer({ isMobile: true });
+
+    expect(wrapper.find(CTA).exists()).toBe(false);
+    expect(
+      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
+    ).toBe(false);
+  });
+
+  test('closes the drawer when the CTA is clicked', async () => {
+    const wrapper = await mountDrawer({
+      isMobile: true,
+      headerButton: aHeaderButton(),
+    });
+
+    await wrapper.get(`${CTA} a`).trigger('click');
+
+    expect(wrapper.emitted('close-side-menu')).toHaveLength(1);
+  });
+
+  test('a preview CTA click is inert: no navigation, drawer stays open', async () => {
+    const wrapper = await mountDrawer({
+      isMobile: true,
+      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('close-side-menu')).toBeUndefined();
+  });
+});

package/src/brand-page/components/page/Page.vue

@@ -296,6 +296,8 @@
               :page-navigation="viewModel.nav"
               @close-side-menu="closeSideMenu"
             />
+            <!-- No header CTA here on purpose: the desktop hamburger header row
+                 already renders it (BP-5852 placement spec). -->
           </template>
           <template #mobile>
             <NavigationSideMenu
@@ -304,6 +306,10 @@
               :slug="slug"
               :styles="viewModel.headerViewModelMobile.navigation"
               :page-navigation="viewModel.nav"
+              :header-button-view-model="
+                viewModel.headerViewModelMobile.headerButtonViewModel
+              "
+              :is-mobile="true"
               @close-side-menu="closeSideMenu"
             />
           </template>