@shopgate/pwa-common 7.30.4-beta.1 → 7.30.4-beta.2

package/components/Swiper/index.js

@@ -67,6 +67,7 @@ const Swiper = ({
   paginationType: paginationTypeProp,
   ...swiperProps
 }) => {
+  const isBulletsBelow = paginationTypeProp === 'bulletsBelow';
   const useFraction = maxIndicators && maxIndicators < children.length;
   const paginationType = useFraction ? 'fraction' : 'bullets';
   const showPagination = indicators && children.length > 1;
@@ -111,7 +112,7 @@ const Swiper = ({
     ...(showPagination && {
       pagination: {
         el: undefined,
-        type: paginationTypeProp || paginationType,
+        type: isBulletsBelow ? 'bullets' : paginationTypeProp || paginationType,
         bulletClass: classNames.bulletClass || 'swiper-pagination-bullet',
         bulletActiveClass: classNames.bulletActiveClass || 'swiper-pagination-bullet-active',
         dynamicBullets: true,
@@ -122,7 +123,7 @@ const Swiper = ({
     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]);
+  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange, isBulletsBelow]);
   useEffect(() => {
     if (!internalProps.autoplay && !swiperProps.autoplay) {
       if (swiperRef.current?.swiper?.autoplay) {
@@ -187,7 +188,9 @@ const Swiper = ({
     }
   }, [delay, loopProp, onBreakpoint]);
   return /*#__PURE__*/_jsx("div", {
-    className: cls(container, className, 'common__swiper'),
+    className: cls(container, className, 'common__swiper', {
+      'pagination-below': isBulletsBelow
+    }),
     "aria-hidden": ariaHidden,
     children: /*#__PURE__*/_jsxs(OriginalSwiper, {
       "aria-live": "off",

package/components/Swiper/styles.js

@@ -2,10 +2,15 @@ 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',
+  maxHeight: '100%',
+  '&.pagination-below': {
+    '& .swiper-pagination.swiper-pagination-bullets': {
+      '--swiper-pagination-bottom': 0,
+      position: 'relative',
+      height: 32,
+      lineHeight: '40px'
+    }
+  }
 }).toString();
 export const innerContainer = css({
   overflow: 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.30.4-beta.1",
+  "version": "7.30.4-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.30.4-beta.1",
+    "@shopgate/pwa-benchmark": "7.30.4-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -40,7 +40,7 @@
     "swiper": "12.1.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.4-beta.1",
+    "@shopgate/pwa-core": "7.30.4-beta.2",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",
     "prop-types": "~15.8.1",