@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

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

@@ -9,7 +9,6 @@ import type {
 import type { ContentItem } from '../../content-settings/models';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { useUiStore, useBrandPageMakerStore } from '@brand-page-maker/stores';
-import { useUiContentSettingsStore } from '../../content-settings/store';
 import { useUiPageSettingsStore } from '../../page-settings/store';
 import { useUiBackgroundSettingsStore } from '../../background-settings/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
@@ -65,46 +64,6 @@ export const useUiLogoSettingsStore = defineStore('uiLogoSettings', {
       this.$patch(payload.newState);
     },
 
-    addDefaultLogoContentToCurrentPage() {
-      const uiContentSettingsStore = useUiContentSettingsStore();
-      const pageSettingsStore = useUiPageSettingsStore();
-
-      const desktopPageHeader =
-        pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop];
-
-      let logoContentItems = uiContentSettingsStore.items.filter(
-        (i): i is ContentItem<LogoContent> => i.type === 'logo',
-      );
-
-      if (logoContentItems.length === 0) {
-        uiContentSettingsStore.addItemByType({
-          type: 'logo',
-          index: 0,
-        });
-
-        logoContentItems = uiContentSettingsStore.items.filter(
-          (i): i is ContentItem<LogoContent> => i.type === 'logo',
-        );
-      }
-
-      logoContentItems.forEach((item) => {
-        const oldLogoContent = item.settings.content;
-
-        const content: LogoContent = Object.assign({}, oldLogoContent, {
-          logoImage: JSON.parse(JSON.stringify(desktopPageHeader.logoImage)),
-          logoTemplateImage: this.selectedLogoTemplateImage,
-          logoImageBase64Url: desktopPageHeader.logoImageBase64Url,
-        });
-
-        const update = {
-          id: item.id,
-          content,
-        };
-
-        uiContentSettingsStore.updateContent(update);
-      });
-    },
-
     setLogoImageToAllContentsAndSections({
       logoImage,
       keepLogoVariation,
@@ -165,67 +124,34 @@ export const useUiLogoSettingsStore = defineStore('uiLogoSettings', {
 
       this.setSelectedLogoImage(selectedLogoImage);
 
-      const uiContentSettingsStore = useUiContentSettingsStore();
       const brandPageMakerStore = useBrandPageMakerStore();
       const pageSettingsStore = useUiPageSettingsStore();
 
-      if (brandPageMakerStore.isBrandSite) {
-        pageSettingsStore.setPageSettingsSectionLogoImage({
-          sectionName: PAGE_SECTIONS.header,
-          logoImage: selectedLogoImage,
-          logoTemplateImage: payload.selectedLogoTemplateImage,
-          logoImageBase64Url: payload.selectedLogoImageBase64Url,
-          viewport: VIEWPORTS.desktop,
-        });
+      [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
         pageSettingsStore.setPageSettingsSectionLogoImage({
           sectionName: PAGE_SECTIONS.header,
           logoImage: selectedLogoImage,
           logoTemplateImage: payload.selectedLogoTemplateImage,
           logoImageBase64Url: payload.selectedLogoImageBase64Url,
-          viewport: VIEWPORTS.mobile,
-        });
-
-        pageSettingsStore.setPageSettingsSectionLogoImage({
-          sectionName: PAGE_SECTIONS.footer,
-          logoImage: selectedLogoImage,
-          logoTemplateImage: payload.selectedLogoTemplateImage,
-          logoImageBase64Url: payload.selectedLogoImageBase64Url,
-          viewport: VIEWPORTS.desktop,
-        });
-        pageSettingsStore.setPageSettingsSectionLogoImage({
-          sectionName: PAGE_SECTIONS.footer,
-          logoImage: selectedLogoImage,
-          logoTemplateImage: payload.selectedLogoTemplateImage,
-          logoImageBase64Url: payload.selectedLogoImageBase64Url,
-          viewport: VIEWPORTS.mobile,
+          viewport,
         });
+      });
 
-        return;
-      }
-
-      let logoContentItems = uiContentSettingsStore.items.filter(
-        (i): i is ContentItem<LogoContent> => i.type === 'logo',
-      );
-
-      if (logoContentItems.length === 0) {
-        uiContentSettingsStore.addItemByType({
-          type: 'logo',
-          index: 0,
+      if (brandPageMakerStore.isBrandSite) {
+        [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+          pageSettingsStore.setPageSettingsSectionLogoImage({
+            sectionName: PAGE_SECTIONS.footer,
+            logoImage: selectedLogoImage,
+            logoTemplateImage: payload.selectedLogoTemplateImage,
+            logoImageBase64Url: payload.selectedLogoImageBase64Url,
+            viewport,
+          });
         });
 
-        logoContentItems = uiContentSettingsStore.items.filter(
-          (i): i is ContentItem<LogoContent> => i.type === 'logo',
-        );
-      }
-
-      if (logoContentItems.length === 0) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error('Unable to locate any logo item');
-        }
-
         return;
       }
 
+      // Blocks still on a page are kept in sync; none is added.
       pageSettingsStore.pages.forEach((p) => {
         const logoContents = p.contents.filter(
           (i): i is ContentItem<LogoContent> => i.type === 'logo',
@@ -326,68 +252,29 @@ export const useUiLogoSettingsStore = defineStore('uiLogoSettings', {
       logoImageUrl: string | undefined;
       logoImageBase64Url: string | undefined;
     } {
-      const uiContentStore = useUiContentSettingsStore();
-      const brandPageMakerStore = useBrandPageMakerStore();
-
-      if (brandPageMakerStore.isBrandSite) {
-        const pageSettingsStore = useUiPageSettingsStore();
-
-        const desktopPageHeader =
-          pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop];
-
-        const logoImageUrl = desktopPageHeader.logoTemplateImage
-          ?.logoTemplateToken
-          ? logoUtil.getLogoTemplateUrlByLogoTemplateImage(
-              desktopPageHeader.logoTemplateImage,
-            )
-          : logoUtil.getLogoVariationUrlByLogoImage(
-              desktopPageHeader.logoImage,
-            );
-
-        return {
-          logoImageUrl,
-          logoImageBase64Url: desktopPageHeader.logoImageBase64Url,
-        };
-      }
+      const pageSettingsStore = useUiPageSettingsStore();
 
-      const logoContentItem = uiContentStore.items?.find(
-        (i) => i.type === 'logo',
-      ) as ContentItem<LogoContent>;
+      const desktopPageHeader =
+        pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop];
 
-      const logoImageUrl = logoContentItem?.settings.content.logoTemplateImage
+      const logoImageUrl = desktopPageHeader.logoTemplateImage
+        ?.logoTemplateToken
         ? logoUtil.getLogoTemplateUrlByLogoTemplateImage(
-            logoContentItem.settings.content.logoTemplateImage,
+            desktopPageHeader.logoTemplateImage,
           )
-        : logoContentItem?.settings.content.logoImage
-          ? logoUtil.getLogoVariationUrlByLogoImage(
-              logoContentItem.settings.content.logoImage,
-            )
-          : undefined;
+        : logoUtil.getLogoVariationUrlByLogoImage(desktopPageHeader.logoImage);
 
       return {
-        logoImageUrl: logoImageUrl || this.logoVariationImageUrls[0],
-        logoImageBase64Url:
-          logoContentItem?.settings.content.logoImageBase64Url,
+        logoImageUrl,
+        logoImageBase64Url: desktopPageHeader.logoImageBase64Url,
       };
     },
 
     selectedLogoTemplateImage(): LogoTemplateImageModel | undefined {
-      const brandPageMakerStore = useBrandPageMakerStore();
-
       const pageSettingsStore = useUiPageSettingsStore();
 
-      if (brandPageMakerStore.isBrandSite) {
-        const desktopPageHeader =
-          pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop];
-
-        return desktopPageHeader.logoTemplateImage;
-      }
-
-      const defaultLogoOnHomePage = pageSettingsStore.pages[0].contents.find(
-        (i) => i.type === 'logo',
-      ) as ContentItem<LogoContent>;
-
-      return defaultLogoOnHomePage?.settings.content.logoTemplateImage;
+      return pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop]
+        .logoTemplateImage;
     },
 
     logoVariationImageUrls(): Record<LogoVariation, string> {

package/src/shared/navigation-style-settings/store/index.ts

@@ -97,18 +97,6 @@ export const useUiNavigationStyleSettingsStore = defineStore(
         });
       },
 
-      setNavigationOrder({
-        section,
-        renderAfterLogo,
-        viewport,
-      }: {
-        section: PageSection;
-        renderAfterLogo: boolean;
-        viewport: ViewportsType;
-      }): void {
-        this.navigation[section][viewport].renderAfterLogo = renderAfterLogo;
-      },
-
       _setDefaultButtonStyle({
         displayType,
         section,

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

@@ -1,36 +1,65 @@
 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 HeaderSettingsPanel from './HeaderSettingsPanel.vue';
+import LogoSelection from '@shared/content-settings/components/logo-selection-field/LogoSelection.vue';
 import { useUiPageSettingsStore } from '../../store';
+import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import { PAGE_SECTIONS } from '../../models';
-import { VIEWPORTS } from '@brand-page';
+import {
+  HEADER_DISPLAY,
+  NAVIGATION_DISPLAY,
+  NAVIGATION_TYPE,
+  VIEWPORTS,
+} from '@brand-page';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+
+// A real CollapsiblePanel's auto-stub swallows its default slot; render it so a
+// section's own fields are reachable (same stub as HeaderSettingsPanel.button-section.test.ts).
+const CollapsiblePanelStub = {
+  template: '<div><slot name="header-actions" /><slot /></div>',
+};
+
+// The default viewport is mobile (brandPageMakerStore), and NavigationMobile defaults to
+// HAMBURGER_1 — so the Logo section (hidden on a BP/BC hamburger viewport) would otherwise
+// disappear in tests that aren't about the hamburger case at all.
+const setTabNav = (): void => {
+  useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+    VIEWPORTS.mobile
+  ].displayType = NAVIGATION_DISPLAY.TAB_1;
+};
+
+const mountPanel = (
+  isBrandSite: boolean,
+  stubs: Record<string, unknown> = {},
+) =>
+  shallowMount(HeaderSettingsPanel, {
+    props: {
+      isAdminMaker: false,
+      isBrandSite,
+      logoTheme: {},
+      sectionName: PAGE_SECTIONS.header,
+      styleOptions: [],
+    },
+    global: {
+      stubs: { CollapsiblePanel: CollapsiblePanelStub, ...stubs },
+    },
+  });
+
+const header = (viewport: 'mobile' | 'desktop' = VIEWPORTS.mobile) =>
+  useUiPageSettingsStore().sections[PAGE_SECTIONS.header][viewport];
 
 // Coverage for BP-5851: the header background opacity slider.
 describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
-  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
-
   beforeEach(() => {
     setActivePinia(createPinia());
-    pageSettingsStore = useUiPageSettingsStore();
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
   });
 
-  const mountPanel = () =>
-    shallowMount(HeaderSettingsPanel, {
-      props: {
-        isAdminMaker: false,
-        isBrandSite: true,
-        logoTheme: {},
-        sectionName: PAGE_SECTIONS.header,
-        styleOptions: [],
-      },
-    });
-
-  const header = (viewport: 'mobile' | 'desktop' = VIEWPORTS.mobile) =>
-    pageSettingsStore.sections[PAGE_SECTIONS.header][viewport];
-
   test('defaults to opacity 100 and hides the slider when no background color is set', () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     expect(header().backgroundStyle.backgroundColor).toBeFalsy();
     expect((wrapper.vm as any).backgroundOpacity).toBe(100);
@@ -38,7 +67,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('shows the slider once a non-transparent background color is set', async () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     header().backgroundStyle = { backgroundColor: '#336699' };
     await wrapper.vm.$nextTick();
@@ -47,7 +76,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('an un-constructed header (backgroundStyle carrying no backgroundOpacity) reads as 100', async () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     header().backgroundStyle = { backgroundColor: '#336699' };
     await wrapper.vm.$nextTick();
@@ -57,7 +86,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('hides the slider again when the color is switched to transparent', async () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     header().backgroundStyle = { backgroundColor: '#336699' };
     await wrapper.vm.$nextTick();
@@ -70,7 +99,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('onBackgroundOpacityChange merges the value into backgroundStyle of the active viewport section', () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     header().backgroundStyle = {
       backgroundColor: '#336699',
@@ -89,7 +118,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('onBackgroundOpacityChange coerces a string value from the slider input', () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     (wrapper.vm as any).onBackgroundOpacityChange('60');
 
@@ -97,7 +126,7 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
   });
 
   test('onBackgroundOpacityChange clamps an out-of-range value (mid-typing in the Slider text field)', () => {
-    const wrapper = mountPanel();
+    const wrapper = mountPanel(true);
 
     (wrapper.vm as any).onBackgroundOpacityChange('-5');
     expect(header().backgroundStyle.backgroundOpacity).toBe(0);
@@ -109,3 +138,162 @@ describe('HeaderSettingsPanel — background opacity (BP-5851)', () => {
     expect(header().backgroundStyle.backgroundOpacity).toBe(0);
   });
 });
+
+// The Header and Logo sections open to BP/BC, brand site keeps the Button section as its
+// one holdout, and BP/BC gain a logo-background colour control the other two never see.
+describe('HeaderSettingsPanel — sections by website type', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+    setTabNav();
+  });
+
+  test('BP/BC: the Header and Logo sections render, the Button section does not', () => {
+    const wrapper = mountPanel(false);
+
+    expect(wrapper.find('[data-test-header-background-color]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.findComponent(LogoSelection).exists()).toBe(true);
+    expect(wrapper.find('[data-test-header-button-section]').exists()).toBe(
+      false,
+    );
+  });
+
+  test('brand site: the Header, Logo and Button sections all render', () => {
+    const wrapper = mountPanel(true);
+
+    expect(wrapper.find('[data-test-header-background-color]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.findComponent(LogoSelection).exists()).toBe(true);
+    expect(wrapper.find('[data-test-header-button-section]').exists()).toBe(
+      true,
+    );
+  });
+});
+
+describe('HeaderSettingsPanel — Logo section hidden on a BP/BC hamburger viewport', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+  });
+
+  test('brand site on a hamburger viewport: the Logo section still renders', () => {
+    useBrandPageMakerStore().setViewport({ viewport: VIEWPORTS.mobile });
+    useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+      VIEWPORTS.mobile
+    ].displayType = NAVIGATION_DISPLAY.HAMBURGER_1;
+
+    const wrapper = mountPanel(true);
+
+    expect(wrapper.findComponent(LogoSelection).exists()).toBe(true);
+  });
+
+  test('BP tabs → hamburger → tabs: the header logo and its layouts go, then come back', async () => {
+    useBrandPageMakerStore().setViewport({ viewport: VIEWPORTS.mobile });
+    useBrandPageMakerStore().isBrandPageOrIsBrandContact = true;
+    setTabNav();
+
+    const wrapper = mountPanel(false, { HeaderDisplayStyle: false });
+    const layouts = () =>
+      (
+        wrapper.findComponent(ButtonGroup).props('options') as {
+          value: string;
+        }[]
+      ).map((option) => option.value);
+
+    (wrapper.vm as any).handleHeaderNavigationTypeChange(
+      NAVIGATION_TYPE.hamburger,
+    );
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(LogoSelection).exists()).toBe(false);
+
+    (wrapper.vm as any).handleHeaderNavigationTypeChange(NAVIGATION_TYPE.bar);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(LogoSelection).exists()).toBe(true);
+    expect(layouts()).toEqual([
+      HEADER_DISPLAY.MOBILE_TAB_1,
+      HEADER_DISPLAY.MOBILE_TAB_2,
+    ]);
+    expect(header().isLogoVisible).toBe(true);
+    expect(layouts()).toContain(header().displayStyle);
+  });
+});
+
+describe('HeaderSettingsPanel — logo background colour control', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+    setTabNav();
+  });
+
+  test.each([
+    HEADER_DISPLAY.DESKTOP_TAB_5,
+    HEADER_DISPLAY.DESKTOP_TAB_6,
+    HEADER_DISPLAY.MOBILE_TAB_1,
+    HEADER_DISPLAY.MOBILE_TAB_2,
+  ])('shown on the stacked layout %s', (displayStyle) => {
+    header().displayStyle = displayStyle;
+
+    const wrapper = mountPanel(false);
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(true);
+  });
+
+  test.each([
+    HEADER_DISPLAY.DESKTOP_TAB_1,
+    HEADER_DISPLAY.DESKTOP_TAB_2,
+    HEADER_DISPLAY.DESKTOP_TAB_3,
+    HEADER_DISPLAY.DESKTOP_TAB_4,
+  ])('hidden on the side-by-side layout %s', (displayStyle) => {
+    header().displayStyle = displayStyle;
+
+    const wrapper = mountPanel(false);
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(false);
+  });
+
+  test('brand site never shows the control, even on a stacked layout', () => {
+    header().displayStyle = HEADER_DISPLAY.MOBILE_TAB_1;
+
+    const wrapper = mountPanel(true);
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(false);
+  });
+
+  test('switching to a side-by-side layout and back shows the stored colour again', async () => {
+    header().displayStyle = HEADER_DISPLAY.MOBILE_TAB_1;
+    header().logoBackgroundStyle = { backgroundColor: '#336699' };
+
+    const wrapper = mountPanel(false);
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(true);
+
+    header().displayStyle = HEADER_DISPLAY.DESKTOP_TAB_1;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(false);
+    expect(header().logoBackgroundStyle?.backgroundColor).toBe('#336699');
+
+    header().displayStyle = HEADER_DISPLAY.MOBILE_TAB_1;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper.find('[data-test-header-logo-background-color]').exists(),
+    ).toBe(true);
+    expect((wrapper.vm as any).logoBackgroundColor).toBe('#336699');
+  });
+});

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

@@ -38,27 +38,6 @@
         :on-select="handleHeaderNavigationDisplayTypeChange"
       />
 
-      <div v-if="!isBrandSite">
-        <div
-          v-if="showNavigationBelowLogoOption"
-          data-test-navigation-below-logo-toggle
-          class="tw-my-4 tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
-        >
-          <div class="tw-flex tw-items-center">
-            <div
-              class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mr-2"
-            >
-              {{ tr('showNavigationBelow') }}
-            </div>
-          </div>
-          <Toggle
-            id="move-logo"
-            :model-value="isRenderAfterLogo"
-            @update:model-value="toggleShowNavigationBelowLogo"
-          />
-        </div>
-      </div>
-
       <HeaderDisplayStyle
         :display-style="header.displayStyle"
         :navigation-display-type="navigation.displayType"
@@ -78,7 +57,6 @@
     </CollapsiblePanel>
 
     <CollapsiblePanel
-      v-if="isBrandSite"
       data-component="collapsible-panel"
       :title="pageSettingsTr('headerSectionTitle')"
       :is-collapsed="collapsedSections.header"
@@ -95,7 +73,7 @@
         :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
         :toggle-unique-id="sectionName"
-        @update:model-value="onSelectColor"
+        @update:model-value="onHeaderBackgroundColorChange"
       />
       <div
         v-if="showBackgroundOpacity"
@@ -110,13 +88,13 @@
           :min="0"
           :max="100"
           suffix="%"
-          @update:model-value="onBackgroundOpacityChange"
+          @update:model-value="onHeaderBackgroundOpacityChange"
         />
       </div>
     </CollapsiblePanel>
 
     <CollapsiblePanel
-      v-if="isBrandSite"
+      v-if="isBrandSite || !isHamburgerViewport"
       data-component="collapsible-panel"
       :title="commonTr('logo')"
       :is-collapsed="collapsedSections.logo"
@@ -144,6 +122,18 @@
           slider-value-input-id="logo-size-value-input"
           @on-change="onLogoSizeChanged"
         />
+        <ColorField
+          v-if="!isBrandSite && showLogoBackgroundColorField"
+          id="logoBackgroundStyle"
+          data-test-header-logo-background-color
+          class="tw-mt-4"
+          name="backgroundColor"
+          :label="pageSettingsTr('logoBackgroundColor')"
+          :value="logoBackgroundColor"
+          :is-admin-maker="isAdminMaker"
+          :logo-theme="logoTheme"
+          @update:model-value="onLogoBackgroundColorChange"
+        />
       </div>
     </CollapsiblePanel>
 

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

@@ -4,6 +4,7 @@
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
     "backgroundOpacity": "Background opacity",
+    "logoBackgroundColor": "Logo background color",
     "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",