@shopgate/engage 7.29.0-alpha.4 → 7.29.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.4",
+  "version": "7.29.0-alpha.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.0-alpha.4",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.4",
-    "@shopgate/pwa-core": "7.29.0-alpha.4",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.4",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.4",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.4",
+    "@shopgate/pwa-common": "7.29.0-alpha.5",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.5",
+    "@shopgate/pwa-core": "7.29.0-alpha.5",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.5",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.5",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.5",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/ImageSlider/ImageSlider.js

@@ -0,0 +1,4 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{touchAction:'none',width:'100%'}});/**
+ * The ImageSliderWidget is used to display an image slider.
+ * @returns {JSX.Element}
+ */var ImageSliderWidget=function ImageSliderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement("img",{className:classes.image,loading:"lazy",src:slide.image.url,alt:slide.image.altText||''})));}));};export default ImageSliderWidget;

package/page/widgets/ImageSlider/hooks.js

@@ -0,0 +1,32 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';/**
+ * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
+ */ /**
+ * @typedef {Object} ImageSliderImageData
+ * @property {string} url The image URL.
+ * @property {string} [altText] The image alt text.
+ */ /**
+ * @typedef {Object} ImageSliderImage
+ * @property {ImageSliderImageData} image The image data object.
+ * @property {string} [link] The link URL.
+ */ /**
+ * @typedef {Object} ImageWidgetConfig
+ * @property {ImageSliderImage[]} images The image objects.
+ * @property {boolean} slideAutomatic Whether the slider should automatically slide.
+ * @property {boolean} endlessSlider Whether the slider should loop endlessly.
+ * @property {number} sliderSpeed The speed (in ms) for the slider autoplay.
+ * @property {"default"|"dense"|"custom"} slidesPerView
+ * @property {number} slidesPerViewCustomSmall Slides per view for small screens.
+ * @property {number} slidesPerViewCustomMedium Slides per view for medium screens.
+ * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the ImageSlider widget configuration and data.
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge;/**
+   * @type {SwiperCmpProps}
+   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints},isPreview?{// Improves interaction with the slider in the CMS preview iframe
+touchStartPreventDefault:true,// Create a component key from breakpoint settings to force remount on breakpoint change.
+// This fixes issues with the Swiper when breakpoint settings change during runtime.
+key:JSON.stringify(_extends({slidesPerView:slidesPerView},breakpoints))}:{});},[isPreview,slidesPerView,slideAutomatic,sliderSpeed,endlessSlider,theme.breakpoints.values,slidesPerViewCustomMedium,slidesPerViewCustomLarge,slidesPerViewCustomSmall]);return{slides:images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;}),swiperProps:swiperProps};};

package/page/widgets/ImageSlider/index.js

@@ -0,0 +1 @@
+export{default}from"./ImageSlider";

package/page/widgets/index.js

@@ -1 +1 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageSliderWidget}from"./ImageSlider";

package/page/widgets/widgets.json

@@ -19,5 +19,8 @@
   },
   "@shopgate/widgets/imageWidget": {
     "path": "@shopgate/engage/page/widgets/Image"
+  },
+  "@shopgate/widgets/imageSliderWidget": {
+    "path": "@shopgate/engage/page/widgets/ImageSlider"
   }
 }

package/styles/theme/createTheme/createBreakpoints.d.ts

@@ -10,13 +10,13 @@ export interface Breakpoints {
    *    // extra-small
    *    xs: 0,
    *    // small
-   *    sm: 600,
+   *    sm: 480,
    *    // medium
-   *    md: 900,
+   *    md: 768,
    *    // large
-   *    lg: 1200,
+   *    lg: 1024,
    *    // extra-large
-   *    xl: 1536,
+   *    xl: 1280,
    * }
    */
   values: { [key in Breakpoint]: number };