@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-section-style.model';
 import { PAGE_SECTIONS } from '../../models';
-import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
+import { BUTTON_LINK_TYPE, LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { isTransparentColour } from '@brand-page/utils/color.util';
 import { useUiPageSettingsStore } from '../../store';
@@ -12,7 +12,13 @@ import { useBrandPageContainerStore, useBrandPageMakerStore, useLogoStore, useUi
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '@shared/logo-settings/store';
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
-import { commonTr } from '@src/composables/useTranslate';
+import { commonTr, pageSettingsSectionTr } from '@src/composables/useTranslate';
+// Starting values for a brand-new button; real "Contact Us" text so the label is never empty.
+const newHeaderButton = () => ({
+    isVisible: false,
+    text: pageSettingsSectionTr('buttonLabelPlaceholder'),
+    buttonLinkType: BUTTON_LINK_TYPE.url,
+});
 const viewportsWithTr = () => [
     {
         key: VIEWPORTS.desktop,
@@ -100,6 +106,12 @@ export default defineComponent({
         header() {
             return this.sections[PAGE_SECTIONS.header][this.viewport];
         },
+        headerButton() {
+            return this.header.headerButton;
+        },
+        isHeaderButtonVisible() {
+            return this.headerButton?.isVisible === true;
+        },
         navigationType() {
             return getNavigationType(this.navigation.displayType);
         },
@@ -327,6 +339,26 @@ export default defineComponent({
                 viewport: VIEWPORTS.desktop,
             });
         },
+        onHeaderButtonChange(patch) {
+            const value = {
+                ...newHeaderButton(),
+                ...this.headerButton,
+                ...patch,
+            };
+            // Write the whole button to BOTH viewports (own copy each) so they always match.
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: PAGE_SECTIONS.header,
+                propName: 'headerButton',
+                value: { ...value },
+                viewport: VIEWPORTS.mobile,
+            });
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: PAGE_SECTIONS.header,
+                propName: 'headerButton',
+                value: { ...value },
+                viewport: VIEWPORTS.desktop,
+            });
+        },
         onItemListIntentImageReplace(name, { index }) {
             this.contentSettingsStore.setSelectedItemAndFieldName({
                 id: this.sectionName,

package/lib/src/shared/page-settings/store/page-settings-store.d.ts

@@ -1,7 +1,7 @@
 import type { ContentItem } from '../../content-settings/models';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS } from '@brand-page';
 import type { NavigationType } from '@brand-page';
-import type { Content, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
+import type { Content, HeaderButton, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
 export type PageSettingsStateSectionStyles = Partial<PageHeaderDesktop & PageHeaderMobile & PageFooterDesktop & PageFooterMobile>;
@@ -74,7 +74,7 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         sectionName: PageSettingsSection;
         propName: keyof PageSettingsStateSectionStyles;
         index?: number;
-        value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<ImageGalleryItem> | number | null | undefined;
+        value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<ImageGalleryItem> | HeaderButton | number | null | undefined;
         merge?: boolean;
         viewport: ViewportsType;
     }): void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -80,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             paddingTop?: string | undefined;
             position?: string | undefined;
             textAlign?: string | undefined;
+            textAlignLast?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -128,6 +129,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             paddingTop?: string | undefined;
             position?: string | undefined;
             textAlign?: string | undefined;
+            textAlignLast?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -175,6 +177,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             paddingTop?: string | undefined;
             position?: string | undefined;
             textAlign?: string | undefined;
+            textAlignLast?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.6.0",
-    "@designcrowd/fe-shared-lib": "2.1.1",
+    "@designcrowd/fe-shared-lib": "2.1.2",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "3.28.0",

package/src/brand-page/components/navigation/hamburger/HamburgerNavigation.vue

@@ -2,6 +2,7 @@
   <div data-component="hamburger-navigation">
     <div class="tw-w-full tw-flex tw-justify-end">
       <button
+        data-test-hamburger-toggle
         :style="iconStyle"
         class="tw-cursor-pointer tw-p-2"
         :class="{

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

@@ -6,7 +6,8 @@ import type {
   NavigationMobile,
 } from '../../../models';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
-import type { NavItemViewModel } from '../../../view-models';
+import { guardPreviewClick } from '../../../utils/context.util';
+import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
 
 export default defineComponent({
   props: {
@@ -26,6 +27,13 @@ export default defineComponent({
       type: Object as PropType<NavigationDesktop | NavigationMobile>,
       required: true,
     },
+    // Provided only when the header row does not render the CTA (the caller
+    // decides via headerRowRendersCta) — absent means the side menu shows none.
+    headerButtonViewModel: {
+      type: Object as PropType<ButtonViewModel>,
+      required: false,
+      default: undefined,
+    },
   },
   emits: ['close-side-menu'],
   data() {
@@ -74,6 +82,9 @@ export default defineComponent({
 
       return rest;
     },
+    showHeaderButton(): boolean {
+      return Boolean(this.headerButtonViewModel);
+    },
     routes(): any[] {
       return this.visibleNavItems.map((navItem, _i) => {
         return {
@@ -114,6 +125,12 @@ export default defineComponent({
     closeSideMenu(): void {
       this.$emit('close-side-menu');
     },
+    // Preview: inert; published: follow the link and close the side menu behind it.
+    onSideMenuCtaClick(event: MouseEvent): void {
+      if (!guardPreviewClick(event, this.context)) {
+        this.closeSideMenu();
+      }
+    },
     toggleExpanded(pageId: string): void {
       const isCurrentlyExpanded = this.expandedItems[pageId];
 

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

@@ -9,15 +9,18 @@
       }"
       @click="closeSideMenu"
     />
+    <!-- With a button, the nav list scrolls instead of the panel so the button stays put. -->
     <div
       class="c-sidebar"
       :class="{
-        'c-sidebar--open tw-overflow-auto': isSideMenuOpen,
+        'c-sidebar--open': isSideMenuOpen,
         'c-sidebar--closed': !isSideMenuOpen,
+        'tw-overflow-auto': isSideMenuOpen && !showHeaderButton,
+        'c-sidebar--has-cta': showHeaderButton,
       }"
       :style="defaultButtonStyle"
     >
-      <div class="tw-w-full tw-flex tw-justify-end">
+      <div class="c-sidebar-header tw-w-full tw-flex tw-justify-end">
         <button
           class="tw-mt-4 tw-w-8 tw-h-8 tw-bg-transparent tw-border-none tw-cursor-pointer"
           :style="closeButtonStyle"
@@ -27,7 +30,7 @@
           <Icon name="close" size="sm" />
         </button>
       </div>
-      <div class="tw-flex tw-flex-col">
+      <div class="c-nav-list tw-flex tw-flex-col">
         <template
           v-for="(navItem, index) in visibleNavItems"
           :key="`${navItem.relativePath}-${index}`"
@@ -91,16 +94,30 @@
           </template>
         </template>
       </div>
+      <div
+        v-if="showHeaderButton"
+        data-component="navigation-side-menu-cta"
+        class="c-sidebar-cta"
+      >
+        <Button
+          data-test-header-cta-button="side-menu"
+          :view-model="headerButtonViewModel"
+          :context="context"
+          @click.capture="onSideMenuCtaClick"
+        />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { Icon } from '@designcrowd/fe-shared-lib';
 import NavigationSideMenuMixin from './NavigationSideMenu.mixin.ts';
+import Button from '../../button/Button.vue';
 
 export default {
   components: {
     Icon,
+    Button,
   },
   mixins: [NavigationSideMenuMixin],
 };
@@ -146,4 +163,57 @@ export default {
 .c-chevron-expanded {
   transform: rotate(180deg);
 }
+
+/* Button pinned to the bottom of the side menu; rules only apply when the button is on. */
+.c-sidebar--has-cta {
+  @apply tw-flex tw-flex-col;
+  overflow: hidden;
+}
+
+.c-sidebar--has-cta .c-sidebar-header {
+  flex-shrink: 0;
+}
+
+.c-sidebar--has-cta .c-nav-list {
+  /* Lets the link list scroll instead of the panel. */
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.c-sidebar-cta {
+  @apply tw-relative tw-p-4;
+}
+
+/* The generic Button ships section spacing; the side menu, as the caller, strips it
+   (same fit the header row applies in HeaderLayout.vue). */
+.c-sidebar-cta :deep(.bp-button) {
+  margin-bottom: 0;
+  min-height: 0;
+}
+.c-sidebar-cta :deep(.c-button__no-icon) {
+  display: none;
+}
+/* Base label class, not a specific --offset-* variant, so a future offset swap can't slide it. */
+.c-sidebar-cta :deep(.c-button__label) {
+  transform: none;
+}
+
+.c-sidebar--has-cta .c-sidebar-cta {
+  /* Keeps the button at the bottom whether links underfill or overflow. */
+  margin-top: auto;
+  flex-shrink: 0;
+  /* Opaque so scrolled links don't show through. */
+  background-color: inherit;
+}
+
+/* Thin separator line above the button, faded without dimming the button itself. */
+.c-sidebar-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,181 @@
+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: '',
+    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 mountSideMenu = async (options: {
+  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,
+    },
+    global: { plugins: [router] },
+  });
+};
+
+describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('renders the CTA in the mobile side menu', async () => {
+    const wrapper = await mountSideMenu({
+      headerButton: aHeaderButton(),
+    });
+
+    expect(
+      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
+    ).toBe(true);
+    expect(wrapper.get(CTA).text()).toContain('Book now');
+  });
+
+  test('renders no CTA when the site has no header button', async () => {
+    const wrapper = await mountSideMenu({});
+
+    expect(wrapper.find(CTA).exists()).toBe(false);
+    expect(
+      wrapper.find('[data-component="navigation-side-menu-cta"]').exists(),
+    ).toBe(false);
+  });
+
+  test('with a CTA the panel hands scrolling to the nav list and pins the button last', async () => {
+    const wrapper = await mountSideMenu({
+      headerButton: aHeaderButton(),
+    });
+
+    const sidebar = wrapper.get('.c-sidebar');
+
+    expect(sidebar.classes()).toContain('c-sidebar--has-cta');
+    expect(sidebar.classes()).not.toContain('tw-overflow-auto');
+    expect(sidebar.element.lastElementChild).toBe(
+      wrapper.get('.c-sidebar-cta').element,
+    );
+  });
+
+  test('without a CTA the panel keeps its original scrolling and no layout class', async () => {
+    const wrapper = await mountSideMenu({});
+
+    const sidebar = wrapper.get('.c-sidebar');
+
+    expect(sidebar.classes()).toContain('tw-overflow-auto');
+    expect(sidebar.classes()).not.toContain('c-sidebar--has-cta');
+  });
+
+  test('closes the side menu when the CTA is clicked', async () => {
+    const wrapper = await mountSideMenu({
+      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, side menu stays open', async () => {
+    const wrapper = await mountSideMenu({
+      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.mixin.ts

@@ -2,6 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import type {
   BrandPageViewModel,
+  ButtonViewModel,
   ContentViewModel,
   PageViewModel,
 } from '@brand-page/view-models';
@@ -14,6 +15,7 @@ import {
   DEFAULT_FONT_FAMILY_KEY,
   FALLBACK_FONT_FAMILIES,
   FONT_FAMILY_CONFIGS,
+  headerRowRendersCta,
 } from '../../constants';
 import {
   getSlugFromContext,
@@ -23,7 +25,10 @@ import {
   PAGE_SCOPE_ID_ATTRIBUTE,
   resolveColorReference,
 } from '@brand-page/utils';
-import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
+import {
+  findNavItemByRelativePath,
+  hasVisibleNavigation,
+} from '@brand-page/utils/route.util';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
@@ -370,17 +375,22 @@ export default defineComponent({
       );
     },
 
-    shouldShowNavigation(): boolean {
-      // Show navigation if more than 1 non-hidden page exists, or if there's 1 page with non-hidden subpages
-      const visibleNavItems = this.context.nav.navItems.filter(
-        (item) => !item.isHidden,
-      );
+    // The button shows in the header row OR in the side menu, never both. This gives it to the side menu when the header doesn't show it; undefined = no button in the menu.
+    sideMenuHeaderButtonViewModel(): ButtonViewModel | undefined {
+      const header = this.viewModel.headerViewModelMobile;
 
-      return (
-        visibleNavItems.length > 1 ||
-        (visibleNavItems.length === 1 &&
-          visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden))
-      );
+      if (
+        !header.headerButtonViewModel ||
+        headerRowRendersCta(header.displayStyle, this.shouldShowNavigation)
+      ) {
+        return undefined;
+      }
+
+      return header.headerButtonViewModel;
+    },
+
+    shouldShowNavigation(): boolean {
+      return hasVisibleNavigation(this.context.nav.navItems);
     },
 
     showNavigationAfterLogoMobile(): boolean {

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

@@ -296,6 +296,7 @@
               :page-navigation="viewModel.nav"
               @close-side-menu="closeSideMenu"
             />
+            <!-- No header CTA: the desktop hamburger header row renders it. -->
           </template>
           <template #mobile>
             <NavigationSideMenu
@@ -304,6 +305,7 @@
               :slug="slug"
               :styles="viewModel.headerViewModelMobile.navigation"
               :page-navigation="viewModel.nav"
+              :header-button-view-model="sideMenuHeaderButtonViewModel"
               @close-side-menu="closeSideMenu"
             />
           </template>

package/src/brand-page/components/page-header/HeaderLayout.stories.ts

@@ -43,6 +43,7 @@ const Template: StoryFn = (args) => ({
         nav-id="nav-1"
         :show-nav="args.showNav"
         :display-style="args.displayStyle"
+        :has-cta="args.hasCta"
         logo-width="100px"
       >
         <template v-slot:logo>
@@ -51,6 +52,9 @@ const Template: StoryFn = (args) => ({
         <template v-slot:nav>
           <div style="border: 1px solid red; display: inline-block;">Nav | Nav | Nav | Nav | Nav | Nav | Nav | Nav</div>
         </template>
+        <template v-slot:cta>
+          <div style="border: 1px solid green; display: inline-block; padding: 8px 16px;">Contact Us</div>
+        </template>
       </HeaderLayout>
     </div>
   `,
@@ -60,3 +64,9 @@ export const Sample = Template.bind({});
 Sample.args = {
   displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
 };
+
+export const WithHeaderButton = Template.bind({});
+WithHeaderButton.args = {
+  displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
+  hasCta: true,
+};