@designcrowd/library.brand-page 5.19.2 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.19.2",
+  "version": "6.0.0",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,9 +55,9 @@
     "pre-push": "npm run test"
   },
   "dependencies": {
-    "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.8.14",
-    "@pinia/nuxt": "0.11.0",
+    "@ckpack/vue-color": "1.6.0",
+    "@designcrowd/fe-shared-lib": "2.0.0",
+    "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",
     "@tiptap/extension-character-count": "2.11.7",
@@ -72,41 +72,42 @@
     "@tiptap/extension-underline": "2.11.5",
     "@tiptap/starter-kit": "2.11.5",
     "@tiptap/vue-3": "2.11.5",
-    "axios": "1.6.7",
+    "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
-    "color": "5.0.0",
+    "color": "5.0.3",
     "config": "3.3.10",
-    "core-js": "3.35.1",
+    "core-js": "3.48.0",
     "css-color-names": "1.0.1",
     "date-utils": "1.2.21",
     "deepmerge": "4.3.1",
-    "dompurify": "3.2.6",
+    "dompurify": "3.3.1",
     "dropzone-vue3": "1.0.2",
     "express": "4.18.2",
-    "fs-extra": "11.2.0",
-    "http-errors": "2.0.0",
+    "fs-extra": "11.3.3",
+    "http-errors": "2.0.1",
     "http-proxy-middleware": "2.0.6",
-    "i18next": "25.2.1",
+    "i18next": "25.8.5",
     "jquery": "3.7.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "lodash.uniq": "4.5.0",
-    "nuxt": "3.17.4",
-    "pinia": "3.0.2",
+    "nuxt": "4.4.5",
+    "pinia": "3.0.4",
     "portal-vue": "3.0.0",
     "raygun": "0.13.2",
-    "raygun4js": "3.0.0",
+    "raygun4js": "3.1.4",
     "regenerator-runtime": "0.14.1",
     "slugify": "1.6.6",
     "svg-parser": "2.0.4",
     "uuid": "9.0.1",
-    "validator": "13.11.0",
-    "vue": "3.5.15",
+    "validator": "13.15.26",
+    "vue": "3.5.35",
     "vue-cropperjs": "5.0.0",
-    "vue-router": "4.5.0",
+    "vue-router": "5.1.0",
     "vue-select": "4.0.0-beta.6",
+    "unstorage": "^1.17.5",
     "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
     "vuedraggable": "4.1.0",
@@ -123,49 +124,49 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "0.27.1",
     "@esbuild/linux-x64": "0.27.1",
-    "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-    "@rollup/rollup-linux-x64-gnu": "4.12.0"
+    "@rollup/rollup-linux-arm64-gnu": "4.43.0",
+    "@rollup/rollup-linux-x64-gnu": "4.43.0"
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.0",
     "@frsource/cypress-plugin-visual-regression-diff": "3.3.10",
-    "@nuxt/test-utils": "3.19.1",
-    "@nuxt/types": "2.17.3",
+    "@nuxt/test-utils": "4.0.0",
+    "@nuxt/types": "2.18.1",
     "@nuxt/typescript-build": "3.0.2",
     "@storybook/addon-themes": "9.0.4",
     "@storybook/vue3": "9.0.4",
     "@storybook/vue3-vite": "9.0.4",
     "@stylistic/eslint-plugin": "1.5.4",
     "@types/axios-mock-adapter": "1.10.0",
-    "@types/braces": "3.0.4",
+    "@types/braces": "3.0.5",
     "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
     "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
-    "@types/jquery": "3.5.30",
+    "@types/jquery": "3.5.33",
     "@types/lodash.clonedeep": "4.5.9",
-    "@types/mssql": "9.1.4",
+    "@types/mssql": "9.1.9",
     "@types/multer": "1.4.11",
     "@types/raygun4js": "3.0.0",
     "@types/react": "18.2.48",
     "@types/resize-observer-browser": "0.1.11",
-    "@types/stripe-v3": "3.1.32",
+    "@types/stripe-v3": "3.1.33",
     "@types/svg-parser": "2.0.6",
-    "@types/uglify-js": "3.17.4",
-    "@types/unist": "3.0.2",
+    "@types/uglify-js": "3.17.5",
+    "@types/unist": "3.0.3",
     "@types/uuid": "9.0.8",
-    "@types/validator": "13.11.8",
+    "@types/validator": "13.15.10",
     "@types/yargs-parser": "21.0.3",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-vue": "5.2.4",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
-    "autoprefixer": "10.4.17",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.24",
     "axios-mock-adapter": "1.22.0",
     "copyfiles": "2.4.1",
-    "cors": "2.8.5",
+    "cors": "2.8.6",
     "cross-env": "7.0.3",
     "css-loader": "6.9.1",
     "cypress": "13.6.3",
@@ -173,50 +174,50 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-vue": "9.21.1",
     "file-loader": "6.2.0",
-    "happy-dom": "14.12.3",
-    "html-loader": "5.0.0",
-    "husky": "9.0.7",
+    "happy-dom": "20.6.1",
+    "html-loader": "5.1.0",
+    "husky": "9.1.7",
     "imports-loader": "5.0.0",
-    "jest-image-snapshot": "6.4.0",
-    "js-base64": "3.7.6",
-    "jsdom": "24.0.0",
+    "jest-image-snapshot": "6.5.1",
+    "js-base64": "3.7.8",
+    "jsdom": "27.4.0",
     "jsdom-global": "3.0.2",
     "lint-staged": "15.2.0",
-    "mini-css-extract-plugin": "2.7.7",
-    "msw": "2.3.1",
-    "msw-storybook-addon": "2.0.3",
+    "mini-css-extract-plugin": "2.10.0",
+    "msw": "2.12.10",
+    "msw-storybook-addon": "2.0.6",
     "multer": "1.4.3",
-    "nodemon": "3.0.3",
+    "nodemon": "3.1.11",
     "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
     "performance-now": "2.1.0",
-    "picocolors": "1.0.0",
-    "playwright-core": "1.47.0",
-    "postcss": "8.4.38",
-    "postcss-cli": "11.0.0",
-    "postcss-loader": "8.0.0",
+    "picocolors": "1.1.1",
+    "playwright-core": "1.58.2",
+    "postcss": "8.5.6",
+    "postcss-cli": "11.0.1",
+    "postcss-loader": "8.2.0",
     "postcss-nested": "6.0.1",
     "postcss-prefix-selector": "1.16.0",
-    "prettier": "3.2.4",
+    "prettier": "3.8.1",
     "request": "2.88.2",
     "rimraf": "5.0.5",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "6.0.11",
     "run-func": "3.0.0",
     "shx": "0.3.4",
     "storybook": "9.0.4",
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.1",
     "timsort": "0.3.0",
-    "ts-loader": "9.5.1",
+    "ts-loader": "9.5.4",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3",
-    "vite": "6.3.5",
+    "typescript": "5.9.3",
+    "vite": "7.3.5",
     "vite-plugin-commonjs": "0.10.4",
-    "vite-plugin-node-polyfills": "0.23.0",
-    "vitest": "3.1.4",
+    "vite-plugin-node-polyfills": "0.25.0",
+    "vitest": "4.0.18",
     "vue-eslint-parser": "9.4.2",
     "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
@@ -225,7 +226,10 @@
   "overrides": {
     "@achrinza/node-ipc": "10.1.10",
     "@parcel/watcher": "2.1.0",
-    "rollup-plugin-visualizer": "5.12.0",
+    "@storybook/vue3-vite": {
+      "vite": "$vite"
+    },
+    "rollup-plugin-visualizer": "6.0.11",
     "vite": {
       "rollup": "npm:@rollup/wasm-node"
     }
@@ -244,4 +248,4 @@
       "public"
     ]
   }
-}
+}

package/src/brand-page/components/about-section/AboutSection.vue.test.ts

@@ -10,11 +10,13 @@ import {
 } from '@brand-page/models';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+global.ResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  } as unknown as ResizeObserver;
+});
 
 const createTestBrandPageContext = (): BrandPageContext => ({
   brandPageSlug: faker.person.firstName(),

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/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/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';