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

package/lib/src/brand-page/utils/migration/migration-23.js

@@ -0,0 +1,141 @@
+import cloneDeep from 'lodash.clonedeep';
+import { BRAND_PAGE_TYPES, HEADER_DISPLAY, } from '../../';
+import { isLogoContent } from '../model.util';
+// Mirrors the published site's own home rule: navItems[0] (slug-routes.composable.ts).
+// A nav with no orders has no first entry to open, so it falls back to the first page.
+const findHomePage = (nav, pages) => {
+    if (nav.orders.length === 0) {
+        return pages[0];
+    }
+    const homeRoute = nav.routes.find((route) => route.id === nav.orders[0].routeId);
+    return pages.find((page) => page.id === homeRoute?.pageId);
+};
+// Frozen copy of `hasVisibleNavigation` (route.util.ts) against the raw orders/routes a
+// migration sees, instead of the NavItemViewModel the live renderer builds.
+const isNavShown = (nav) => {
+    const isRouteVisible = (routeId) => {
+        const route = nav.routes.find((r) => r.id === routeId);
+        return route !== undefined && !route.isHidden;
+    };
+    const visibleOrders = nav.orders.filter((order) => isRouteVisible(order.routeId));
+    return (visibleOrders.length > 1 ||
+        (visibleOrders.length === 1 &&
+            visibleOrders[0].subRoutes.some((subRoute) => isRouteVisible(subRoute.routeId))));
+};
+const isFirstBlockAShownLogo = (page) => {
+    const first = page?.contents[0];
+    return isLogoContent(first) && first.isLogoVisible;
+};
+const isFirstBlockALogo = (page) => isLogoContent(page?.contents[0]);
+// The home page's own leading block, shown or hidden; any other shape means the header
+// keeps what it already has.
+const findSourceLogoBlock = (homePage) => {
+    const homeBlock = homePage?.contents[0];
+    return homeBlock && isLogoContent(homeBlock) ? homeBlock : undefined;
+};
+// Retired field read raw (legacy-migrations.md).
+const takeRenderAfterLogo = (navigation) => {
+    const raw = navigation;
+    const value = raw['renderAfterLogo'] === true;
+    delete raw['renderAfterLogo'];
+    return value;
+};
+// A tab layout always becomes the centred no-logo layout: today's BP/BC nav draws
+// centred whatever is stored. Matched by the absence of "no-logo" in the stored value
+// itself, not an enum allowlist, so a value this migration has never seen can't slip
+// through unclassified.
+const nextDisplayStyle = (viewport, showsLogo) => {
+    if (showsLogo) {
+        return viewport.stacked;
+    }
+    if (viewport.isHamburger) {
+        return viewport.header.displayStyle.includes('no-logo')
+            ? viewport.header.displayStyle
+            : viewport.hamburgerNoLogo;
+    }
+    return viewport.tabNoLogo;
+};
+/**
+ * Each viewport decides on its own whether the home page's logo sits above the nav there:
+ * if so, the header takes the block's values, shown, centred; otherwise the same values,
+ * hidden. `options.isTemplate` (blank site, create-draft, template apply, or the admin
+ * maker editing a template) treats every tab viewport as above the nav, regardless of the
+ * stored setting. See `backward-compatibility.md`.
+ */
+export const migration23 = async (migrationResult, options) => {
+    const { brandPageModel } = migrationResult;
+    if (brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+        const { pageHeaderDesktop, pageHeaderMobile } = brandPageModel;
+        if (pageHeaderDesktop && pageHeaderMobile) {
+            for (const header of [pageHeaderDesktop, pageHeaderMobile]) {
+                takeRenderAfterLogo(header.navigation);
+            }
+        }
+        return migrationResult;
+    }
+    const { pages, nav, pageHeaderDesktop, pageHeaderMobile } = brandPageModel;
+    if (!nav || !pageHeaderDesktop || !pageHeaderMobile || !pages) {
+        return migrationResult;
+    }
+    const navShown = isNavShown(nav);
+    const homePage = findHomePage(nav, pages);
+    const sourceBlock = findSourceLogoBlock(homePage);
+    // No real `renderAfterLogo` to honour on this path; see the function doc above.
+    const treatAsAboveTheNav = options?.isTemplate === true;
+    const viewports = [
+        {
+            header: pageHeaderDesktop,
+            stacked: HEADER_DISPLAY.DESKTOP_TAB_5,
+            tabNoLogo: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
+            hamburgerNoLogo: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
+        },
+        {
+            header: pageHeaderMobile,
+            stacked: HEADER_DISPLAY.MOBILE_TAB_1,
+            tabNoLogo: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+            hamburgerNoLogo: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
+        },
+    ].map((v) => {
+        const isHamburger = v.header.navigation.displayType.includes('hamburger');
+        const renderAfterLogo = takeRenderAfterLogo(v.header.navigation);
+        return {
+            ...v,
+            isHamburger,
+            logoAboveNav: !isHamburger && (treatAsAboveTheNav || (navShown && renderAfterLogo)),
+        };
+    });
+    // A new site's header carries every page's leading logo block whether or not it was
+    // shown (R29); an existing site only carries one the home page actually showed.
+    const startsWithLogo = treatAsAboveTheNav
+        ? isFirstBlockALogo
+        : isFirstBlockAShownLogo;
+    // Collected before any header write: stripping a block must not change what "above
+    // the nav" saw, for the home page's own copy above or any other page's own check.
+    const pagesToStrip = viewports.every((v) => v.logoAboveNav)
+        ? pages.filter(startsWithLogo)
+        : [];
+    for (const v of viewports) {
+        const { header } = v;
+        const showsLogo = treatAsAboveTheNav
+            ? v.logoAboveNav
+            : v.logoAboveNav && isFirstBlockAShownLogo(homePage);
+        if (sourceBlock) {
+            header.logoImage = cloneDeep(sourceBlock.logoImage);
+            header.logoTemplateImage =
+                cloneDeep(sourceBlock.logoTemplateImage) || undefined;
+            header.logoImageHeight = sourceBlock.logoImageHeight;
+            header.logoImageWidth = sourceBlock.logoImageWidth;
+            header.logoBackgroundStyle = cloneDeep(sourceBlock.backgroundStyle);
+        }
+        header.isLogoVisible = showsLogo;
+        header.displayStyle = nextDisplayStyle(v, showsLogo);
+        header.backgroundStyle = {
+            ...header.backgroundStyle,
+            backgroundColor: 'transparent',
+        };
+    }
+    pagesToStrip.forEach((page) => {
+        page.contents.shift();
+    });
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration.util.d.ts

@@ -8,6 +8,9 @@ export interface MigrationOptions {
     isUserDraft: boolean;
     isServerRender: boolean;
     disableLogoSizeMigration?: boolean;
+    /** A new BP/BC site, in or on its way to the maker: blank site, create-draft, template
+     * apply, or the admin maker editing a template (migration-23's own new-site rule). */
+    isTemplate?: boolean;
 }
 export declare const GetLatestModelVersion: () => number;
 export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: MigrationOptions) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration.util.js

@@ -26,6 +26,7 @@ import { migration20 } from './migration/migration-20';
 import { migration20_5 } from './migration/migration-20_5';
 import { migration21 } from './migration/migration-21';
 import { migration22 } from './migration/migration-22';
+import { migration23 } from './migration/migration-23';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -212,6 +213,14 @@ const MIGRATION_TABLE = [
         // migration-22's header).
         description: 'BP-5969 Global Text Style V2: expand 4 roles -> 10 (H1-6/P1-3/button); roles keep default typography, reconnect all content to its nearest tier with its size kept as a per-block override, seed role colour + strip baked RTE typography (appearance-preserving, once)',
     },
+    {
+        version: 23,
+        migrateFn: migration23,
+        // Version-gated: runs once, when modelVersion < 23. Not re-run safe on BP/BC:
+        // renderAfterLogo is deleted, so a second pass would hide every header logo while
+        // the stripped blocks stay gone.
+        description: "BP-6183 Header logo migration: renderAfterLogo deleted from every header; BP/BC headers take the home page's own leading logo block where it sits above the nav per viewport (hidden with its values otherwise); that block removed once the header carries it on both viewports; header background colour cleared",
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page/utils/model.util.js

@@ -2,7 +2,7 @@
  * MIGRATION-22 SNAPSHOT DEPENDENCY: its reconnect and colour bake call `isButtonContent`. After
  * migration-22 releases, pin its v22 behaviour in the migration before changing it.
  */
-import { CONTENT_TYPES, } from '../models';
+import { BRAND_PAGE_TYPES, CONTENT_TYPES, } from '../models';
 export const isLogoContent = (content) => {
     return content?.type === 'logo';
 };
@@ -13,6 +13,10 @@ export const applyLogoImageToBrandPageModelLogoContents = (model, logoImage) =>
         }
         Object.assign(content.logoImage, logoImage);
     }));
+    if (model.brandPageType !== BRAND_PAGE_TYPES.brandSite) {
+        model.pageHeaderDesktop.logoImage = logoImage;
+        model.pageHeaderMobile.logoImage = logoImage;
+    }
     return model;
 };
 export const isTextContent = (content) => {

package/lib/src/brand-page/utils/view-model.util.js

@@ -6,7 +6,7 @@ import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE
 import { backgroundColorFromStyle, isTransparentColour, mutedTextForBackground, withColorOpacity, } from './color.util';
 import { resolveColorReference } from './color-palette.util';
 import { containerTextColorDefaults, containerSurfaceForContent, titleSurfaceContrastFill, } from './container-text-color.util';
-import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, } from '../constants';
+import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, STACKED_LOGO_LAYOUTS, } from '../constants';
 import uniq from 'lodash/uniq';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
@@ -626,6 +626,20 @@ const mapToTestimonialSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
+const mapToFaqSectionViewModel = (content, styles) => {
+    return applyViewModelTextStyles({
+        ...content,
+        role: content.type,
+        type: 'faq-section',
+        // No `color` pre-seed, as in the testimonial mapper: it would read as an override.
+        titleStyle: { ...content.titleStyle },
+        descriptionStyle: { ...content.descriptionStyle },
+        questionStyle: { ...content.questionStyle },
+        answerStyle: { ...content.answerStyle },
+        items: content.items ?? [],
+        isFullWidth: true,
+    }, styles);
+};
 const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
     return applyViewModelTextStyles({
         ...content,
@@ -767,10 +781,13 @@ textStyles) => Object.assign({}, pickTypography(buttonTextStyle ?? {}), {
 });
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
+    const drawsLogoBackground = STACKED_LOGO_LAYOUTS.includes(pageHeader.displayStyle);
     const logoContent = {
         id: 'page-header-logo',
         type: 'logo',
-        backgroundStyle: {},
+        backgroundStyle: drawsLogoBackground
+            ? (pageHeader.logoBackgroundStyle ?? {})
+            : {},
         logoImageBase64Url: pageHeader.logoImageBase64Url,
         isLogoVisible: pageHeader.isLogoVisible,
         logoImage: pageHeader.logoImage,
@@ -894,6 +911,8 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             return mapToBannerSectionViewModel(content, styles, options);
         case 'booking-section':
             return mapToBookingSectionViewModel(content, styles);
+        case 'faq-section':
+            return mapToFaqSectionViewModel(content, styles);
         case 'about-section':
             return mapToAboutSectionViewModel(content, styles);
         case 'images-section':
@@ -1092,9 +1111,9 @@ export const applyLogoImageToBrandPageViewModel = (viewModel, logoImage) => {
         }
         viewModel.logoImage = logoImage;
     }));
+    viewModel.headerViewModelDesktop.logo.logoImage = logoImage;
+    viewModel.headerViewModelMobile.logo.logoImage = logoImage;
     if (viewModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-        viewModel.headerViewModelDesktop.logo.logoImage = logoImage;
-        viewModel.headerViewModelMobile.logo.logoImage = logoImage;
         viewModel.footerViewModelDesktop.logo.logoImage = logoImage;
         viewModel.footerViewModelMobile.logo.logoImage = logoImage;
     }
@@ -1107,9 +1126,9 @@ export const applyLogoImageToBrandPageModel = (model, logoImage) => {
         }
         content.logoImage = logoImage;
     }));
+    model.pageHeaderDesktop.logoImage = logoImage;
+    model.pageHeaderMobile.logoImage = logoImage;
     if (model.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-        model.pageHeaderDesktop.logoImage = logoImage;
-        model.pageHeaderMobile.logoImage = logoImage;
         model.pageFooterDesktop.logoImage = logoImage;
         model.pageFooterMobile.logoImage = logoImage;
     }
@@ -1123,9 +1142,9 @@ export const applyLogoTemplateImageToBrandPageViewModel = (viewModel, logoTempla
         }
         viewModel.logoTemplateImage = logoTemplateImage;
     }));
+    viewModel.headerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
+    viewModel.headerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
     if (viewModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-        viewModel.headerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
-        viewModel.headerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
         viewModel.footerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
         viewModel.footerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
     }

package/lib/src/brand-page/view-models.d.ts

@@ -1,6 +1,6 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem, RichTextValue } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, FaqSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem, RichTextValue } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
-export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
+export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section' | 'faq-section';
 export interface ContentViewModel {
     id: string;
     type: ViewModelType;
@@ -133,6 +133,9 @@ export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingS
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
 }
+export interface FaqSectionViewModel extends ContentViewModel, Omit<FaqSectionContent, 'type'> {
+    isFullWidth: boolean;
+}
 export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'headerButton' | 'backgroundStyle'> {
     logo: LogoViewModel;
     pages: PageViewModel[];

package/lib/src/brand-page-maker/assessors/faq-accordion-color-field-visibility.assessor.d.ts

@@ -0,0 +1,3 @@
+import type { FaqSectionContent } from '@brand-page';
+import type { VisibilityAssessor } from '../models';
+export declare const faqAccordionColorFieldVisibilityAssessor: VisibilityAssessor<FaqSectionContent | undefined>;

package/lib/src/brand-page-maker/assessors/faq-accordion-color-field-visibility.assessor.js

@@ -0,0 +1,4 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+// Icon and divider colours paint the accordion toggle and its item dividers;
+// grid shows neither, so the fields have nothing to colour there.
+export const faqAccordionColorFieldVisibilityAssessor = (content) => content?.displayStyle !== FAQ_DISPLAY_STYLES.grid;

package/lib/src/brand-page-maker/assessors/index.d.ts

@@ -8,6 +8,7 @@ export * from './media-section-items-field.assessor';
 export * from './shape-section-items-field.assessor';
 export * from './shape-size-visibility.assessor';
 export * from './divider-toggle-field-visibility.assessor';
+export * from './faq-accordion-color-field-visibility.assessor';
 export * from './color-replacement-visibility.assessor';
 export * from './color-replacement-profile-visibility.assessor';
 export * from './color-replacement-icon-visibility.assessor';

package/lib/src/brand-page-maker/assessors/index.js

@@ -8,6 +8,7 @@ export * from './media-section-items-field.assessor';
 export * from './shape-section-items-field.assessor';
 export * from './shape-size-visibility.assessor';
 export * from './divider-toggle-field-visibility.assessor';
+export * from './faq-accordion-color-field-visibility.assessor';
 export * from './color-replacement-visibility.assessor';
 export * from './color-replacement-profile-visibility.assessor';
 export * from './color-replacement-icon-visibility.assessor';

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -1,48 +1,18 @@
 declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("@brand-page-maker/stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
-    items: import("vue").ComputedRef<{
-        id: string;
-        type: import("../../../brand-page").ContentType;
-        settings: {
-            content: {
-                id: string;
-                type: import("../../../brand-page").ContentType;
-                personalisationRole?: import("../../../brand-page").PersonalisationRole | undefined;
-                topPadding?: number | undefined;
-                bottomPadding?: number | undefined;
-                imageUrlOverride?: string | undefined;
-                imageUrlsOverride?: string | undefined;
-                avatarImageUrlOverride?: string | undefined;
-                backgroundImageUrlOverride?: string | undefined;
-                nameOverride?: string | undefined;
-                titleOverride?: string | undefined;
-                descriptionOverride?: string | undefined;
-                buttonTextOverride?: string | undefined;
-                ctaTitleOverride?: string | undefined;
-                urlOverride?: string | undefined;
-                textOverride?: string | undefined;
-                paragraphOverride?: string | undefined;
-            };
-            fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
-        };
-    }[]>;
     brandPageTitle: import("vue").ComputedRef<string>;
     brandPageType: import("vue").ComputedRef<"default" | "brandSite" | "brandContact">;
     isBrandSite: import("vue").ComputedRef<boolean>;
-    isBrandPageOrIsBrandContact: import("vue").ComputedRef<boolean>;
     adminLogoSettingsStore: import("pinia").Store<"adminLogoSettings", import("@brand-page-maker/stores/admin-logo-settings").AdminLogoSettingsState, {
         templates(): import("@brand-page-maker/stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[];
     }, {
         setPreviewLogoTemplateModels({ models, }: import("@brand-page-maker/stores/admin-logo-settings").SetAdminPreviewLogoTemplateModelsPayload): void;
-        addLogoContent(): void;
         selectPreviewLogoTemplateModel(payload: import("@brand-page-maker/stores/admin-logo-settings").SelectAdminPreviewLogoTemplateModelPayload): void;
     }>;
 }, {}, {
-    canAddLogo(): boolean;
     previewWidth(): number;
     previewHeight(): number;
 }, {
-    onAddLogoClick(): void;
     onTemplateSelected(logoTemplateToken: string): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.js

@@ -1,28 +1,20 @@
 import { defineComponent, computed } from 'vue';
 import { useAdminLogoSettingsStore } from '@brand-page-maker/stores/admin-logo-settings';
-import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker';
 import { DESKTOP_HEIGHT, DESKTOP_WIDTH, MOBILE_HEIGHT, MOBILE_WIDTH, } from '@brand-page-maker/constants';
 export default defineComponent({
     setup() {
         const adminLogoSettingsStore = useAdminLogoSettingsStore();
-        const contentSettingsStore = useUiContentSettingsStore();
         const brandPageMakerStore = useBrandPageMakerStore();
         return {
             templates: computed(() => adminLogoSettingsStore.templates),
-            items: computed(() => contentSettingsStore.items),
             brandPageTitle: computed(() => brandPageMakerStore.brandPageTitle),
             brandPageType: computed(() => brandPageMakerStore.brandPageType),
             isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
-            isBrandPageOrIsBrandContact: computed(() => brandPageMakerStore.isBrandPageOrIsBrandContact),
             adminLogoSettingsStore,
         };
     },
     computed: {
-        canAddLogo() {
-            return (!this.isBrandSite &&
-                this.items.filter((x) => x.type === 'logo').length === 0);
-        },
         previewWidth() {
             return this.isBrandSite ? DESKTOP_WIDTH : MOBILE_WIDTH;
         },
@@ -31,12 +23,6 @@ export default defineComponent({
         },
     },
     methods: {
-        onAddLogoClick() {
-            if (!this.canAddLogo) {
-                return;
-            }
-            this.adminLogoSettingsStore.addLogoContent();
-        },
         async onTemplateSelected(logoTemplateToken) {
             await this.adminLogoSettingsStore.selectPreviewLogoTemplateModel({
                 logoTemplateToken,

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -933,6 +933,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             id: string;
             name: string;
             index?: number;
+            itemId?: string;
             doc: unknown;
         }): void;
         applyCardContrastToItem({ id }: {

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -412,6 +412,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             id: string;
             name: string;
             index?: number;
+            itemId?: string;
             doc: unknown;
         }): void;
         applyCardContrastToItem({ id }: {
@@ -978,65 +979,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             isCustomDomainEnabled: any;
         }): Promise<void>;
     }>;
-    navigationStyleSettingsStore: import("pinia").Store<"uiNavigationStyleSettings", import("@shared/navigation-style-settings/store").NavigationStyleSettingsState, {}, {
-        initialise(options: {
-            reset: boolean;
-        }): void;
-        setState({ newState, }: {
-            newState: Omit<import("@shared/navigation-style-settings/store").NavigationStyleSettingsState, "availableNavigationStyleConfigs" | "navigationStyleTypeConfigs">;
-        }): void;
-        setNavigationOrder({ section, renderAfterLogo, viewport, }: {
-            section: import("@shared/page-settings/models").PageSection;
-            renderAfterLogo: boolean;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        _setDefaultButtonStyle({ displayType, section, style, viewport, ownsTypography, }: {
-            displayType: import("@brand-page").NavigationDisplayType;
-            section: import("@shared/page-settings/models").PageSection;
-            style: BrandPageCssStyle;
-            viewport: import("@brand-page").ViewportsType;
-            ownsTypography?: boolean;
-        }): void;
-        _setSelectedButtonStyle({ displayType, section, style, viewport, }: {
-            displayType: import("@brand-page").NavigationDisplayType;
-            section: import("@shared/page-settings/models").PageSection;
-            style: BrandPageCssStyle;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        _setIconStyle({ displayType, section, style, viewport, }: {
-            displayType?: import("@brand-page").NavigationDisplayType;
-            section: import("@shared/page-settings/models").PageSection;
-            style: BrandPageCssStyle;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
-            displayType: import("@brand-page").NavigationDisplayType;
-            section: import("@shared/page-settings/models").PageSection;
-            value: string | undefined;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
-            section: import("@shared/page-settings/models").PageSection;
-            defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
-            selectedButtonStyle: BrandPageCssStyle;
-            iconStyle: BrandPageCssStyle;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        setDisplayType({ section, displayType, viewport, headerBackgroundColor, pageBackgroundColor, }: {
-            section: import("@shared/page-settings/models").PageSection;
-            displayType: import("@brand-page").NavigationDisplayType;
-            viewport: import("@brand-page").ViewportsType;
-            headerBackgroundColor?: string;
-            pageBackgroundColor?: string;
-        }): void;
-        renormalizeTextStylesForRole(type: string, textStyleOptions: import("@brand-page").TextStyleOptions | undefined): void;
-        setNavigationStyleOptionValue({ section, option, value, viewport, }: {
-            section: import("@shared/page-settings/models").PageSection;
-            option: import("../../models/navigation-style-configs").NavigationStyleConfigOption;
-            value: any;
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-    }>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("@shared/side-bar/store").SideBarState, {}, {
         setBrandPageSettingsTabVisibility(payload: {
             isVisible: boolean;
@@ -1151,6 +1093,10 @@ declare const _default: import("vue").DefineComponent<{}, {
             attempted_bytes: number;
             source: string;
         }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;
@@ -1211,7 +1157,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     onOverlayClick(item: ContentViewModel): void;
     onItemSelected(item: ContentItem<Content> | ContentViewModel): void;
     scrollToContentItemByItemId(itemId: any): void;
-    setNavigationOrder(payload: any): void;
     onPageHeaderContainerClick(): void;
     onPageFooterContainerClick(): void;
     onSaveContactWidgetClick(): void;
@@ -1280,16 +1225,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     showBrandCrowdLogo(): boolean;
     isRenderedForStorybook(): boolean;
     pageViewModel(): import("@brand-page").PageViewModel | undefined;
-    headerViewModelMobile(): any;
-    headerViewModelDesktop(): any;
-    isNavigationEmbeddedInLogoMobile(): boolean;
-    isNavigationEmbeddedInLogoDesktop(): boolean;
     sideMenuHeaderButtonViewModel(): import("@brand-page").ButtonViewModel | undefined;
     shouldShowNavigation(): boolean;
-    showNavigationAfterLogoMobile(): boolean;
-    showNavigationAfterLogoDesktop(): boolean;
-    bpShowTopNavigationMobile(): boolean;
-    bpShowTopNavigationDesktop(): boolean;
     slug(): string;
     pageHeadingText(): string;
     shouldShowSaveContactWidget(): boolean;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -4,7 +4,6 @@ import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '@shared/models';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useUiStore, useBrandPageMakerUserStore, } from '@brand-page-maker/stores';
 import { getContentSettingsFields, getContentSettingsTemplate, } from '@shared/content-settings/utils';
-import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -18,7 +17,6 @@ export default defineComponent({
         const brandPageMakerStore = useBrandPageMakerStore();
         const brandPageContainerStore = useBrandPageContainerStore();
         const brandPageMakerUserStore = useBrandPageMakerUserStore();
-        const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
         const sideBarStore = useUiSideBarStore();
         const pageSettingsStore = useUiPageSettingsStore();
         const uiStore = useUiStore();
@@ -38,7 +36,6 @@ export default defineComponent({
             contentSettingsStore,
             brandPageMakerStore,
             brandPageContainerStore,
-            navigationStyleSettingsStore,
             sideBarStore,
             pageSettingsStore,
             eventTracker,
@@ -192,9 +189,6 @@ export default defineComponent({
                 previewPageScroll.scrollTop = item.offsetTop;
             });
         },
-        setNavigationOrder(payload) {
-            this.navigationStyleSettingsStore.setNavigationOrder(payload);
-        },
         onPageHeaderContainerClick() {
             if (!this.isInteractivePreviewEnabled) {
                 return;

package/lib/src/brand-page-maker/components/navigation/Navigation.mixin.d.ts

@@ -82,8 +82,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onCreate-team-cards"?: ((...args: any[]) => any) | undefined;
 }>, {
     isPublished: boolean;
-    isSaving: boolean;
     isAdminMaker: boolean;
+    isSaving: boolean;
     backButtonLabel: string;
     isDesignCom: boolean;
     backUrl: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -534,6 +534,8 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             id: props.rawId,
             name: props.name,
             index: props.textItemIndex,
+            // An FAQ question's editor is bound to its item; Apply to all keeps that item's live doc.
+            itemId: props.item?.id,
             doc: sanitizeRteJson(editor.getJSON()),
         });
     };

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -62,6 +62,7 @@ export declare const EVENTS: {
     WEBSITE_MAKER_HISTORY_OVERSIZED: string;
     WEBSITE_MAKER_LIVE_PREVIEW_CLICK: string;
     WEBSITE_MAKER_LIVE_PREVIEW_MODAL: string;
+    WEBSITE_MAKER_UPDATE_HEADER_LOGO: string;
 };
 export declare const PREVIEW_CTA_LOCATIONS: {
     MAKER: string;
@@ -146,6 +147,10 @@ declare const useEventTracker: () => {
         attempted_bytes: number;
         source: string;
     }) => void;
+    sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+        setting: string;
+        viewport: string;
+    }) => void;
     sendSaveContactEvent: () => void;
     sendStartForFreeEvent: () => void;
     sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -43,6 +43,7 @@ export const EVENTS = {
     WEBSITE_MAKER_HISTORY_OVERSIZED: 'website_maker_history_oversized',
     WEBSITE_MAKER_LIVE_PREVIEW_CLICK: 'website_maker_live_preview_click',
     WEBSITE_MAKER_LIVE_PREVIEW_MODAL: 'website_maker_live_preview_modal',
+    WEBSITE_MAKER_UPDATE_HEADER_LOGO: 'website_maker_update_header_logo',
 };
 // The global `location` prop already means pre/post purchase, so the surface a
 // preview was launched from rides on cta_location, reusing existing values.
@@ -386,6 +387,10 @@ const useEventTracker = () => {
         sendHistoryOversizedEvent: (props) => {
             _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_OVERSIZED, props);
         },
+        // BP/BC header logo and header background changes; BS sends none.
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_UPDATE_HEADER_LOGO, props);
+        },
     };
 };
 export { useEventTracker };