@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

package/src/brand-page/components/banner-section/BannerSection.mixin.ts

@@ -0,0 +1,210 @@
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import ComponentCommonMixin from '../mixins/component-common.mixin';
+import type {
+  BannerSectionViewModel,
+  ButtonViewModel,
+} from '@brand-page/view-models';
+import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
+import type { BrandPageContext } from '@brand-page/models';
+import {
+  ALIGN_CENTERED,
+  ALIGN_LEFT_ALIGNED,
+  ALIGN_RIGHT_ALIGNED,
+  BIG_IMAGE,
+  ALIGN_LEFT_BIG_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CARD_LEFT_IMAGE,
+} from '../../constants';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
+
+export default defineComponent({
+  mixins: [ComponentCommonMixin],
+  props: {
+    viewModel: {
+      type: Object as PropType<BannerSectionViewModel>,
+      required: true,
+    },
+    context: {
+      type: Object as PropType<BrandPageContext>,
+      required: true,
+    },
+    containerClientWidth: {
+      type: Number as PropType<number | undefined>,
+      required: false,
+      default: undefined,
+    },
+    containerClientHeight: {
+      type: Number as PropType<number | undefined>,
+      required: false,
+      default: undefined,
+    },
+    contentIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      shouldStackOnTop: false,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    });
+  },
+  unmounted() {
+    if (typeof window !== undefined) {
+      window.removeEventListener(`resize`, this.onResize);
+    }
+  },
+  computed: {
+    displayAlignClass() {
+      switch (this.viewModel.displayStyle) {
+        case ALIGN_CENTERED:
+          return 'tw-items-center tw-w-full';
+        case BIG_IMAGE:
+          return 'tw-items-center tw-w-full';
+        case ALIGN_LEFT_ALIGNED:
+          return 'tw-items-start tw-w-2/3';
+        case ALIGN_RIGHT_ALIGNED:
+          return 'tw-items-end tw-w-2/3';
+        case ALIGN_LEFT_BIG_IMAGE:
+          return 'tw-items-start tw-w-2/3';
+        case ALIGN_CARD_CENTER_IMAGE:
+          return 'tw-items-center tw-w-full';
+        case ALIGN_CARD_LEFT_IMAGE:
+          return 'tw-items-end';
+        default:
+          return '';
+      }
+    },
+    displayButtonClass() {
+      if (this.viewModel.buttonTextStyle) {
+        switch (this.viewModel.buttonTextStyle.textAlign) {
+          case 'left':
+            return 'tw-justify-start';
+          case 'center':
+            return 'tw-justify-center';
+          case 'right':
+            return 'tw-justify-end';
+          default:
+            return '';
+        }
+      } else {
+        return this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+          this.viewModel.displayStyle === ALIGN_CENTERED
+          ? 'tw-justify-center'
+          : 'tw-justify-start';
+      }
+    },
+    isLeftImageAligned(): boolean {
+      if (this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE) {
+        return true;
+      }
+
+      return false;
+    },
+    isRightImageAligned(): boolean {
+      if (this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE) {
+        return true;
+      }
+
+      return false;
+    },
+
+    isDividedContent(): boolean {
+      if (
+        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    isCardBannerContent(): boolean {
+      if (
+        this.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    isCardAlignedOnLeft() {
+      return this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE;
+    },
+    getbuttonViewModel(): ButtonViewModel {
+      const { buttonViewModel, buttonLinkType, pageSlug } = this.viewModel;
+
+      buttonViewModel.buttonLinkType = buttonLinkType;
+      buttonViewModel.pageSlug = pageSlug;
+
+      return buttonViewModel;
+    },
+
+    shouldShowButton(): boolean {
+      return shouldShowButtonUtil({
+        buttonText: this.viewModel.buttonText,
+        buttonViewModel: this.viewModel.buttonViewModel,
+      });
+    },
+
+    isHorizontalAligned(): boolean {
+      return (
+        this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
+        this.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
+        this.viewModel.displayStyle === ALIGN_LEFT_FULL_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE
+      );
+    },
+    isBigImageAligned(): boolean {
+      return (
+        this.viewModel.displayStyle === ALIGN_LEFT_BIG_IMAGE ||
+        this.viewModel.displayStyle === ALIGN_CARD_LEFT_IMAGE
+      );
+    },
+    renderText(): string {
+      if (!this.viewModel.description) {
+        return '';
+      }
+
+      if (hasRTEContent(this.viewModel.description)) {
+        return this.viewModel.description;
+      } else {
+        return getRenderText(this.viewModel.description);
+      }
+    },
+    hasDescriptionText(): boolean {
+      if (hasRTEContent(this.viewModel.description)) {
+        return escapeContentText(this.viewModel.description) !== '';
+      } else {
+        return this.viewModel?.description?.length > 0;
+      }
+    },
+    overlayColor(): BrandPageCssStyle {
+      return this.viewModel.overlayColor || 'rgb(0,0,0)';
+    },
+    opacity(): number {
+      return this.viewModel.overlayOpacity;
+    },
+    backgroundOverlay(): BrandPageCssStyle {
+      return {
+        background: this.overlayColor.backgroundColor,
+        opacity: `${this.opacity}%`,
+      };
+    },
+  },
+  methods: {
+    onResize() {
+      this.shouldStackOnTop = window.innerWidth < 640;
+    },
+  },
+});

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -8,7 +8,10 @@
         'c_banner--with-image-overlay tw-flex tw-flex-col': isDividedContent,
         'tw-px-6': !isDividedContent,
       }"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      :style="[
+        viewModel.backgroundStyle,
+        viewModel.isBigImageType ? {} : contentPaddingStyle,
+      ]"
       style="container-type: inline-size"
     >
       <Media
@@ -130,6 +133,7 @@
             viewModel.displayStyle === 'right-aligned',
         }"
         class="tw-flex tw-gap-8 tw-w-full tw-h-full tw-items-center c_banner-container"
+        :style="viewModel.isBigImageType ? contentPaddingStyle : undefined"
       >
         <div
           v-if="isHorizontalAligned"

package/src/brand-page/components/brand-page-footer/BrandPageFooter.vue

@@ -32,7 +32,7 @@
   </footer>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch, shallowRef } from 'vue';
+import { computed, onMounted, reactive, watch, shallowRef } from 'vue';
 import { BRAND_PAGE_TYPES, type BrandPageContext } from '@brand-page/models';
 import {
   Icon,

package/src/brand-page/components/image/Image.mixin.ts

@@ -52,7 +52,7 @@ export default defineComponent({
     shouldFitImage(): boolean {
       return Boolean(
         this.viewModel.aspectRatio &&
-          ASPECT_RATIOS[this.viewModel.aspectRatio as string],
+        ASPECT_RATIOS[this.viewModel.aspectRatio as string],
       );
     },
     altText(): string {

package/src/brand-page/components/image/Image.test.ts

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { faker } from '@faker-js/faker';
 import Image from './Image.vue';
 import {

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

@@ -7,8 +7,7 @@ import type { ImageGalleryImageClickPayload } from '../models';
 import type { BrandPageContext, ImageGalleryItem } from '../../../models';
 import { getImageAltText } from '../../../utils';
 
-interface IndexedImageGalleryItem extends Omit<ImageGalleryItem, 'id'> {
-  // Local rendering index, distinct from the stable string `id` on ImageItem.
+interface IndexedImageGalleryItem extends ImageGalleryItem {
   id: number;
 }
 

package/src/brand-page/components/images-section/ImagesSection.vue

@@ -57,7 +57,6 @@
 </template>
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
-import type { PropType } from 'vue';
 import TextMediaSection from '../text-media-section/TextMediaSection.vue';
 import ImageGalleryModal from '../image-gallery/ImageGalleryModal.vue';
 import BpImage from '../image/Image.vue';

package/src/brand-page/components/logo/LogoRender.vue

@@ -1,188 +1,188 @@
-<template>
-  <div
-    data-component="logo-render"
-    :class="[
-      'logo tw-relative tw-h-full',
-      isBrandSite ? 'brand-site' : 'brand-page',
-    ]"
-  >
-    <figure
-      v-if="logoImageUrl || !isPreview"
-      class="logo__container"
-      :class="{
-        'tw-mb-10': hasMarginBottom,
-      }"
-      :style="[logoBackgroundStyles, figureDimensions]"
-    >
-      <div
-        :style="{
-          ...(props.isBrandPageOrIsBrandContact &&
-          !props.viewModel?.useOldLogoRenderSize
-            ? {
-                margin: 'var(--logo-spacing) auto',
-                height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,
-                maxWidth: logoMaxWidth,
-              }
-            : {
-                height: '100%',
-                width: '100%',
-              }),
-        }"
-      >
-        <img
-          v-if="logoImageUrl"
-          data-test-tag="logo"
-          class="logo__image"
-          :src="logoImageUrl"
-          :alt="altText"
-          :style="[logoStyle, marginStyle]"
-        />
-      </div>
-    </figure>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, ref, watch, onServerPrefetch, onMounted } from 'vue';
-import type { LogoViewModel } from '@brand-page/view-models';
-import { LogoCacheRepository } from '../../repositories';
-import {
-  DEFAULT_LOGO_HEIGHT,
-  DEFAULT_LOGO_WIDTH,
-  LOGO_SLIDER_DESKTOP_MAX,
-  LOGO_SLIDER_MOBILE_MAX,
-} from '../../constants';
-import type { ViewportsType } from '@brand-page/models';
-
-const props = withDefaults(
-  defineProps<{
-    isPreview: boolean;
-    disableServerRender?: boolean;
-    hasMarginBottom: boolean;
-    isBrandSite: boolean;
-    isBrandPageOrIsBrandContact: boolean;
-    viewModel?: LogoViewModel;
-    altText: string;
-    isMobile?: boolean;
-  }>(),
-  {
-    isPreview: false,
-    hasMarginBottom: false,
-    altText: '',
-    disableServerRender: false,
-  },
-);
-
-const logoImageSvgUrl = ref<string | undefined>(undefined);
-
-const logoImageBase64Url = computed(() => {
-  return typeof props.viewModel?.logoImageBase64Url === 'string' &&
-    props.viewModel.logoImageBase64Url
-    ? props.viewModel.logoImageBase64Url
-    : undefined;
-});
-
-const logoBackgroundStyles = computed(() => {
-  return `background: ${props.viewModel?.styles.backgroundStyle.backgroundColor}`;
-});
-
-const figureDimensions = computed(() => {
-  return !props.viewModel?.useOldLogoRenderSize
-    ? {
-        width: '100%',
-        height: '100%',
-      }
-    : {};
-});
-
-const logoImageUrl = computed(() => {
-  if (typeof logoImageBase64Url.value !== 'undefined') {
-    return logoImageBase64Url.value;
-  }
-  return logoImageSvgUrl.value;
-});
-
-const logoHeight = computed(() => {
-  return props.viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT;
-});
-
-const logoWidth = computed(() => {
-  return props.viewModel?.logoImageWidth || DEFAULT_LOGO_WIDTH;
-});
-
-const logoMaxWidth = computed(() => {
-  if (props.isMobile) {
-    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
-  }
-  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
-});
-
-const logoStyle = computed(() => {
-  return props.viewModel?.useOldLogoRenderSize
-    ? {
-        width: '100%',
-        height: '100%',
-        'max-width': logoWidth.value,
-        'max-height': logoHeight.value,
-      }
-    : ({
-        width: '100%',
-        height: '100%',
-      } as any);
-});
-
-const marginStyle = computed(() => {
-  return props.viewModel?.useOldLogoRenderSize
-    ? { margin: 'var(--logo-spacing) auto' }
-    : {};
-});
-
-const updateLogoImageSvgUrlAsync = async () => {
-  if (
-    logoImageBase64Url.value ||
-    (!props.viewModel?.logoTemplateImage?.logoTemplateToken &&
-      !props.viewModel?.logoImage?.logoDraftToken)
-  ) {
-    return;
-  }
-
-  try {
-    const logoCacheRepo = LogoCacheRepository.getInstance();
-
-    logoImageSvgUrl.value = props.viewModel.logoTemplateImage?.logoTemplateToken
-      ? await logoCacheRepo.getLogoSvgUrlByLogoTemplateImageAsync(
-          props.viewModel.logoTemplateImage,
-        )
-      : await logoCacheRepo.getLogoSvgUrlByLogoImageAsync(
-          props.viewModel.logoImage,
-        );
-  } catch (err) {
-    console.error('unable to retrieve logo image svg data', err);
-  }
-};
-
-watch(props, updateLogoImageSvgUrlAsync, { deep: true });
-
-onServerPrefetch(() => {
-  if (!props.disableServerRender) {
-    updateLogoImageSvgUrlAsync();
-  }
-});
-
-onMounted(async () => {
-  if (!logoImageSvgUrl.value) {
-    await updateLogoImageSvgUrlAsync();
-  }
-});
-</script>
-<style scoped>
-.logo__container {
-  border: 0.125rem solid var(--logo-border-colour);
-  border-radius: 0.75rem;
-}
-
-.logo__image {
-  display: block;
-  object-fit: contain;
-  height: 6rem;
-}
-</style>
+<template>
+  <div
+    data-component="logo-render"
+    :class="[
+      'logo tw-relative tw-h-full',
+      isBrandSite ? 'brand-site' : 'brand-page',
+    ]"
+  >
+    <figure
+      v-if="logoImageUrl || !isPreview"
+      class="logo__container"
+      :class="{
+        'tw-mb-10': hasMarginBottom,
+      }"
+      :style="[logoBackgroundStyles, figureDimensions]"
+    >
+      <div
+        :style="{
+          ...(props.isBrandPageOrIsBrandContact &&
+          !props.viewModel?.useOldLogoRenderSize
+            ? {
+                margin: 'var(--logo-spacing) auto',
+                height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,
+                maxWidth: logoMaxWidth,
+              }
+            : {
+                height: '100%',
+                width: '100%',
+              }),
+        }"
+      >
+        <img
+          v-if="logoImageUrl"
+          data-test-tag="logo"
+          class="logo__image"
+          :src="logoImageUrl"
+          :alt="altText"
+          :style="[logoStyle, marginStyle]"
+        />
+      </div>
+    </figure>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch, onServerPrefetch, onMounted } from 'vue';
+import type { LogoViewModel } from '@brand-page/view-models';
+import { LogoCacheRepository } from '../../repositories';
+import {
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+  LOGO_SLIDER_DESKTOP_MAX,
+  LOGO_SLIDER_MOBILE_MAX,
+} from '../../constants';
+
+const props = withDefaults(
+  defineProps<{
+    isPreview: boolean;
+    disableServerRender?: boolean;
+    hasMarginBottom: boolean;
+    isBrandSite: boolean;
+    isBrandPageOrIsBrandContact: boolean;
+    viewModel?: LogoViewModel;
+    altText: string;
+    isMobile?: boolean;
+  }>(),
+  {
+    isPreview: false,
+    hasMarginBottom: false,
+    altText: '',
+    disableServerRender: false,
+    viewModel: undefined,
+  },
+);
+
+const logoImageSvgUrl = ref<string | undefined>(undefined);
+
+const logoImageBase64Url = computed(() => {
+  return typeof props.viewModel?.logoImageBase64Url === 'string' &&
+    props.viewModel.logoImageBase64Url
+    ? props.viewModel.logoImageBase64Url
+    : undefined;
+});
+
+const logoBackgroundStyles = computed(() => {
+  return `background: ${props.viewModel?.styles.backgroundStyle.backgroundColor}`;
+});
+
+const figureDimensions = computed(() => {
+  return !props.viewModel?.useOldLogoRenderSize
+    ? {
+        width: '100%',
+        height: '100%',
+      }
+    : {};
+});
+
+const logoImageUrl = computed(() => {
+  if (typeof logoImageBase64Url.value !== 'undefined') {
+    return logoImageBase64Url.value;
+  }
+  return logoImageSvgUrl.value;
+});
+
+const logoHeight = computed(() => {
+  return props.viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+});
+
+const logoWidth = computed(() => {
+  return props.viewModel?.logoImageWidth || DEFAULT_LOGO_WIDTH;
+});
+
+const logoMaxWidth = computed(() => {
+  if (props.isMobile) {
+    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
+  }
+  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
+});
+
+const logoStyle = computed(() => {
+  return props.viewModel?.useOldLogoRenderSize
+    ? {
+        width: '100%',
+        height: '100%',
+        'max-width': logoWidth.value,
+        'max-height': logoHeight.value,
+      }
+    : ({
+        width: '100%',
+        height: '100%',
+      } as any);
+});
+
+const marginStyle = computed(() => {
+  return props.viewModel?.useOldLogoRenderSize
+    ? { margin: 'var(--logo-spacing) auto' }
+    : {};
+});
+
+const updateLogoImageSvgUrlAsync = async () => {
+  if (
+    logoImageBase64Url.value ||
+    (!props.viewModel?.logoTemplateImage?.logoTemplateToken &&
+      !props.viewModel?.logoImage?.logoDraftToken)
+  ) {
+    return;
+  }
+
+  try {
+    const logoCacheRepo = LogoCacheRepository.getInstance();
+
+    logoImageSvgUrl.value = props.viewModel.logoTemplateImage?.logoTemplateToken
+      ? await logoCacheRepo.getLogoSvgUrlByLogoTemplateImageAsync(
+          props.viewModel.logoTemplateImage,
+        )
+      : await logoCacheRepo.getLogoSvgUrlByLogoImageAsync(
+          props.viewModel.logoImage,
+        );
+  } catch (err) {
+    console.error('unable to retrieve logo image svg data', err);
+  }
+};
+
+watch(props, updateLogoImageSvgUrlAsync, { deep: true });
+
+onServerPrefetch(() => {
+  if (!props.disableServerRender) {
+    updateLogoImageSvgUrlAsync();
+  }
+});
+
+onMounted(async () => {
+  if (!logoImageSvgUrl.value) {
+    await updateLogoImageSvgUrlAsync();
+  }
+});
+</script>
+<style scoped>
+.logo__container {
+  border: 0.125rem solid var(--logo-border-colour);
+  border-radius: 0.75rem;
+}
+
+.logo__image {
+  display: block;
+  object-fit: contain;
+  height: 6rem;
+}
+</style>

package/src/brand-page/components/navigation/hamburger/HamburgerNavigation.mixin.ts

@@ -10,6 +10,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['open-side-menu'],
 
   computed: {
     iconStyle(): BrandPageCssStyle {