@designcrowd/library.brand-page 6.2.0 → 6.2.1

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

@@ -713,6 +713,17 @@ export class NavModel {
   }
 }
 
+export interface HeaderButton {
+  isVisible: boolean;
+  text: string;
+  buttonLinkType: ButtonLinkType;
+  url?: string;
+  buttonPageId?: string;
+  buttonTextStyle?: TextStyleDeclaration;
+  fillColor?: string;
+  borderColor?: string;
+}
+
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 
 export abstract class AbstractPageHeaderStyles {
@@ -742,6 +753,9 @@ export abstract class AbstractPageHeaderStyles {
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
+  /** Missing = no button. `declare` keeps it off saved data so old migrations still see the same shape. */
+  declare headerButton?: HeaderButton;
+
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
       throw new Error('"viewport" is required');
@@ -779,6 +793,11 @@ export abstract class AbstractPageHeaderStyles {
       ...(options.backgroundStyle || {}),
       backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
     };
+
+    // Only set when given — a missing button must stay missing for old migrations.
+    if (options.headerButton) {
+      this.headerButton = options.headerButton;
+    }
   }
 }
 

package/src/brand-page/utils/context.util.ts

@@ -17,3 +17,18 @@ export const getSlugFromContext = (context: BrandPageContext) => {
  */
 export const isPreviewMode = (context: BrandPageContext): boolean =>
   !!(context.isPreview || context.isLivePreview);
+
+// Blocks a click in the maker preview (no link-follow, no bubbling); true when it fired.
+export const guardPreviewClick = (
+  event: MouseEvent,
+  context: BrandPageContext,
+): boolean => {
+  if (!context.isPreview) {
+    return false;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  return true;
+};

package/src/brand-page/utils/route.util.ts

@@ -208,3 +208,16 @@ export const findNavItemByPageSlug = (
 
   return undefined;
 };
+
+// Nav shows when more than one page is visible, or one page has visible subpages.
+// The header row and the side menu both key the button placement off this — one
+// source so the two can never disagree.
+export const hasVisibleNavigation = (navItems: NavItemViewModel[]): boolean => {
+  const visibleNavItems = navItems.filter((item) => !item.isHidden);
+
+  return (
+    visibleNavItems.length > 1 ||
+    (visibleNavItems.length === 1 &&
+      visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden))
+  );
+};

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

@@ -5,8 +5,14 @@ import {
   type MailingListContent,
   type ContactFormContent,
   type ColorItem,
+  type HeaderButton,
+} from '../models';
+import {
+  BRAND_PAGE_TYPES,
+  BUTTON_LINK_TYPE,
+  PageHeaderDesktop,
+  PageStyles,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
 import {
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
@@ -1114,3 +1120,147 @@ describe('container-aware text colour defaults (view-model layer)', () => {
     expect(vm.nameStyle?.color).toBe('#00ff00');
   });
 });
+
+describe('mapToPageHeaderViewModel header button', () => {
+  const headerButton: HeaderButton = {
+    isVisible: true,
+    text: 'Contact Us',
+    buttonLinkType: BUTTON_LINK_TYPE.url,
+    url: 'https://example.com',
+    buttonTextStyle: { textStyleType: 'buttons' },
+    fillColor: '#123456',
+    borderColor: '#654321',
+  };
+
+  describe('headerButtonViewModel', () => {
+    const mapButton = (overrides: Partial<HeaderButton> = {}) =>
+      mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: { ...headerButton, ...overrides },
+        }),
+        new PageStyles(),
+        [],
+      ).headerButtonViewModel;
+
+    test('is absent when the header has no button at all', () => {
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop(),
+        new PageStyles(),
+        [],
+      );
+
+      expect(vm.headerButtonViewModel).toBeUndefined();
+    });
+
+    test('is absent when the button is configured but hidden', () => {
+      expect(mapButton({ isVisible: false })).toBeUndefined();
+    });
+
+    test('carries the authored label', () => {
+      expect(mapButton({ text: 'Book now' })?.title).toBe('Book now');
+    });
+
+    // Wrapped lines justify; CSS text-align-last keeps the only/last line centered.
+    test('the label text-align is justify', () => {
+      expect(mapButton({})?.titleStyle.textAlign).toBe('justify');
+    });
+
+    // No label means no button — the maker seeds "Contact Us", so this is a deliberate clear.
+    test.each([[''], ['   ']])(
+      'a blank label hides the button (%j)',
+      (text) => {
+        expect(mapButton({ text })).toBeUndefined();
+      },
+    );
+
+    // Button.vue reads the link kind off `role` for non-section content, so the
+    // authored link type has to land on the role/clickActionField pair.
+    test.each([
+      [BUTTON_LINK_TYPE.url, 'general-link', 'url'],
+      [BUTTON_LINK_TYPE.page, 'general-link', 'page'],
+      [BUTTON_LINK_TYPE.mailTo, 'email', 'url'],
+      [BUTTON_LINK_TYPE.tel, 'phone', 'url'],
+    ])(
+      'maps the %s link type to role %s / clickActionField %s',
+      (buttonLinkType, role, clickActionField) => {
+        const vm = mapButton({ buttonLinkType });
+
+        expect(vm?.role).toBe(role);
+        expect(vm?.clickActionField).toBe(clickActionField);
+      },
+    );
+
+    test('routes a page link through the picked page id', () => {
+      const vm = mapButton({
+        buttonLinkType: BUTTON_LINK_TYPE.page,
+        buttonPageId: 'page-2',
+        url: undefined,
+      });
+
+      expect(vm?.page).toBe('page-2');
+      expect(vm?.pageSlug).toBe('page-2');
+    });
+
+    test('overrides the theme fill and border with the authored colours', () => {
+      const vm = mapButton({ fillColor: '#123456', borderColor: '#654321' });
+
+      expect(vm?.styles.style.backgroundColor).toBe('#123456');
+      expect(vm?.styles.style.borderColor).toBe('#654321');
+    });
+
+    test('keeps the site button style when no colours are authored', () => {
+      const styles = new PageStyles();
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: {
+            ...headerButton,
+            fillColor: undefined,
+            borderColor: undefined,
+          },
+        }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.styles.style.backgroundColor).toBe(
+        styles.buttonStyles.style.backgroundColor,
+      );
+      expect(vm?.styles.selectedButtonStyleId).toBe(
+        styles.buttonStyles.selectedButtonStyleId,
+      );
+    });
+
+    test('resolves the button text style against the site text styles', () => {
+      const styles = new PageStyles();
+
+      styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
+
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({ headerButton }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+    });
+
+    // The maker writes buttonTextStyle only once the author touches the style field,
+    // so an untouched button still has to inherit the site's button text style.
+    test('defaults to the site button text style when none is authored', () => {
+      const styles = new PageStyles();
+
+      styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
+
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: { ...headerButton, buttonTextStyle: undefined },
+        }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.titleStyle?.textStyleType).toBe('buttons');
+      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+    });
+  });
+});

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

@@ -44,8 +44,11 @@ import type {
   NavRoute,
   NavOrder,
   ColorItem,
+  HeaderButton,
+  ButtonLinkType,
+  ContentType,
 } from '../models';
-import { ButtonStyles, VIEWPORTS } from '../models';
+import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
 import {
   NavigationMobile,
   NavigationDesktop,
@@ -1189,6 +1192,71 @@ export const mapToPageStyleViewModel = (
   };
 };
 
+// Maps each link kind to the role Button.vue already understands, so the button needs no new code.
+const HEADER_BUTTON_LINK_ROLES: Record<ButtonLinkType, ContentType> = {
+  [BUTTON_LINK_TYPE.url]: 'general-link',
+  [BUTTON_LINK_TYPE.page]: 'general-link',
+  [BUTTON_LINK_TYPE.mailTo]: 'email',
+  [BUTTON_LINK_TYPE.tel]: 'phone',
+};
+
+const mapToHeaderButtonViewModel = (
+  headerButton: HeaderButton | undefined,
+  styles: PageStyles,
+): ButtonViewModel | undefined => {
+  // No label means no button — hidden in preview and on the published site.
+  if (!headerButton?.isVisible || !headerButton.text?.trim()) {
+    return undefined;
+  }
+
+  const titleStyle: TextStyleDeclaration = headerButton.buttonTextStyle ?? {
+    textStyleType: TEXT_STYLE_TYPES.buttons,
+  };
+
+  const viewModel = mapToButtonViewModel(
+    {
+      id: 'page-header-button',
+      // Old saved data may have no link kind — treat it as a url.
+      type:
+        HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType] ??
+        HEADER_BUTTON_LINK_ROLES[BUTTON_LINK_TYPE.url],
+      iconUrl: '',
+      modalImageUrl: '',
+      colorReplacements: [],
+      title: headerButton.text.trim(),
+      titleStyle,
+      url: headerButton.url ?? '',
+      page: headerButton.buttonPageId ?? '',
+      clickActionField:
+        headerButton.buttonLinkType === BUTTON_LINK_TYPE.page ? 'page' : 'url',
+    },
+    styles,
+    { titleStyle },
+  );
+
+  return {
+    ...viewModel,
+    // A wrapped label justifies; the last (or only) line stays centered like a short label.
+    titleStyle: {
+      ...viewModel.titleStyle,
+      textAlign: 'justify',
+      textAlignLast: 'center',
+    },
+    styles: {
+      ...viewModel.styles,
+      style: {
+        ...viewModel.styles.style,
+        ...(headerButton.fillColor
+          ? { backgroundColor: headerButton.fillColor }
+          : {}),
+        ...(headerButton.borderColor
+          ? { borderColor: headerButton.borderColor }
+          : {}),
+      },
+    },
+  };
+};
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1283,6 +1351,10 @@ export const mapToPageHeaderViewModel = (
           }),
     style: pageHeader.style,
     backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+    headerButtonViewModel: mapToHeaderButtonViewModel(
+      pageHeader.headerButton,
+      pageStyles,
+    ),
   };
 };
 

package/src/brand-page/view-models.ts

@@ -259,11 +259,14 @@ export interface PageHeaderViewModel extends Omit<
   | 'logoTemplateImage'
   | 'logoImageHeight'
   | 'logoImageWidth'
+  | 'headerButton'
   | 'backgroundStyle'
 > {
   logo: LogoViewModel;
   pages: PageViewModel[];
   backgroundStyle: BrandPageCssStyle;
+  /** Absent unless the header call-to-action button is configured AND visible. */
+  headerButtonViewModel?: ButtonViewModel;
 }
 
 export interface PageFooterViewModel extends Omit<

package/src/brand-page-maker/validators/section-button.validator.ts

@@ -38,14 +38,15 @@ export const textValidator: ContentValidator<BannerSectionContent> = (
   };
 };
 
-export const urlValidator: ContentValidator<
-  BannerSectionContent | BookingSectionContent
-> = (section): ValidateResult => {
+const VALID: ValidateResult = { message: '', isValid: true };
+
+// The link rules alone — the header button uses these directly (its link is always required).
+export const buttonLinkValidator = (
+  section: Pick<BannerSectionContent, 'buttonLinkType' | 'url'>,
+): ValidateResult => {
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.url &&
-    (!isURL(section.url) || containsAtSymbol(section.url)) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
+    (!isURL(section.url) || containsAtSymbol(section.url))
   ) {
     return {
       message: MISSING_BUTTON_URL_MESSAGE(),
@@ -56,9 +57,7 @@ export const urlValidator: ContentValidator<
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.mailTo &&
     typeof section.url === 'string' &&
-    !isEmail(section.url) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
+    !isEmail(section.url)
   ) {
     return {
       message: MISSING_BUTTON_EMAIL_MESSAGE(),
@@ -66,24 +65,29 @@ export const urlValidator: ContentValidator<
     };
   }
 
-  if (
-    section.buttonLinkType === BUTTON_LINK_TYPE.tel &&
-    !isTel(section.url) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
-  ) {
+  if (section.buttonLinkType === BUTTON_LINK_TYPE.tel && !isTel(section.url)) {
     return {
       message: MISSING_BUTTON_TEL_MESSAGE(),
       isValid: false,
     };
   }
 
-  return {
-    message: '',
-    isValid: true,
-  };
+  return VALID;
 };
 
+type ButtonLinkFields = Pick<
+  BannerSectionContent,
+  'buttonLinkType' | 'url' | 'buttonText'
+>;
+
+// The banner's rule: its button text is optional, and only a button with text needs a link.
+export const urlValidator: ContentValidator<ButtonLinkFields> = (
+  section,
+): ValidateResult =>
+  section.buttonText !== false && section.buttonText?.length > 0
+    ? buttonLinkValidator(section)
+    : VALID;
+
 export const pageValidator: ContentValidator<
   BannerSectionContent | BookingSectionContent
 > = (section): ValidateResult => {

package/src/bundles/bundled-translations.de-DE.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Symbol-Stil",
     "logoSize": "Logogröße",
     "socialLinks": "Social-Media-Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Etikett",
+    "buttonLabelPlaceholder": "Kontakt",
+    "buttonLink": "Link",
+    "buttonFillColor": "Füllfarbe",
+    "buttonBorderColor": "Randfarbe"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Suche",

package/src/bundles/bundled-translations.es-ES.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Estilo de icono",
     "logoSize": "Tamaño del logo",
     "socialLinks": "Enlaces a redes sociales",
-    "copyright": "Derechos de autor"
+    "copyright": "Derechos de autor",
+    "buttonLabel": "Etiqueta",
+    "buttonLabelPlaceholder": "Contacto",
+    "buttonLink": "Enlace",
+    "buttonFillColor": "Color de relleno",
+    "buttonBorderColor": "Color del borde"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Buscar",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
-    "copyright": "Droits d’auteur"
+    "copyright": "Droits d’auteur",
+    "buttonLabel": "Étiquette",
+    "buttonLabelPlaceholder": "Nous joindre",
+    "buttonLink": "Lien",
+    "buttonFillColor": "Couleur de remplissage",
+    "buttonBorderColor": "Couleur de bordure"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Rechercher",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
-    "copyright": "Droits d’auteur"
+    "copyright": "Droits d’auteur",
+    "buttonLabel": "Étiquette",
+    "buttonLabelPlaceholder": "Contactez-nous",
+    "buttonLink": "Lien",
+    "buttonFillColor": "Couleur de remplissage",
+    "buttonBorderColor": "Couleur de bordure"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Rechercher",

package/src/bundles/bundled-translations.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Label",
+    "buttonLabelPlaceholder": "Contact Us",
+    "buttonLink": "Link",
+    "buttonFillColor": "Fill color",
+    "buttonBorderColor": "Border color"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Search",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Estilo de ícone",
     "logoSize": "Tamanho do logotipo",
     "socialLinks": "Links de redes sociais",
-    "copyright": "Direitos autorais"
+    "copyright": "Direitos autorais",
+    "buttonLabel": "Rótulo",
+    "buttonLabelPlaceholder": "Entre em contato",
+    "buttonLink": "Link",
+    "buttonFillColor": "Cor de preenchimento",
+    "buttonBorderColor": "Cor da borda"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Pesquisar",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1867,7 +1867,12 @@
     "iconStyle": "Estilo de Ícone",
     "logoSize": "Tamanho do logótipo",
     "socialLinks": "Links de redes sociais",
-    "copyright": "Direitos de autor"
+    "copyright": "Direitos de autor",
+    "buttonLabel": "Etiqueta",
+    "buttonLabelPlaceholder": "Contacte-nos",
+    "buttonLink": "Link",
+    "buttonFillColor": "Cor de preenchimento",
+    "buttonBorderColor": "Cor da borda"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Pesquisar",

package/src/shared/content-settings/components/text-field/TextField.mixin.ts

@@ -1,5 +1,20 @@
 import { defineComponent } from 'vue';
 import GenericTextInputMixin from '../GenericTextInput.mixin';
+
 export default defineComponent({
   mixins: [GenericTextInputMixin],
+  props: {
+    // Opt-in: clearing the field shows its error at once, not only after blur.
+    showErrorWhenEmpty: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    value(value: string | false | undefined): void {
+      if (this.showErrorWhenEmpty && !(value || '').trim()) {
+        this.isDirty = false;
+      }
+    },
+  },
 });

package/src/shared/content-settings/components/url-field/UrlField.vue

@@ -11,6 +11,7 @@
       :icon="icon"
       :error="isErrorVisible"
       @focus="onFocusOverride"
+      @blur="onBlur"
       @input="onInputOverride"
       @keyup="onChangeOverride"
     />

package/src/shared/page-navigation/store/page-navigation-store.ts

@@ -81,6 +81,22 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         orders: this.orders,
       });
     },
+    // Mirrors the renderer's hasVisibleNavigation (route.util.ts) on the maker's nav state:
+    // the header shows a nav for >1 visible top-level page, or 1 with a visible subpage.
+    hasVisibleNavigation(): boolean {
+      const isVisible = (order: NavOrder): boolean => {
+        const route = this.routes.find((r) => r.id === order.routeId);
+
+        return route !== undefined && !route.isHidden;
+      };
+      const visibleOrders = this.orders.filter(isVisible);
+
+      return (
+        visibleOrders.length > 1 ||
+        (visibleOrders.length === 1 &&
+          visibleOrders[0].subRoutes.some(isVisible))
+      );
+    },
   },
   actions: {
     getPageSlugsForDepth(parentRouteId?: string): string[] {