@designcrowd/library.brand-page 6.1.14 → 6.1.16

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

@@ -0,0 +1,111 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import HeaderSettingsPanel from './HeaderSettingsPanel.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { PAGE_SECTIONS } from '../../models';
+import { VIEWPORTS } from '@brand-page';
+
+// 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();
+  });
+
+  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();
+
+    expect(header().backgroundStyle.backgroundColor).toBeFalsy();
+    expect((wrapper.vm as any).backgroundOpacity).toBe(100);
+    expect((wrapper.vm as any).showBackgroundOpacity).toBe(false);
+  });
+
+  test('shows the slider once a non-transparent background color is set', async () => {
+    const wrapper = mountPanel();
+
+    header().backgroundStyle = { backgroundColor: '#336699' };
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).showBackgroundOpacity).toBe(true);
+  });
+
+  test('an un-constructed header (backgroundStyle carrying no backgroundOpacity) reads as 100', async () => {
+    const wrapper = mountPanel();
+
+    header().backgroundStyle = { backgroundColor: '#336699' };
+    await wrapper.vm.$nextTick();
+
+    expect(header().backgroundStyle.backgroundOpacity).toBeUndefined();
+    expect((wrapper.vm as any).backgroundOpacity).toBe(100);
+  });
+
+  test('hides the slider again when the color is switched to transparent', async () => {
+    const wrapper = mountPanel();
+
+    header().backgroundStyle = { backgroundColor: '#336699' };
+    await wrapper.vm.$nextTick();
+    expect((wrapper.vm as any).showBackgroundOpacity).toBe(true);
+
+    header().backgroundStyle = { backgroundColor: 'transparent' };
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).showBackgroundOpacity).toBe(false);
+  });
+
+  test('onBackgroundOpacityChange merges the value into backgroundStyle of the active viewport section', () => {
+    const wrapper = mountPanel();
+
+    header().backgroundStyle = {
+      backgroundColor: '#336699',
+      backgroundOpacity: 100,
+    };
+
+    (wrapper.vm as any).onBackgroundOpacityChange(45);
+
+    expect(header().backgroundStyle.backgroundOpacity).toBe(45);
+    // A merge, not a replace — the sibling backgroundColor must survive.
+    expect(header().backgroundStyle.backgroundColor).toBe('#336699');
+    // The other viewport is untouched — opacity is per-viewport, like backgroundColor.
+    expect(header(VIEWPORTS.desktop).backgroundStyle.backgroundOpacity).toBe(
+      100,
+    );
+  });
+
+  test('onBackgroundOpacityChange coerces a string value from the slider input', () => {
+    const wrapper = mountPanel();
+
+    (wrapper.vm as any).onBackgroundOpacityChange('60');
+
+    expect(header().backgroundStyle.backgroundOpacity).toBe(60);
+  });
+
+  test('onBackgroundOpacityChange clamps an out-of-range value (mid-typing in the Slider text field)', () => {
+    const wrapper = mountPanel();
+
+    (wrapper.vm as any).onBackgroundOpacityChange('-5');
+    expect(header().backgroundStyle.backgroundOpacity).toBe(0);
+
+    (wrapper.vm as any).onBackgroundOpacityChange(500);
+    expect(header().backgroundStyle.backgroundOpacity).toBe(100);
+
+    (wrapper.vm as any).onBackgroundOpacityChange('not-a-number');
+    expect(header().backgroundStyle.backgroundOpacity).toBe(0);
+  });
+});

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

@@ -95,6 +95,22 @@
         :toggle-unique-id="sectionName"
         @update:model-value="onSelectColor"
       />
+      <div
+        v-if="showBackgroundOpacity"
+        data-test-header-background-opacity
+        class="tw-mt-4"
+      >
+        <span class="header-settings-panel_option-title">
+          {{ pageSettingsTr('backgroundOpacity') }}
+        </span>
+        <Slider
+          :model-value="backgroundOpacity"
+          :min="0"
+          :max="100"
+          suffix="%"
+          @update:model-value="onBackgroundOpacityChange"
+        />
+      </div>
     </CollapsiblePanel>
 
     <CollapsiblePanel
@@ -144,6 +160,7 @@
 import {
   CollapsiblePanel,
   HelloBar,
+  Slider,
   TabMenu,
   Toggle,
 } from '@designcrowd/fe-shared-lib';
@@ -163,6 +180,7 @@ export default {
     CollapsiblePanel,
     ColorField,
     HelloBar,
+    Slider,
     TabMenu,
     Toggle,
     HeaderDisplayStyle,

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

@@ -3,6 +3,7 @@
     "headerSettings": "Kopfzeilen-Einstellungen",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Hintergrunddeckkraft",
     "buttonSectionTitle": "Schaltfläche",
     "footerSettings": "Fußzeilen-Einstellungen",
     "managePages": "Seiten verwalten",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Configuración del encabezado",
     "navigationSectionTitle": "Navegación",
     "headerSectionTitle": "Encabezado",
+    "backgroundOpacity": "Opacidad del fondo",
     "buttonSectionTitle": "Botón",
     "footerSettings": "Configuración del pie de página",
     "managePages": "Gestionar páginas",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Header Settings",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Background opacity",
     "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Configurações do cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do plano de fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerenciar páginas",

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

@@ -3,6 +3,7 @@
     "headerSettings": "Definições de cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerir páginas",

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

@@ -24,6 +24,7 @@ import type {
   PageFooterMobile,
   LogoImageModel,
   LogoViewModel,
+  BackgroundColorStyle,
 } from '@brand-page';
 import {
   LOGO_SLIDER_DESKTOP_MAX,
@@ -39,6 +40,7 @@ import type {
   UpdateItemValuePayload,
 } from '../../../content-settings/models';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
+import { isTransparentColour } from '@brand-page/utils/color.util';
 
 import type { PageSettingsStateSectionStyles } from '../../store';
 import { useUiPageSettingsStore } from '../../store';
@@ -216,6 +218,19 @@ export default defineComponent({
       return this.sections[this.sectionName][this.viewport]
         .backgroundColorEnabled;
     },
+    backgroundOpacity(): number {
+      // Real default: an un-constructed (JSON.parse'd) header never saw the constructor's default.
+      return (
+        this.sections[this.sectionName][this.viewport].backgroundStyle
+          ?.backgroundOpacity ?? 100
+      );
+    },
+    showBackgroundOpacity(): boolean {
+      // isTransparentColour('') is false, so an unset color needs its own check.
+      return (
+        !!this.backgroundColor && !isTransparentColour(this.backgroundColor)
+      );
+    },
     copyrightPlaceholder(): string {
       return commonTr(`copyrightTextPlaceholder`);
     },
@@ -544,6 +559,24 @@ export default defineComponent({
       });
     },
 
+    onBackgroundOpacityChange(value: number | string) {
+      // Clamped here: the Slider's text field can emit an out-of-range value mid-typing.
+      const clamped = Math.min(100, Math.max(0, Number(value) || 0));
+
+      // A variable, not an inline literal — backgroundOpacity isn't on BrandPageCssStyle.
+      const backgroundStyle: BackgroundColorStyle = {
+        backgroundOpacity: clamped,
+      };
+
+      this.pageSettingsStore.setPageSettingsSectionValue({
+        sectionName: this.sectionName,
+        propName: 'backgroundStyle',
+        value: backgroundStyle,
+        merge: true,
+        viewport: this.viewport,
+      });
+    },
+
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>) {
       this.pageSettingsStore.setPageSettingsSectionValue({
         sectionName: this.sectionName,

package/src/tracker.ts

@@ -19,6 +19,8 @@ export {
   PUBLISH_MODAL_CONTINUATION_EVENTS,
   GENERATE_TEXT_CONTINUATION_EVENTS,
   PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
+  PREVIEW_CTA_LOCATIONS,
+  PREVIEW_MODAL_CONTINUATION_EVENTS,
 } from './brand-page-maker/composables/useEventTracker';
 export type {
   EventTracker,

package/src/utils/minify-brand-page-metadata.test.ts

@@ -1,7 +1,76 @@
 import { describe, test, expect } from 'vitest';
-import type { BrandPageModel } from '../brand-page/models';
+import { BRAND_SITE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
+import { BrandPageModel, PageHeaderDesktop } from '@brand-page';
 import { minifyBrandPageMetadata } from './minify-brand-page-metadata';
 
+// Coverage for BP-5851: the AI website builder reads the minified metadata to
+// understand the current site, so backgroundOpacity must be visible there too
+// (read-only — see docs/plans for BP-5851) whenever the header isn't fully opaque.
+describe('minifyBrandPageMetadata — header backgroundOpacity (BP-5851)', () => {
+  const buildModel = (pageHeaderDesktop: PageHeaderDesktop) =>
+    new BrandPageModel({
+      ...BRAND_SITE,
+      pages: [],
+      pageHeaderDesktop,
+    });
+
+  test('opacity below 100 is included in the minified header backgroundStyle', () => {
+    const model = buildModel(
+      new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#112233', backgroundOpacity: 65 },
+      }),
+    );
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(minified.pageHeaderDesktop?.backgroundStyle).toEqual({
+      backgroundColor: '#112233',
+      backgroundOpacity: 65,
+    });
+  });
+
+  test('opacity 100 (default/fully opaque) is omitted to keep the payload small', () => {
+    const model = buildModel(
+      new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#112233', backgroundOpacity: 100 },
+      }),
+    );
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(minified.pageHeaderDesktop?.backgroundStyle).toEqual({
+      backgroundColor: '#112233',
+    });
+  });
+
+  test('un-constructed legacy header with backgroundOpacity absent omits it (defaults to opaque)', () => {
+    // Forced after buildModel, since BrandPageModel's constructor would re-inject the default.
+    const model = buildModel(
+      new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#112233' },
+      }),
+    );
+
+    delete model.pageHeaderDesktop.backgroundStyle.backgroundOpacity;
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(minified.pageHeaderDesktop?.backgroundStyle).toEqual({
+      backgroundColor: '#112233',
+    });
+  });
+
+  test('header with no backgroundColor has no minified backgroundStyle at all', () => {
+    const model = buildModel(
+      new PageHeaderDesktop({ backgroundStyle: { backgroundOpacity: 40 } }),
+    );
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(minified.pageHeaderDesktop?.backgroundStyle).toBeUndefined();
+  });
+});
+
 /**
  * BP-5886 — the outbound half of the AI colour bridge (review blocker B8).
  *

package/src/utils/minify-brand-page-metadata.ts

@@ -43,7 +43,7 @@ type MinifiedHeader = {
   logoImageHeight?: string;
   logoImageWidth?: string;
   logoAssetKey?: string;
-  backgroundStyle?: { backgroundColor?: string };
+  backgroundStyle?: { backgroundColor?: string; backgroundOpacity?: number };
   navigation?: {
     displayType?: string;
     defaultButtonStyle?: { color?: string; fontFamily?: string };
@@ -552,6 +552,23 @@ const minifyFooter = (
   };
 };
 
+// Fully opaque (100) is the default, so it's omitted to keep the AI payload small.
+const minifyHeaderBackgroundStyle = (
+  backgroundStyle: AbstractPageHeaderStyles['backgroundStyle'] | undefined,
+): MinifiedHeader['backgroundStyle'] => {
+  const backgroundColor = backgroundStyle?.backgroundColor;
+
+  if (!backgroundColor) return undefined;
+
+  const backgroundOpacity = backgroundStyle.backgroundOpacity;
+
+  return {
+    backgroundColor,
+    ...(backgroundOpacity !== undefined &&
+      backgroundOpacity < 100 && { backgroundOpacity }),
+  };
+};
+
 const minifyHeader = (
   header: AbstractPageHeaderStyles | undefined | null,
   logoAssetKey?: string,
@@ -566,9 +583,7 @@ const minifyHeader = (
     logoImageHeight: header.logoImageHeight || undefined,
     logoImageWidth: header.logoImageWidth || undefined,
     ...(logoAssetKey && { logoAssetKey }),
-    backgroundStyle: header.backgroundStyle?.backgroundColor
-      ? { backgroundColor: header.backgroundStyle.backgroundColor as string }
-      : undefined,
+    backgroundStyle: minifyHeaderBackgroundStyle(header.backgroundStyle),
     navigation: nav
       ? {
           displayType: nav.displayType || undefined,