@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

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

@@ -72,10 +72,9 @@
         :class="{
           'brand-page__inner--default': true,
           'brand-page__inner--desktop': styles && Object.keys(styles).length,
-          'brand-page__header': !context.isBrandSite,
         }"
       >
-        <div v-if="context.isBrandSite" class="brand-site__header">
+        <div class="brand-site__header">
           <MediaQuery :viewport="viewport">
             <template #desktop>
               <PageHeader
@@ -123,46 +122,6 @@
           <h1 v-if="pageHeadingText" class="tw-sr-only">
             {{ pageHeadingText }}
           </h1>
-          <div
-            v-if="bpShowTopNavigationDesktop || bpShowTopNavigationMobile"
-            class="brand-page__content--inner tw-mb-6"
-          >
-            <MediaQuery :viewport="viewport">
-              <template #desktop>
-                <BrandSiteNavigationLayout
-                  nav-id="nav-bp-top-1"
-                  :header-display-style="
-                    viewModel.headerViewModelDesktop.displayStyle
-                  "
-                >
-                  <Navigation
-                    v-if="bpShowTopNavigationDesktop"
-                    nav-id="nav-bp-top-1"
-                    :context="context"
-                    :navigation="headerViewModelDesktop.navigation"
-                    @open-side-menu="openSideMenu"
-                    @click.stop
-                  />
-                </BrandSiteNavigationLayout>
-              </template>
-              <template #mobile>
-                <BrandSiteNavigationLayout
-                  nav-id="nav-bp-top-2"
-                  :header-display-style="headerViewModelMobile.displayStyle"
-                >
-                  <Navigation
-                    v-if="bpShowTopNavigationMobile"
-                    nav-id="nav-bp-top-2"
-                    :pages="viewModel.headerViewModelMobile.pages"
-                    :context="context"
-                    :navigation="headerViewModelMobile.navigation"
-                    @open-side-menu="openSideMenu"
-                    @click.stop
-                  />
-                </BrandSiteNavigationLayout>
-              </template>
-            </MediaQuery>
-          </div>
           <slot name="component">
             <div v-for="(content, i) in contents" :key="i">
               <div
@@ -185,60 +144,6 @@
                   :view-model="viewModel"
                   :is-mobile-device="isMobileDevice"
                 />
-
-                <div
-                  v-if="
-                    content.type === 'logo' &&
-                    (showNavigationAfterLogoDesktop ||
-                      showNavigationAfterLogoMobile)
-                  "
-                >
-                  <MediaQuery :viewport="viewport">
-                    <template #desktop>
-                      <BrandSiteNavigationLayout
-                        nav-id="nav-bs-bottom-1"
-                        :header-display-style="
-                          headerViewModelDesktop.displayStyle
-                        "
-                      >
-                        <Navigation
-                          v-if="
-                            content.type === 'logo' &&
-                            showNavigationAfterLogoDesktop
-                          "
-                          nav-id="nav-bs-bottom-1"
-                          class="brand-page__content--inner tw-mb-6"
-                          :pages="viewModel.headerViewModelDesktop.pages"
-                          :context="context"
-                          :navigation="headerViewModelDesktop.navigation"
-                          @open-side-menu="openSideMenu"
-                          @click.stop
-                        />
-                      </BrandSiteNavigationLayout>
-                    </template>
-                    <template #mobile>
-                      <BrandSiteNavigationLayout
-                        nav-id="nav-bs-bottom-2"
-                        :header-display-style="
-                          headerViewModelMobile.displayStyle
-                        "
-                      >
-                        <Navigation
-                          v-if="
-                            content.type === 'logo' &&
-                            showNavigationAfterLogoMobile
-                          "
-                          nav-id="nav-bs-bottom-2"
-                          class="brand-page__content--inner tw-mb-6"
-                          :pages="viewModel.headerViewModelMobile.pages"
-                          :context="context"
-                          :navigation="headerViewModelMobile.navigation"
-                          @click.stop
-                        />
-                      </BrandSiteNavigationLayout>
-                    </template>
-                  </MediaQuery>
-                </div>
               </div>
             </div>
           </slot>
@@ -328,13 +233,11 @@
 <script>
 import PageMixin from './Page.mixin.ts';
 import BrandPageFooter from '../brand-page-footer/BrandPageFooter.vue';
-import Navigation from '../navigation/Navigation.vue';
 import BackgroundShape from '../background-shape/BackgroundShape.vue';
 import PageComponent from './PageComponent.vue';
 import PageHeader from '../page-header/PageHeader.vue';
 import PageFooter from '../page-footer/PageFooter.vue';
 import NavigationSideMenu from '../navigation/navigation-side-menu/NavigationSideMenu.vue';
-import BrandSiteNavigationLayout from './BrandSiteNavigationLayout.vue';
 import MediaQuery from '../media-query';
 import Media from '../media/Media.vue';
 import SaveContactWidget from '../save-contact/SaveContactWidget.vue';
@@ -346,10 +249,8 @@ export default {
     BrandPageFooter,
     PageComponent,
     BackgroundShape,
-    Navigation,
     PageHeader,
     PageFooter,
-    BrandSiteNavigationLayout,
     Media,
     SaveContactWidget,
   },
@@ -423,9 +324,6 @@ body {
 .brand-site__header {
   container-type: inline-size;
 }
-.brand-page__header {
-  padding-top: var(--page-padding);
-}
 
 .brand-page__content--default {
   @apply tw-flex tw-flex-col tw-grow tw-mb-10 tw-mx-auto tw-w-full;

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

@@ -4,6 +4,9 @@ import { createSSRApp } from 'vue';
 import { renderToString } from '@vue/server-renderer';
 import { createPinia, setActivePinia } from 'pinia';
 import Page from './Page.vue';
+import PageHeader from '../page-header/PageHeader.vue';
+import Navigation from '../navigation/Navigation.vue';
+import PageMixin from './Page.mixin';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
@@ -11,8 +14,10 @@ import {
   VIEWPORTS,
   type BrandPageContext,
 } from '@brand-page/models';
+import { HEADER_DISPLAY } from '@brand-page/constants';
 import type {
   BrandPageViewModel,
+  ButtonViewModel,
   NavItemViewModel,
   PageViewModel,
 } from '@brand-page/view-models';
@@ -40,11 +45,12 @@ const createNavItem = (
   ...overrides,
 });
 
-const emptyHeaderViewModel = () =>
+const emptyHeaderViewModel = (overrides: Record<string, unknown> = {}) =>
   ({
     displayStyle: '',
-    navigation: { displayType: [], renderAfterLogo: false },
+    navigation: { displayType: [] },
     pages: [],
+    ...overrides,
   }) as any;
 
 const createViewModel = (
@@ -100,6 +106,47 @@ const mountPage = (viewModel: BrandPageViewModel, context: BrandPageContext) =>
     propsData: { viewModel, context, viewport: VIEWPORTS.desktop },
   });
 
+// MediaQuery is stubbed by default (shallowMount), which never invokes its named
+// `#desktop`/`#mobile` slots — unstubbing it is what makes the header actually render.
+describe('Page renders the header for BP/BC too', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('one page-header per viewport renders above the content, with no nav after any block', () => {
+    const viewModel = createViewModel(
+      [
+        {
+          id: 'home-id',
+          title: 'Home',
+          contents: [{ id: 'logo-1', type: 'logo' } as any],
+          isHidden: false,
+        },
+      ],
+      [createNavItem()],
+    );
+
+    const wrapper = shallowMount(Page, {
+      propsData: {
+        viewModel,
+        context: createContext(),
+        viewport: VIEWPORTS.desktop,
+      },
+      global: { stubs: { MediaQuery: false } },
+    });
+
+    expect(wrapper.findAllComponents(PageHeader)).toHaveLength(2);
+    // The old top-of-page and nav-after-logo wrappers rendered Navigation outside PageHeader.
+    expect(wrapper.findAllComponents(Navigation)).toHaveLength(0);
+
+    const headerIndex = wrapper.html().indexOf('brand-site__header');
+    const contentIndex = wrapper.html().indexOf('data-fluid-text');
+
+    expect(headerIndex).toBeGreaterThan(-1);
+    expect(headerIndex).toBeLessThan(contentIndex);
+  });
+});
+
 describe('Page single <h1> (BP-5866)', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
@@ -447,3 +494,42 @@ describe('Page root font (0036-retire-text-font-family.md)', () => {
     expect(rootFontFamily(viewModel)).toBe(LATO_ROOT_FONT);
   });
 });
+
+// No header button on BP/BC, even where the header row itself wouldn't render it
+// (a mobile hamburger viewport, where brand site falls back to the side menu).
+describe('Page.mixin sideMenuHeaderButtonViewModel is brand-site only', () => {
+  const { sideMenuHeaderButtonViewModel } = (
+    PageMixin as unknown as {
+      computed: {
+        sideMenuHeaderButtonViewModel(
+          this: unknown,
+        ): ButtonViewModel | undefined;
+      };
+    }
+  ).computed;
+
+  const aButtonViewModel = {
+    text: 'Book now',
+  } as unknown as ButtonViewModel;
+
+  const context = (isBrandSite: boolean) => ({
+    context: { isBrandSite } as BrandPageContext,
+    shouldShowNavigation: true,
+    viewModel: {
+      headerViewModelMobile: {
+        headerButtonViewModel: aButtonViewModel,
+        displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+      },
+    } as unknown as BrandPageViewModel,
+  });
+
+  test('BP/BC: no button in the side menu, even with one stored and the header row not rendering it', () => {
+    expect(sideMenuHeaderButtonViewModel.call(context(false))).toBeUndefined();
+  });
+
+  test('brand site: the button still surfaces in the side menu when the header row does not render it', () => {
+    expect(sideMenuHeaderButtonViewModel.call(context(true))).toBe(
+      aButtonViewModel,
+    );
+  });
+});

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

@@ -35,6 +35,7 @@ import ShapesSection from '../shapes-section/ShapesSection.vue';
 import PageComponentMixin from './PageComponent.mixin.ts';
 import Shop from '../shop/Shop.vue';
 import BookingSection from '../booking-section/BookingSection.vue';
+import FaqSection from '../faq-section/FaqSection.vue';
 
 export default {
   components: {
@@ -60,6 +61,7 @@ export default {
     'bp-shapes-section': ShapesSection,
     'bp-shop-section': Shop,
     'bp-booking-section': BookingSection,
+    'bp-faq-section': FaqSection,
   },
   mixins: [PageComponentMixin],
 };

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

@@ -44,7 +44,6 @@ const Template: StoryFn = (args) => ({
         :show-nav="args.showNav"
         :display-style="args.displayStyle"
         :has-cta="args.hasCta"
-        logo-width="100px"
       >
         <template v-slot:logo>
           <div style="border: 1px solid blue; display: inline-block;">Logo</div>

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

@@ -42,7 +42,6 @@ const props = withDefaults(
     navId: string;
     showNav?: boolean;
     displayStyle: HeaderDisplayStyle;
-    logoWidth: string | number;
     hasCta?: boolean;
   }>(),
   {
@@ -80,8 +79,13 @@ const showCtaMirror = computed((): boolean => {
 </script>
 <style scoped>
 .root {
-  --logo-width: v-bind('logoWidth');
   --logo-max-width: 20rem;
+  /* The side-by-side grids below reserve this much space for the logo column and its
+     balancing mirror column. Brand site's wide canvas can afford the slider's full ceiling.
+     BP/BC's narrower column instead overrides these grids with flexible columns (see the
+     --bp rules below) so the logo renders at its natural width and the nav keeps its room
+     (BP-6184). */
+  --logo-balance-width: var(--logo-max-width);
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
@@ -125,9 +129,8 @@ const showCtaMirror = computed((): boolean => {
 .desktop-tab-horizontal-stack-left-logo-centered-menu {
   @apply tw-grid;
   grid-template-columns:
-    [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
-      --logo-max-width
-    )
+    [logo-start] var(--logo-balance-width)
+    [logo-end nav-start] 1fr [nav-end] var(--logo-balance-width)
     [cols-end];
   @apply tw-gap-x-4 tw-mt-4 tw-mb-4;
 }
@@ -145,11 +148,22 @@ const showCtaMirror = computed((): boolean => {
   @apply tw-left-1/2 tw-relative tw-max-w-full;
   /* end - center content */
 }
+/* BP/BC's capped column can't afford to reserve --logo-balance-width on both sides (it
+   squeezes the logo narrower than its natural render width, or starves the nav). Flexible
+   side columns size the logo to its own content instead, staying symmetric so the nav keeps
+   its centre (BP-6184 QA fix). */
+.c-page-header-container--bp
+  .desktop-tab-horizontal-stack-left-logo-centered-menu {
+  grid-template-columns:
+    [logo-start] 1fr
+    [logo-end nav-start] auto [nav-end] 1fr
+    [cols-end];
+}
 /* DESKTOP_TAB_4 */
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid tw-gap-x-4;
   grid-template-columns:
-    [col-start] 1fr [logo-start] var(--logo-max-width)
+    [col-start] 1fr [logo-start] var(--logo-balance-width)
     [logo-end nav-start] 1fr [nav-end];
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container {
@@ -163,6 +177,15 @@ const showCtaMirror = computed((): boolean => {
   @apply tw-float-right tw-max-w-full;
   /* end - align right content */
 }
+/* BP/BC: same flexible-column fix as TAB_3 above, mirrored — the logo's own column sizes to
+   its content (auto) while the two flanking 1fr columns stay equal, so it keeps its natural
+   render width and stays centred (BP-6184 QA fix). */
+.c-page-header-container--bp
+  .desktop-tab-horizontal-stack-centered-logo-right-menu {
+  grid-template-columns:
+    [col-start] 1fr [logo-start] auto
+    [logo-end nav-start] 1fr [nav-end];
+}
 /* DESKTOP_TAB_5 */
 .desktop-tab-vertical-stack-centered-logo-centered-menu {
   @apply tw-items-center tw-justify-items-center;
@@ -259,6 +282,18 @@ const showCtaMirror = computed((): boolean => {
   @apply tw-flex tw-justify-center;
 }
 
+/* BP/BC only: the stacked layouts shrink-wrap the logo on brand site, but a BP/BC logo
+   background colour spans the capped column instead, the same as a logo content block's
+   does — the figure (LogoRender.vue) already stretches to its container's width.
+   width: 100% (not justify-self: stretch) so it also stretches in the no-nav flex states. */
+.logo-container--stretch .logo-container {
+  width: 100%;
+}
+/* The centred grid otherwise sizes its one track to the logo or nav, so the colour can't reach the column. */
+.logo-container--stretch.desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav {
+  justify-content: stretch;
+}
+
 /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
 .desktop-tab-left-menu-no-logo,
 .desktop-hamburger-no-logo-left-menu {
@@ -464,7 +499,7 @@ const showCtaMirror = computed((): boolean => {
 .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta {
   grid-template-columns:
     [mirror-start] minmax(max-content, auto) [col-start] 1fr
-    [logo-start] var(--logo-max-width)
+    [logo-start] var(--logo-balance-width)
     /* The button's track never shrinks below its label, so a wide nav compresses instead. */
     [logo-end nav-start] 1fr [nav-end cta-start] minmax(max-content, auto)
     [cta-end];
@@ -479,6 +514,16 @@ const showCtaMirror = computed((): boolean => {
      header band by the button's height. */
   grid-row: 1;
 }
+/* BP/BC: same flexible logo column as the no-cta rule above, kept inside this state's extra
+   mirror/cta tracks (BP-6184 QA fix). */
+.c-page-header-container--bp
+  .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta {
+  grid-template-columns:
+    [mirror-start] minmax(max-content, auto) [col-start] 1fr
+    [logo-start] auto
+    [logo-end nav-start] 1fr [nav-end cta-start] minmax(max-content, auto)
+    [cta-end];
+}
 
 /* DESKTOP_TAB_6, TAB_NO_LOGO_2: nav and button share the top row, so the button takes a
    trailing column mirrored by the leading one — the nav pays for the collision it would

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

@@ -5,7 +5,7 @@ import type {
   ButtonViewModel,
   PageHeaderViewModel,
 } from '@brand-page/view-models';
-import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
+import { STACKED_LOGO_LAYOUTS } from '../../constants';
 import { hasVisibleNavigation } from '../../utils/route.util';
 import { guardPreviewClick } from '../../utils/context.util';
 
@@ -29,11 +29,6 @@ export default defineComponent({
       default: false,
     },
   },
-  data: function () {
-    return {
-      LOGO_SLIDER_DESKTOP_MAX,
-    };
-  },
   computed: {
     containerCss(): BrandPageCssStyle {
       return {
@@ -42,12 +37,34 @@ export default defineComponent({
         padding: '1.5rem 0', // var(--page-padding) 0
       };
     },
+    // No header button on BP/BC, even with one stored — brand site only.
     headerButtonViewModel(): ButtonViewModel | undefined {
-      return this.viewModel.headerButtonViewModel;
+      return this.context.isBrandSite
+        ? this.viewModel.headerButtonViewModel
+        : undefined;
     },
     showNav(): boolean {
       return hasVisibleNavigation(this.context.nav.navItems);
     },
+    // No header logo on a BP/BC hamburger viewport, even with a colour or a with-logo
+    // hamburger layout stored (the AI tool can write one) — the logo stays a block there.
+    showLogo(): boolean {
+      return (
+        Boolean(this.viewModel.logo.isVisible) &&
+        !(
+          this.context.isBrandPageOrIsBrandContact &&
+          this.viewModel.navigation.displayType.includes('hamburger')
+        )
+      );
+    },
+    // BP/BC's logo background colour spans the capped column, as a logo content block's
+    // does today, instead of shrink-wrapping the logo as brand site's stacked layouts do.
+    stretchesLogo(): boolean {
+      return (
+        this.context.isBrandPageOrIsBrandContact &&
+        STACKED_LOGO_LAYOUTS.includes(this.viewModel.displayStyle)
+      );
+    },
   },
   emits: ['header-container-click'],
   methods: {

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

@@ -1,26 +1,32 @@
 <template>
   <div
-    v-if="showNav || viewModel.logo.isVisible || headerButtonViewModel"
+    v-if="showNav || showLogo || headerButtonViewModel"
     :style="containerCss"
   >
-    <div class="c-page-header-container" @click="onHeaderContainerClick()">
+    <div
+      class="c-page-header-container"
+      :class="{
+        'c-page-header-container--bp': context.isBrandPageOrIsBrandContact,
+      }"
+      @click="onHeaderContainerClick()"
+    >
       <HeaderLayout
         :nav-id="navId"
         :show-nav="showNav"
         :display-style="viewModel.displayStyle"
-        :logo-width="
-          viewModel.logo?.logoImageWidth || LOGO_SLIDER_DESKTOP_MAX + 'rem'
-        "
         :has-cta="Boolean(headerButtonViewModel)"
+        :class="{ 'logo-container--stretch': stretchesLogo }"
       >
         <template #logo>
+          <!-- Logo.vue's own maxWidth style only applies on brand site, so it's the only case isMobile affects. -->
           <Logo
+            v-if="showLogo"
             data-component="page-header"
             :has-margin-bottom="false"
-            :has-logo-auto-margin="false"
             :view-model="viewModel.logo"
             :context="context"
-            :is-mobile="isMobile"
+            :is-mobile="context.isBrandSite && isMobile"
+            :links-home="true"
           />
         </template>
         <template #nav>
@@ -45,6 +51,12 @@
       </HeaderLayout>
     </div>
   </div>
+  <!-- BP/BC with nothing to show (single-page site, hidden logo, no button): keep today's top
+       space instead of collapsing it, since PageHeader now owns it, not Page.vue. -->
+  <div
+    v-else-if="context.isBrandPageOrIsBrandContact"
+    class="c-page-header-spacer"
+  />
 </template>
 <script>
 import PageHeaderMixin from './PageHeader.mixin.ts';
@@ -70,4 +82,13 @@ export default {
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
 }
+
+/* BP/BC keep today's narrower column instead of brand site's wider one. */
+.c-page-header-container--bp {
+  max-width: var(--page-max-width);
+}
+
+.c-page-header-spacer {
+  height: var(--page-padding);
+}
 </style>