@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/src/shared/page-settings/components/page-settings-section-styles/HeaderButtonSettings.vue

@@ -0,0 +1,265 @@
+<template>
+  <div data-component="header-button-settings">
+    <p class="header-button-settings_option-title tw-mb-2">
+      {{ tr('pageSettingsSection.buttonLabel') }}
+    </p>
+    <TextField
+      id="headerButton"
+      data-test-header-button-text
+      name="text"
+      show-error-when-empty
+      :value="text"
+      :placeholder="tr('pageSettingsSection.buttonLabelPlaceholder')"
+      :max-length="BUTTON_TEXT_MAX_LENGTH"
+      :settings="labelSettings"
+      @update:model-value="onTextChange"
+    />
+
+    <p class="header-button-settings_option-title tw-mt-4 tw-mb-2">
+      {{ tr('pageSettingsSection.buttonLink') }}
+    </p>
+    <ButtonGroup
+      data-test-header-button-link-type
+      :options="linkTypeOptions"
+      :columns="linkTypeColumns"
+      @on-select="onSelectLinkType"
+    />
+
+    <div class="tw-mt-2">
+      <PageDropdownField
+        v-if="buttonLinkType === BUTTON_LINK_TYPE.page"
+        id="headerButton"
+        data-test-header-button-page
+        name="buttonPageId"
+        :value="buttonPageId"
+        :placeholder="contentSettingsTr('selectAPagePlaceholder')"
+        @update:model-value="onPageChange"
+      />
+      <EmailField
+        v-else-if="buttonLinkType === BUTTON_LINK_TYPE.mailTo"
+        id="headerButton"
+        data-test-header-button-email
+        name="url"
+        role="email"
+        :value="url"
+        :placeholder="contentSettingsTr('emailPlaceholder')"
+        :settings="linkValueSettings"
+        @update:model-value="onUrlChange"
+      />
+      <TelField
+        v-else-if="buttonLinkType === BUTTON_LINK_TYPE.tel"
+        id="headerButton"
+        data-test-header-button-tel
+        name="url"
+        role="tel"
+        :value="url"
+        :placeholder="TEL_PLACEHOLDER"
+        :settings="linkValueSettings"
+        @update:model-value="onUrlChange"
+      />
+      <UrlField
+        v-else
+        id="headerButton"
+        data-test-header-button-url
+        name="url"
+        role="url"
+        :value="url"
+        :placeholder="contentSettingsTr('exampleWebsitePlaceholder')"
+        :settings="linkValueSettings"
+        @update:model-value="onUrlChange"
+      />
+    </div>
+
+    <TextStyleField
+      id="header-button-text-style"
+      data-test-header-button-text-style
+      name="buttonTextStyle"
+      :label="contentSettingsTr('buttonTextStyleLabel')"
+      :is-admin-maker="isAdminMaker"
+      :logo-theme="logoTheme"
+      :value="buttonTextStyle"
+      :show-text-alignment-options="false"
+      @update:model-value="onTextStyleChange"
+    />
+
+    <ColorField
+      id="fillColor"
+      data-test-header-button-fill-color
+      name="fillColor"
+      :label="tr('pageSettingsSection.buttonFillColor')"
+      :value="fillColor"
+      :is-admin-maker="isAdminMaker"
+      :logo-theme="logoTheme"
+      :disable-transparent="true"
+      @update:model-value="onFillColorChange"
+    />
+
+    <ColorField
+      v-if="supportsBorderColor"
+      id="borderColor"
+      data-test-header-button-border-color
+      name="borderColor"
+      :label="tr('pageSettingsSection.buttonBorderColor')"
+      :value="borderColor"
+      :is-admin-maker="isAdminMaker"
+      :logo-theme="logoTheme"
+      :disable-transparent="true"
+      @update:model-value="onBorderColorChange"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ButtonGroup } from '@designcrowd/fe-shared-lib';
+import type {
+  BrandPageContext,
+  HeaderButton,
+  LogoTheme,
+  TextStyleDeclaration,
+} from '@brand-page';
+import { BUTTON_LINK_TYPE, TEXT_STYLE_TYPES } from '@brand-page';
+import type { ButtonLinkType } from '@brand-page';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { buttonLinkStyleConvertor } from '@brand-page-maker/convertors';
+import { buttonLinkValidator } from '@brand-page-maker/validators';
+import { useUiPageSettingsStore } from '../../store';
+import { useUiStyleSettingsStore } from '../../../style-settings/store/style-settings-store';
+import type { ContentItemFieldSettings } from '../../../content-settings/models';
+import ColorField from '../../../content-settings/components/color-field/ColorField.vue';
+import EmailField from '../../../content-settings/components/email-field/EmailField.vue';
+import PageDropdownField from '../../../content-settings/components/page-dropdown-field/PageDropdownField.vue';
+import TelField from '../../../content-settings/components/tel-field/TelField.vue';
+import TextField from '../../../content-settings/components/text-field/TextField.vue';
+import TextStyleField from '../../../content-settings/components/text-style-field/TextStyleField.vue';
+import UrlField from '../../../content-settings/components/url-field/UrlField.vue';
+import {
+  contentSettingsTr,
+  tr,
+  validatorTr,
+} from '@src/composables/useTranslate';
+
+/** Same label length cap as the section buttons. */
+const BUTTON_TEXT_MAX_LENGTH = 60;
+
+/** Format example, not translated — same as the banner's tel placeholder. */
+const TEL_PLACEHOLDER = '12345-6789';
+
+interface Props {
+  value?: HeaderButton;
+  isAdminMaker: boolean;
+  logoTheme: LogoTheme;
+}
+
+const props = defineProps<Props>();
+
+const pageSettingsStore = useUiPageSettingsStore();
+const styleSettingsStore = useUiStyleSettingsStore();
+
+// Only show Border color when the site's button style actually draws a border.
+const supportsBorderColor = computed(
+  (): boolean =>
+    styleSettingsStore.selectedButtonStyleConfig?.options.includes(
+      'buttonBorderColor',
+    ) === true,
+);
+
+const emit = defineEmits<{
+  (e: 'on-change', patch: Partial<HeaderButton>): void;
+}>();
+
+const text = computed((): string => props.value?.text || '');
+// Validation matches the renderer, which trims: a whitespace-only label hides the button.
+const trimmedLabel = computed((): string => text.value.trim());
+const url = computed((): string => props.value?.url || '');
+const buttonPageId = computed((): string => props.value?.buttonPageId || '');
+const fillColor = computed((): string => props.value?.fillColor || '');
+const borderColor = computed((): string => props.value?.borderColor || '');
+const buttonTextStyle = computed(
+  // When unset, show the same Buttons-style default the site actually renders with.
+  (): TextStyleDeclaration =>
+    props.value?.buttonTextStyle ?? { textStyleType: TEXT_STYLE_TYPES.buttons },
+);
+const buttonLinkType = computed(
+  (): ButtonLinkType => props.value?.buttonLinkType || BUTTON_LINK_TYPE.url,
+);
+
+const validFieldSettings: ContentItemFieldSettings = {
+  errorMessage: '',
+  isValid: true,
+};
+
+// The label is required — a button with no text is hidden on the site.
+const labelSettings = computed(
+  (): ContentItemFieldSettings =>
+    trimmedLabel.value
+      ? validFieldSettings
+      : { isValid: false, errorMessage: validatorTr('emptyStringMessage') },
+);
+
+// The link is always required, unlike the banner's (which is optional without button text).
+const linkValueSettings = computed((): ContentItemFieldSettings => {
+  const { isValid, message } = buttonLinkValidator({
+    buttonLinkType: buttonLinkType.value,
+    url: url.value.trim(),
+  });
+
+  return { isValid, errorMessage: message };
+});
+
+const linkTypeConfig = computed(() =>
+  buttonLinkStyleConvertor.convert(
+    buttonLinkType.value,
+    // Only `pages` is read (drops the Page option on single-page sites).
+    { pages: pageSettingsStore.pages } as unknown as BrandPageContext,
+  ),
+);
+
+const linkTypeOptions = computed(
+  (): ButtonGroupOption[] => linkTypeConfig.value.options,
+);
+
+const linkTypeColumns = computed(
+  (): number | undefined => linkTypeConfig.value.columns,
+);
+
+const onTextChange = ({ value }: { value: string }): void => {
+  emit('on-change', { text: value });
+};
+
+// Switching the link kind clears the old value — a url is not a valid email/phone (same as the banner).
+const onSelectLinkType = (option: ButtonGroupOption): void => {
+  emit('on-change', {
+    buttonLinkType: option.value as ButtonLinkType,
+    url: '',
+  });
+};
+
+const onUrlChange = ({ value }: { value: string }): void => {
+  emit('on-change', { url: value });
+};
+
+const onPageChange = ({ value }: { value: string }): void => {
+  emit('on-change', { buttonPageId: value });
+};
+
+const onTextStyleChange = ({
+  value,
+}: {
+  value: TextStyleDeclaration;
+}): void => {
+  emit('on-change', { buttonTextStyle: value });
+};
+
+const onFillColorChange = ({ value }: { value: string }): void => {
+  emit('on-change', { fillColor: value });
+};
+
+const onBorderColorChange = ({ value }: { value: string }): void => {
+  emit('on-change', { borderColor: value });
+};
+</script>
+<style scoped>
+.header-button-settings_option-title {
+  @apply tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm;
+}
+</style>

package/src/shared/page-settings/components/page-settings-section-styles/HeaderDisplayStyle.test.ts

@@ -0,0 +1,354 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import { ButtonGroup } from '@designcrowd/fe-shared-lib';
+import {
+  HEADER_DISPLAY,
+  HEADER_DISPLAY_STYLE_CONFIGS,
+  NAVIGATION_DISPLAY,
+  VIEWPORTS,
+} from '@brand-page';
+import type { ViewportsType } from '@brand-page';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
+import HeaderDisplayStyle from './HeaderDisplayStyle.vue';
+
+// A visible nav needs more than the home page (mirrors route.util.ts hasVisibleNavigation).
+const seedNavPages = (count: number): void => {
+  const store = usePageNavigationStore();
+  const routes = Array.from({ length: count }, (_, i) => ({
+    id: `route-${i}`,
+    pageId: `page-${i}`,
+    pageSlug: `page-${i}`,
+    isHidden: false,
+    displayName: `Page ${i}`,
+  }));
+
+  store.routes = routes;
+  store.orders = routes.map((route) => ({
+    routeId: route.id,
+    subRoutes: [],
+  }));
+};
+
+// The button swaps bar + desktop-hamburger tiles to with-button artwork; mobile hamburger stays plain (button lives in the side menu), dataAttribute never changes.
+describe('HeaderDisplayStyle — header-button icon swap', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    seedNavPages(3);
+  });
+
+  const mountTiles = ({
+    displayStyle,
+    navigationDisplayType,
+    viewport = VIEWPORTS.desktop as ViewportsType,
+    isLogoVisible = true,
+    showHeaderButton = false,
+  }: {
+    displayStyle: string;
+    navigationDisplayType: string;
+    viewport?: ViewportsType;
+    isLogoVisible?: boolean;
+    showHeaderButton?: boolean;
+  }): ButtonGroupOption[] => {
+    const wrapper = shallowMount(HeaderDisplayStyle, {
+      props: {
+        displayStyle,
+        navigationDisplayType,
+        viewport,
+        isLogoVisible,
+        showHeaderButton,
+        onSelect: () => undefined,
+      },
+    });
+
+    return wrapper
+      .findComponent(ButtonGroup)
+      .props('options') as ButtonGroupOption[];
+  };
+
+  const desktopBar = (showHeaderButton: boolean) =>
+    mountTiles({
+      displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      showHeaderButton,
+    });
+
+  const iconNames = (options: ButtonGroupOption[]) =>
+    options.map((option) => ('iconName' in option ? option.iconName : ''));
+
+  test('off: the six desktop bar tiles keep their plain icons', () => {
+    expect(iconNames(desktopBar(false))).toEqual([
+      'header-desktop-nav-style-tab-display-style-1',
+      'header-desktop-nav-style-tab-display-style-2',
+      'header-desktop-nav-style-tab-display-style-3',
+      'header-desktop-nav-style-tab-display-style-4',
+      'header-desktop-nav-style-tab-display-style-5',
+      'header-desktop-nav-style-tab-display-style-6',
+    ]);
+  });
+
+  test('on: the six desktop bar tiles swap to the with-button icons', () => {
+    expect(iconNames(desktopBar(true))).toEqual([
+      'header-desktop-nav-style-tab-display-style-with-button-1',
+      'header-desktop-nav-style-tab-display-style-with-button-2',
+      'header-desktop-nav-style-tab-display-style-with-button-3',
+      'header-desktop-nav-style-tab-display-style-with-button-4',
+      'header-desktop-nav-style-tab-display-style-with-button-5',
+      'header-desktop-nav-style-tab-display-style-with-button-6',
+    ]);
+  });
+
+  test('value, dataAttribute and iconViewBox survive the swap', () => {
+    const off = desktopBar(false);
+    const on = desktopBar(true);
+
+    expect(on.map((option) => option.value)).toEqual(
+      off.map((option) => option.value),
+    );
+    expect(on.map((option) => option.dataAttribute)).toEqual(
+      off.map((option) => option.dataAttribute),
+    );
+    expect(
+      on.map((option) => ('iconViewBox' in option ? option.iconViewBox : '')),
+    ).toEqual([
+      '0 0 160 56',
+      '0 0 160 56',
+      '0 0 160 56',
+      '0 0 160 56',
+      '0 0 160 56',
+      '0 0 160 56',
+    ]);
+  });
+
+  test('on: the mobile bar tiles swap to the with-button icons', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.MOBILE_TAB_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      viewport: VIEWPORTS.mobile,
+      showHeaderButton: true,
+    });
+
+    expect(iconNames(options)).toEqual([
+      'header-mobile-nav-style-tab-display-style-with-button-1',
+      'header-mobile-nav-style-tab-display-style-with-button-2',
+    ]);
+  });
+
+  test('on: the desktop hamburger tiles swap to the with-button icons', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+      showHeaderButton: true,
+    });
+
+    expect(iconNames(options)).toEqual([
+      'header-desktop-nav-style-hamburger-display-style-with-button-1',
+      'header-desktop-nav-style-hamburger-display-style-with-button-2',
+    ]);
+  });
+
+  // Mobile hamburger has no with-button artwork on purpose: the button lives in the side menu.
+  test('the mobile hamburger tiles are left alone', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+      viewport: 'mobile',
+      showHeaderButton: true,
+    });
+
+    expect(
+      iconNames(options).every((name) => !name.includes('with-button')),
+    ).toBe(true);
+  });
+
+  test('the desktop no-logo bar tiles are left alone', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      isLogoVisible: false,
+      showHeaderButton: true,
+    });
+
+    expect(
+      iconNames(options).every((name) => !name.includes('with-button')),
+    ).toBe(true);
+  });
+
+  test('the shared display-style configs are never mutated in place', () => {
+    desktopBar(true);
+
+    // Absolute checks against the authored values, so any in-place write is caught.
+    HEADER_DISPLAY_STYLE_CONFIGS.forEach((config) => {
+      expect(config.option.isSelected).toBe(false);
+
+      if ('iconName' in config.option) {
+        expect(config.option.iconName).not.toContain('with-button');
+      }
+    });
+  });
+});
+
+// Desktop no-logo hamburger with the button on pins icon + button right, so the picker hides.
+describe('HeaderDisplayStyle — hidden for no-logo hamburger with the button', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountWrapper = ({
+    viewport = VIEWPORTS.desktop as ViewportsType,
+    isLogoVisible = false,
+    showHeaderButton = true,
+    navigationDisplayType = NAVIGATION_DISPLAY.HAMBURGER_1,
+  } = {}) =>
+    shallowMount(HeaderDisplayStyle, {
+      props: {
+        displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
+        navigationDisplayType,
+        viewport,
+        isLogoVisible,
+        showHeaderButton,
+        onSelect: () => undefined,
+      },
+    });
+
+  test('desktop + no logo + hamburger + button: the picker does not render', () => {
+    expect(mountWrapper().findComponent(ButtonGroup).exists()).toBe(false);
+  });
+
+  test('the picker stays with the button off', () => {
+    expect(
+      mountWrapper({ showHeaderButton: false })
+        .findComponent(ButtonGroup)
+        .exists(),
+    ).toBe(true);
+  });
+
+  test('the picker stays on mobile', () => {
+    expect(
+      mountWrapper({ viewport: VIEWPORTS.mobile as ViewportsType })
+        .findComponent(ButtonGroup)
+        .exists(),
+    ).toBe(true);
+  });
+});
+
+// Desktop no-logo bar nav with the button on and no visible pages: the nav is hidden and
+// the button holds the right edge in every variant, so the picker hides too.
+describe('HeaderDisplayStyle — hidden for no-logo bar nav without pages', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountWrapper = ({
+    viewport = VIEWPORTS.desktop as ViewportsType,
+    isLogoVisible = false,
+    showHeaderButton = true,
+  } = {}) =>
+    shallowMount(HeaderDisplayStyle, {
+      props: {
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
+        navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+        viewport,
+        isLogoVisible,
+        showHeaderButton,
+        onSelect: () => undefined,
+      },
+    });
+
+  test('desktop + no logo + button + only the home page: the picker does not render', () => {
+    seedNavPages(1);
+
+    expect(mountWrapper().findComponent(ButtonGroup).exists()).toBe(false);
+  });
+
+  test('the picker stays once a second visible page exists', () => {
+    seedNavPages(2);
+
+    expect(mountWrapper().findComponent(ButtonGroup).exists()).toBe(true);
+  });
+
+  test('a hidden second page does not count as a visible nav', () => {
+    seedNavPages(2);
+    usePageNavigationStore().routes[1].isHidden = true;
+
+    expect(mountWrapper().findComponent(ButtonGroup).exists()).toBe(false);
+  });
+
+  test('the picker stays with the button off', () => {
+    seedNavPages(1);
+
+    expect(
+      mountWrapper({ showHeaderButton: false })
+        .findComponent(ButtonGroup)
+        .exists(),
+    ).toBe(true);
+  });
+
+  test('the picker stays with a logo', () => {
+    seedNavPages(1);
+
+    expect(
+      mountWrapper({ isLogoVisible: true }).findComponent(ButtonGroup).exists(),
+    ).toBe(true);
+  });
+
+  // No mobile case here: mobile bar no-logo has a single display style, so the picker
+  // never renders there regardless (the hamburger describe covers the mobile guard).
+});
+
+// Hiding the picker must not stop the component migrating a stored display style that no
+// longer fits: a with-logo style left on a no-logo site collapses the header band and its
+// pinned button hangs out of it. Building `options` is what performs that migration, so it
+// has to be evaluated even while hidden.
+describe('HeaderDisplayStyle — migrates an unsupported style while hidden', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountHidden = ({
+    displayStyle,
+    navigationDisplayType,
+  }: {
+    displayStyle: string;
+    navigationDisplayType: string;
+  }) => {
+    const selected: string[] = [];
+    const wrapper = shallowMount(HeaderDisplayStyle, {
+      props: {
+        displayStyle,
+        navigationDisplayType,
+        viewport: VIEWPORTS.desktop as ViewportsType,
+        isLogoVisible: false,
+        showHeaderButton: true,
+        onSelect: (value: string) => selected.push(value),
+      },
+    });
+
+    return { wrapper, selected };
+  };
+
+  test('bar nav without pages: the with-logo style is swapped for a no-logo one', () => {
+    seedNavPages(1);
+
+    const { wrapper, selected } = mountHidden({
+      displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+    });
+
+    expect(wrapper.findComponent(ButtonGroup).exists()).toBe(false);
+    expect(selected).toEqual([HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2]);
+  });
+
+  test('hamburger: the with-logo style is swapped for a no-logo one', () => {
+    seedNavPages(3);
+
+    const { wrapper, selected } = mountHidden({
+      displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+    });
+
+    expect(wrapper.findComponent(ButtonGroup).exists()).toBe(false);
+    expect(selected).toEqual([HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3]);
+  });
+});