@designcrowd/library.brand-page 5.6.4-fluid-6 → 5.6.4-scroll-2

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

@@ -45,16 +45,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-}>, {
-    fluidText: string;
-}, {
+}>, {}, {
     isSideMenuOpen: boolean;
     styles: {};
 }, {
     brandPageToken(): string | null;
     contents(): ContentViewModel[];
     backgroundShapes(): BackgroundShape[];
-    rootStyles(): BrandPageCssStyle;
+    rootElementStyles(): BrandPageCssStyle;
+    rootBackgroundStyles(): BrandPageCssStyle;
     showBrandCrowdLogo(): boolean;
     /**
      * @function isRenderedForStorybook

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
 import { getSlugFromContext } from '../../utils';
-import { BRAND_PAGE_TYPES } from '../../models';
 export default defineComponent({
     props: {
         context: {
@@ -55,15 +54,6 @@ export default defineComponent({
         'page-header-container-click',
         'page-footer-container-click',
     ],
-    setup(props) {
-        return {
-            fluidText: JSON.stringify({
-                default: props.context.brandPageType === BRAND_PAGE_TYPES.brandSite
-                    ? 1200
-                    : 768,
-            }),
-        };
-    },
     data() {
         return {
             isSideMenuOpen: false,
@@ -95,7 +85,21 @@ export default defineComponent({
             }
             return backgroundShapes;
         },
-        rootStyles() {
+        rootElementStyles() {
+            const styles = {};
+            Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
+            const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
+                DEFAULT_FONT_FAMILY_KEY;
+            const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
+            if (textFontFamilyConfig) {
+                styles.fontFamily = [
+                    `"${textFontFamilyConfig.name}"`,
+                    ...FALLBACK_FONT_FAMILIES,
+                ].join(', ');
+            }
+            return styles;
+        },
+        rootBackgroundStyles() {
             const styles = {
                 ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
             };
@@ -119,6 +123,7 @@ export default defineComponent({
                     if (!this.context.isTemplate) {
                         styles.position = 'fixed';
                         styles.width = '100%';
+                        styles.height = '100%';
                     }
                     delete styles.background;
                 }
@@ -127,16 +132,6 @@ export default defineComponent({
             if (this.viewModel.styles?.backgroundStyles.style.background?.startsWith('linear-gradient')) {
                 styles.backgroundAttachment = 'fixed';
             }
-            Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
-            const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
-                DEFAULT_FONT_FAMILY_KEY;
-            const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
-            if (textFontFamilyConfig) {
-                styles.fontFamily = [
-                    `"${textFontFamilyConfig.name}"`,
-                    ...FALLBACK_FONT_FAMILIES,
-                ].join(', ');
-            }
             return styles;
         },
         showBrandCrowdLogo() {
@@ -247,7 +242,10 @@ export default defineComponent({
         },
     },
     watch: {
-        rootStyles() {
+        rootElementStyles() {
+            this.setRootStyles();
+        },
+        rootBackgroundStyles() {
             this.setRootStyles();
         },
     },
@@ -282,10 +280,10 @@ export default defineComponent({
          */
         setRootStyles() {
             if (this.context.isPreview) {
-                this.$emit('on-set-preview-styles', this.rootStyles);
+                this.$emit('on-set-preview-styles', Object.assign({}, this.rootElementStyles, this.rootBackgroundStyles));
                 return;
             }
-            this.styles = Object.assign(this.styles, this.rootStyles);
+            this.styles = Object.assign(this.styles, this.rootElementStyles, this.rootBackgroundStyles);
         },
         scrollToLastContent() {
             if (!this.contents.length) {

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    textStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    element: {
+        type: StringConstructor;
+        required: false;
+        default: () => string;
+    };
+}>, {}, {
+    isCollapsed: boolean;
+}, {
+    textStyles(): {
+        backgroundColor: any;
+    };
+    style(): any;
+    padding(): "" | "tw-py-2 tw-px-4";
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    textStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    element: {
+        type: StringConstructor;
+        required: false;
+        default: () => string;
+    };
+}>> & Readonly<{}>, {
+    textStyle: BrandPageCssStyle;
+    element: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.js

@@ -0,0 +1,38 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props: {
+        textStyle: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+        text: {
+            type: String,
+            required: true,
+        },
+        element: {
+            type: String,
+            required: false,
+            default: () => 'p',
+        },
+    },
+    data: () => ({
+        isCollapsed: false,
+    }),
+    computed: {
+        textStyles() {
+            return {
+                backgroundColor: this.textStyle.backgroundColor,
+            };
+        },
+        style() {
+            const { backgroundColor, ...textStyle } = this.textStyle;
+            return textStyle;
+        },
+        padding() {
+            return this.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '';
+        },
+    },
+    watch: {},
+    methods: {},
+});

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

@@ -524,6 +524,3 @@ export interface PrimaryCta {
     title: string;
     description: string;
 }
-export interface FluidTextData {
-    default: number;
-}

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

@@ -1,7 +1,6 @@
 import {} from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
-import { migration03 } from './migration/migration-03';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -11,10 +10,6 @@ const MIGRATION_TABLE = [
         version: 2,
         migrateFn: migration02,
     },
-    {
-        version: 3,
-        migrateFn: migration03,
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = (brandPageModel, options) => {

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -138,42 +138,7 @@ export const SampleBanner = () => {
     const pinia = setupStoryPinia();
     const brandPageMakerStore = useBrandPageMakerStore();
     const bannerContent = createInitialBannerSectionContent();
-    bannerContent.title = 'LAUNCHING SOON';
-    bannerContent.description = 'This Is Going To Be Epic';
-    bannerContent.buttonText = 'CONTACT US';
-    bannerContent.titleStyle.textStyleType = undefined;
-    bannerContent.titleStyle.fontSize = '6.25em';
-    bannerContent.titleStyle.fontFamily = 'Ubuntu';
-    bannerContent.titleStyle.lineHeight = '1';
-    bannerContent.titleStyle.textAlign = 'left';
-    bannerContent.displayStyle = 'left-aligned';
-    bannerContent.descriptionStyle.textStyleType = undefined;
-    bannerContent.descriptionStyle.fontFamily = 'Work Sans';
-    bannerContent.descriptionStyle.fontSize = '2.6875em';
-    bannerContent.descriptionStyle.textAlign = 'left';
-    bannerContent.buttonTextStyle.textStyleType = undefined;
-    bannerContent.buttonTextStyle.fontFamily = 'Ubuntu';
-    bannerContent.buttonTextStyle.fontSize = '1.5em';
-    bannerContent.buttonTextStyle.textAlign = 'left';
-    console.log('bannerContent', bannerContent);
-    const bannerContent2 = createInitialBannerSectionContent();
-    bannerContent2.title = 'LAUNCHING SOON';
-    bannerContent2.description = 'This Is Going To Be Epic2';
-    bannerContent2.buttonText = 'CONTACT US';
-    bannerContent2.titleStyle.textStyleType = undefined;
-    bannerContent2.titleStyle.fontSize = '6.25em';
-    bannerContent2.titleStyle.fontFamily = 'Ubuntu';
-    bannerContent2.titleStyle.lineHeight = '1';
-    bannerContent2.titleStyle.textAlign = 'left';
-    bannerContent2.displayStyle = 'left-aligned';
-    bannerContent2.descriptionStyle.textStyleType = undefined;
-    bannerContent2.descriptionStyle.fontFamily = 'Work Sans';
-    bannerContent2.descriptionStyle.fontSize = '2.6875em';
-    bannerContent2.descriptionStyle.textAlign = 'left';
-    bannerContent2.buttonTextStyle.textStyleType = undefined;
-    bannerContent2.buttonTextStyle.fontFamily = 'Ubuntu';
-    bannerContent2.buttonTextStyle.fontSize = '1.5em';
-    bannerContent2.buttonTextStyle.textAlign = 'left';
+    bannerContent.description = 'Lorem ipsum dolor sit amet';
     brandPageMakerStore.setViewport({
         viewport: VIEWPORTS.desktop,
     });
@@ -190,176 +155,7 @@ export const SampleBanner = () => {
                             {
                                 title: 'Home',
                                 slug: 'home',
-                                contents: [
-                                    {
-                                        id: 'acc69f79-8ecd-4c6e-9665-f0f7c06150ca',
-                                        url: '',
-                                        type: 'banner-section',
-                                        title: "SPORT'S KICKOFF",
-                                        imageUrl: '',
-                                        pageSlug: '',
-                                        cardStyle: {
-                                            backgroundColor: 'rgb(255,255,255)',
-                                        },
-                                        buttonText: 'Buy Tickets',
-                                        titleStyle: {
-                                            color: '#ffffff',
-                                            fontSize: '2.375em',
-                                            textAlign: 'center',
-                                            wordBreak: 'normal',
-                                            fontFamily: 'Jost',
-                                            fontWeight: 'bold',
-                                            lineHeight: '1.0',
-                                            overflowWrap: 'anywhere',
-                                            letterSpacing: '0.132em',
-                                            textDecoration: '',
-                                        },
-                                        description: 'SOCCER MATCH',
-                                        displayStyle: 'centered',
-                                        overlayColor: {
-                                            backgroundColor: 'rgb(0,0,0)',
-                                        },
-                                        buttonLinkType: 'url',
-                                        overlayOpacity: 50,
-                                        backgroundStyle: {
-                                            backgroundColor: '',
-                                        },
-                                        buttonTextStyle: {
-                                            color: '#fffbf4',
-                                            fontSize: '1.25em',
-                                            textAlign: 'center',
-                                            wordBreak: 'normal',
-                                            fontFamily: 'Jost',
-                                            fontWeight: 'bold',
-                                            lineHeight: '1.3',
-                                            overflowWrap: 'anywhere',
-                                            letterSpacing: '0',
-                                            textDecoration: '',
-                                        },
-                                        descriptionStyle: {
-                                            color: '#ffffff',
-                                            fontSize: '5.625em',
-                                            textAlign: 'center',
-                                            wordBreak: 'normal',
-                                            fontFamily: 'Alfa Slab One',
-                                            fontWeight: 'normal',
-                                            lineHeight: '1.0',
-                                            overflowWrap: 'anywhere',
-                                            letterSpacing: '0.011em',
-                                            textDecoration: '',
-                                        },
-                                        colorReplacements: [],
-                                    },
-                                    {
-                                        id: 'dfeafaf4-b5ab-435e-a902-adfa74d7c63b',
-                                        text: '',
-                                        type: 'text',
-                                        iconUrl: '',
-                                        textSize: {
-                                            fontSize: '1em',
-                                            lineHeight: '1.5',
-                                        },
-                                        textColor: {},
-                                        textItems: [
-                                            {
-                                                text: 'UPCOMING GAMES',
-                                                textStyle: {
-                                                    color: '#d6ad7a',
-                                                    fontSize: '3.4375em',
-                                                    textAlign: 'center',
-                                                    fontFamily: 'Alfa Slab One',
-                                                    lineHeight: '1.4',
-                                                    letterSpacing: '0.018em',
-                                                },
-                                            },
-                                        ],
-                                        textStyle: {
-                                            textAlign: 'center',
-                                            textStyleType: 'paragraphs',
-                                        },
-                                        columnStyle: '1',
-                                        textAlignment: {},
-                                        backgroundColor: {
-                                            backgroundColor: '#fffbf4',
-                                        },
-                                    },
-                                    {
-                                        id: '943e80c0-3d77-4aed-84a0-ed51d351661a',
-                                        text: '',
-                                        type: 'text',
-                                        iconUrl: '',
-                                        textSize: {
-                                            fontSize: '1em',
-                                            lineHeight: '1.5',
-                                        },
-                                        textColor: {},
-                                        textItems: [
-                                            {
-                                                text: 'THURSDAY',
-                                                textStyle: {
-                                                    color: '#d6ad7a',
-                                                    fontSize: '1.875em',
-                                                    textAlign: 'center',
-                                                    fontFamily: 'Pridi',
-                                                    fontWeight: 'bold',
-                                                    lineHeight: '1.3',
-                                                    letterSpacing: '0.033em',
-                                                    textDecoration: '',
-                                                },
-                                            },
-                                            {
-                                                text: 'FRIDAY',
-                                                textStyle: {
-                                                    color: '#d6ad7a',
-                                                    fontSize: '1.875em',
-                                                    textAlign: 'center',
-                                                    fontFamily: 'Pridi',
-                                                    fontWeight: 'bold',
-                                                    lineHeight: '1.3',
-                                                    letterSpacing: '0.033em',
-                                                    textDecoration: '',
-                                                },
-                                            },
-                                            {
-                                                text: 'SATURDAY',
-                                                textStyle: {
-                                                    color: '#d6ad7a',
-                                                    fontSize: '1.875em',
-                                                    textAlign: 'center',
-                                                    fontFamily: 'Pridi',
-                                                    fontWeight: 'bold',
-                                                    lineHeight: '1.3',
-                                                    letterSpacing: '0.033em',
-                                                    textDecoration: '',
-                                                },
-                                            },
-                                            {
-                                                text: 'SUNDAY',
-                                                textStyle: {
-                                                    color: '#d6ad7a',
-                                                    fontSize: '1.875em',
-                                                    textAlign: 'center',
-                                                    fontFamily: 'Pridi',
-                                                    fontWeight: 'bold',
-                                                    lineHeight: '1.3',
-                                                    letterSpacing: '0.033em',
-                                                    textDecoration: '',
-                                                },
-                                            },
-                                        ],
-                                        textStyle: {
-                                            textAlign: 'center',
-                                            textStyleType: 'paragraphs',
-                                        },
-                                        columnStyle: '4',
-                                        textAlignment: {},
-                                        backgroundColor: {
-                                            backgroundColor: '#fffbf4',
-                                        },
-                                    },
-                                    bannerContent,
-                                    bannerContent2,
-                                ],
+                                contents: [bannerContent],
                             },
                         ],
                         brandPageType: BRAND_PAGE_TYPES.brandSite,

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

@@ -834,7 +834,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     isDraggableEnabled(): boolean;
     isItemSelected(): (itemIdx: any) => boolean;
 }, {
-    dispatchViewPortChangeEvent(): void;
     onDraggingStart(): void;
     onDraggingEnd(ev: any): void;
     onOverlayClick(item: ContentViewModel): void;
@@ -888,16 +887,15 @@ declare const _default: import("vue").DefineComponent<{}, {
         required: false;
         default: undefined;
     };
-}>, {
-    fluidText: string;
-}, {
+}>, {}, {
     isSideMenuOpen: boolean;
     styles: {};
 }, {
     brandPageToken(): string | null;
     contents(): ContentViewModel[];
     backgroundShapes(): import("../../../brand-page").BackgroundShape[];
-    rootStyles(): BrandPageCssStyle;
+    rootElementStyles(): BrandPageCssStyle;
+    rootBackgroundStyles(): BrandPageCssStyle;
     showBrandCrowdLogo(): boolean;
     isRenderedForStorybook(): boolean;
     pageViewModel(): import("../../../brand-page").PageViewModel | undefined;

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

@@ -73,13 +73,7 @@ export default defineComponent({
             };
         },
     },
-    mounted() {
-        this.dispatchViewPortChangeEvent();
-    },
     watch: {
-        viewport() {
-            this.dispatchViewPortChangeEvent();
-        },
         selectedItemId(itemId) {
             this.scrollToContentItemByItemId(itemId);
         },
@@ -99,11 +93,6 @@ export default defineComponent({
         },
     },
     methods: {
-        dispatchViewPortChangeEvent() {
-            window.dispatchEvent(new CustomEvent('editor:viewport', {
-                detail: { viewport: this.viewport },
-            }));
-        },
         onDraggingStart() {
             this.isDraggingContent = true;
             // Unable to set selected item id here because it will cause the draggable to be stuck

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.js

@@ -1,13 +1,13 @@
 import { DEFAULT_FONT_SIZE } from '../../brand-page/constants/';
-import { pxToEm, emToPx } from '../utils/text.util';
+import { pxToRem, remToPx } from '../utils/text.util';
 export const textSizeValueConvertor = {
     convertBackToMultipleValues: false,
     convert(value) {
-        return (value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
+        return (value.fontSize ? remToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
     },
     convertBack(valuePx) {
         return {
-            fontSize: pxToEm(valuePx),
+            fontSize: pxToRem(valuePx),
         };
     },
 };

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

@@ -1,2 +1,2 @@
-export declare const pxToEm: (px: string) => string;
-export declare const emToPx: (rem: string) => string;
+export declare const pxToRem: (px: string) => string;
+export declare const remToPx: (rem: string) => string;

package/lib/src/brand-page-maker/utils/text.util.js

@@ -1,8 +1,8 @@
-export const pxToEm = (px) => {
+export const pxToRem = (px) => {
     const value = parseFloat(px) / 16;
-    return `${value}em`;
+    return `${value}rem`;
 };
-export const emToPx = (rem) => {
+export const remToPx = (rem) => {
     const value = parseFloat(rem) * 16;
     return `${value}`;
 };

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -5547,13 +5547,13 @@ to {
   overflow-wrap: break-word;
 }
 
-.c-text-container[data-v-0ebffa99] {
+.c-text-container[data-v-f2a561dc] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.device--mobile .grid-container[data-v-0ebffa99] {
+.device--mobile .grid-container[data-v-f2a561dc] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5563,7 +5563,7 @@ to {
           flex-direction: column;
 }
 @media (max-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -5574,7 +5574,7 @@ to {
 }
 }
 @media (min-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: grid;
 }
 }
@@ -7219,14 +7219,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-663dca38] {
+.brand-page-root[data-v-a68b910c] {
   height: 100%;
 }
-.sortable[data-v-663dca38] {
+.sortable[data-v-a68b910c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-663dca38] {
+.brand-page[data-v-a68b910c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7238,7 +7238,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-663dca38] {
+.brand-page__inner--default[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7250,16 +7250,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-663dca38] {
+.brand-page__inner--desktop[data-v-a68b910c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-663dca38] {
+.brand-site__header[data-v-a68b910c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-663dca38] {
+.brand-page__header[data-v-a68b910c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-663dca38] {
+.brand-page__content--default[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7276,7 +7276,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-663dca38] {
+.brand-page__content--desktop[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7292,15 +7292,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-663dca38] {
+.brand-page__content--inner[data-v-a68b910c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-663dca38] {
+.brand-page__content--inner--brandsite[data-v-a68b910c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-663dca38] {
+.brand-page__content--outline-selected[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7308,20 +7308,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-663dca38] {
+.brand-page__content--outline-footer-selected[data-v-a68b910c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-663dca38] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-663dca38] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }