pcln-carousel - npm Package Compare versions

Comparing version 3.1.7 to 3.1.8

dist/cjs/Carousel.js

@@ -105,3 +105,4 @@ "use strict";
     overflowAllowancePxTop = _ref2$overflowAllowan3 === void 0 ? 0 : _ref2$overflowAllowan3,
-    maxHeight = _ref2.maxHeight;
+    maxHeight = _ref2.maxHeight,
+    arrowButtonZIndex = _ref2.arrowButtonZIndex;
   var widths = (0, _layoutToFlexWidths.layoutToFlexWidths)(layout, children.length);
@@ -230,6 +231,7 @@ var layoutSize = layout === null || layout === void 0 ? void 0 : layout.split('-').length;
     showArrowsOnHover: showArrowsOnHover
-  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Flex, {
+  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/_react["default"].createElement(_Carousel.RelativeFlex, {
     alignItems: "center",
     justifyContent: _constants.ARROW_JUSTIFY_CONTENT[arrowsAlignment],
-    pt: 2
+    pt: 2,
+    zIndex: arrowButtonZIndex
   }, nodeBesideArrowsLeft && arrowsAlignment === 'right' ? /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Box, {
@@ -323,3 +325,5 @@ ml: 2,
   /** Number of px to set maxHeight to counteract large overflow values*/
-  maxHeight: _propTypes["default"].number
+  maxHeight: _propTypes["default"].number,
+  /** z-index for arrow buttons*/
+  arrowButtonZIndex: _propTypes["default"].number
 };

dist/cjs/Carousel.stories.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports["default"] = exports.Vertical = exports.ShowArrowsOnHover = exports.SetVisibleSlidesByViewport = exports.SetCurrentSlide = exports.RichContent = exports.OverflowBackground = exports.OverflowAllowed = exports.NodesByArrows = exports.Layout = exports.CustomButtonPosition = exports.Basic = exports.AlternateButtonColors = void 0;
+exports["default"] = exports.Vertical = exports.ShowArrowsOnHover = exports.SetVisibleSlidesByViewport = exports.SetCurrentSlide = exports.RichContent = exports.OverflowBackground = exports.OverflowArrowsBottomZIndex = exports.OverflowAllowed = exports.NodesByArrows = exports.Layout = exports.CustomButtonPosition = exports.Basic = exports.AlternateButtonColors = void 0;
 var _react = _interopRequireDefault(require("react"));
@@ -244,2 +244,34 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 };
+var OverflowTemplateBottomArrows = function OverflowTemplateBottomArrows(args) {
+  return /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Box, null, /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Relative, {
+    width: 1,
+    bg: "background.light",
+    zIndex: 2,
+    height: "80px",
+    borderRadius: "xl",
+    mb: [3, 3, 3, 4],
+    mx: 2
+  }, "Above"), /*#__PURE__*/_react["default"].createElement(_Carousel.Carousel, args, renderOverflowCards()), /*#__PURE__*/_react["default"].createElement(_pclnDesignSystem.Relative, {
+    width: 1,
+    bg: "background.light",
+    zIndex: 3,
+    height: "80px",
+    borderRadius: "xl",
+    mt: [5, 3, 3, 5],
+    mx: 2
+  }, "Below"));
+};
+var OverflowArrowsBottomZIndex = exports.OverflowArrowsBottomZIndex = OverflowTemplateBottomArrows.bind({
+  boxShadowSize: 'xl'
+});
+OverflowArrowsBottomZIndex.args = {
+  visibleSlides: 3,
+  mobileVisibleSlides: [1.1, 2.1, 2.1],
+  arrowsPosition: 'bottom',
+  overflowAllowancePxX: 46,
+  overflowAllowancePxY: 80,
+  overflowAllowancePxTop: 2,
+  maxHeight: 220,
+  arrowButtonZIndex: 2
+};
 
@@ -246,0 +278,0 @@ //Overflow With backround

dist/cjs/Carousel.styles.js

@@ -6,8 +6,13 @@ "use strict";
 });
-exports.CarouselWrapper = void 0;
+exports.RelativeFlex = exports.CarouselWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _pclnDesignSystem = require("pcln-design-system");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var RelativeFlex = exports.RelativeFlex = (0, _styledComponents["default"])(_pclnDesignSystem.Flex).withConfig({
+  displayName: "Carouselstyles__RelativeFlex",
+  componentId: "sc-tqedn7-0"
+})(["position:relative;"]);
 var CarouselWrapper = exports.CarouselWrapper = _styledComponents["default"].div.withConfig({
   displayName: "Carouselstyles__CarouselWrapper",
-  componentId: "sc-tqedn7-0"
+  componentId: "sc-tqedn7-1"
 })(["", " .buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer;}.image___xtQGH{display:block;width:100%;height:100%;}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px;}@keyframes spin___S3UuE{0%{transform:rotate(0deg);}to{transform:rotate(1turn);}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%;}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity 0.3s,transform 0.3s;}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1;}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4;}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none;}.slide___3-Nqo:focus{outline:none !important;}.slideHorizontal___1NzNV{float:left;}[dir='rtl'] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1);}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%;}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight;}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color;}}.horizontalSlider___281Ls{position:relative;overflow:hidden;", " ", " ", "}[dir='rtl'] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1);}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%;}.verticalSlider___34ZFD{position:relative;overflow:hidden;}.verticalSliderTray___267D8{overflow:hidden;}.verticalTray___12Key{float:left;}.verticalSlideTrayWrap___2nO7o{overflow:hidden;}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0;}.sliderAnimation___300FY{transition:transform 0.5s;transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);will-change:transform;}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4;}"], function (_ref) {
@@ -14,0 +19,0 @@ var maxHeight = _ref.maxHeight;

dist/esm/Carousel.js

@@ -5,3 +5,3 @@ import React, { useState, useContext, useEffect, cloneElement } from 'react';
 import { layoutToFlexWidths } from './layoutToFlexWidths';
-import { CarouselWrapper } from './Carousel.styles';
+import { CarouselWrapper, RelativeFlex } from './Carousel.styles';
 import { Flex, Relative, Box, SlideBox } from 'pcln-design-system';
@@ -67,3 +67,4 @@ import { Dots } from './Dots';
     overflowAllowancePxTop = 0,
-    maxHeight
+    maxHeight,
+    arrowButtonZIndex
   } = _ref2;
@@ -192,6 +193,7 @@ const widths = layoutToFlexWidths(layout, children.length);
     showArrowsOnHover: showArrowsOnHover
-  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/React.createElement(Flex, {
+  })), arrowsPosition === 'bottom' || showDots ? /*#__PURE__*/React.createElement(RelativeFlex, {
     alignItems: "center",
     justifyContent: ARROW_JUSTIFY_CONTENT[arrowsAlignment],
-    pt: 2
+    pt: 2,
+    zIndex: arrowButtonZIndex
   }, nodeBesideArrowsLeft && arrowsAlignment === 'right' ? /*#__PURE__*/React.createElement(Box, {
@@ -285,3 +287,5 @@ ml: 2,
   /** Number of px to set maxHeight to counteract large overflow values*/
-  maxHeight: PropTypes.number
+  maxHeight: PropTypes.number,
+  /** z-index for arrow buttons*/
+  arrowButtonZIndex: PropTypes.number
 };

dist/esm/Carousel.stories.js

@@ -210,2 +210,32 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 };
+const OverflowTemplateBottomArrows = args => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Relative, {
+  width: 1,
+  bg: "background.light",
+  zIndex: 2,
+  height: "80px",
+  borderRadius: "xl",
+  mb: [3, 3, 3, 4],
+  mx: 2
+}, "Above"), /*#__PURE__*/React.createElement(Carousel, args, renderOverflowCards()), /*#__PURE__*/React.createElement(Relative, {
+  width: 1,
+  bg: "background.light",
+  zIndex: 3,
+  height: "80px",
+  borderRadius: "xl",
+  mt: [5, 3, 3, 5],
+  mx: 2
+}, "Below"));
+export const OverflowArrowsBottomZIndex = OverflowTemplateBottomArrows.bind({
+  boxShadowSize: 'xl'
+});
+OverflowArrowsBottomZIndex.args = {
+  visibleSlides: 3,
+  mobileVisibleSlides: [1.1, 2.1, 2.1],
+  arrowsPosition: 'bottom',
+  overflowAllowancePxX: 46,
+  overflowAllowancePxY: 80,
+  overflowAllowancePxTop: 2,
+  maxHeight: 220,
+  arrowButtonZIndex: 2
+};
 
@@ -212,0 +242,0 @@ //Overflow With backround

dist/esm/Carousel.styles.js

 import styled from 'styled-components';
+import { Flex } from 'pcln-design-system';
+export const RelativeFlex = styled(Flex).withConfig({
+  displayName: "Carouselstyles__RelativeFlex",
+  componentId: "sc-tqedn7-0"
+})(["position:relative;"]);
 export const CarouselWrapper = styled.div.withConfig({
   displayName: "Carouselstyles__CarouselWrapper",
-  componentId: "sc-tqedn7-0"
+  componentId: "sc-tqedn7-1"
 })(["", " .buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer;}.image___xtQGH{display:block;width:100%;height:100%;}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px;}@keyframes spin___S3UuE{0%{transform:rotate(0deg);}to{transform:rotate(1turn);}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%;}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity 0.3s,transform 0.3s;}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1;}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4;}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none;}.slide___3-Nqo:focus{outline:none !important;}.slideHorizontal___1NzNV{float:left;}[dir='rtl'] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1);}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%;}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight;}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color;}}.horizontalSlider___281Ls{position:relative;overflow:hidden;", " ", " ", "}[dir='rtl'] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1);}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%;}.verticalSlider___34ZFD{position:relative;overflow:hidden;}.verticalSliderTray___267D8{overflow:hidden;}.verticalTray___12Key{float:left;}.verticalSlideTrayWrap___2nO7o{overflow:hidden;}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0;}.sliderAnimation___300FY{transition:transform 0.5s;transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);will-change:transform;}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4;}"], _ref => {
@@ -6,0 +11,0 @@ let {

package.json

 {
   "name": "pcln-carousel",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Priceline Design System Carousel Component",
@@ -61,5 +61,5 @@ "homepage": "https://github.com/priceline/design-system#readme",
     "@priceline/babel-preset": "0.0.1",
-    "pcln-design-system": "6.8.1",
     "@priceline/eslint-config": "0.0.1",
     "pcln-popover": "6.0.15",
+    "pcln-design-system": "6.8.1",
     "pcln-icons": "6.1.0"
@@ -66,0 +66,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

113969

increased by2.53%

Lines of code

2263

increased by3.66%

Worsened metrics

Published versions last two months

29

decreased by-3.33%

No dependency changes