@shopgate/pwa-common 7.30.0-alpha.7 → 7.30.0-alpha.8

package/components/Swiper/index.js

@@ -1,13 +1,48 @@
-var _excluded=["maxIndicators","indicators","controls","aria-hidden","disabled","autoPlay","interval","classNames","className","onSlideChange","onBreakpoint","additionalModules","loop","children","paginationType"];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;}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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo,useCallback,useEffect,useRef,useState}from'react';import PropTypes from'prop-types';import cls from'classnames';import{A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom}from'swiper/modules';/* eslint-disable import/no-unresolved */import{Swiper as OriginalSwiper}from'swiper/react';import'swiper/css';import'swiper/css/a11y';import'swiper/css/pagination';import'swiper/css/navigation';import'swiper/css/zoom';/* eslint-enable import/no-unresolved */import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import SwiperItem from"./components/SwiperItem";import{container,innerContainer,zoomFix,buttonNext,buttonPrev}from"./styles";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom } from 'swiper/modules';
+/* eslint-disable import/no-unresolved */
+import { Swiper as OriginalSwiper } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/a11y';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import 'swiper/css/zoom';
+/* eslint-enable import/no-unresolved */
+import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
+import SwiperItem from "./components/SwiperItem";
+import { container, innerContainer, zoomFix, buttonNext, buttonPrev } from "./styles";
+
+/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
- */ /**
+ */
+
+/**
  * @typedef {import('swiper/react').SwiperClass} SwiperClass
- */ /**
+ */
+
+/**
  * Performs steps that are required when the loop prop of the Swiper is updated.
  * @param {SwiperClass} swiper Swiper instance
  * @param {boolean} loop Whether the loop mode should be enabled or not.
- */var handleLoopPropUpdate=function handleLoopPropUpdate(swiper,loop){var realIndex=(swiper===null||swiper===void 0?void 0:swiper.realIndex)||0;// eslint-disable-next-line no-param-reassign
-swiper.params.loop=loop;if(loop){swiper.loopDestroy();swiper.loopCreate(realIndex);swiper.updateSlides();}else{swiper.loopDestroy();}};/**
+ */
+const handleLoopPropUpdate = (swiper, loop) => {
+  const realIndex = swiper?.realIndex || 0;
+
+  // eslint-disable-next-line no-param-reassign
+  swiper.params.loop = loop;
+  if (loop) {
+    swiper.loopDestroy();
+    swiper.loopCreate(realIndex);
+    swiper.updateSlides();
+  } else {
+    swiper.loopDestroy();
+  }
+};
+
+/**
  * The basic Swiper component. It acts as a wrapper for the Swiper JS library component.
  *
  * This component wraps the [Swiper](https://swiperjs.com/) library's main component.
@@ -15,20 +50,177 @@ swiper.params.loop=loop;if(loop){swiper.loopDestroy();swiper.loopCreate(realInde
  *
  * @param {SwiperCmpProps} props The component props.
  * @returns {JSX.Element}
- */var Swiper=function Swiper(_ref){var _internalProps$autopl,_swiperProps$autoplay;var maxIndicators=_ref.maxIndicators,indicators=_ref.indicators,controls=_ref.controls,ariaHidden=_ref['aria-hidden'],disabled=_ref.disabled,autoPlay=_ref.autoPlay,interval=_ref.interval,classNames=_ref.classNames,className=_ref.className,onSlideChange=_ref.onSlideChange,onBreakpoint=_ref.onBreakpoint,additionalModules=_ref.additionalModules,loopProp=_ref.loop,children=_ref.children,paginationTypeProp=_ref.paginationType,swiperProps=_objectWithoutProperties(_ref,_excluded);var useFraction=maxIndicators&&maxIndicators<children.length;var paginationType=useFraction?'fraction':'bullets';var showPagination=indicators&&children.length>1;var hasControls=typeof controls==='boolean'&&controls===true;var reduceMotion=useReduceMotion();/** @type {React.RefObject<{ swiper: SwiperClass}>} */var swiperRef=useRef(null);var _useState=useState((swiperProps===null||swiperProps===void 0?void 0:swiperProps.slidesPerView)||1),_useState2=_slicedToArray(_useState,2),currentSlidesPerView=_useState2[0],setCurrentSlidesPerView=_useState2[1];var navigation=useMemo(function(){var nav;if(hasControls){nav={// Important to use dot notation (swiper uses it as selector internally)
-nextEl:".swiper-button-next.".concat(buttonNext),prevEl:".swiper-button-prev.".concat(buttonPrev)};}if(_typeof(controls)==='object'){nav=controls;}return nav;},[controls,hasControls]);var handleSlideChange=useCallback(function(swiper){if(typeof onSlideChange==='function'){onSlideChange(swiper.realIndex,swiper);}},[onSlideChange]);/**
+ */
+const Swiper = ({
+  maxIndicators,
+  indicators,
+  controls,
+  'aria-hidden': ariaHidden,
+  disabled,
+  autoPlay,
+  interval,
+  classNames,
+  className,
+  onSlideChange,
+  onBreakpoint,
+  additionalModules,
+  loop: loopProp,
+  children,
+  paginationType: paginationTypeProp,
+  ...swiperProps
+}) => {
+  const useFraction = maxIndicators && maxIndicators < children.length;
+  const paginationType = useFraction ? 'fraction' : 'bullets';
+  const showPagination = indicators && children.length > 1;
+  const hasControls = typeof controls === 'boolean' && controls === true;
+  const reduceMotion = useReduceMotion();
+
+  /** @type {React.RefObject<{ swiper: SwiperClass}>} */
+  const swiperRef = useRef(null);
+  const [currentSlidesPerView, setCurrentSlidesPerView] = useState(swiperProps?.slidesPerView || 1);
+  const navigation = useMemo(() => {
+    let nav;
+    if (hasControls) {
+      nav = {
+        // Important to use dot notation (swiper uses it as selector internally)
+        nextEl: `.swiper-button-next.${buttonNext}`,
+        prevEl: `.swiper-button-prev.${buttonPrev}`
+      };
+    }
+    if (typeof controls === 'object') {
+      nav = controls;
+    }
+    return nav;
+  }, [controls, hasControls]);
+  const handleSlideChange = useCallback(swiper => {
+    if (typeof onSlideChange === 'function') {
+      onSlideChange(swiper.realIndex, swiper);
+    }
+  }, [onSlideChange]);
+
+  /**
    * @type {SwiperCmpProps}
-   */var internalProps=useMemo(function(){return _extends({modules:[A11y,Autoplay,FreeMode,Navigation,Pagination,Zoom].concat(Array.isArray(additionalModules)?additionalModules:[]),className:cls(innerContainer,classNames.container,_defineProperty({},zoomFix,swiperProps===null||swiperProps===void 0?void 0:swiperProps.zoom)),autoplay:autoPlay?{delay:interval}:false,navigation:navigation},showPagination&&{pagination:{el:undefined,type:paginationTypeProp||paginationType,bulletClass:classNames.bulletClass||'swiper-pagination-bullet',bulletActiveClass:classNames.bulletActiveClass||'swiper-pagination-bullet-active',dynamicBullets:true,clickable:true,enabled:indicators&&children.length>1}},{allowSlidePrev:!disabled,allowSlideNext:!disabled,onSlideChange:handleSlideChange});},[additionalModules,classNames.container,classNames.bulletClass,classNames.bulletActiveClass,swiperProps,autoPlay,interval,navigation,showPagination,paginationTypeProp,paginationType,indicators,children.length,disabled,handleSlideChange]);useEffect(function(){var _swiperRef$current2,_swiperRef$current2$s;if(!internalProps.autoplay&&!swiperProps.autoplay){var _swiperRef$current,_swiperRef$current$sw;if((_swiperRef$current=swiperRef.current)===null||_swiperRef$current===void 0?void 0:(_swiperRef$current$sw=_swiperRef$current.swiper)===null||_swiperRef$current$sw===void 0?void 0:_swiperRef$current$sw.autoplay){// When autoplay is disabled, ensure that the slider is really stopped. That tackles UI
-// issues when e.g. autoplay and loop mode where disabled during one slide interval.
-swiperRef.current.swiper.autoplay.stop();}return;}if((_swiperRef$current2=swiperRef.current)===null||_swiperRef$current2===void 0?void 0:(_swiperRef$current2$s=_swiperRef$current2.swiper)===null||_swiperRef$current2$s===void 0?void 0:_swiperRef$current2$s.autoplay){if(reduceMotion){swiperRef.current.swiper.autoplay.stop();}else{swiperRef.current.swiper.autoplay.start();}}},[internalProps.autoplay,reduceMotion,swiperProps.autoplay]);// The currently configured delay for autoplay.
-var delay=((_internalProps$autopl=internalProps.autoplay)===null||_internalProps$autopl===void 0?void 0:_internalProps$autopl.delay)||((_swiperProps$autoplay=swiperProps.autoplay)===null||_swiperProps$autoplay===void 0?void 0:_swiperProps$autoplay.delay);// Whether the loop mode should be enabled.
-var shouldLoop=loopProp&&(children===null||children===void 0?void 0:children.length)>currentSlidesPerView+1;useEffect(function(){if(!swiperRef.current)return;// Perform required steps when loop prop changes on runtime.
-handleLoopPropUpdate(swiperRef.current.swiper,shouldLoop);},[shouldLoop]);/**
+   */
+  const internalProps = useMemo(() => ({
+    modules: [A11y, Autoplay, FreeMode, Navigation, Pagination, Zoom, ...(Array.isArray(additionalModules) ? additionalModules : [])],
+    className: cls(innerContainer, classNames.container, {
+      [zoomFix]: swiperProps?.zoom
+    }),
+    autoplay: autoPlay ? {
+      delay: interval
+    } : false,
+    navigation,
+    ...(showPagination && {
+      pagination: {
+        el: undefined,
+        type: paginationTypeProp || paginationType,
+        bulletClass: classNames.bulletClass || 'swiper-pagination-bullet',
+        bulletActiveClass: classNames.bulletActiveClass || 'swiper-pagination-bullet-active',
+        dynamicBullets: true,
+        clickable: true,
+        enabled: indicators && children.length > 1
+      }
+    }),
+    allowSlidePrev: !disabled,
+    allowSlideNext: !disabled,
+    onSlideChange: handleSlideChange
+  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange]);
+  useEffect(() => {
+    if (!internalProps.autoplay && !swiperProps.autoplay) {
+      if (swiperRef.current?.swiper?.autoplay) {
+        // When autoplay is disabled, ensure that the slider is really stopped. That tackles UI
+        // issues when e.g. autoplay and loop mode where disabled during one slide interval.
+        swiperRef.current.swiper.autoplay.stop();
+      }
+      return;
+    }
+    if (swiperRef.current?.swiper?.autoplay) {
+      if (reduceMotion) {
+        swiperRef.current.swiper.autoplay.stop();
+      } else {
+        swiperRef.current.swiper.autoplay.start();
+      }
+    }
+  }, [internalProps.autoplay, reduceMotion, swiperProps.autoplay]);
+
+  // The currently configured delay for autoplay.
+  const delay = internalProps.autoplay?.delay || swiperProps.autoplay?.delay;
+  // Whether the loop mode should be enabled.
+  const shouldLoop = loopProp && children?.length > currentSlidesPerView + 1;
+  useEffect(() => {
+    if (!swiperRef.current) return;
+    // Perform required steps when loop prop changes on runtime.
+    handleLoopPropUpdate(swiperRef.current.swiper, shouldLoop);
+  }, [shouldLoop]);
+
+  /**
    * Handles the breakpoint change event.
    * The Swiper has some issues when props are changed on runtime followed by a breakpoint change.
    * This function is supposed to ensure the the Swiper behaves as expected in that case.
-   */var handleOnBreakpoint=useCallback(/**
-     * @param {SwiperClass} swiper Swiper instance
-     * @param {Object} breakpoint Current breakpoint object
-     */function(swiper,breakpoint){var _swiper$autoplay;var slidesPerView=breakpoint.slidesPerView;if(!slidesPerView){slidesPerView=1;}var wasRunning=(swiper===null||swiper===void 0?void 0:(_swiper$autoplay=swiper.autoplay)===null||_swiper$autoplay===void 0?void 0:_swiper$autoplay.running)||false;if(wasRunning){swiper.autoplay.stop();}var loopUpdate=loopProp&&swiper.slides.length>slidesPerView+1;handleLoopPropUpdate(swiper,loopUpdate);if(typeof delay==='number'&&swiper.params.autoplay){// eslint-disable-next-line no-param-reassign
-swiper.params.autoplay.delay=delay;}if(wasRunning){swiper.autoplay.start();}setCurrentSlidesPerView(slidesPerView);if(typeof onBreakpoint==='function'){onBreakpoint(swiper,breakpoint);}},[delay,loopProp,onBreakpoint]);return React.createElement("div",{className:cls(container,className,'common__swiper'),"aria-hidden":ariaHidden},React.createElement(OriginalSwiper,_extends({"aria-live":"off",a11y:{enabled:false}},internalProps,swiperProps,{loop:shouldLoop,onBreakpoint:handleOnBreakpoint,ref:swiperRef}),children,hasControls&&React.createElement(React.Fragment,null,React.createElement("div",{className:"swiper-button-next ".concat(buttonNext)}),React.createElement("div",{className:"swiper-button-prev ".concat(buttonPrev)}))));};Swiper.Item=SwiperItem;Swiper.defaultProps={'aria-hidden':false,additionalModules:null,autoPlay:false,className:null,classNames:{},controls:false,indicators:false,interval:3000,loop:false,maxIndicators:null,disabled:false,onSlideChange:null,onBreakpoint:null,paginationType:null};export default Swiper;
+   */
+  const handleOnBreakpoint = useCallback(
+  /**
+   * @param {SwiperClass} swiper Swiper instance
+   * @param {Object} breakpoint Current breakpoint object
+   */
+  (swiper, breakpoint) => {
+    let {
+      slidesPerView
+    } = breakpoint;
+    if (!slidesPerView) {
+      slidesPerView = 1;
+    }
+    const wasRunning = swiper?.autoplay?.running || false;
+    if (wasRunning) {
+      swiper.autoplay.stop();
+    }
+    const loopUpdate = loopProp && swiper.slides.length > slidesPerView + 1;
+    handleLoopPropUpdate(swiper, loopUpdate);
+    if (typeof delay === 'number' && swiper.params.autoplay) {
+      // eslint-disable-next-line no-param-reassign
+      swiper.params.autoplay.delay = delay;
+    }
+    if (wasRunning) {
+      swiper.autoplay.start();
+    }
+    setCurrentSlidesPerView(slidesPerView);
+    if (typeof onBreakpoint === 'function') {
+      onBreakpoint(swiper, breakpoint);
+    }
+  }, [delay, loopProp, onBreakpoint]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(container, className, 'common__swiper'),
+    "aria-hidden": ariaHidden
+  }, /*#__PURE__*/React.createElement(OriginalSwiper, _extends({
+    "aria-live": "off",
+    a11y: {
+      enabled: false
+    }
+  }, internalProps, swiperProps, {
+    loop: shouldLoop,
+    onBreakpoint: handleOnBreakpoint,
+    ref: swiperRef
+  }), children, hasControls && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `swiper-button-next ${buttonNext}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `swiper-button-prev ${buttonPrev}`
+  }))));
+};
+Swiper.Item = SwiperItem;
+Swiper.defaultProps = {
+  'aria-hidden': false,
+  additionalModules: null,
+  autoPlay: false,
+  className: null,
+  classNames: {},
+  controls: false,
+  indicators: false,
+  interval: 3000,
+  loop: false,
+  maxIndicators: null,
+  disabled: false,
+  onSlideChange: null,
+  onBreakpoint: null,
+  paginationType: null
+};
+export default Swiper;

package/components/Swiper/styles.js

@@ -1,8 +1,76 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export var container=css({position:'relative',maxHeight:'100%'// This needs to be 100vw to compensate a chrome 80 bug - see related ticket / pr. (PWA-2509)
-// commented out for now since it causes issues in the responsive layout
-// width: '100vw',
-}).toString();export var innerContainer=css({overflow:'hidden','--swiper-navigation-color':themeColors.gray,' .swiper-wrapper':{alignItems:'stretch'},' .swiper-slide':{height:'auto'},' .swiper-pagination':{' .swiper-pagination-bullet':{background:themeColors.gray,opacity:'.5',margin:'0 4px',transition:'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',border:"1px solid ".concat(themeColors.dark)},' .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main':{opacity:1}},' .swiper-pagination-fraction':{top:'var(--swiper-pagination-fraction-top-offset, 4px)',left:'auto',right:0,bottom:'auto',fontSize:12,background:themeColors.background,borderRadius:'50px',width:'fit-content',padding:'4px 8px',margin:'4px 16px',transition:'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'},' .swiper-pagination-progressbar':{background:themeColors.shade7,' .swiper-pagination-progressbar-fill':{background:themeColors.dark}}}).toString();/**
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+export const container = css({
+  position: 'relative',
+  maxHeight: '100%'
+  // This needs to be 100vw to compensate a chrome 80 bug - see related ticket / pr. (PWA-2509)
+  // commented out for now since it causes issues in the responsive layout
+  // width: '100vw',
+}).toString();
+export const innerContainer = css({
+  overflow: 'hidden',
+  '--swiper-navigation-color': themeColors.gray,
+  ' .swiper-wrapper': {
+    alignItems: 'stretch'
+  },
+  ' .swiper-slide': {
+    height: 'auto'
+  },
+  ' .swiper-pagination': {
+    ' .swiper-pagination-bullet': {
+      background: themeColors.gray,
+      opacity: '.5',
+      margin: '0 4px',
+      transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+      border: `1px solid ${themeColors.dark}`
+    },
+    ' .swiper-pagination-bullet-active.swiper-pagination-bullet-active-main': {
+      opacity: 1
+    }
+  },
+  ' .swiper-pagination-fraction': {
+    top: 'var(--swiper-pagination-fraction-top-offset, 4px)',
+    left: 'auto',
+    right: 0,
+    bottom: 'auto',
+    fontSize: 12,
+    background: themeColors.background,
+    borderRadius: '50px',
+    width: 'fit-content',
+    padding: '4px 8px',
+    margin: '4px 16px',
+    transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+  },
+  ' .swiper-pagination-progressbar': {
+    background: themeColors.shade7,
+    ' .swiper-pagination-progressbar-fill': {
+      background: themeColors.dark
+    }
+  }
+}).toString();
+
+/**
  * Prevents a visible shrink animation of swiped out slides which where in a zoomed state before.
- */export var zoomFix=css({' .swiper-slide':{overflow:'hidden'}}).toString();export var wrapper=css({flexShrink:0});export var buttonNext=css({backgroundImage:"url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",// Hide original SwiperJS chevron
-':after':{color:'transparent'}}).toString();export var buttonPrev=css({backgroundImage:"url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",// Hide original SwiperJS chevron
-':after':{color:'transparent'}}).toString();
+ */
+export const zoomFix = css({
+  ' .swiper-slide': {
+    overflow: 'hidden'
+  }
+}).toString();
+export const wrapper = css({
+  flexShrink: 0
+});
+export const buttonNext = css({
+  backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",
+  // Hide original SwiperJS chevron
+  ':after': {
+    color: 'transparent'
+  }
+}).toString();
+export const buttonPrev = css({
+  backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E\") !important",
+  // Hide original SwiperJS chevron
+  ':after': {
+    color: 'transparent'
+  }
+}).toString();

package/components/Toaster/index.js

@@ -1,4 +1,12 @@
-import React from'react';import PropTypes from'prop-types';import ToastContext from"../../providers/toast/context";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import ToastContext from "../../providers/toast/context";
+
+/**
  * The Toaster component.
  * @returns {JSX}
- */var Toaster=function Toaster(_ref){var render=_ref.render;return React.createElement(ToastContext.Consumer,null,function(context){return render(context);});};export default Toaster;
+ */
+const Toaster = ({
+  render
+}) => /*#__PURE__*/React.createElement(ToastContext.Consumer, null, context => render(context));
+export default Toaster;

package/components/Transition/index.js

@@ -1,24 +1,100 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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 isEqual from'lodash/isEqual';import React,{Component}from'react';import PropTypes from'prop-types';import{findDOMNode}from'react-dom';import gsap from'gsap';/**
+import isEqual from 'lodash/isEqual';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
+import gsap from 'gsap';
+
+/**
  * Handles a transition of an object.
  * This component only can have one child element at a time!
- */var Transition=/*#__PURE__*/function(_Component){function Transition(){_classCallCheck(this,Transition);return _callSuper(this,Transition,arguments);}_inherits(Transition,_Component);return _createClass(Transition,[{key:"componentDidMount",value:/**
+ */
+class Transition extends Component {
+  /**
    * Runs the transition animation initially.
-   */function componentDidMount(){this.animate();}/**
+   */
+  componentDidMount() {
+    this.animate();
+  }
+
+  /**
    * Checks if transition related props (from/to) have updated and runs the animation.
    * @param {Object} nextProps - The received props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!isEqual(this.props.from,nextProps.from)||!isEqual(this.props.to,nextProps.to)){this.animate(nextProps);}}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.from, nextProps.from) || !isEqual(this.props.to, nextProps.to)) {
+      this.animate(nextProps);
+    }
+  }
+
+  /**
    * Returns the first child of children.
    * @returns {React.Element}
-   */},{key:"getFirstChild",value:function getFirstChild(){return React.Children.map(this.props.children,function(element,idx){return React.cloneElement(element,{ref:idx});})[0];}/**
+   */
+  getFirstChild() {
+    return React.Children.map(this.props.children, (element, idx) => (/*#__PURE__*/React.cloneElement(element, {
+      ref: idx
+    })))[0];
+  }
+
+  /**
    * Sets the transition state and runs the transition animation.
    * @param {Object} props - The props object the animation should be based upon.
-   */},{key:"animate",value:function animate(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props;// eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
-var element=findDOMNode(this.refs[0]);var duration=props.duration/1000;var transitionSettings={ease:props.easing,transformOrigin:props.origin,onComplete:props.onComplete,force3D:true,immediateRender:true};if(props.set){// Sets properties to an absolute state.
-gsap.set(element,props.set);}if(this.tween){// Remove previously set tween.
-this.tween.kill();}if(props.from&&props.to){// Starts a {from} -> {to} transition.
-this.tween=gsap.fromTo(element,duration,props.from,_extends({},props.to,{},transitionSettings));}else if(props.from){// Starts a {from} only transition.
-this.tween=gsap.from(element,duration,_extends({},props.from,{},transitionSettings));}else if(props.to){// Starts a {to} only transition.
-this.tween=gsap.to(element,duration,_extends({},props.to,{},transitionSettings));}}/**
+   */
+  animate(props = this.props) {
+    // eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
+    const element = findDOMNode(this.refs[0]);
+    const duration = props.duration / 1000;
+    const transitionSettings = {
+      ease: props.easing,
+      transformOrigin: props.origin,
+      onComplete: props.onComplete,
+      force3D: true,
+      immediateRender: true
+    };
+    if (props.set) {
+      // Sets properties to an absolute state.
+      gsap.set(element, props.set);
+    }
+    if (this.tween) {
+      // Remove previously set tween.
+      this.tween.kill();
+    }
+    if (props.from && props.to) {
+      // Starts a {from} -> {to} transition.
+      this.tween = gsap.fromTo(element, duration, props.from, {
+        ...props.to,
+        ...transitionSettings
+      });
+    } else if (props.from) {
+      // Starts a {from} only transition.
+      this.tween = gsap.from(element, duration, {
+        ...props.from,
+        ...transitionSettings
+      });
+    } else if (props.to) {
+      // Starts a {to} only transition.
+      this.tween = gsap.to(element, duration, {
+        ...props.to,
+        ...transitionSettings
+      });
+    }
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){return React.Children.only(this.getFirstChild());}}]);}(Component);_defineProperty(Transition,"defaultProps",{easing:'Power1.easeOut',origin:'0 0 0',duration:150,from:null,onComplete:function onComplete(){},set:null,to:null});export default Transition;
+   */
+  render() {
+    return React.Children.only(this.getFirstChild());
+  }
+}
+Transition.defaultProps = {
+  easing: 'Power1.easeOut',
+  origin: '0 0 0',
+  duration: 150,
+  from: null,
+  onComplete: () => {},
+  set: null,
+  to: null
+};
+export default Transition;

package/components/Widgets/components/Widget/index.js

@@ -1,8 +1,56 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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 React,{Component,Suspense}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import Loading from"../../../Loading";import Grid from"../../../Grid";import styles from"./style";/**
+import React, { Component, Suspense } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import Loading from "../../../Loading";
+import Grid from "../../../Grid";
+import styles from "./style";
+/**
  * The widget component.
- */var Widget=/*#__PURE__*/function(_Component){function Widget(){_classCallCheck(this,Widget);return _callSuper(this,Widget,arguments);}_inherits(Widget,_Component);return _createClass(Widget,[{key:"shouldComponentUpdate",value:/**
+ */
+class Widget extends Component {
+  /**
    * @param {Object} nextProps The next component props.
    * @return {boolean}
-   */function shouldComponentUpdate(nextProps){if(this.props.component!==nextProps.component)return true;if(!isEqual(this.props.config,nextProps.config))return true;return false;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    if (this.props.component !== nextProps.component) return true;
+    if (!isEqual(this.props.config, nextProps.config)) return true;
+    return false;
+  }
+
+  /**
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this$props$config=this.props.config,col=_this$props$config.col,row=_this$props$config.row,height=_this$props$config.height,settings=_this$props$config.settings,width=_this$props$config.width;if(!this.props.component){return null;}return React.createElement(Grid.Item,{className:"common__widgets__widget ".concat(styles.widgetCell({col:col,row:row,height:height,width:width})),component:"div"},React.createElement("div",{className:styles.content},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(this.props.component,{settings:settings,ratio:[width,height]}))));}}]);}(Component);_defineProperty(Widget,"defaultProps",{component:null});export default Widget;
+   */
+  render() {
+    const {
+      col,
+      row,
+      height,
+      settings,
+      width
+    } = this.props.config;
+    if (!this.props.component) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Grid.Item, {
+      className: `common__widgets__widget ${styles.widgetCell({
+        col,
+        row,
+        height,
+        width
+      })}`,
+      component: "div"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, /*#__PURE__*/React.createElement(Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Loading, null)
+    }, /*#__PURE__*/React.createElement(this.props.component, {
+      settings,
+      ratio: [width, height]
+    }))));
+  }
+}
+Widget.defaultProps = {
+  component: null
+};
+export default Widget;

package/components/Widgets/components/Widget/spec.js

@@ -1,5 +1,70 @@
-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{mount}from'enzyme';import Grid from"../../../Grid";import Widget from"./index";jest.mock('react',function(){return _extends({},require.requireActual('react'),{Suspense:function Suspense(_ref){var children=_ref.children;return children;}});});/**
+import React from 'react';
+import { mount } from 'enzyme';
+import Grid from "../../../Grid";
+import Widget from "./index";
+jest.mock('react', () => ({
+  ...require.requireActual('react'),
+  Suspense: function Suspense({
+    children
+  }) {
+    return children;
+  }
+}));
+
+/**
  * A dummy component.
  * @returns {JSX}
- */var MyComponent=function MyComponent(){return React.createElement("div",null);};var widgets={'@shopgate/commerce-widgets/image':MyComponent};describe('<Widget />',function(){it('should render an image widget',function(){var config={type:'@shopgate/commerce-widgets/image',col:1,row:1,width:12,height:6};var wrapper=mount(React.createElement(Widget,{config:config,component:widgets[config.type]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Grid.Item).exists()).toBe(true);});it('should render an image widget with offset',function(){var config={type:'@shopgate/commerce-widgets/image',col:1,row:1,width:6,height:6};var wrapper=mount(React.createElement(Widget,{config:config,component:widgets[config.type],cellSize:100}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Grid.Item).exists()).toBe(true);});it('should not render when the `type` prop is invalid',function(){var config={type:'some_widget',// Invalid
-col:1,row:1,width:12,height:6};var wrapper=mount(React.createElement(Widget,{config:config,component:widgets[config.type]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Grid.Item).exists()).toBe(false);});});
+ */
+const MyComponent = () => /*#__PURE__*/React.createElement("div", null);
+const widgets = {
+  '@shopgate/commerce-widgets/image': MyComponent
+};
+describe('<Widget />', () => {
+  it('should render an image widget', () => {
+    const config = {
+      type: '@shopgate/commerce-widgets/image',
+      col: 1,
+      row: 1,
+      width: 12,
+      height: 6
+    };
+    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+      config: config,
+      component: widgets[config.type]
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Grid.Item).exists()).toBe(true);
+  });
+  it('should render an image widget with offset', () => {
+    const config = {
+      type: '@shopgate/commerce-widgets/image',
+      col: 1,
+      row: 1,
+      width: 6,
+      height: 6
+    };
+    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+      config: config,
+      component: widgets[config.type],
+      cellSize: 100
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Grid.Item).exists()).toBe(true);
+  });
+  it('should not render when the `type` prop is invalid', () => {
+    const config = {
+      type: 'some_widget',
+      // Invalid
+      col: 1,
+      row: 1,
+      width: 12,
+      height: 6
+    };
+    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+      config: config,
+      component: widgets[config.type]
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Grid.Item).exists()).toBe(false);
+  });
+});

package/components/Widgets/components/Widget/style.js

@@ -1,9 +1,27 @@
-import{css}from'glamor';/**
+import { css } from 'glamor';
+
+/**
  * Creates a widget cell grid style.
  * @param {number} col Col index.
  * @param {number} row Row index.
  * @param {number} width Width.
  * @param {number} height Height.
- * @param {bool} visible Visible.
+ * @param {boolean} visible Visible.
  * @returns {string}
- */function widgetCell(_ref){var col=_ref.col,row=_ref.row,width=_ref.width,height=_ref.height;return css({gridColumnStart:col+1,gridColumnEnd:col+width+1,gridRowStart:row+1,gridRowEnd:row+height+1}).toString();}export default{widgetCell:widgetCell};
+ */
+function widgetCell({
+  col,
+  row,
+  width,
+  height
+}) {
+  return css({
+    gridColumnStart: col + 1,
+    gridColumnEnd: col + width + 1,
+    gridRowStart: row + 1,
+    gridRowEnd: row + height + 1
+  }).toString();
+}
+export default {
+  widgetCell
+};