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

package/lib/src/{CreatedOnBrandCrowd-de-de-ClD0Z4Nf.js → CreatedOnBrandCrowd-de-de-CGQppEEP.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-x35bJCuy.js → CreatedOnBrandCrowd-en-us-Do8u4cNA.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-zm1tzSt2.js → CreatedOnBrandCrowd-es-es-Cw9i-wIi.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-B7XCRP8c.js → CreatedOnBrandCrowd-fr-ca-DK9cVARn.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-B7XCRP8c.js → CreatedOnBrandCrowd-fr-fr-DK9cVARn.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-7QHheNW1.js → CreatedOnBrandCrowd-pt-br-CKvle-Uo.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-7QHheNW1.js → CreatedOnBrandCrowd-pt-pt-CKvle-Uo.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DnnaLgX8.js";
+import { _ as t } from "./lib-BFusPgV2.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-Yn0mPf9E.js → CreatedOnDcom-de-de-DZGQbS8x.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DnnaLgX8.js";
+import { _ as e } from "./lib-BFusPgV2.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-BO8_HZ9Q.js → CreatedOnDcom-en-us-CAGyRg9Z.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DnnaLgX8.js";
+import { _ as e } from "./lib-BFusPgV2.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-cZcgEsjB.js → CreatedOnDcom-es-es-B_Xbs4CX.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DnnaLgX8.js";
+import { _ as e } from "./lib-BFusPgV2.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-CA-hvR-A.js → CreatedOnDcom-fr-ca-B_Af6mgX.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DnnaLgX8.js";
+import { _ as e } from "./lib-BFusPgV2.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CEWt2rrU.js → CreatedOnDcom-fr-fr-Dn8OKUFf.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DnnaLgX8.js";
+import { _ as e } from "./lib-BFusPgV2.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DYnOYrQv.js → CreatedOnDcom-pt-br-DFsESCzy.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DnnaLgX8.js";
+import { _ as M } from "./lib-BFusPgV2.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-C7BpvRge.js → CreatedOnDcom-pt-pt-CjbOJw5o.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DnnaLgX8.js";
+import { _ as M } from "./lib-BFusPgV2.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

@@ -23,11 +23,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-    isMobile: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
 }>, {}, {
     expandedItems: Record<string, boolean>;
 }, {
@@ -70,15 +65,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-    isMobile: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
 }>> & Readonly<{
     "onClose-side-menu"?: ((...args: any[]) => any) | undefined;
 }>, {
-    isMobile: boolean;
     headerButtonViewModel: ButtonViewModel;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -18,18 +18,13 @@ export default defineComponent({
             type: Object,
             required: true,
         },
+        // Provided only when the header row does not render the CTA (the caller
+        // decides via headerRowRendersCta) — absent means the drawer shows none.
         headerButtonViewModel: {
             type: Object,
             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() {
@@ -63,7 +58,7 @@ export default defineComponent({
             return rest;
         },
         showHeaderButton() {
-            return this.isMobile && Boolean(this.headerButtonViewModel);
+            return Boolean(this.headerButtonViewModel);
         },
         routes() {
             return this.visibleNavItems.map((navItem, _i) => {
@@ -100,9 +95,9 @@ export default defineComponent({
         closeSideMenu() {
             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.
+        // In the maker preview the CTA is inert (see docs/decisions/0019): 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) {
             if (this.context.isPreview) {
                 event.preventDefault();

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageViewModel, ContentViewModel, PageViewModel } from '@brand-page/view-models';
+import type { BrandPageViewModel, ButtonViewModel, ContentViewModel, PageViewModel } from '@brand-page/view-models';
 import type { BackgroundShape, BrandPageContext, ViewportsType } from '@brand-page/models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {
@@ -81,6 +81,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     headerViewModelDesktop(): any;
     isNavigationEmbeddedInLogoMobile(): boolean;
     isNavigationEmbeddedInLogoDesktop(): boolean;
+    drawerHeaderButtonViewModel(): ButtonViewModel | undefined;
     shouldShowNavigation(): boolean;
     showNavigationAfterLogoMobile(): boolean;
     showNavigationAfterLogoDesktop(): boolean;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
+import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, headerRowRendersCta, } from '../../constants';
 import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
 import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
@@ -276,6 +276,16 @@ export default defineComponent({
                 this.contents[0]?.type === 'logo' &&
                 this.viewModel.pages.length > 1);
         },
+        // The mobile drawer carries the header CTA exactly when the header row does
+        // not — one shared predicate so the two can never render it twice.
+        drawerHeaderButtonViewModel() {
+            const header = this.viewModel.headerViewModelMobile;
+            if (!header.headerButtonViewModel ||
+                headerRowRendersCta(header.displayStyle, this.shouldShowNavigation)) {
+                return undefined;
+            }
+            return header.headerButtonViewModel;
+        },
         shouldShowNavigation() {
             // 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);

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

@@ -3,3 +3,4 @@ import HeaderLayout from './HeaderLayout.vue';
 declare const meta: Meta<typeof HeaderLayout>;
 export default meta;
 export declare const Sample: StoryFn;
+export declare const WithHeaderButton: StoryFn;

package/lib/src/brand-page/components/page-header/HeaderLayout.stories.js

@@ -36,6 +36,7 @@ const Template = (args) => ({
         nav-id="nav-1"
         :show-nav="args.showNav"
         :display-style="args.displayStyle"
+        :has-cta="args.hasCta"
         logo-width="100px"
       >
         <template v-slot:logo>
@@ -44,6 +45,9 @@ const Template = (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>
   `,
@@ -52,3 +56,8 @@ 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,
+};

package/lib/src/brand-page/components/page-header/PageHeader.mixin.js

@@ -48,9 +48,9 @@ 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.
+        // In the maker preview the CTA is inert (see docs/decisions/0019): capture-phase
+        // so the prevent lands before the inner anchor/router-link fires, and the stop
+        // keeps the click from selecting the header panel. Published sites: no-op.
         onHeaderCtaClick(event) {
             if (this.context.isPreview) {
                 event.preventDefault();

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

@@ -44,4 +44,12 @@ interface HeaderDisplayStyleConfig {
     option: ButtonGroupOption;
 }
 export declare const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[];
+/**
+ * Whether the header ROW renders the call-to-action button, as opposed to the
+ * mobile nav drawer. The compact mobile hamburger row hands the CTA to the
+ * drawer — unless the nav is hidden (single visible page), when there is no
+ * drawer and the row must carry it. Derived from the configs so a future
+ * style classifies itself by its own viewMode/navType.
+ */
+export declare const headerRowRendersCta: (displayStyle: string, showNav: boolean) => boolean;
 export {};

package/lib/src/brand-page/constants/sections/header-display.constants.js

@@ -416,3 +416,14 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         },
     },
 ];
+/**
+ * Whether the header ROW renders the call-to-action button, as opposed to the
+ * mobile nav drawer. The compact mobile hamburger row hands the CTA to the
+ * drawer — unless the nav is hidden (single visible page), when there is no
+ * drawer and the row must carry it. Derived from the configs so a future
+ * style classifies itself by its own viewMode/navType.
+ */
+export const headerRowRendersCta = (displayStyle, showNav) => !showNav ||
+    !HEADER_DISPLAY_STYLE_CONFIGS.some((config) => config.option.value === displayStyle &&
+        config.viewMode === 'mobile' &&
+        config.navType === 'hamburger');

package/lib/src/brand-page/models/index.d.ts

@@ -535,7 +535,10 @@ export declare abstract class AbstractPageHeaderStyles {
     backgroundStyle: BackgroundColorStyle;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
-    /** Absent means no header call-to-action button — never seed a default. */
+    /** Absent means no header call-to-action button — never seed a default.
+     * `declare` keeps the class field type-only: a plain optional field is still
+     * DEFINED on every instance (an own `undefined` key), which would change the
+     * serialized shape released migrations receive. */
     headerButton?: HeaderButton;
     protected constructor(options?: AbstractPageHeaderStylesType);
 }

package/lib/src/brand-page/models/index.js

@@ -227,8 +227,6 @@ export class AbstractPageHeaderStyles {
     backgroundStyle;
     style;
     viewport;
-    /** Absent means no header call-to-action button — never seed a default. */
-    headerButton;
     constructor(options = {}) {
         if (typeof options.viewport === 'undefined') {
             throw new Error('"viewport" is required');
@@ -259,7 +257,11 @@ export class AbstractPageHeaderStyles {
             ...(options.backgroundStyle || {}),
             backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
         };
-        this.headerButton = options.headerButton;
+        // Assign only when present: constructor output is part of released
+        // migrations' input contract, so an absent field must stay absent.
+        if (options.headerButton) {
+            this.headerButton = options.headerButton;
+        }
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {

package/lib/src/brand-page/utils/view-model.util.d.ts

@@ -13,7 +13,6 @@ export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
 export declare const mapToNavViewModel: (nav: NavModel, brandPageSlug?: string, isCustomDomain?: boolean) => NavViewModel;
 export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
-export declare const HEADER_BUTTON_FALLBACK_TEXT = "Contact Us";
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;

package/lib/src/brand-page/utils/view-model.util.js

@@ -13,6 +13,7 @@ import { isLogoContent } from './model.util';
 import { resolveTextColor } from './text-style.util';
 import { getBoxShadowValue, sectionFrameStyle } from './button.util';
 import { findNavItemByPageId, getRouteNameByPageIndex, getRouteParamsByPage, } from './route.util';
+import { tr } from '@src/composables/useTranslate';
 import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
 import { getPageIdFromHref, isHrefPageId, } from '../../brand-page-maker/composables/rich-text-editor/hyperlink';
 const BUTTON_BORDER_RADIUS = '9999px';
@@ -691,9 +692,6 @@ export const mapToPageStyleViewModel = (pageStyles, options) => {
         colors: pageStyles.colors ?? [],
     };
 };
-// Must stay in step with the maker's `pageSettingsSection.buttonLabelPlaceholder`
-// (page-settings-section.json) — the placeholder shows what an empty label publishes as.
-export const HEADER_BUTTON_FALLBACK_TEXT = 'Contact Us';
 /**
  * `Button.vue` reads the link kind off `role` for every non-section role, so the header
  * CTA's authored `buttonLinkType` is expressed as the role (+ `clickActionField` for a
@@ -714,11 +712,13 @@ const mapToHeaderButtonViewModel = (headerButton, styles) => {
     };
     const viewModel = mapToButtonViewModel({
         id: 'page-header-button',
-        type: HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType],
+        // Total: metadata outside the maker may omit buttonLinkType — treat as url.
+        type: HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType] ??
+            HEADER_BUTTON_LINK_ROLES[BUTTON_LINK_TYPE.url],
         iconUrl: '',
         modalImageUrl: '',
         colorReplacements: [],
-        title: headerButton.text?.trim() || HEADER_BUTTON_FALLBACK_TEXT,
+        title: headerButton.text?.trim() || tr('pageHeader.buttonFallbackLabel'),
         titleStyle,
         url: headerButton.url ?? '',
         page: headerButton.buttonPageId ?? '',

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -1435,6 +1435,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     headerViewModelDesktop(): any;
     isNavigationEmbeddedInLogoMobile(): boolean;
     isNavigationEmbeddedInLogoDesktop(): boolean;
+    drawerHeaderButtonViewModel(): import("@brand-page").ButtonViewModel | undefined;
     shouldShowNavigation(): boolean;
     showNavigationAfterLogoMobile(): boolean;
     showNavigationAfterLogoDesktop(): boolean;