@gem-sdk/components 2.5.6 → 2.6.0-staging.13

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -13,9 +13,21 @@ var useAspectRatioSettings = require('./hooks/useAspectRatioSettings.js');
 var NextImage_liquid = require('../../../image/components/NextImage.liquid.js');
 var getSrcSet = require('../../../image/helpers/getSrcSet.js');
 var helpers$1 = require('../../../image/components/helpers.js');
+var constants = require('../../../constants.js');
 
 const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
-    const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
+    const { link: rawLink, layout, verticalAlign, order, alignBanner, alt, title, isGoToSalesPage } = setting ?? {};
+    const link = isGoToSalesPage ? {
+        link: constants.HREF_TO_SALES_PAGE,
+        target: '_self'
+    } : rawLink;
+    let { urlData } = helpers.getInsertLinkData('', link);
+    if (isGoToSalesPage) {
+        urlData = {
+            href: constants.HREF_TO_SALES_PAGE,
+            target: '_self'
+        };
+    }
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
     const speedParallax = Number(setting?.speedParallax) || 0;
@@ -128,7 +140,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }
         return;
     };
-    const { urlData } = helpers.getInsertLinkData('', link);
     const imagePlaceholder = {
         desktop: helpers$1.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0),
         tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),

package/dist/cjs/banner/setting/HeroBanner.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var heroBanner1Col = require('./presets/heroBanner1Col.js');
+var heroBanner1ColPreSalesPage = require('./presets/heroBanner1ColPreSalesPage.js');
 var heroBannerContentLeft = require('./presets/heroBannerContentLeft.js');
+var heroBannerContentLeftPreSalesPage = require('./presets/heroBannerContentLeftPreSalesPage.js');
 var heroBannerContentRight = require('./presets/heroBannerContentRight.js');
+var heroBannerContentRightPreSalesPage = require('./presets/heroBannerContentRightPreSalesPage.js');
 var heroBannerVideo = require('./presets/heroBannerVideo.js');
+var heroBannerVideoPreSalesPage = require('./presets/heroBannerVideoPreSalesPage.js');
 var heroBannerParallax = require('./presets/heroBannerParallax.js');
+var heroBannerParallaxPreSalesPage = require('./presets/heroBannerParallaxPreSalesPage.js');
 
 const config = {
     tag: 'HeroBanner',
@@ -196,6 +201,17 @@ const config = {
                     label: 'Preload',
                     default: false
                 },
+                {
+                    id: 'isGoToSalesPage',
+                    type: 'toggle',
+                    label: 'Go to Sales page',
+                    default: false
+                },
+                {
+                    id: 'linkedToPreSalesPageBanner',
+                    type: 'banner-pre-sales-page',
+                    default: false
+                },
                 {
                     id: 'link',
                     type: 'pick-link',
@@ -1070,14 +1086,37 @@ const config = {
             ]
         },
         {
-            type: 'control',
+            type: 'group',
             label: {
                 en: 'Link'
             },
-            setting: {
-                id: 'link'
-            },
-            layout: 'vertical'
+            controls: [
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'linkedToPreSalesPageBanner'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'pageType == "GP_PRE_SALE_PAGE"',
+                    setting: {
+                        id: 'isGoToSalesPage'
+                    },
+                    label: {
+                        en: 'Go to Sales page'
+                    }
+                },
+                {
+                    type: 'control',
+                    condition: 'isGoToSalesPage === false || pageType != "GP_PRE_SALE_PAGE"',
+                    layout: 'vertical',
+                    setting: {
+                        id: 'link'
+                    }
+                }
+            ]
         },
         {
             type: 'group',
@@ -1357,10 +1396,15 @@ const config = {
     ],
     presets: [
         heroBanner1Col.heroBanner1Col,
+        heroBanner1ColPreSalesPage.heroBanner1ColPreSalesPage,
         heroBannerContentLeft.heroBannerContentLeft,
+        heroBannerContentLeftPreSalesPage.heroBannerContentLeftPreSalesPage,
         heroBannerContentRight.heroBannerContentRight,
+        heroBannerContentRightPreSalesPage.heroBannerContentRightPreSalesPage,
         heroBannerVideo.heroBannerVideo,
-        heroBannerParallax.heroBannerParallax
+        heroBannerVideoPreSalesPage.heroBannerVideoPreSalesPage,
+        heroBannerParallax.heroBannerParallax,
+        heroBannerParallaxPreSalesPage.heroBannerParallaxPreSalesPage
     ],
     editorConfigs: {
         slots: {

package/dist/cjs/banner/setting/presets/heroBanner1ColPreSalesPage.js

@@ -0,0 +1,134 @@
+'use strict';
+
+const heroBanner1ColPreSalesPage = {
+    id: 'hero-banner-1-col-pre-sales-page',
+    name: {
+        en: 'Hero Banner'
+    },
+    icon: {
+        desktop: `
+      <svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_1706_4280)">
+      <rect width="94" height="48" rx="3" fill="#424242"/>
+      <g opacity="0.2">
+      <ellipse cx="2" cy="1.5" rx="11" ry="11.5" fill="#757575"/>
+      <path d="M0.601075 61.8234L18.5988 40.4906C19.2081 39.767 19.9611 39.1816 20.8088 38.7727C21.6564 38.3638 22.5796 38.1406 23.5181 38.1175C24.4566 38.0944 25.3894 38.272 26.2556 38.6387C27.1219 39.0055 27.902 39.5531 28.5453 40.2459L36.9609 49.2989L69.858 9.43075C70.502 8.64956 71.3116 8.02551 72.2264 7.60499C73.1413 7.18447 74.138 6.9783 75.1423 7.00181C76.1467 7.02532 77.1329 7.2779 78.0276 7.74078C78.9223 8.20366 79.7026 8.86493 80.3103 9.67543L119.641 62.0866C120.393 63.0913 120.853 64.2887 120.97 65.5441C121.087 66.7994 120.856 68.063 120.303 69.1926C119.751 70.3222 118.897 71.2732 117.84 71.9384C116.783 72.6037 115.564 72.957 114.319 72.9585L5.68599 73C4.40822 72.9995 3.15734 72.6281 2.08134 71.9299C1.00533 71.2317 0.149232 70.2358 -0.38568 69.06C-0.920592 67.8843 -1.11193 66.5779 -0.937061 65.2955C-0.762191 64.0131 -0.22843 62.8082 0.601075 61.8234Z" fill="#757575"/>
+      </g>
+      <rect x="29" y="26" width="36" height="6" rx="3" fill="#D6D6D6"/>
+      <rect x="36" y="16" width="22" height="6" rx="3" fill="#D6D6D6"/>
+      </g>
+      <defs>
+      <clipPath id="clip0_1706_4280">
+      <rect width="94" height="48" rx="3" fill="white"/>
+      </clipPath>
+      </defs>
+      </svg>
+    `
+    },
+    components: [
+        {
+            tag: 'HeroBanner',
+            settings: {
+                layout: {
+                    desktop: {
+                        cols: [
+                            12
+                        ],
+                        display: 'fill'
+                    }
+                },
+                isGoToSalesPage: true
+            },
+            styles: {
+                contentWidth: {
+                    desktop: '1200px'
+                },
+                sizeSetting: {
+                    desktop: {
+                        shape: 'custom',
+                        widthHeightLinked: false,
+                        width: '100%',
+                        height: '600px'
+                    },
+                    mobile: {
+                        shape: 'custom',
+                        widthHeightLinked: false,
+                        width: '1200px',
+                        height: '600px'
+                    }
+                }
+            },
+            childrens: [
+                {
+                    tag: 'Col',
+                    childrens: [
+                        {
+                            tag: 'Heading',
+                            settings: {
+                                text: 'Click here to edit heading'
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Text',
+                            settings: {
+                                text: "This is your text block. Click to edit and make it your own. Share your product's story<br/>\
+                  or services offered. Get creative and make it yours!"
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Button',
+                            settings: {
+                                label: 'Get started'
+                            },
+                            styles: {
+                                align: {
+                                    desktop: 'center'
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+exports.heroBanner1ColPreSalesPage = heroBanner1ColPreSalesPage;

package/dist/cjs/banner/setting/presets/heroBannerContentLeftPreSalesPage.js

@@ -0,0 +1,154 @@
+'use strict';
+
+const heroBannerContentLeftPreSalesPage = {
+    id: 'hero-banner-content-left-pre-sales-page',
+    name: {
+        en: 'Hero Banner'
+    },
+    icon: {
+        desktop: `
+    <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2825_116)">
+    <rect width="96" height="48" rx="3" fill="#424242"/>
+    <g opacity="0.2">
+    <path d="M1.60108 61.8234L19.5988 40.4906C20.2081 39.767 20.9611 39.1816 21.8088 38.7727C22.6564 38.3638 23.5796 38.1406 24.5181 38.1175C25.4566 38.0944 26.3894 38.272 27.2556 38.6387C28.1219 39.0055 28.902 39.5531 29.5453 40.2459L37.9609 49.2989L70.858 9.43075C71.502 8.64956 72.3116 8.02551 73.2264 7.60499C74.1413 7.18447 75.138 6.9783 76.1423 7.00181C77.1467 7.02532 78.1329 7.2779 79.0276 7.74078C79.9223 8.20366 80.7026 8.86493 81.3103 9.67543L120.641 62.0866C121.393 63.0913 121.853 64.2887 121.97 65.5441C122.087 66.7994 121.856 68.063 121.303 69.1926C120.751 70.3222 119.897 71.2732 118.84 71.9384C117.783 72.6037 116.564 72.957 115.319 72.9585L6.68599 73C5.40822 72.9995 4.15734 72.6281 3.08134 71.9299C2.00533 71.2317 1.14923 70.2358 0.61432 69.06C0.0794076 67.8843 -0.111931 66.5779 0.0629387 65.2955C0.237809 64.0131 0.77157 62.8082 1.60108 61.8234Z" fill="#D6D6D6"/>
+    </g>
+    <rect x="10" y="15" width="32" height="7" rx="3" fill="#D6D6D6"/>
+    <rect x="10" y="26" width="21" height="7" rx="3" fill="#D6D6D6"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2825_116">
+    <rect width="96" height="48" rx="3" fill="white"/>
+    </clipPath>
+    </defs>
+    </svg>
+    `
+    },
+    components: [
+        {
+            tag: 'HeroBanner',
+            settings: {
+                layout: {
+                    desktop: {
+                        cols: [
+                            6,
+                            6
+                        ],
+                        display: 'fill'
+                    },
+                    mobile: {
+                        cols: [
+                            12
+                        ],
+                        display: 'fill'
+                    }
+                },
+                isGoToSalesPage: true
+            },
+            styles: {
+                contentWidth: {
+                    desktop: '1200px'
+                },
+                sizeSetting: {
+                    desktop: {
+                        shape: 'original',
+                        widthHeightLinked: false,
+                        width: '100%',
+                        height: '600px'
+                    },
+                    mobile: {
+                        shape: 'custom',
+                        widthHeightLinked: false,
+                        width: '100%',
+                        height: 'auto'
+                    }
+                }
+            },
+            childrens: [
+                {
+                    tag: 'Col',
+                    styles: {
+                        order: {
+                            desktop: 0
+                        }
+                    },
+                    childrens: [
+                        {
+                            tag: 'Heading',
+                            settings: {
+                                text: 'Click here to edit heading'
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Text',
+                            settings: {
+                                text: "This is your text block. Click to edit and make it your own. Share your<br/>\
+                      product's story or services offered. Get creative and make it yours!"
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Button',
+                            settings: {
+                                label: 'Get started'
+                            },
+                            styles: {
+                                align: {
+                                    desktop: 'center'
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    tag: 'Col',
+                    styles: {
+                        order: {
+                            desktop: 1
+                        }
+                    },
+                    childrens: []
+                }
+            ]
+        }
+    ]
+};
+
+exports.heroBannerContentLeftPreSalesPage = heroBannerContentLeftPreSalesPage;

package/dist/cjs/banner/setting/presets/heroBannerContentRightPreSalesPage.js

@@ -0,0 +1,162 @@
+'use strict';
+
+const heroBannerContentRightPreSalesPage = {
+    id: 'hero-banner-content-right-pre-sales-page',
+    name: {
+        en: 'Hero Banner'
+    },
+    icon: {
+        desktop: `
+      <svg
+        width="96"
+        height="48"
+        viewBox="0 0 96 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_2430_3506)">
+          <rect width="96" height="48" rx="3" fill="#424242" />
+          <g opacity="0.2">
+            <path
+              d="M94.3989 61.8234L76.4012 40.4906C75.7919 39.767 75.0389 39.1816 74.1912 38.7727C73.3436 38.3638 72.4204 38.1406 71.4819 38.1175C70.5434 38.0944 69.6106 38.272 68.7444 38.6387C67.8781 39.0055 67.098 39.5531 66.4547 40.2459L58.0391 49.2989L25.142 9.43075C24.498 8.64956 23.6884 8.02551 22.7736 7.60499C21.8587 7.18447 20.862 6.9783 19.8577 7.00181C18.8533 7.02532 17.8671 7.2779 16.9724 7.74078C16.0777 8.20366 15.2974 8.86493 14.6897 9.67543L-24.6409 62.0866C-25.3929 63.0913 -25.8533 64.2887 -25.9703 65.5441C-26.0874 66.7994 -25.8564 68.063 -25.3035 69.1926C-24.7505 70.3222 -23.8975 71.2732 -22.8403 71.9384C-21.783 72.6037 -20.5636 72.957 -19.3191 72.9585L89.314 73C90.5918 72.9995 91.8427 72.6281 92.9187 71.9299C93.9947 71.2317 94.8508 70.2358 95.3857 69.06C95.9206 67.8843 96.1119 66.5779 95.9371 65.2955C95.7622 64.0131 95.2284 62.8082 94.3989 61.8234Z"
+              fill="#D6D6D6"
+            />
+          </g>
+          <rect x="54" y="15" width="32" height="7" rx="3" fill="#D6D6D6" />
+          <rect x="54" y="26" width="21" height="7" rx="3" fill="#D6D6D6" />
+        </g>
+        <defs>
+          <clipPath id="clip0_2430_3506">
+            <rect width="96" height="48" rx="3" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    `
+    },
+    components: [
+        {
+            tag: 'HeroBanner',
+            settings: {
+                layout: {
+                    desktop: {
+                        cols: [
+                            6,
+                            6
+                        ],
+                        display: 'fill'
+                    },
+                    mobile: {
+                        cols: [
+                            12
+                        ],
+                        display: 'fill'
+                    }
+                },
+                isGoToSalesPage: true
+            },
+            styles: {
+                contentWidth: {
+                    desktop: '1200px'
+                },
+                sizeSetting: {
+                    desktop: {
+                        shape: 'original',
+                        widthHeightLinked: false,
+                        width: '100%',
+                        height: '600px'
+                    },
+                    mobile: {
+                        shape: 'original',
+                        widthHeightLinked: true,
+                        width: '100%'
+                    }
+                }
+            },
+            childrens: [
+                {
+                    tag: 'Col',
+                    styles: {
+                        order: {
+                            desktop: 1
+                        }
+                    },
+                    childrens: [
+                        {
+                            tag: 'Heading',
+                            settings: {
+                                text: 'Click here to edit heading'
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Text',
+                            settings: {
+                                text: "This is your text block. Click to edit and make it your own. Share your<br/>\
+                      product's story or services offered. Get creative and make it yours!"
+                            },
+                            styles: {
+                                textAlign: {
+                                    desktop: 'center'
+                                },
+                                typo: {
+                                    attrs: {
+                                        color: '#FFFFFF'
+                                    }
+                                }
+                            },
+                            advanced: {
+                                'spacing-setting': {
+                                    desktop: {
+                                        margin: {
+                                            bottom: 'var(--g-s-l)'
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        {
+                            tag: 'Button',
+                            settings: {
+                                label: 'Get started'
+                            },
+                            styles: {
+                                align: {
+                                    desktop: 'center'
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    tag: 'Col',
+                    styles: {
+                        order: {
+                            desktop: 0
+                        }
+                    },
+                    childrens: []
+                }
+            ]
+        }
+    ]
+};
+
+exports.heroBannerContentRightPreSalesPage = heroBannerContentRightPreSalesPage;