@designcrowd/library.brand-page 6.2.0 → 6.2.2-live-preview-1

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

@@ -0,0 +1,305 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import type { HeaderButton, LogoTheme } from '@brand-page';
+import HeaderButtonSettings from './HeaderButtonSettings.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { useUiStyleSettingsStore } from '../../../style-settings/store/style-settings-store';
+import { availableButtonStyleConfigs } from '@brand-page-maker/models';
+import type { ContentPage } from '../../models';
+
+// Explicit stub: the auto-stub misses mixin-declared props, so props('value') would be undefined.
+const TextStyleFieldStub = {
+  name: 'TextStyleField',
+  props: ['value'],
+  template: '<div />',
+};
+
+const UrlFieldStub = {
+  name: 'UrlField',
+  props: ['settings'],
+  template: '<div />',
+};
+
+const TextFieldStub = {
+  name: 'TextField',
+  // showErrorWhenEmpty typed so the bare attribute casts to true, as on the real component.
+  props: { settings: Object, showErrorWhenEmpty: Boolean },
+  template: '<div />',
+};
+
+// Fields are found by data-test hook (two of them are ColorFields).
+const emitFrom = (
+  wrapper: VueWrapper,
+  hook: string,
+  payload: unknown,
+): void => {
+  (wrapper.findComponent(hook) as unknown as VueWrapper).vm.$emit(
+    'update:modelValue',
+    payload,
+  );
+};
+
+// Every edit leaves through one on-change patch (the mixin writes it to both viewports).
+describe('HeaderButtonSettings', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountPanel = (value?: HeaderButton) =>
+    shallowMount(HeaderButtonSettings, {
+      props: {
+        value,
+        isAdminMaker: false,
+        logoTheme: {} as LogoTheme,
+      },
+      global: {
+        stubs: {
+          TextStyleField: TextStyleFieldStub,
+          UrlField: UrlFieldStub,
+          TextField: TextFieldStub,
+        },
+      },
+    });
+
+  const enabled: HeaderButton = {
+    isVisible: true,
+    text: '',
+    buttonLinkType: 'url',
+  };
+
+  const fieldHooks = [
+    '[data-test-header-button-text]',
+    '[data-test-header-button-link-type]',
+    '[data-test-header-button-text-style]',
+    '[data-test-header-button-fill-color]',
+  ];
+
+  // The show/hide toggle lives in HeaderSettingsPanel, so every field here renders unconditionally.
+  test('every field renders', () => {
+    const wrapper = mountPanel(enabled);
+
+    fieldHooks.forEach((hook) => {
+      expect(wrapper.find(hook).exists()).toBe(true);
+    });
+  });
+
+  // Border color only shows when the selected button style draws a border.
+  test('the border colour field is hidden while the selected button style draws no border', () => {
+    // default selectedButtonStyleId is BUTTON_STYLE_1, whose options carry no border
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.find('[data-test-header-button-border-color]').exists(),
+    ).toBe(false);
+  });
+
+  test('the border colour field renders when the selected button style has a border', () => {
+    useUiStyleSettingsStore().$patch(($state) => {
+      // availableButtonStyleConfigs starts empty until the store initialises
+      $state.availableButtonStyleConfigs = availableButtonStyleConfigs;
+      $state.buttonStyles.selectedButtonStyleId = 'BUTTON_STYLE_4';
+    });
+
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.find('[data-test-header-button-border-color]').exists(),
+    ).toBe(true);
+  });
+
+  test('the link-value field follows the selected link kind', () => {
+    const kinds = {
+      url: '[data-test-header-button-url]',
+      page: '[data-test-header-button-page]',
+      mailTo: '[data-test-header-button-email]',
+      tel: '[data-test-header-button-tel]',
+    } as const;
+
+    Object.entries(kinds).forEach(([kind, hook]) => {
+      const wrapper = mountPanel({
+        ...enabled,
+        buttonLinkType: kind as HeaderButton['buttonLinkType'],
+      });
+
+      Object.values(kinds).forEach((otherHook) => {
+        expect(wrapper.find(otherHook).exists()).toBe(otherHook === hook);
+      });
+    });
+  });
+
+  const linkTypeValues = (wrapper: VueWrapper): string[] => {
+    const group = wrapper.findComponent(
+      '[data-test-header-button-link-type]',
+    ) as unknown as { props(name: string): unknown };
+
+    return (group.props('options') as { value: string }[]).map(
+      (option) => option.value,
+    );
+  };
+
+  test('the four link kinds are offered in a 2-column group', () => {
+    const wrapper = mountPanel(enabled);
+
+    expect(linkTypeValues(wrapper)).toEqual(['url', 'page', 'mailTo', 'tel']);
+    expect(
+      wrapper.find('[data-test-header-button-link-type]').attributes('columns'),
+    ).toBe('2');
+  });
+
+  test('a single-page site drops the Page kind (buttonLinkStyleConvertor)', () => {
+    useUiPageSettingsStore().setPages({
+      pages: [{ id: 'page-1', title: 'Home', contents: [] }] as ContentPage[],
+    });
+
+    expect(linkTypeValues(mountPanel(enabled))).toEqual([
+      'url',
+      'mailTo',
+      'tel',
+    ]);
+  });
+
+  test('a label edit emits only the text patch', () => {
+    const wrapper = mountPanel(enabled);
+
+    emitFrom(wrapper, '[data-test-header-button-text]', {
+      id: 'headerButton',
+      name: 'text',
+      value: 'Book now',
+    });
+
+    expect(wrapper.emitted('on-change')).toEqual([[{ text: 'Book now' }]]);
+  });
+
+  // Unset text style must show the renderer's Buttons default, not None/blank.
+  test('an unset text style presents the Buttons-linked default', () => {
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.findComponent({ name: 'TextStyleField' }).props('value'),
+    ).toEqual({
+      textStyleType: 'buttons',
+    });
+  });
+
+  test('an authored text style is passed through untouched', () => {
+    const wrapper = mountPanel({
+      ...enabled,
+      buttonTextStyle: { fontFamily: 'Lora', textAlign: 'center' },
+    });
+
+    expect(
+      wrapper.findComponent({ name: 'TextStyleField' }).props('value'),
+    ).toEqual({
+      fontFamily: 'Lora',
+      textAlign: 'center',
+    });
+  });
+
+  // Stricter than the banner: the link is always required, whatever the label holds.
+  test('a labelled button with an empty link shows the error', () => {
+    const wrapper = mountPanel({ ...enabled, text: 'Contact Us' });
+
+    expect(
+      wrapper.findComponent({ name: 'UrlField' }).props('settings'),
+    ).toMatchObject({ isValid: false });
+  });
+
+  test('an unlabelled button with an empty link also shows the error', () => {
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.findComponent({ name: 'UrlField' }).props('settings'),
+    ).toMatchObject({ isValid: false });
+  });
+
+  test('a valid link is accepted while the label is still empty', () => {
+    const wrapper = mountPanel({ ...enabled, url: 'https://example.com' });
+
+    expect(
+      wrapper.findComponent({ name: 'UrlField' }).props('settings'),
+    ).toMatchObject({ isValid: true });
+  });
+
+  test('switching the link kind clears the previous value', () => {
+    const wrapper = mountPanel({ ...enabled, url: 'https://example.com' });
+
+    (
+      wrapper.findComponent(
+        '[data-test-header-button-link-type]',
+      ) as unknown as VueWrapper
+    ).vm.$emit('on-select', { value: 'mailTo' });
+
+    expect(wrapper.emitted('on-change')).toEqual([
+      [{ buttonLinkType: 'mailTo', url: '' }],
+    ]);
+  });
+
+  // The label is required — an empty one hides the button on the site.
+  test.each([[''], ['   ']])(
+    'a blank label shows the required error (%j)',
+    (text) => {
+      const wrapper = mountPanel({ ...enabled, text });
+
+      expect(
+        wrapper.findComponent({ name: 'TextField' }).props('settings'),
+      ).toMatchObject({ isValid: false });
+    },
+  );
+
+  test('the label shows its error as soon as it is cleared', () => {
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.findComponent({ name: 'TextField' }).props('showErrorWhenEmpty'),
+    ).toBe(true);
+  });
+
+  test('a filled label is valid', () => {
+    const wrapper = mountPanel({ ...enabled, text: 'Contact Us' });
+
+    expect(
+      wrapper.findComponent({ name: 'TextField' }).props('settings'),
+    ).toMatchObject({ isValid: true });
+  });
+
+  // A transparent fill or border would leave a ghost button, so neither offers the option.
+  test.each([
+    ['fill', '[data-test-header-button-fill-color]', 'BUTTON_STYLE_1'],
+    ['border', '[data-test-header-button-border-color]', 'BUTTON_STYLE_4'],
+  ])(
+    'the %s colour field does not offer transparent',
+    (_name, hook, styleId) => {
+      useUiStyleSettingsStore().$patch(($state) => {
+        $state.availableButtonStyleConfigs = availableButtonStyleConfigs;
+        // BUTTON_STYLE_4 draws a border, so the border field renders.
+        $state.buttonStyles.selectedButtonStyleId = styleId;
+      });
+
+      const wrapper = mountPanel(enabled);
+
+      expect(
+        (
+          wrapper.findComponent(hook) as unknown as {
+            props(name: string): unknown;
+          }
+        ).props('disableTransparent'),
+      ).toBe(true);
+    },
+  );
+
+  test('a fill-colour pick emits only the fillColor patch', () => {
+    const wrapper = mountPanel(enabled);
+
+    emitFrom(wrapper, '[data-test-header-button-fill-color]', {
+      id: 'fillColor',
+      name: 'fillColor',
+      value: 'var(--palette-2)',
+    });
+
+    expect(wrapper.emitted('on-change')).toEqual([
+      [{ fillColor: 'var(--palette-2)' }],
+    ]);
+  });
+});

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>