@designcrowd/library.brand-page 5.17.21 → 5.17.23-ast-subnav

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -26,6 +26,7 @@ import {
   TEXT_ONLY,
 } from '../../constants';
 import { getRenderText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
 export interface FieldValue {
@@ -171,7 +172,11 @@ export default defineComponent({
         return '';
       }
 
-      return getRenderText(this.viewModel.description);
+      if (hasRTEContent(this.viewModel.description)) {
+        return this.viewModel.description;
+      } else {
+        return getRenderText(this.viewModel.description);
+      }
     },
 
     renderSuccessText(): string {
@@ -179,7 +184,21 @@ export default defineComponent({
         return '';
       }
 
-      return getRenderText(this.viewModel.successMessage);
+      if (hasRTEContent(this.viewModel.successMessage)) {
+        return this.viewModel.successMessage;
+      } else {
+        return getRenderText(this.viewModel.successMessage);
+      }
+    },
+
+    successMessageColorStyle(): BrandPageCssStyle {
+      const color = this.viewModel.successMessageStyle?.color;
+
+      if (color) {
+        return { color };
+      }
+
+      return {};
     },
   },
   watch: {

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -37,7 +37,7 @@
             v-if="renderText"
             :text-style="viewModel.descriptionStyle"
             :text="renderText"
-            element="p"
+            element="div"
             class="tw-text-center tw-mb-2 tw-text-base"
           />
           <div v-if="!isSubmitting">
@@ -97,10 +97,9 @@
             {{ submitError }}
           </p>
         </form>
-        <div v-else>
+        <div v-else :style="successMessageColorStyle">
           <TextWrapper
             v-if="viewModel.successMessage"
-            :text-style="viewModel.messageTextColor"
             :text="renderSuccessText"
             element="p"
             :class="'tw-text-center tw-font-bold tw-my-0.5'"
@@ -125,14 +124,14 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
-              element="h1"
+              element="div"
               class="tw-text-center tw-mb-4 tw-text-base"
             />
             <TextWrapper
               v-if="renderText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
-              element="p"
+              element="div"
               class="tw-text-center tw-mb-4 tw-text-base"
             />
             <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
@@ -199,10 +198,9 @@
               {{ submitError }}
             </p>
           </form>
-          <div v-else>
+          <div v-else :style="successMessageColorStyle">
             <TextWrapper
               v-if="viewModel.successMessage"
-              :text-style="viewModel.messageTextColor"
               :text="renderSuccessText"
               element="p"
               :class="'tw-text-center tw-font-bold tw-my-0.5'"
@@ -226,14 +224,14 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
-              element="h1"
+              element="div"
               class="tw-text-center tw-mb-4 tw-text-base"
             />
             <TextWrapper
               v-if="renderText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
-              element="p"
+              element="div"
               class="tw-text-center tw-mb-4 tw-text-base"
             />
           </div>
@@ -310,10 +308,13 @@
             class="tw-w-full tw-flex tw-justify-center tw-col-span-2"
           />
         </span>
-        <div v-else class="tw-w-full tw-flex tw-justify-center">
+        <div
+          v-else
+          class="tw-w-full tw-flex tw-justify-center"
+          :style="successMessageColorStyle"
+        >
           <TextWrapper
             v-if="viewModel.successMessage"
-            :text-style="viewModel.messageTextColor"
             :text="renderSuccessText"
             element="p"
             :class="'tw-text-center tw-font-bold tw-my-0.5'"
@@ -357,14 +358,14 @@
                   v-if="viewModel.title && !isSubmitting"
                   :text-style="viewModel.titleStyle"
                   :text="viewModel.title"
-                  element="h1"
+                  element="div"
                   class="tw-w-full tw-mb-2"
                 />
                 <TextWrapper
                   v-if="renderText"
                   :text-style="viewModel.descriptionStyle"
                   :text="renderText"
-                  element="p"
+                  element="div"
                   class="tw-text-center tw-mb-4 tw-text-base"
                 />
                 <form @submit.prevent="submitContactForm">
@@ -437,10 +438,9 @@
                   </p>
                 </form>
               </span>
-              <div v-else>
+              <div v-else :style="successMessageColorStyle">
                 <TextWrapper
                   v-if="viewModel.successMessage"
-                  :text-style="viewModel.messageTextColor"
                   :text="renderSuccessText"
                   element="p"
                   :class="'tw-text-center tw-font-bold tw-my-0.5'"

package/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.ts

@@ -5,6 +5,15 @@ import ImageModalMixin from '../mixins/image-modal.mixin';
 import cloneDeep from 'lodash.clonedeep';
 import type { BrandPageContext, ImageItem } from '@brand-page/models';
 
+// Number of slides on each side of the current slide to keep mounted with a
+// real <img>. Slides outside this window render an empty placeholder so the
+// browser does not request full-resolution images for the entire gallery on
+// modal open — required to prevent mobile tab crashes on large galleries.
+// 3 (= 7 slides total) is wide enough that a user dragging slowly across
+// 2-3 slides never exposes a placeholder, while still capping decoded
+// image memory well under mobile per-tab limits.
+const IMAGE_RENDER_WINDOW = 3;
+
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],
   props: {
@@ -40,6 +49,7 @@ export default defineComponent({
       isImageModalLoading: false,
       carouselImages: [] as any[][] | undefined,
       showControl: true,
+      carouselComponentRef: 'image-gallery-carousel',
     };
   },
   computed: {
@@ -65,7 +75,7 @@ export default defineComponent({
 
     swiperOptions() {
       return {
-        initialSlide: 0,
+        initialSlide: this.selectedImageIndex ?? 0,
         loop: this.images.length > 1,
         slidesPerGroup: 1,
         slidesPerView: 1,
@@ -99,10 +109,6 @@ export default defineComponent({
       }
 
       this.isImageModalLoading = true;
-
-      this.swiperOptions.initialSlide = newIndex;
-
-      // this.$nextTick(() => this.checkImageModalImageComplete());
     },
 
     images: {
@@ -154,5 +160,108 @@ export default defineComponent({
     onImageModalClose() {
       this.$emit('close');
     },
+
+    isSlideInRenderWindow(index: number): boolean {
+      if (this.currentImageIndex === undefined) {
+        return false;
+      }
+
+      const total = this.images.length;
+
+      if (total === 0) {
+        return false;
+      }
+
+      const direct = Math.abs(index - this.currentImageIndex);
+      // For looped galleries, the shortest path between two slides may wrap
+      // around the end. Use whichever distance is smaller.
+      const wrapped = total - direct;
+      const distance = Math.min(direct, wrapped);
+
+      return distance <= IMAGE_RENDER_WINDOW;
+    },
+
+    onCarouselLoaded() {
+      // Reach through the Carousel ref to bind directly to the underlying
+      // Swiper instance — the shared Carousel doesn't emit slide-change
+      // events. Keeps `currentImageIndex` in sync with user navigation
+      // (arrows, swipes, keyboard) so the render window slides with the
+      // user.
+      //
+      // NOTE: `currentImageIndex` must not be bound back to Carousel's
+      // `:slide-index` prop. The shared Carousel watches that prop and
+      // calls `swiper.update()` + `swiper.slideTo()` on every change.
+      // With `slideChangeTransitionStart` updating currentImageIndex on
+      // every swipe, that creates a feedback loop where Swiper redoes a
+      // full layout recalculation on every user gesture — visible as
+      // jank and capable of crashing the tab on real mobile devices.
+      const carousel = this.$refs[this.carouselComponentRef] as any;
+      const swiper = carousel?.swiper;
+
+      if (!swiper || typeof swiper.on !== 'function') {
+        return;
+      }
+
+      // Listen at the *start* of the transition so the incoming neighbour
+      // mounts and starts loading while the slide animation is still
+      // playing. Listening on `slideChange` (end of transition) leaves a
+      // gap during fast swipes where the next neighbour is still a
+      // placeholder when it reaches the viewport — visible as a flicker.
+      const handleSlideChange = () => {
+        // `realIndex` reflects the underlying slide index when loop mode
+        // duplicates slides; `activeIndex` would include those duplicates.
+        const next =
+          typeof swiper.realIndex === 'number'
+            ? swiper.realIndex
+            : swiper.activeIndex;
+
+        if (typeof next === 'number' && next !== this.currentImageIndex) {
+          this.currentImageIndex = next;
+        }
+      };
+
+      swiper.on('slideChangeTransitionStart', handleSlideChange);
+      // Also handle instant jumps that bypass the transition (e.g. when
+      // navigation arrows trigger no-animation slides).
+      swiper.on('slideChange', handleSlideChange);
+    },
+
+    // Only the currently-viewed slide's load lifecycle should drive the
+    // modal's Loader. Neighbour FallbackImages mounted by the render window
+    // emit `image-loading` synchronously in their onMounted hook; without
+    // these gates that emission flips `isImageModalLoading` true mid-swipe,
+    // briefly flashing the spinner over the slide the user is actually on
+    // — the flicker reported on real mobile devices.
+    onSlideImageLoading(index: number) {
+      if (index === this.currentImageIndex) {
+        this.imageLoading();
+      }
+    },
+
+    onSlideImageLoaded(index: number) {
+      if (index === this.currentImageIndex) {
+        this.checkImageLoading(false);
+      }
+    },
+
+    onSlideImageError(index: number) {
+      if (index === this.currentImageIndex) {
+        this.checkImageLoading(true);
+      }
+    },
+
+    placeholderStyle(slide: any): Record<string, string> {
+      // Sized so the placeholder occupies the exact space the loaded image
+      // would, preventing slide-height jumps when the render window swaps
+      // between placeholder and real image. Mirrors the image's own
+      // `max-width: 100%` + `max-height: 90vh` + intrinsic aspect ratio.
+      if (!slide?.width || !slide?.height) {
+        return {};
+      }
+
+      return {
+        aspectRatio: `${slide.width} / ${slide.height}`,
+      };
+    },
   },
 });

package/src/brand-page/components/image-gallery/ImageGalleryModal.vue

@@ -6,13 +6,15 @@
     @modal-closed="onImageModalClose"
   >
     <Carousel
+      v-if="isImageModalVisible"
+      :ref="carouselComponentRef"
       :classes="['tw-h-full', 'tw-max-h-full', 'tw-justify-center']"
       :cards="carouselImages"
       :options="swiperOptions"
-      :slide-index="currentImageIndex"
       :show-bullets="false"
       :show-controls="showCarouselControls"
       :navigation-unique-indexer="navigationUniqueIndexer"
+      @on-carousel-load="onCarouselLoaded"
     >
       <template #arrow-left>
         <div id="button-prev" :class="navigationPrevClass">
@@ -30,7 +32,7 @@
           />
         </div>
       </template>
-      <template #slide="{ slide }">
+      <template #slide="{ slide, index }">
         <div
           class="tw-text-center tw-flex tw-flex-col tw-items-center tw-justify-center tw-overflow-auto tw-h-auto"
           :class="{ 'tw-justify-center': !slide.imageTitle }"
@@ -41,18 +43,27 @@
           >
             {{ slide.imageTitle }}
           </h3>
-          <Loader v-if="isImageModalLoading" class="tw-m-28" />
+          <Loader
+            v-if="isImageModalLoading && index === currentImageIndex"
+            class="tw-m-28"
+          />
           <FallbackImage
-            :key="`modal-slide-${currentImageIndex}`"
-            :ref="imageModalImageRef"
+            v-if="isSlideInRenderWindow(index)"
+            :key="`modal-slide-${index}`"
+            :ref="index === currentImageIndex ? imageModalImageRef : undefined"
             :image-url="slide.imageUrl"
             class="c-modal-image"
             :alt="slide.imageTitle || altText"
             :context="context"
             :content-index="contentIndex"
-            @image-loaded="checkImageLoading(false)"
-            @image-loading="imageLoading"
-            @image-error="checkImageLoading(true)"
+            @image-loaded="onSlideImageLoaded(index)"
+            @image-loading="onSlideImageLoading(index)"
+            @image-error="onSlideImageError(index)"
+          />
+          <div
+            v-else
+            class="c-modal-image-placeholder"
+            :style="placeholderStyle(slide)"
           />
         </div>
       </template>
@@ -115,4 +126,10 @@ export default {
   @apply tw-max-w-full;
   max-height: 90vh;
 }
+
+.c-modal-image-placeholder {
+  @apply tw-max-w-full;
+  width: 100%;
+  max-height: 90vh;
+}
 </style>

package/src/brand-page/components/navigation/navigation-carousel/NavigationCarousel.vue

@@ -95,11 +95,7 @@
               params: nestedItem.routeParams,
             }"
             class="dropdown-item"
-            :style="[
-              isNavItemActive(nestedItem)
-                ? navigation.selectedButtonStyle
-                : navigation.defaultButtonStyle,
-            ]"
+            :style="getDropdownItemStyle(nestedItem)"
             @click="onDropdownItemClick"
           >
             {{ nestedItem.displayName }}
@@ -147,12 +143,16 @@ const hoveredSlide = ref<string | null>(null);
 const hoveredNavItem = ref<NavItemViewModel | null>(null);
 const slideRefs = ref<Record<string, HTMLElement>>({});
 const dropdownMenuRef = ref<HTMLElement | null>(null);
-const dropdownStyle = ref<Record<string, string>>({
+const dropdownPositionStyle = ref<Record<string, string>>({
   position: 'fixed',
   top: '-9999px',
   left: '-9999px',
   zIndex: '1',
 });
+const dropdownStyle = computed(() => ({
+  ...dropdownPositionStyle.value,
+  backgroundColor: props.navigation.subNavBackgroundColor ?? '#ffffff',
+}));
 let hideTimeout: any = null;
 let hoverJustHappened = false; // This will prevent the mobile interaction clashing with desktop hovering
 
@@ -225,7 +225,7 @@ const updateDropdownPosition = (element: HTMLElement) => {
     left = containerRect.right - effectiveWidth;
   }
 
-  dropdownStyle.value = {
+  dropdownPositionStyle.value = {
     ...getRootInheritedStyles(),
     position: 'fixed',
     top: `${rect.bottom + 4}px`,
@@ -549,6 +549,18 @@ onUnmounted(() => {
 
 const navItems = computed(() => props.pageNavigation.navItems);
 
+const getDropdownItemStyle = (navItem: NavItemViewModel) => {
+  const isActive = isNavItemActive(navItem);
+  const baseStyle = isActive
+    ? props.navigation.selectedButtonStyle
+    : props.navigation.defaultButtonStyle;
+
+  return {
+    ...baseStyle,
+    backgroundColor: isActive ? baseStyle.backgroundColor : 'transparent',
+  };
+};
+
 const dropdownMaxWidth = computed(() =>
   isMobileDisplay.value ? '240px' : '380px',
 );
@@ -618,7 +630,6 @@ const dropdownMaxWidth = computed(() =>
 }
 
 .dropdown-menu {
-  background: white;
   min-width: 150px;
   max-height: 240px;
   overflow-x: hidden;

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.ts

@@ -86,13 +86,17 @@ export default defineComponent({
       return navItem.relativePath === this.context.currentPageRelativePath;
     },
     getSubNavItemStyle(navItem: NavItemViewModel): BrandPageCssStyle {
-      const baseStyle = this.isCurrentPage(navItem)
+      const isActive = this.isCurrentPage(navItem);
+      const baseStyle = isActive
         ? this.selectedButtonStyle
         : this.defaultButtonStyle;
 
       return {
         ...baseStyle,
-        paddingLeft: '32px', // 16px additional indentation (base is 16px)
+        paddingLeft: '32px',
+        backgroundColor: isActive
+          ? baseStyle.backgroundColor
+          : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
       };
     },
     closeSideMenu(): void {

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { hasRTEContent } from '@brand-page-maker/utils';
+import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
 import {
   type FluidTextData,
   type TextStyleDeclaration,
@@ -77,6 +77,10 @@ const isRTEContent = computed(() => {
 });
 
 const sanitizeText = computed(() => {
+  if (isRTEContent.value && !getPlainTextFromRTE(props.text)) {
+    return '';
+  }
+
   return props.text;
 });
 

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

@@ -387,7 +387,7 @@ export interface ContactFormContent extends Content {
   descriptionStyle?: TextStyleDeclaration;
   buttonTextStyle?: TextStyleDeclaration;
   backgroundStyle?: BrandPageCssStyle;
-  messageTextColor?: BrandPageCssStyle;
+  successMessageStyle?: TextStyleDeclaration;
   cardStyle?: BrandPageCssStyle;
   colorReplacements?: ColorReplacement[];
   mediaType?: string;

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

@@ -6,6 +6,7 @@ import {
   FONT_FAMILY_CONFIGS,
   FONT_SIZE_BODY,
   FONT_WEIGHT_NORMAL,
+  STYLE_THEME_KEYS,
   defaultHamburgerNavigation,
   type NavigationDisplayType,
   NAVIGATION_DISPLAY,
@@ -21,6 +22,7 @@ export class NavigationMenuStyles {
   public defaultButtonStyle: TextStyleDeclaration;
   public selectedButtonStyle: BrandPageCssStyle;
   public iconStyle: BrandPageCssStyle;
+  public subNavBackgroundColor?: string;
 
   constructor(
     options: Partial<NavigationMenuStyles>,
@@ -43,9 +45,32 @@ export class NavigationMenuStyles {
       defaultOptions.iconStyle,
       options.iconStyle || {},
     );
+
+    this.subNavBackgroundColor =
+      options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
   }
 }
 
+const getDefaultSubNavBackgroundColor = (
+  defaultTextColor: string | undefined,
+): string => {
+  if (
+    defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+    defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor
+  ) {
+    return STYLE_THEME_KEYS.LogoBackgroundColor;
+  }
+
+  if (
+    defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+    defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor
+  ) {
+    return STYLE_THEME_KEYS.LogoTextColor;
+  }
+
+  return '#ffffff';
+};
+
 type NavigationStylesOptionType = Partial<
   Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>
 > & {
@@ -60,6 +85,7 @@ abstract class NavigationStyles implements NavigationMenuStyles {
   public defaultButtonStyle: TextStyleDeclaration;
   public selectedButtonStyle: BrandPageCssStyle;
   public iconStyle: BrandPageCssStyle;
+  public subNavBackgroundColor?: string;
   public isLogoVisible: boolean;
   public hamburgerMenuStyle: NavigationMenuStyles;
   public viewport: ViewportsType;
@@ -119,6 +145,10 @@ abstract class NavigationStyles implements NavigationMenuStyles {
       option?.iconStyle || {},
     );
 
+    this.subNavBackgroundColor =
+      option?.subNavBackgroundColor ??
+      getDefaultSubNavBackgroundColor(option?.defaultButtonStyle?.color);
+
     this.isLogoVisible = option?.isLogoVisible || true;
 
     this.hamburgerMenuStyle = new NavigationMenuStyles(
@@ -141,6 +171,7 @@ abstract class NavigationStyles implements NavigationMenuStyles {
           color: theme?.secondaryColor,
           backgroundColor: theme?.primaryColor,
         },
+        subNavBackgroundColor: theme?.secondaryColor ?? '#ffffff',
       },
     );
   }

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

@@ -192,6 +192,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -206,6 +207,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -263,6 +265,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -277,6 +280,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -446,7 +450,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 13,
+    "v": 15,
   },
   "useOldLogoRenderSize": true,
 }
@@ -644,6 +648,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -658,6 +663,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -715,6 +721,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -729,6 +736,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -881,7 +889,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 13,
+    "v": 15,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1079,6 +1087,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -1093,6 +1102,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -1150,6 +1160,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -1164,6 +1175,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -1323,7 +1335,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 13,
+    "v": 15,
   },
   "useOldLogoRenderSize": true,
 }