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

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

@@ -0,0 +1,237 @@
+<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"
+      :value="text"
+      :placeholder="tr('pageSettingsSection.buttonLabelPlaceholder')"
+      :max-length="BUTTON_TEXT_MAX_LENGTH"
+      :settings="validFieldSettings"
+      @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="validFieldSettings"
+        @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="tr('pageSettingsSection.buttonPhonePlaceholder')"
+        :settings="validFieldSettings"
+        @update:model-value="onUrlChange"
+      />
+      <UrlField
+        v-else
+        id="headerButton"
+        data-test-header-button-url
+        name="url"
+        role="url"
+        :value="url"
+        :placeholder="contentSettingsTr('exampleWebsitePlaceholder')"
+        :settings="validFieldSettings"
+        @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"
+      @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"
+      @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 } 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 { 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 } from '@src/composables/useTranslate';
+
+/** Matches the section buttons' label cap (`buttonText` in the field configs). */
+const BUTTON_TEXT_MAX_LENGTH = 60;
+
+interface Props {
+  value?: HeaderButton;
+  isAdminMaker: boolean;
+  logoTheme: LogoTheme;
+}
+
+const props = defineProps<Props>();
+
+const pageSettingsStore = useUiPageSettingsStore();
+const styleSettingsStore = useUiStyleSettingsStore();
+
+// The site's selected button style decides whether a border exists at all — the
+// default and several others draw none, so a border colour would be inert. Same
+// capability gate the global Style panel applies to this control.
+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 || '');
+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(
+  (): TextStyleDeclaration => props.value?.buttonTextStyle || {},
+);
+const buttonLinkType = computed(
+  (): ButtonLinkType => props.value?.buttonLinkType || BUTTON_LINK_TYPE.url,
+);
+
+/**
+ * The url/email/tel inputs surface `settings.errorMessage` when `isValid` is
+ * false, and `TelField` renders its error row whenever `isValid` is not `true`.
+ * There is no validator behind these fields yet, so state them valid.
+ */
+const validFieldSettings: ContentItemFieldSettings = {
+  errorMessage: '',
+  isValid: true,
+};
+
+const linkTypeConfig = computed(() =>
+  buttonLinkStyleConvertor.convert(
+    buttonLinkType.value,
+    // The convertor reads `pages` only, to drop "Page" on a single-page site;
+    // a settings panel has no full render context to hand it. Read off the
+    // store rather than passed in, so adding a page re-offers the option.
+    { 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 });
+};
+
+const onSelectLinkType = (option: ButtonGroupOption): void => {
+  emit('on-change', { buttonLinkType: option.value as ButtonLinkType });
+};
+
+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,160 @@
+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 HeaderDisplayStyle from './HeaderDisplayStyle.vue';
+
+// BP-5852: enabling the header button swaps the six DESKTOP BAR tiles to the
+// with-button artwork. No such artwork exists for the mobile bar, hamburger or
+// no-logo sets, so those keep their plain icons; `dataAttribute` never changes
+// (selection state and the bc-net e2e locators key off it).
+describe('HeaderDisplayStyle — header-button icon swap', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  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('the mobile bar tiles are left alone', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.MOBILE_TAB_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      viewport: VIEWPORTS.mobile,
+      showHeaderButton: true,
+    });
+
+    expect(
+      iconNames(options).every((name) => !name.includes('with-button')),
+    ).toBe(true);
+  });
+
+  test('the desktop hamburger tiles are left alone', () => {
+    const options = mountTiles({
+      displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+      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 assertions, not a before/after diff: the configs are authored with
+    // isSelected: false and plain icon names, so any in-place write (selection or
+    // the with-button swap) leaves a value these checks catch — a snapshot taken
+    // after a mutation would not.
+    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');
+      }
+    });
+  });
+});

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

@@ -30,14 +30,41 @@ import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import { useUiPageSettingsStore } from '../../store';
 import { tr } from '@src/composables/useTranslate';
 
+/**
+ * Only the six desktop BAR tiles have with-button artwork; every other icon
+ * name (mobile bar, hamburger, no-logo) keeps its plain tile.
+ */
+const DESKTOP_BAR_ICON_PREFIX = 'header-desktop-nav-style-tab-display-style-';
+
 interface Props {
   displayStyle: string;
   onSelect: (displayStyle: string) => void;
   navigationDisplayType: string;
   isLogoVisible: boolean;
   viewport: ViewportsType;
+  showHeaderButton?: boolean;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showHeaderButton: false,
+});
+
+const withHeaderButtonIcon = (option: ButtonGroupOption): ButtonGroupOption => {
+  if (
+    !props.showHeaderButton ||
+    !('iconName' in option) ||
+    !option.iconName.startsWith(DESKTOP_BAR_ICON_PREFIX)
+  ) {
+    return option;
+  }
+
+  return {
+    ...option,
+    iconName: option.iconName.replace(
+      DESKTOP_BAR_ICON_PREFIX,
+      `${DESKTOP_BAR_ICON_PREFIX}with-button-`,
+    ),
+  };
+};
 
 const brandPageMakerStore = useBrandPageMakerStore();
 const pageSettingsStore = useUiPageSettingsStore();
@@ -72,13 +99,15 @@ const options = computed(() => {
     }
   }
 
-  const filteredOptions = filteredConfigs.reduce((arr, config, _index) => {
-    config.option.isSelected = props.displayStyle === config.option.value;
-
-    arr.push(config.option);
-
-    return arr;
-  }, [] as ButtonGroupOption[]);
+  // Copied, never mutated in place: `config.option` belongs to the shared
+  // HEADER_DISPLAY_STYLE_CONFIGS module constant, so writing `isSelected` onto
+  // it leaked this panel's selection into every other consumer.
+  const filteredOptions: ButtonGroupOption[] = filteredConfigs.map((config) =>
+    withHeaderButtonIcon({
+      ...config.option,
+      isSelected: props.displayStyle === config.option.value,
+    }),
+  );
 
   const selectedOption = filteredOptions.find((x) => x.isSelected);
 

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.header-button.test.ts

@@ -0,0 +1,113 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { VIEWPORTS } from '@brand-page';
+import type { HeaderButton } from '@brand-page';
+import mixin from './PageSettingsSectionStyles.mixin';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+
+// BP-5852 AC: the header button is configured once but must apply to BOTH
+// viewports. There is no generic sync mechanism — the handler dual-writes, the
+// way onCopyrightTextChange / onSocialLinksChange do. The method is pure over
+// `this`, so it's invoked against a hand-built context wired to the real store
+// (the PageSettings.mixin testing pattern) rather than mounting the panel.
+const { onHeaderButtonChange } = (
+  mixin as unknown as {
+    methods: {
+      onHeaderButtonChange(this: unknown, patch: Partial<HeaderButton>): void;
+    };
+  }
+).methods;
+
+describe('PageSettingsSectionStyles.mixin onHeaderButtonChange', () => {
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    pageSettingsStore = useUiPageSettingsStore();
+  });
+
+  const headers = () => pageSettingsStore.sections.header;
+
+  // `headerButton` on the CURRENT viewport is what the panel reads and the
+  // handler patches — desktop here, as the panel opens on desktop.
+  const context = () => ({
+    pageSettingsStore,
+    headerButton: headers()[VIEWPORTS.desktop].headerButton,
+  });
+
+  const change = (patch: Partial<HeaderButton>) =>
+    onHeaderButtonChange.call(context(), patch);
+
+  test('the first write seeds a full button on both viewports', () => {
+    change({ isVisible: true });
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual({
+      isVisible: true,
+      text: '',
+      buttonLinkType: 'url',
+    });
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+
+  test('off by default — nothing is seeded until something is written', () => {
+    expect(headers()[VIEWPORTS.desktop].headerButton).toBeUndefined();
+    expect(headers()[VIEWPORTS.mobile].headerButton).toBeUndefined();
+  });
+
+  test('later writes patch one key and still land on both viewports', () => {
+    change({ isVisible: true });
+    change({ text: 'Book now' });
+    change({ buttonLinkType: 'tel', url: '12345-6789' });
+
+    const expected: HeaderButton = {
+      isVisible: true,
+      text: 'Book now',
+      buttonLinkType: 'tel',
+      url: '12345-6789',
+    };
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual(expected);
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(expected);
+  });
+
+  test('each viewport holds its own object, not a shared reference', () => {
+    change({ isVisible: true });
+
+    expect(headers()[VIEWPORTS.mobile].headerButton).not.toBe(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+
+  test('a viewport that somehow diverged is reconciled by the next write', () => {
+    change({ isVisible: true, text: 'Contact' });
+
+    headers()[VIEWPORTS.mobile].headerButton = {
+      isVisible: false,
+      text: 'stale',
+      buttonLinkType: 'url',
+    };
+
+    change({ text: 'Contact us' });
+
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+    expect(headers()[VIEWPORTS.mobile].headerButton?.text).toBe('Contact us');
+  });
+
+  test('toggling off keeps the config, only flipping isVisible', () => {
+    change({ isVisible: true, text: 'Contact us' });
+    change({ isVisible: false });
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual({
+      isVisible: false,
+      text: 'Contact us',
+      buttonLinkType: 'url',
+    });
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -9,6 +9,7 @@ import type {
   PageSettingsFontSettingsOption,
 } from '../../models';
 import type {
+  HeaderButton,
   LogoTheme,
   NavigationDisplayType,
   NavigationType,
@@ -27,6 +28,7 @@ import type {
   BackgroundColorStyle,
 } from '@brand-page';
 import {
+  BUTTON_LINK_TYPE,
   LOGO_SLIDER_DESKTOP_MAX,
   LOGO_SLIDER_DESKTOP_MIN,
   LOGO_SLIDER_MOBILE_MAX,
@@ -62,6 +64,17 @@ import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { commonTr } from '@src/composables/useTranslate';
 
+/**
+ * Seed for the first write to `headerButton` (the model deliberately holds no
+ * default — absent means "no button"). Url is the link kind the Figma shows
+ * pre-selected.
+ */
+const NEW_HEADER_BUTTON: HeaderButton = {
+  isVisible: false,
+  text: '',
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+};
+
 const viewportsWithTr = () => [
   {
     key: VIEWPORTS.desktop,
@@ -162,6 +175,12 @@ export default defineComponent({
     header(): PageHeaderDesktop | PageHeaderMobile {
       return this.sections[PAGE_SECTIONS.header][this.viewport];
     },
+    headerButton(): HeaderButton | undefined {
+      return this.header.headerButton;
+    },
+    isHeaderButtonVisible(): boolean {
+      return this.headerButton?.isVisible === true;
+    },
     navigationType(): NavigationType {
       return getNavigationType(this.navigation.displayType);
     },
@@ -451,6 +470,34 @@ export default defineComponent({
       });
     },
 
+    onHeaderButtonChange(patch: Partial<HeaderButton>) {
+      const value: HeaderButton = {
+        ...NEW_HEADER_BUTTON,
+        ...this.headerButton,
+        ...patch,
+      };
+
+      // Desktop and mobile must hold the SAME button config (BP-5852 AC). The
+      // whole object is written to both from one source rather than merged
+      // per-viewport, so a pair that somehow diverged is reconciled instead of
+      // each side keeping its own leftovers.
+      //
+      // Each viewport gets its own copy: one shared object would alias the two
+      // branches of store state to a single instance.
+      this.pageSettingsStore.setPageSettingsSectionValue({
+        sectionName: PAGE_SECTIONS.header,
+        propName: 'headerButton',
+        value: { ...value },
+        viewport: VIEWPORTS.mobile,
+      });
+      this.pageSettingsStore.setPageSettingsSectionValue({
+        sectionName: PAGE_SECTIONS.header,
+        propName: 'headerButton',
+        value: { ...value },
+        viewport: VIEWPORTS.desktop,
+      });
+    },
+
     onItemListIntentImageReplace(
       name: PageSectionStyleOption,
       { index }: { index: number },

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.json

@@ -8,6 +8,12 @@
     "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Label",
+    "buttonLabelPlaceholder": "Contact Us",
+    "buttonLink": "Link",
+    "buttonPhonePlaceholder": "12345-6789",
+    "buttonFillColor": "Fill color",
+    "buttonBorderColor": "Border color"
   }
 }

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

@@ -12,6 +12,7 @@ import {
 import type { NavigationType } from '@brand-page';
 import type {
   Content,
+  HeaderButton,
   ImageGalleryItem,
   LinksItem,
   LogoImageModel,
@@ -242,6 +243,7 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         | LinksItem[]
         | BrandPageCssStyle
         | Partial<ImageGalleryItem>
+        | HeaderButton
         | number
         | null
         | undefined;