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

package/src/brand-page/components/page-header/PageHeader.vue.test.ts

@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils';
 import { createRouter, createMemoryHistory } from 'vue-router';
 import { createPinia, setActivePinia } from 'pinia';
 import PageHeader from './PageHeader.vue';
+import Logo from '../logo/Logo.vue';
 import {
   BRAND_PAGE_TYPES,
   BUTTON_LINK_TYPE,
@@ -56,6 +57,8 @@ const navItems = (): NavItemViewModel[] =>
     },
   ] as NavItemViewModel[];
 
+const singlePageNav = () => [navItems()[0]];
+
 const createContext = (): BrandPageContext =>
   ({
     brandPageSlug: SLUG,
@@ -100,6 +103,13 @@ const mountHeader = async (options: {
   navItems?: NavItemViewModel[];
   isMobile?: boolean;
   isPreview?: boolean;
+  isBrandPageOrIsBrandContact?: boolean;
+  logoBackgroundStyle?: { backgroundColor: string };
+  backgroundStyle?: { backgroundColor?: string; backgroundOpacity?: number };
+  // Overrides the view model's logo width after construction, e.g. to `undefined` —
+  // the model constructor always defaults it, so this simulates data built without going
+  // through it (BP-6184: a header width-reservation fallback that only a raw/legacy header hits).
+  logoImageWidthOverride?: string | undefined;
 }) => {
   const router = createRouter({
     history: createMemoryHistory(),
@@ -131,18 +141,37 @@ const mountHeader = async (options: {
     context.isPreview = true;
   }
 
+  if (options.isBrandPageOrIsBrandContact) {
+    context.isBrandSite = false;
+    context.isBrandPageOrIsBrandContact = true;
+    context.brandPageType = BRAND_PAGE_TYPES.default;
+  }
+
   const viewModel = mapToPageHeaderViewModel(
     new HeaderModel({
       headerButton: options.headerButton,
       isLogoVisible: options.isLogoVisible ?? true,
+      logoBackgroundStyle: options.logoBackgroundStyle,
       ...(options.displayStyle ? { displayStyle: options.displayStyle } : {}),
+      ...(options.backgroundStyle
+        ? { backgroundStyle: options.backgroundStyle }
+        : {}),
     }),
     new PageStyles(),
     [],
   );
 
+  if ('logoImageWidthOverride' in options) {
+    viewModel.logo.logoImageWidth = options.logoImageWidthOverride;
+  }
+
   return mount(PageHeader, {
-    propsData: { navId: 'nav-1', viewModel, context },
+    propsData: {
+      navId: 'nav-1',
+      viewModel,
+      context,
+      isMobile: options.isMobile ?? false,
+    },
     global: { plugins: [router] },
   });
 };
@@ -193,9 +222,6 @@ describe('PageHeader - header call-to-action button (BP-5852)', () => {
   });
 
   describe('render gate', () => {
-    // A visible button must bring the header back even when nav and logo are hidden.
-    const singlePageNav = () => [navItems()[0]];
-
     test('renders no header when there is no nav, no logo and no button', async () => {
       const wrapper = await mountHeader({
         isLogoVisible: false,
@@ -337,3 +363,163 @@ describe('PageHeader - header call-to-action button (BP-5852)', () => {
     });
   });
 });
+
+describe('PageHeader — top-space spacer', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('BP/BC keeps the top-space spacer when the header renders nothing; brand site renders neither', async () => {
+    const bp = await mountHeader({
+      isLogoVisible: false,
+      navItems: singlePageNav(),
+      isBrandPageOrIsBrandContact: true,
+    });
+    const bs = await mountHeader({
+      isLogoVisible: false,
+      navItems: singlePageNav(),
+    });
+
+    expect(bp.find('.c-page-header-spacer').exists()).toBe(true);
+    expect(bs.find('.c-page-header-spacer').exists()).toBe(false);
+  });
+});
+
+describe('PageHeader — home link', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('a published BP/BC header logo links to the home route', async () => {
+    const wrapper = await mountHeader({ isBrandPageOrIsBrandContact: true });
+
+    expect(
+      wrapper.get('[data-component="page-header"] a').attributes('href'),
+    ).toBe(`/${SLUG}`);
+  });
+
+  // A logo content block never links, even on BP/BC: only the header's own Logo instance
+  // gets `linksHome`.
+  test('a logo content block never links home', () => {
+    const context = createContext();
+
+    context.isBrandSite = false;
+    context.isBrandPageOrIsBrandContact = true;
+
+    const viewModel = mapToPageHeaderViewModel(
+      new PageHeaderDesktop(),
+      new PageStyles(),
+      [],
+    ).logo;
+
+    const wrapper = mount(Logo, {
+      propsData: { viewModel, context },
+    });
+
+    expect(wrapper.find('a').exists()).toBe(false);
+  });
+
+  test('the maker preview never links the header logo, but a header click still selects it', async () => {
+    const wrapper = await mountHeader({
+      isBrandPageOrIsBrandContact: true,
+      isPreview: true,
+    });
+
+    expect(wrapper.find('[data-component="page-header"] a').exists()).toBe(
+      false,
+    );
+
+    await wrapper.get('.c-page-header-container').trigger('click');
+
+    expect(wrapper.emitted('header-container-click')).toHaveLength(1);
+  });
+});
+
+describe('PageHeader — no logo on a BP/BC hamburger viewport', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('a BP hamburger viewport with a stored colour and a with-logo layout draws no logo', async () => {
+    const wrapper = await mountHeader({
+      isBrandPageOrIsBrandContact: true,
+      isMobile: true,
+      displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+      logoBackgroundStyle: { backgroundColor: 'var(--palette-1)' },
+    });
+
+    expect(wrapper.find('[data-component="page-header"]').exists()).toBe(false);
+  });
+
+  test('a brand site hamburger viewport still draws its logo', async () => {
+    const wrapper = await mountHeader({
+      isMobile: true,
+      displayStyle: HEADER_DISPLAY.MOBILE_HAMBURGER_1,
+    });
+
+    expect(wrapper.find('[data-component="page-header"]').exists()).toBe(true);
+  });
+});
+
+describe('PageHeader — logo background colour', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test.each([
+    ['desktop', false],
+    ['mobile', true],
+  ])(
+    'a stored colour paints the %s header logo through the same LogoRender a logo block uses',
+    async (_label, isMobile) => {
+      const wrapper = await mountHeader({
+        isBrandPageOrIsBrandContact: true,
+        isMobile,
+        logoBackgroundStyle: { backgroundColor: 'var(--palette-1)' },
+      });
+
+      expect(wrapper.get('.logo__container').attributes('style')).toContain(
+        'background: var(--palette-1)',
+      );
+      // A BP/BC header logo keeps today's 20rem cap on mobile too — PageHeader never
+      // passes is-mobile through for BP/BC, only for brand site.
+      expect(
+        (wrapper.get('.logo__container > div').element as HTMLElement).style
+          .maxWidth,
+      ).toBe('20rem');
+    },
+  );
+});
+
+describe('PageHeader — the header button on a brand page or brand contact site', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('BP/BC draws no CTA even with a visible button stored', async () => {
+    const wrapper = await mountHeader({
+      isBrandPageOrIsBrandContact: true,
+      headerButton: aHeaderButton(),
+    });
+
+    expect(wrapper.find(CTA).exists()).toBe(false);
+  });
+});
+
+describe('PageHeader — header background colour and opacity on a brand page', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('a brand page header at 60% opacity paints the root at the folded colour, edge to edge', async () => {
+    const wrapper = await mountHeader({
+      isBrandPageOrIsBrandContact: true,
+      backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 60 },
+    });
+
+    // jsdom normalises the 8-digit hex into rgba when it serialises the style attribute.
+    expect(wrapper.element.getAttribute('style')).toContain(
+      'rgba(255, 0, 0, 0.6)',
+    );
+  });
+});

package/src/brand-page/constants/misc.constants.ts

@@ -126,6 +126,15 @@ export const IMAGE_RESOLUTION_PRESETS = {
 export type ImagesSectionContentDisplayStyle =
   (typeof IMAGES_SECTION_CONTENT_DISPLAY_STYLES)[number];
 
+/** Centered and split are accordions; grid shows every answer. */
+export const FAQ_DISPLAY_STYLES = Object.freeze({
+  centered: 'faq-centered',
+  split: 'faq-split',
+  grid: 'faq-grid',
+} as const);
+
+export const FAQ_MAX_ITEMS = 6;
+
 export const HEADER_CSRF_TOKEN = 'csrf-token';
 
 export const STYLE_THEME_KEYS = Object.freeze({

package/src/brand-page/constants/sections/header-display.constants.ts

@@ -52,6 +52,15 @@ export type PageSectionDisplayStyle =
 
 export type HeaderDisplayStyle = PageSectionDisplayStyle;
 
+// The logo centred above or below the nav — the only layouts a BP/BC logo background colour
+// draws in; elsewhere the control is hidden and nothing is drawn.
+export const STACKED_LOGO_LAYOUTS: readonly HeaderDisplayStyle[] = [
+  HEADER_DISPLAY.DESKTOP_TAB_5,
+  HEADER_DISPLAY.DESKTOP_TAB_6,
+  HEADER_DISPLAY.MOBILE_TAB_1,
+  HEADER_DISPLAY.MOBILE_TAB_2,
+];
+
 interface HeaderDisplayStyleConfig {
   viewMode: 'desktop' | 'mobile';
   navType: NavigationType;

package/src/brand-page/constants/styles.constants.ts

@@ -40,6 +40,8 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
   buttonTextStyle: 'buttonTextStyle',
   copyrightStyle: 'copyrightStyle',
   successMessageStyle: 'successMessageStyle',
+  questionStyle: 'questionStyle',
+  answerStyle: 'answerStyle',
 } as const;
 
 export type ContentTextStylePropertyKey =

package/src/brand-page/models/content.model.ts

@@ -31,6 +31,7 @@ export const CONTENT_TYPES = {
   'shapes-section': 'shapes-section',
   'shop-section': 'shop-section',
   'booking-section': 'booking-section',
+  'faq-section': 'faq-section',
 } as const;
 
 export type ContentType = keyof typeof CONTENT_TYPES;

package/src/brand-page/models/header-button.model.test.ts

@@ -83,3 +83,29 @@ describe('header button persistence', () => {
     });
   });
 });
+
+describe('header logo background colour persistence', () => {
+  test('PageHeader* constructor keeps a given logoBackgroundStyle on both viewports; leaves it unset when absent', () => {
+    const colour = { backgroundColor: 'var(--palette-1)' };
+
+    expect(
+      new PageHeaderDesktop({ logoBackgroundStyle: colour })
+        .logoBackgroundStyle,
+    ).toEqual(colour);
+    expect(
+      new PageHeaderMobile({ logoBackgroundStyle: colour }).logoBackgroundStyle,
+    ).toEqual(colour);
+    expect(
+      Object.prototype.hasOwnProperty.call(
+        new PageHeaderDesktop(),
+        'logoBackgroundStyle',
+      ),
+    ).toBe(false);
+    expect(
+      Object.prototype.hasOwnProperty.call(
+        new PageHeaderMobile(),
+        'logoBackgroundStyle',
+      ),
+    ).toBe(false);
+  });
+});

package/src/brand-page/models/index.ts

@@ -672,6 +672,35 @@ export interface BookingSectionContent extends Content {
   buttonTextStyle: TextStyleDeclaration;
 }
 
+export interface FaqItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
+  question: RichTextValue;
+  answer: RichTextValue;
+  // Overrides for personalisation
+  questionOverride?: string;
+  answerOverride?: string;
+}
+
+export interface FaqSectionContent extends Content {
+  type: 'faq-section';
+  title: RichTextValue;
+  description: RichTextValue;
+  displayStyle: string;
+  items: FaqItem[];
+  titleStyle: RteTextRole;
+  descriptionStyle: RteTextRole;
+  /** Shared by every question; a question's own formatting lives in its doc. */
+  questionStyle: RteTextRole;
+  /** Shared by every answer. */
+  answerStyle: RteTextRole;
+  backgroundStyle: BrandPageCssStyle;
+  /** `{ color }` for the +/- toggle. */
+  iconColor: BrandPageCssStyle;
+  /** `{ backgroundColor }`, the Divider section's shape. `'transparent'` hides the line. */
+  dividerColor: BrandPageCssStyle;
+}
+
 export class PageModel {
   title: string;
   contents: Content[];
@@ -756,6 +785,9 @@ export abstract class AbstractPageHeaderStyles {
   /** Missing = no button. `declare` keeps it off saved data so old migrations still see the same shape. */
   declare headerButton?: HeaderButton;
 
+  /** BP/BC header logo background colour; absent on a brand site. `declare` keeps it off saved data so old migrations still see the same shape. */
+  declare logoBackgroundStyle?: BrandPageCssStyle;
+
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
       throw new Error('"viewport" is required');
@@ -798,6 +830,11 @@ export abstract class AbstractPageHeaderStyles {
     if (options.headerButton) {
       this.headerButton = options.headerButton;
     }
+
+    // Only set when given — a missing colour must stay missing for old migrations.
+    if (options.logoBackgroundStyle !== undefined) {
+      this.logoBackgroundStyle = options.logoBackgroundStyle;
+    }
   }
 }
 

package/src/brand-page/models/navigation-styles.model.ts

@@ -124,7 +124,6 @@ type NavigationStylesThemeType = Theme;
 
 abstract class NavigationStyles implements NavigationMenuStyles {
   public displayType: NavigationDisplayType;
-  public renderAfterLogo: boolean;
   public defaultButtonStyle: TextStyleDeclaration;
   public selectedButtonStyle: BrandPageCssStyle;
   public iconStyle: BrandPageCssStyle;
@@ -148,7 +147,11 @@ abstract class NavigationStyles implements NavigationMenuStyles {
     this.viewport = option.viewport;
     this.displayType = option.displayType;
 
-    this.renderAfterLogo = option?.renderAfterLogo || false;
+    // Retired: only old saved data still has it; carried through for migration 23 to read
+    // and delete. Never defaulted, so it can't come back (legacy-migrations.md).
+    if ('renderAfterLogo' in option) {
+      Object.assign(this, { renderAfterLogo: option.renderAfterLogo });
+    }
 
     this.defaultButtonStyle = Object.assign(
       {} as TextStyleDeclaration,

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -207,7 +207,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -279,7 +278,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -663,7 +661,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 22,
+    "v": 23,
   },
   "useOldLogoRenderSize": true,
 }
@@ -876,7 +874,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -948,7 +945,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -1314,7 +1310,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 22,
+    "v": 23,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1527,7 +1523,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -1599,7 +1594,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -1965,7 +1959,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 22,
+    "v": 23,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -191,7 +191,6 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,
@@ -266,7 +265,6 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         "iconStyle": {},
         "isLogoVisible": true,
-        "renderAfterLogo": false,
         "selectedButtonStyle": {
           "borderBottomWidth": "4px",
           "borderColor": undefined,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -142,8 +142,8 @@ BrandPageModel {
     "isLogoVisible": true,
     "logoDraftToken": "",
     "logoImage": {
-      "logoDraftToken": "",
-      "logoLastUpdate": undefined,
+      "logoDraftToken": "7a0545cd-ff28-46c2-a496-36cf7fd1b91b",
+      "logoLastUpdate": "637684854579600000",
       "logoVariation": 0,
     },
     "logoImageBase64Url": "",
@@ -190,7 +190,6 @@ BrandPageModel {
       },
       "iconStyle": {},
       "isLogoVisible": true,
-      "renderAfterLogo": false,
       "selectedButtonStyle": {
         "borderBottomWidth": "4px",
         "borderColor": undefined,
@@ -217,8 +216,8 @@ BrandPageModel {
     "isLogoVisible": true,
     "logoDraftToken": "",
     "logoImage": {
-      "logoDraftToken": "",
-      "logoLastUpdate": undefined,
+      "logoDraftToken": "7a0545cd-ff28-46c2-a496-36cf7fd1b91b",
+      "logoLastUpdate": "637684854579600000",
       "logoVariation": 0,
     },
     "logoImageBase64Url": "",
@@ -265,7 +264,6 @@ BrandPageModel {
       },
       "iconStyle": {},
       "isLogoVisible": true,
-      "renderAfterLogo": false,
       "selectedButtonStyle": {
         "borderBottomWidth": "4px",
         "borderColor": undefined,
@@ -602,7 +600,7 @@ BrandPageModel {
 }
 `;
 
-exports[`model.util > applyLogoImageToBrandPageModelLogoContents should return brand page model with replaced logo image url 1`] = `
+exports[`model.util > applyLogoImageToBrandPageModelLogoContents should return brand page model with replaced logo image url, header included 1`] = `
 BrandPageModel {
   "adsenseID": undefined,
   "brandPageType": undefined,
@@ -744,8 +742,8 @@ BrandPageModel {
     "isLogoVisible": true,
     "logoDraftToken": "",
     "logoImage": {
-      "logoDraftToken": "",
-      "logoLastUpdate": undefined,
+      "logoDraftToken": "7a0545cd-ff28-46c2-a496-36cf7fd1b91b",
+      "logoLastUpdate": "637684854579600000",
       "logoVariation": 0,
     },
     "logoImageBase64Url": "",
@@ -792,7 +790,6 @@ BrandPageModel {
       },
       "iconStyle": {},
       "isLogoVisible": true,
-      "renderAfterLogo": false,
       "selectedButtonStyle": {
         "borderBottomWidth": "4px",
         "borderColor": undefined,
@@ -819,8 +816,8 @@ BrandPageModel {
     "isLogoVisible": true,
     "logoDraftToken": "",
     "logoImage": {
-      "logoDraftToken": "",
-      "logoLastUpdate": undefined,
+      "logoDraftToken": "7a0545cd-ff28-46c2-a496-36cf7fd1b91b",
+      "logoLastUpdate": "637684854579600000",
       "logoVariation": 0,
     },
     "logoImageBase64Url": "",
@@ -867,7 +864,6 @@ BrandPageModel {
       },
       "iconStyle": {},
       "isLogoVisible": true,
-      "renderAfterLogo": false,
       "selectedButtonStyle": {
         "borderBottomWidth": "4px",
         "borderColor": undefined,