@gem-sdk/components 2.1.15 → 2.1.17

package/dist/esm/collection/components/CollectionDescription.js

@@ -1,15 +1,109 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCollection } from '@gem-sdk/core';
-import Text from '../../text/components/Text.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
+import { useState, useRef, useEffect } from 'react';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, builderProps })=>{
+    const [open, setOpen] = useState(false);
+    const [isShowViewMore, allowShowViewMore] = useState(false);
+    const ref = useRef(null);
+    const currentDevice = useCurrentDevice();
     const collection = useCollection();
-    return /*#__PURE__*/ jsx(Text, {
-        styles: setting,
-        setting: {
-            text: collection?.descriptionHtml ?? 'Collection description',
-            excludeFlex: true
+    const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
+    const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    useEffect(()=>{
+        const dom = ref.current;
+        setOpen(false);
+        if (dom && hasLineClamp && collection?.description) {
+            const value = lineClamp;
+            setTimeout(()=>{
+                const scrollHeight = dom?.scrollHeight ?? 0;
+                const clientHeight = dom?.clientHeight ?? 0;
+                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
+                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
+                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                if (value && conditionCheckLine) {
+                    allowShowViewMore(()=>true);
+                } else {
+                    allowShowViewMore(()=>false);
+                }
+            }, 100);
         }
+    }, [
+        hasLineClamp,
+        lineClamp,
+        collection?.description
+    ]);
+    const css = `
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
+    display: inline !important;
+  }
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
+    content: "\\A";
+    white-space: pre;
+  }
+  .gp-p-description-text > table {
+    box-shadow: none;
+  }
+`;
+    const hasDescription = collection?.description && collection.description?.trim() != '';
+    return /*#__PURE__*/ jsxs("div", {
+        "data-id": builderProps?.uid,
+        children: [
+            !isSafari() && /*#__PURE__*/ jsx("style", {
+                children: css
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-gp-text": true,
+                className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                style: {
+                    ...getStyleShadow({
+                        styleAppliedFor: 'text-shadow'
+                    }),
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle
+                },
+                dangerouslySetInnerHTML: {
+                    __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
+                }
+            }),
+            hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
+                className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
+                style: {
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle,
+                    ...getGlobalColorStyle(setting?.showMoreColor)
+                },
+                onClick: ()=>setOpen((prev)=>!prev),
+                children: [
+                    !open ? setting?.viewMoreText : setting?.viewLessText,
+                    setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
+                        className: "gp-ml-1 gp-inline-block",
+                        height: "1em",
+                        width: "1em",
+                        viewBox: "0 0 22 12",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: !open ? /*#__PURE__*/ jsx("path", {
+                            d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
+                            fill: "currentColor"
+                        }) : /*#__PURE__*/ jsx("path", {
+                            d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
+                            fill: "currentColor"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/esm/collection/components/CollectionDescription.liquid.js

@@ -1,16 +1,109 @@
-import { template } from '@gem-sdk/core';
-import Text from '../../text/components/Text.liquid.js';
+import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
+import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const defaultStyle = {
+        ...getStyleShadow({
+            styleAppliedFor: 'text-shadow'
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...getGlobalColorStyle(setting?.color),
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...appendTypoStyle
+    };
+    const collapseStyle = {
+        ...defaultStyle,
+        ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
+    };
+    const getDisplayCollapse = ()=>{
+        return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
+    };
+    const moreIcon = `<svg
+          class="gp-ml-1 gp-inline-block"
+          style="display: inline-block; margin-left: 1px;"
+          height="1em"
+          width="1em"
+          viewBox="0 0 22 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+              d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+              fill="currentColor"
+          />
+        </svg>`;
+    const viewMoreTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
+    const viewLessTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
     return template`
-    ${Text({
-        styles: setting,
+  <gp-collection-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
         setting: {
-            ...setting,
-            text: '{{ collection.description }}',
-            excludeFlex: true
-        }
-    })}
+            lineClamp: setting?.lineClamp,
+            hasLineClamp: setting?.hasLineClamp,
+            viewMoreText: viewMoreTextTranslate,
+            viewLessText: viewLessTextTranslate,
+            enableViewMoreIcon: setting?.enableViewMoreIcon
+        },
+        defaultStyle,
+        collapseStyle
+    }).replaceAll("'", '&#039;')}'
+    view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
+    view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
+  >
+    <div></div>
+    <div
+     data-gp-text
+      class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
+      data-gp-text
+      style="${collapseStyle}"
+    >
+    {{collection.description}}
+    </div>
+        {% if collection.description != blank -%}
+      <button
+        type="button"
+        class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
+        style="${{
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...appendTypoStyle,
+        ...getGlobalColorStyle(setting?.showMoreColor),
+        ...getDisplayCollapse(),
+        position: 'absolute',
+        visibility: 'hidden'
+    }}"
+    >
+      ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
+      ${setting?.enableViewMoreIcon ? moreIcon : ''}
+      </button>
+    {%- endif -%}
+    {% style %}
+      .p-description-wrapper.gp-p-description-text * {
+        color: inherit
+      }
+    {% endstyle %}
+  </gp-collection-description>
+  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/esm/collection/setting/CollectionDescription.js

@@ -35,6 +35,59 @@ const config = {
                         }
                     ]
                 },
+                {
+                    id: 'hasLineClamp',
+                    label: 'Enable View More',
+                    type: 'toggle',
+                    devices: {
+                        desktop: {
+                            default: true
+                        }
+                    }
+                },
+                {
+                    id: 'lineClamp',
+                    label: 'Maximum Row(s) To Show',
+                    type: 'input:number',
+                    min: 1,
+                    hide: true,
+                    devices: {
+                        desktop: {
+                            default: 12
+                        }
+                    }
+                },
+                {
+                    id: 'viewMoreText',
+                    label: 'View More Text',
+                    type: 'input',
+                    default: 'Show more',
+                    hide: true
+                },
+                {
+                    id: 'showMoreColor',
+                    type: 'colorpicker',
+                    default: 'text-1'
+                },
+                {
+                    id: 'viewLessText',
+                    label: 'View Less Text',
+                    type: 'input',
+                    default: 'Show less',
+                    hide: true
+                },
+                {
+                    id: 'enableViewMoreIcon',
+                    label: 'Enable Icon',
+                    type: 'toggle',
+                    default: true,
+                    hide: true
+                },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewLessText,viewMoreText'
+                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -70,11 +123,86 @@ const config = {
                             default: 'center'
                         }
                     }
+                },
+                {
+                    id: 'color',
+                    type: 'colorpicker',
+                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
+        {
+            type: 'group',
+            label: {
+                en: ''
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more'
+                    },
+                    options: {
+                        label: 'large'
+                    },
+                    setting: {
+                        id: 'hasLineClamp'
+                    }
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Text color'
+                    },
+                    setting: {
+                        id: 'showMoreColor'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Max lines'
+                    },
+                    setting: {
+                        id: 'lineClamp'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more label'
+                    },
+                    setting: {
+                        id: 'viewMoreText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show less label'
+                    },
+                    setting: {
+                        id: 'viewLessText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Icon'
+                    },
+                    setting: {
+                        id: 'enableViewMoreIcon'
+                    },
+                    condition: 'hasLineClamp == true'
+                }
+            ]
+        },
         {
             label: {
                 en: 'Text'

package/dist/esm/index.js

@@ -205,6 +205,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.js';
+export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
+export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.js';
 export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
 export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
 export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';

package/dist/esm/index.liquid.js

@@ -160,6 +160,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.liquid.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.liquid.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.liquid.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.liquid.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.liquid.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.liquid.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.liquid.js';
+export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.liquid.js';
+export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.liquid.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.liquid.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.liquid.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.liquid.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.liquid.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.liquid.js';
 export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
 export { default as Sticky } from './sticky/components/Sticky.liquid.js';

package/dist/esm/product/components/ProductDescription/common.js

@@ -0,0 +1,26 @@
+import { getResponsiveValueByScreen, makeStyleResponsive } from '@gem-sdk/core';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './const.js';
+
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = makeStyleResponsive('maxh', result);
+    return style;
+};
+
+export { getMaxHeightStyleDefault };

package/dist/esm/product/components/ProductDescription/const.js

@@ -0,0 +1,3 @@
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+
+export { DESCRIPTION_LINE_HEIGHT_DEFAULT };

package/dist/esm/product/components/ProductDescription.js

@@ -1,6 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProduct, useCurrentDevice, getResponsiveValueByScreen, isSafari, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
 import { useState, useRef, useEffect } from 'react';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './ProductDescription/const.js';
 
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = useState(false);
@@ -14,14 +16,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             const value = lineClamp;
             setTimeout(()=>{
                 const scrollHeight = dom?.scrollHeight ?? 0;
                 const clientHeight = dom?.clientHeight ?? 0;
-                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
-                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
-                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -32,8 +38,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
@@ -50,7 +67,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsx(Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxs("div", {
             "data-id": builderProps?.uid,
@@ -61,7 +88,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...getStyleShadow({
                             value: setting?.textShadow,
@@ -73,10 +100,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
@@ -89,7 +117,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {

package/dist/esm/product/components/ProductDescription.liquid.js

@@ -1,5 +1,6 @@
 import { composeTypographyClassName, composeTypographyStyle, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
 
 const devices = [
     'desktop',
@@ -31,7 +32,8 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         ...makeStyle({
             tt: setting?.transform
         }),
-        ...appendTypoStyle
+        ...appendTypoStyle,
+        ...getMaxHeightStyleDefault(setting)
     };
     const collapseStyle = {
         ...defaultStyle,

package/dist/esm/third-party/components/AlsoBoughtCbb.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/AlsoBoughtCbb.js';
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+export { AlsoBoughtCbb as default };

package/dist/esm/third-party/components/AlsoBoughtCbb.liquid.js

@@ -0,0 +1,17 @@
+import { template, makeStyleResponsive } from '@gem-sdk/core';
+
+const AlsoBoughtCbb = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return template`
+    <div
+      class="${advanced?.cssClass}"
+      style="${{
+        ...makeStyleResponsive('ta', align)
+    }}"
+    >
+      <div class="gp-integration-also-bought__position" />
+    </div>
+  `;
+};
+
+export { AlsoBoughtCbb as default };

package/dist/esm/third-party/components/BfSizeChartSizeGuide.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/BfSizeChartSizeGuide.js';
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+export { BfSizeChartSizeGuide as default };