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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="options.length > 1" class="tw-mb-2">
+  <div v-if="isPickerVisible" class="tw-mb-2">
     <p
       class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
     >
@@ -23,10 +23,12 @@ import { HEADER_DISPLAY_STYLE_CONFIGS } from '@brand-page';
 import {
   HEADER_DISPLAY,
   NAVIGATION_DISPLAY,
+  VIEWPORTS,
   type ViewportsType,
 } from '@brand-page';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
 import { useUiPageSettingsStore } from '../../store';
 import { tr } from '@src/composables/useTranslate';
 
@@ -36,12 +38,36 @@ interface Props {
   navigationDisplayType: string;
   isLogoVisible: boolean;
   viewport: ViewportsType;
+  showHeaderButton?: boolean;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showHeaderButton: false,
+});
 
 const brandPageMakerStore = useBrandPageMakerStore();
 const pageSettingsStore = useUiPageSettingsStore();
 
+const pageNavigationStore = usePageNavigationStore();
+
+// Desktop no-logo with the button on: nothing left to choose when the variants only
+// differ by where they'd put things that aren't there. Hamburger — icon + button are
+// pinned to the right regardless. Bar nav — only once the nav itself is hidden (no
+// visible pages), where the button holds the right edge in every variant.
+const isHidden = computed((): boolean => {
+  if (
+    !props.showHeaderButton ||
+    props.viewport !== VIEWPORTS.desktop ||
+    props.isLogoVisible
+  ) {
+    return false;
+  }
+
+  return (
+    props.navigationDisplayType.includes('hamburger') ||
+    !pageNavigationStore.hasVisibleNavigation
+  );
+});
+
 const options = computed(() => {
   let filteredConfigs = HEADER_DISPLAY_STYLE_CONFIGS.filter((config) => {
     return (
@@ -72,13 +98,16 @@ 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[]);
+  // Copy before setting isSelected — the config object is shared app-wide.
+  const filteredOptions: ButtonGroupOption[] = filteredConfigs.map(
+    (config) => ({
+      ...config.option,
+      isSelected: props.displayStyle === config.option.value,
+      ...(props.showHeaderButton && config.withButtonIconName
+        ? { iconName: config.withButtonIconName }
+        : {}),
+    }),
+  );
 
   const selectedOption = filteredOptions.find((x) => x.isSelected);
 
@@ -176,6 +205,16 @@ const options = computed(() => {
   return filteredOptions;
 });
 
+const isPickerVisible = computed((): boolean => {
+  // Read `options` FIRST and unconditionally: building it also migrates a stored display
+  // style that no longer fits (e.g. the logo was switched off) to its supported equivalent.
+  // Short-circuiting past it leaves the header rendering an unsupported style — a with-logo
+  // style with no logo collapses the band and its pinned button hangs out of the header.
+  const hasStylesToChooseFrom = options.value.length > 1;
+
+  return hasStylesToChooseFrom && !isHidden.value;
+});
+
 const numOfColumns = computed(() => {
   if (options.value.length === 3) {
     return 3;

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

@@ -0,0 +1,114 @@
+import { setLocaleAsync } from '@src/composables/useTranslate';
+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';
+
+// The button is configured once but must land on BOTH viewports; tested against a hand-built context wired to the real store.
+const { onHeaderButtonChange } = (
+  mixin as unknown as {
+    methods: {
+      onHeaderButtonChange(this: unknown, patch: Partial<HeaderButton>): void;
+    };
+  }
+).methods;
+
+describe('PageSettingsSectionStyles.mixin onHeaderButtonChange', () => {
+  // the seed's "Contact Us" text resolves through i18n
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    pageSettingsStore = useUiPageSettingsStore();
+  });
+
+  const headers = () => pageSettingsStore.sections.header;
+
+  // The panel reads/patches the current viewport (desktop here).
+  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: 'Contact Us',
+      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,
@@ -60,7 +62,14 @@ import {
 } from '@shared/logo-settings/store';
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
-import { commonTr } from '@src/composables/useTranslate';
+import { commonTr, pageSettingsSectionTr } from '@src/composables/useTranslate';
+
+// Starting values for a brand-new button; real "Contact Us" text so the label is never empty.
+const newHeaderButton = (): HeaderButton => ({
+  isVisible: false,
+  text: pageSettingsSectionTr('buttonLabelPlaceholder'),
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+});
 
 const viewportsWithTr = () => [
   {
@@ -162,6 +171,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 +466,28 @@ export default defineComponent({
       });
     },
 
+    onHeaderButtonChange(patch: Partial<HeaderButton>) {
+      const value: HeaderButton = {
+        ...newHeaderButton(),
+        ...this.headerButton,
+        ...patch,
+      };
+
+      // Write the whole button to BOTH viewports (own copy each) so they always match.
+      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.de-DE.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

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

@@ -8,6 +8,11 @@
     "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"
   }
 }

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

@@ -8,6 +8,11 @@
     "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"
   }
 }

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

@@ -8,6 +8,11 @@
     "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"
   }
 }