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

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

@@ -1,7 +1,13 @@
 <template>
   <header
     data-component="header-layout"
-    :class="['root', 'layout', displayStyle, showNav ? 'show-nav' : 'no-nav']"
+    :class="[
+      'root',
+      'layout',
+      displayStyle,
+      showNav ? 'show-nav' : 'no-nav',
+      { 'has-header-cta': showCta },
+    ]"
   >
     <div class="logo-container">
       <slot name="logo" />
@@ -11,23 +17,53 @@
         <slot name="nav" />
       </div>
     </div>
+    <div
+      v-if="showCta"
+      data-component="header-layout-cta"
+      class="cta-container"
+    >
+      <slot name="cta" />
+    </div>
   </header>
 </template>
 <script setup lang="ts">
-import { withDefaults } from 'vue';
-import type { HeaderDisplayStyle } from '../../constants';
+import { computed, withDefaults } from 'vue';
+import { HEADER_DISPLAY, type HeaderDisplayStyle } from '../../constants';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     navId: string;
     showNav?: boolean;
     displayStyle: HeaderDisplayStyle;
     logoWidth: string | number;
+    hasCta?: boolean;
   }>(),
   {
     showNav: true,
+    hasCta: false,
   },
 );
+
+// The mobile hamburger row is deliberately CTA-free: the drawer carries the button
+// (NavigationSideMenu) so the compact row keeps only the logo and the icon. When the
+// nav itself is hidden (single-page site) there is no icon and no drawer, so the row
+// carries the button after all — otherwise it would be unreachable on mobile.
+const DRAWER_ONLY_CTA_DISPLAY_STYLES: HeaderDisplayStyle[] = [
+  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,
+];
+
+const showCta = computed(
+  (): boolean =>
+    props.hasCta &&
+    (props.showNav === false ||
+      !DRAWER_ONLY_CTA_DISPLAY_STYLES.includes(props.displayStyle)),
+);
 </script>
 <style scoped>
 .root {
@@ -46,6 +82,12 @@ withDefaults(
 }
 .logo-container {
 }
+/* The CTA container is a plain block: every family below positions the BOX, and the
+   button then fills whatever box it is given (full width for the mobile row,
+   content width everywhere else). */
+.cta-container {
+  min-width: 0;
+}
 
 /* DESKTOP_TAB_1 */
 .desktop-tab-horizontal-stack-left-logo-right-menu {
@@ -369,6 +411,158 @@ withDefaults(
 .mobile-hamburger-no-logo-right-menu .logo-container {
   @apply tw-hidden;
 }
+
+/* ==========================================================================
+   Header CTA placement (BP-5852)
+
+   Every rule here is additive and only applies once a CTA is rendered — the
+   track/flow-changing ones are gated on `.has-header-cta` — so a header with no
+   button lays out exactly as it did before. Four placements:
+     join   - inline immediately after the nav links
+     edge   - pinned to the header's outer right edge, nav left untouched
+     corner - floats top-right, out of flow, independent of a centered stack
+     row    - full-width row below the whole stack (mobile bar nav)
+   ========================================================================== */
+
+/* join - DESKTOP_TAB_1: appended flex child; the nav's `flex: 1` right-aligns the
+   [links][button] group, so the button lands adjacent to the links. */
+.desktop-tab-horizontal-stack-left-logo-right-menu .cta-container {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_2: the nav's `flex: 1` keeps the left-aligned links in place
+   and pushes the button to the outer right edge. */
+.desktop-tab-horizontal-stack-left-logo-left-menu .cta-container {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_3: reuses the grid's existing trailing spacer column, so the
+   centered nav and left logo keep their tracks unchanged. */
+.desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container {
+  grid-column: nav-end / cols-end;
+  justify-self: end;
+}
+
+/* join - DESKTOP_TAB_4: adds a content-width column after the nav column. The two
+   `1fr` tracks absorb the free space (an `auto` logo track would stretch and pull
+   the button away from the links). */
+.desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta {
+  grid-template-columns:
+    [col-start] 1fr [logo-start] var(--logo-max-width)
+    [logo-end nav-start] 1fr [nav-end cta-start] auto [cta-end];
+}
+.desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container {
+  grid-column: cta-start / cta-end;
+}
+
+/* corner - DESKTOP_TAB_5 / DESKTOP_TAB_6: out of flow, so the centered vertical
+   stack keeps its two explicit grid rows and stays centered. */
+.desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta,
+.desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta {
+  position: relative;
+}
+.desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container,
+.desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* row - MOBILE_TAB_1 / MOBILE_TAB_2: auto-places into an implicit third grid row
+   below the stack (both explicit rows are taken by the logo and the nav). */
+.mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container,
+.mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container {
+  width: 100%;
+  justify-self: stretch;
+}
+.mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta,
+.mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta {
+  @apply tw-flex-wrap tw-justify-center;
+}
+
+/* row - MOBILE_TAB_NO_LOGO_1: single centered flex row, so the full-width button
+   needs a wrap to drop below the nav. */
+.mobile-tab-centered-menu-no-logo.has-header-cta {
+  @apply tw-flex-wrap;
+}
+.mobile-tab-centered-menu-no-logo .cta-container {
+  width: 100%;
+}
+
+/* join - DESKTOP_TAB_NO_LOGO_1 / _3: appended flex child sits adjacent to the
+   left- / right-aligned links. */
+.desktop-tab-left-menu-no-logo .cta-container,
+.desktop-tab-right-menu-no-logo .cta-container {
+  margin-left: 1rem;
+}
+
+/* edge - DESKTOP_TAB_NO_LOGO_2: out of flow so the nav stays exactly centered
+   (an in-flow button would shift the centered group left). */
+.desktop-tab-centered-menu-no-logo.has-header-cta {
+  position: relative;
+}
+.desktop-tab-centered-menu-no-logo .cta-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* DESKTOP_HAMBURGER_1 / _2: the button joins the header row BEFORE the icon. These
+   grids declare exact tracks, so each gains a content-width CTA column ahead of the
+   nav column; the logo track becomes `1fr` to absorb the free space that an `auto`
+   track would otherwise share with the CTA. The mobile hamburger styles share the
+   base rules above but never render a CTA, so their tracks are untouched. */
+.desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta {
+  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
+      --hamburger-nav-width
+    );
+}
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta {
+  grid-template-columns:
+    [start] var(--hamburger-nav-width)
+    [logo-start] 1fr [cta-start] auto [nav-start] var(--hamburger-nav-width);
+}
+.desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container,
+.desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container {
+  grid-column: cta-start;
+  align-self: center;
+  @apply tw-mr-4;
+}
+
+/* DESKTOP_HAMBURGER_NO_LOGO_1..3: flex rows; `order` puts the button before the
+   icon without reordering the DOM. */
+.desktop-hamburger-no-logo-left-menu .cta-container,
+.desktop-hamburger-no-logo-centered-menu .cta-container,
+.desktop-hamburger-no-logo-right-menu .cta-container {
+  order: -1;
+  align-self: center;
+  @apply tw-mr-4;
+}
+
+/* row - MOBILE_HAMBURGER_* with the nav hidden (single-page site): no icon, no
+   drawer, so the button gets the mobile-bar full-width row below the logo. The
+   grid styles auto-place it into an implicit row spanning all tracks; the
+   flex no-logo styles wrap it onto its own line. */
+.mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container,
+.mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
+  .cta-container,
+.mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
+  .cta-container,
+.mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container {
+  grid-column: 1 / -1;
+  width: 100%;
+  margin-top: 1rem;
+}
+.mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta,
+.mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta,
+.mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta {
+  @apply tw-flex-wrap;
+}
+.mobile-hamburger-no-logo-left-menu.no-nav .cta-container,
+.mobile-hamburger-no-logo-centered-menu.no-nav .cta-container,
+.mobile-hamburger-no-logo-right-menu.no-nav .cta-container {
+  width: 100%;
+}
 </style>
 
 <style>

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

@@ -1,7 +1,10 @@
 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';
 
 export default defineComponent({
@@ -37,6 +40,9 @@ 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,
@@ -54,5 +60,14 @@ export default defineComponent({
     onHeaderContainerClick() {
       this.$emit('header-container-click');
     },
+    // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
+    // prevent lands before the inner anchor/router-link fires, and the stop keeps the
+    // click from selecting the header panel. On the published site it does nothing.
+    onHeaderCtaClick(event: MouseEvent): void {
+      if (this.context.isPreview) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
   },
 });

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,18 @@
             @click.stop
           />
         </template>
+        <template v-if="headerButtonViewModel" #cta>
+          <!-- The attribute value scopes the hook per instance (nav-1 = desktop,
+               nav-2 = mobile, "drawer" in the side menu) — MediaQuery keeps both
+               viewport headers in the DOM, so a bare hook would match all of them. -->
+          <Button
+            :data-test-header-cta-button="navId"
+            :view-model="headerButtonViewModel"
+            :context="context"
+            :variant="BUTTON_VARIANTS.header"
+            @click.capture="onHeaderCtaClick"
+          />
+        </template>
       </HeaderLayout>
     </div>
   </div>
@@ -38,15 +54,21 @@ 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';
+import { BUTTON_VARIANTS } from '../../utils/button.util';
 
 export default {
   components: {
     Navigation,
     Logo,
     HeaderLayout,
+    Button,
   },
   mixins: [PageHeaderMixin],
   emits: ['open-side-menu'],
+  setup() {
+    return { BUTTON_VARIANTS };
+  },
 };
 </script>
 <style scoped>