@designcrowd/library.brand-page 6.1.13-ast-opacity → 6.1.13

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

@@ -3,7 +3,6 @@
     "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,7 +3,6 @@
     "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,7 +3,6 @@
     "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,7 +3,6 @@
     "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,7 +24,6 @@ import type {
   PageFooterMobile,
   LogoImageModel,
   LogoViewModel,
-  BackgroundColorStyle,
 } from '@brand-page';
 import {
   LOGO_SLIDER_DESKTOP_MAX,
@@ -40,7 +39,6 @@ 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';
@@ -218,19 +216,6 @@ 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`);
     },
@@ -559,24 +544,6 @@ 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/utils/minify-brand-page-metadata.test.ts

@@ -1,76 +1,7 @@
 import { describe, test, expect } from 'vitest';
-import { BRAND_SITE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
-import { BrandPageModel, PageHeaderDesktop } from '@brand-page';
+import type { BrandPageModel } from '../brand-page/models';
 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; backgroundOpacity?: number };
+  backgroundStyle?: { backgroundColor?: string };
   navigation?: {
     displayType?: string;
     defaultButtonStyle?: { color?: string; fontFamily?: string };
@@ -552,23 +552,6 @@ 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,
@@ -583,7 +566,9 @@ const minifyHeader = (
     logoImageHeight: header.logoImageHeight || undefined,
     logoImageWidth: header.logoImageWidth || undefined,
     ...(logoAssetKey && { logoAssetKey }),
-    backgroundStyle: minifyHeaderBackgroundStyle(header.backgroundStyle),
+    backgroundStyle: header.backgroundStyle?.backgroundColor
+      ? { backgroundColor: header.backgroundStyle.backgroundColor as string }
+      : undefined,
     navigation: nav
       ? {
           displayType: nav.displayType || undefined,

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

@@ -1,111 +0,0 @@
-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);
-  });
-});