@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.button-section.test.ts

@@ -0,0 +1,131 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import { Toggle } from '@designcrowd/fe-shared-lib';
+import type { LogoTheme } from '@brand-page';
+import { VIEWPORTS } from '@brand-page';
+import HeaderSettingsPanel from './HeaderSettingsPanel.vue';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+
+// Button section: brandsite-only, header toggle shows/hides the fields, writes sync both viewports.
+describe('HeaderSettingsPanel — Button section', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    // The Logo section renders alongside and needs the client singleton.
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+  });
+
+  const CollapsiblePanelStub = {
+    template: '<div><slot name="header-actions" /><slot /></div>',
+  };
+
+  const mountPanel = (isBrandSite: boolean) =>
+    shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite,
+        logoTheme: {} as LogoTheme,
+        sectionName: 'header',
+        styleOptions: [],
+      },
+      global: {
+        // Render CollapsiblePanel slots so the toggle and body aren't swallowed.
+        stubs: { CollapsiblePanel: CollapsiblePanelStub },
+      },
+    });
+
+  const buttonToggle = (wrapper: ReturnType<typeof mountPanel>) =>
+    wrapper
+      .findAllComponents(Toggle)
+      .find(
+        (t) => t.attributes('data-test-header-button-toggle') !== undefined,
+      );
+
+  test('brandsite: the header toggle renders, off, and the fields stay hidden', () => {
+    const wrapper = mountPanel(true);
+
+    expect(buttonToggle(wrapper)).toBeDefined();
+    // the stubbed Toggle carries its props as attributes
+    expect(buttonToggle(wrapper)?.attributes('model-value')).toBe('false');
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('brand page / brand contact: no Button section at all', () => {
+    const wrapper = mountPanel(false);
+
+    expect(buttonToggle(wrapper)).toBeUndefined();
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('toggling on writes isVisible to BOTH viewports and reveals the fields', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    await wrapper.vm.$nextTick();
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+
+  test('expanding via the chevron while off switches the button on; later collapses freely', async () => {
+    const wrapper = mountPanel(true);
+    const sectionHeader = wrapper.get(
+      '[data-test-header-button-section-header]',
+    );
+
+    // off + collapsed: expanding turns the button on and shows the fields
+    await sectionHeader.trigger('click');
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+
+    // on: the chevron only collapses/expands, never switches the button off
+    await sectionHeader.trigger('click');
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+
+    await sectionHeader.trigger('click');
+
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+
+  test('toggling off hides the fields but keeps the configuration for a re-enable', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    // simulate a label edit, which the mixin dual-writes to both viewports
+    [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+      useUiPageSettingsStore().setPageSettingsSectionValue({
+        sectionName: 'header',
+        propName: 'headerButton',
+        value: { isVisible: true, text: 'Book now', buttonLinkType: 'url' },
+        viewport,
+      });
+    });
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', false);
+    await wrapper.vm.$nextTick();
+
+    const desktop = useUiPageSettingsStore().sections.header[VIEWPORTS.desktop];
+
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+    expect(desktop.headerButton?.isVisible).toBe(false);
+    expect(desktop.headerButton?.text).toBe('Book now');
+
+    // Toggling off also collapses, so one chevron click re-enables — no dead first click.
+    await wrapper
+      .get('[data-test-header-button-section-header]')
+      .trigger('click');
+
+    expect(desktop.headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+});

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -64,6 +64,7 @@
         :on-select="handleHeaderDisplayStyleChange"
         :viewport="viewport"
         :is-logo-visible="isLogoVisible"
+        :show-header-button="isHeaderButtonVisible"
       />
 
       <NavigationStyleSettings
@@ -144,27 +145,63 @@
       </div>
     </CollapsiblePanel>
 
-    <!-- Button section hidden for now (BP-5854) — re-enable once BP-5852 implements
-         the header button. Left commented rather than removed since the shell
-         (CollapsiblePanel + collapsedSections.button state) is already wired up.
-    <CollapsiblePanel
-      data-component="collapsible-panel"
-      :title="pageSettingsTr('buttonSectionTitle')"
-      :is-collapsed="collapsedSections.button"
-      @changed="toggleSectionCollapsed('button')"
-    />
-    -->
+    <div
+      v-if="isBrandSite"
+      data-test-header-button-section
+      class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-flex-col tw-mb-4 tw-p-4 tw-rounded-md"
+    >
+      <div
+        data-test-header-button-section-header
+        class="tw-cursor-pointer tw-text-secondary-500 tw-flex tw-items-center tw-select-none"
+        :class="{
+          'tw-mb-2': !collapsedSections.button && isHeaderButtonVisible,
+        }"
+        @click="onButtonSectionChanged"
+      >
+        <div
+          class="tw-grow tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800"
+        >
+          {{ pageSettingsTr('buttonSectionTitle') }}
+        </div>
+        <div class="tw-ml-2" @click.stop>
+          <Toggle
+            id="header-button-visible"
+            data-test-header-button-toggle
+            color="primary"
+            :model-value="isHeaderButtonVisible"
+            @update:model-value="onHeaderButtonToggle"
+          />
+        </div>
+        <Icon
+          class="tw-ml-2 tw-text-grayscale-600"
+          :name="collapsedSections.button ? 'chevron-down' : 'chevron-up'"
+          size="sm"
+        />
+      </div>
+      <HeaderButtonSettings
+        v-if="!collapsedSections.button && isHeaderButtonVisible"
+        :value="headerButton"
+        :is-admin-maker="isAdminMaker"
+        :logo-theme="logoTheme"
+        @on-change="onHeaderButtonChange"
+      />
+    </div>
+
+    <!-- The Page dropdown's ADD PAGE opens this; every panel hosting a PageDropdownField mounts its own. -->
+    <NewPageModal />
   </div>
 </template>
 <script>
 import {
   CollapsiblePanel,
   HelloBar,
+  Icon,
   Slider,
   TabMenu,
   Toggle,
 } from '@designcrowd/fe-shared-lib';
 import PageSettingsSectionStyleMixin from '../page-settings-section-styles/PageSettingsSectionStyles.mixin.ts';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
 import HeaderDisplayStyle from '../page-settings-section-styles/HeaderDisplayStyle.vue';
 import HeaderNavigationType from '../page-settings-section-styles/HeaderNavigationType.vue';
 import HeaderNavigationStyle from '../page-settings-section-styles/HeaderNavigationStyle.vue';
@@ -173,16 +210,20 @@ import ColorField from '../../../content-settings/components/color-field/ColorFi
 import LogoSelection from '@shared/content-settings/components/logo-selection-field/LogoSelection.vue';
 import LogoSizeSlider from '@shared/content-settings/components/logo-size-field/LogoSizeSlider.vue';
 import SideBarSettingsHeader from '../../../common/SideBarSettingsHeader.vue';
+import NewPageModal from '../new-page-modal/NewPageModal.vue';
 import { tr, commonTr, pageSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {
+    NewPageModal,
     CollapsiblePanel,
     ColorField,
     HelloBar,
+    Icon,
     Slider,
     TabMenu,
     Toggle,
+    HeaderButtonSettings,
     HeaderDisplayStyle,
     HeaderNavigationType,
     HeaderNavigationStyle,
@@ -222,6 +263,20 @@ export default {
     toggleSectionCollapsed(section) {
       this.collapsedSections[section] = !this.collapsedSections[section];
     },
+    onHeaderButtonToggle(isVisible) {
+      this.onHeaderButtonChange({ isVisible });
+
+      this.collapsedSections.button = !isVisible;
+    },
+    onButtonSectionChanged() {
+      const isExpanding = this.collapsedSections.button;
+
+      this.toggleSectionCollapsed('button');
+
+      if (isExpanding && !this.isHeaderButtonVisible) {
+        this.onHeaderButtonChange({ isVisible: true });
+      }
+    },
   },
 };
 </script>

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)' }],
+    ]);
+  });
+});