@twreporter/react-article-components 1.13.3-rc.0 → 1.14.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.13.3-rc.0...@twreporter/react-article-components@1.14.0-rc.0) (2024-05-07)
+
+
+### Features
+
+* set aspect-ratio for slideshow ([10bc3a9](https://github.com/twreporter/twreporter-npm-packages/commit/10bc3a955873b0d0bf7589e38670d387b70a2b97))
+
+
+
+
+
 ## [1.13.3-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.13.2...@twreporter/react-article-components@1.13.3-rc.0) (2024-05-07)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/body/slideshow/index.js

@@ -31,7 +31,7 @@ var _typography = _interopRequireDefault(require("../../../constants/typography"
 
 var _color = require("@twreporter/core/lib/constants/color");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -188,17 +188,17 @@ var defaultCurIndex = 0;
 var SlidesSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__SlidesSection",
   componentId: "sc-1skir21-0"
-})(["flex-shrink:0;flex-basis:100%;overflow:hidden;position:relative;", " ", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    order: 2;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "])), mockup.mobile.slide.height, mockup.mobile.container.width), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "])), mockup.tablet.slide.height, mockup.tablet.container.width), _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "])), mockup.desktop.slide.height, mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "])), mockup.hd.slide.height, mockup.hd.container.width));
+})(["flex-shrink:0;flex-basis:100%;overflow:hidden;position:relative;width:100%;aspect-ratio:3 / 2;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    order: 2;\n  "]))));
 
 var PrevNextSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__PrevNextSection",
   componentId: "sc-1skir21-1"
-})(["margin-top:20px;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    order: 3;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-left: 25px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-left: 47px;\n  "]))));
+})(["margin-top:20px;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    order: 3;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 25px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-left: 47px;\n  "]))));
 
 var PrevButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__PrevButton",
   componentId: "sc-1skir21-2"
-})(["cursor:pointer;width:59px;height:59px;display:inline-flex;border:solid 1px;> svg{margin:auto;width:21px;}", " &:hover{> svg{transform:translateX(-5px);transition:transform 0.3s ease;}}"], _mediaQuery["default"].hdOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 83px;\n    height: 83px;\n\n    > svg {\n      width: 31px;\n    }\n  "]))));
+})(["cursor:pointer;width:59px;height:59px;display:inline-flex;border:solid 1px;> svg{margin:auto;width:21px;}", " &:hover{> svg{transform:translateX(-5px);transition:transform 0.3s ease;}}"], _mediaQuery["default"].hdOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 83px;\n    height: 83px;\n\n    > svg {\n      width: 31px;\n    }\n  "]))));
 
 var NextButton = /*#__PURE__*/(0, _styledComponents["default"])(PrevButton).withConfig({
   displayName: "slideshow__NextButton",
@@ -208,21 +208,21 @@ var NextButton = /*#__PURE__*/(0, _styledComponents["default"])(PrevButton).with
 var ImageNumberCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__ImageNumberCircle",
   componentId: "sc-1skir21-4"
-})(["display:inline-block;width:80px;height:80px;border-radius:50%;vertical-align:top;position:relative;&::after{content:'';position:absolute;width:62px;border-top:solid 1px;transform:rotate(-45deg);transform-origin:bottom left;top:67px;left:7px;}", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    order: 1;\n\n    /* align right */\n    margin-left: auto;\n    /* 10px is the border-right width of body */\n    margin-right: 10px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    margin-top: 6px;\n\n    /* align right */\n    margin-left: auto;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-right: -18px;\n    width: 110px;\n    height: 110px;\n\n    &::after {\n      width: 89px;\n      top: 93px;\n      left: 10px;\n    }\n  "]))));
+})(["display:inline-block;width:80px;height:80px;border-radius:50%;vertical-align:top;position:relative;&::after{content:'';position:absolute;width:62px;border-top:solid 1px;transform:rotate(-45deg);transform-origin:bottom left;top:67px;left:7px;}", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    order: 1;\n\n    /* align right */\n    margin-left: auto;\n    /* 10px is the border-right width of body */\n    margin-right: 10px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-top: 6px;\n\n    /* align right */\n    margin-left: auto;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-right: -18px;\n    width: 110px;\n    height: 110px;\n\n    &::after {\n      width: 89px;\n      top: 93px;\n      left: 10px;\n    }\n  "]))));
 
 var ImageNumber = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "slideshow__ImageNumber",
   componentId: "sc-1skir21-5"
-})(["position:absolute;top:25px;left:9px;font-size:24px;font-weight:", ";line-height:0.79;", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].hdOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]))));
+})(["position:absolute;top:25px;left:9px;font-size:24px;font-weight:", ";line-height:0.79;", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].hdOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]))));
 
 var ImageTotal = /*#__PURE__*/(0, _styledComponents["default"])(ImageNumber).withConfig({
   displayName: "slideshow__ImageTotal",
   componentId: "sc-1skir21-6"
-})(["top:46px;left:36px;", ""], _mediaQuery["default"].hdOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    top: 71px;\n    left: 50px;\n  "]))));
+})(["top:46px;left:36px;", ""], _mediaQuery["default"].hdOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    top: 71px;\n    left: 50px;\n  "]))));
 var Desc = /*#__PURE__*/(0, _styledComponents["default"])(_multimedia["default"].Caption).withConfig({
   displayName: "slideshow__Desc",
   componentId: "sc-1skir21-7"
-})(["align-self:flex-start;display:inline-block;margin-bottom:0;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    order: 4;\n    padding-top: 15px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: calc(180/355*100%);\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n\n    /* overwrite Multimedia.Caption styles */\n    float: none;\n  "]))));
+})(["align-self:flex-start;display:inline-block;margin-bottom:0;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    order: 4;\n    padding-top: 15px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    width: calc(180/355*100%);\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n\n    /* overwrite Multimedia.Caption styles */\n    float: none;\n  "]))));
 var EmptyDesc = /*#__PURE__*/(0, _styledComponents["default"])(Desc).withConfig({
   displayName: "slideshow__EmptyDesc",
   componentId: "sc-1skir21-8"
@@ -235,53 +235,39 @@ var SlidesFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   if (props.isSliding) {
     return "transition: transform ".concat(props.duration, "ms ease-in-out;");
   }
-}, _mediaQuery["default"].mobileOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
+}, _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
   return getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100;
-}), _mediaQuery["default"].tabletOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
+}), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
   return getTranslateX(mockup.tablet, props.translateXUint) / getContainerWidth(mockup.tablet) * 100;
-}), _mediaQuery["default"].desktopOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
+}), _mediaQuery["default"].desktopOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
   return getTranslateX(mockup.desktop, props.translateXUint);
-}), _mediaQuery["default"].hdOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
+}), _mediaQuery["default"].hdOnly(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
   return getTranslateX(mockup.hd, props.translateXUint);
 }));
 
 var SlideFlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__SlideFlexItem",
   componentId: "sc-1skir21-10"
-})(["height:100%;flex-shrink:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "])), getSlideWidth(mockup.mobile), getContainerWidth(mockup.mobile), mockup.mobile.slide.paddingRight, getContainerWidth(mockup.mobile)), _mediaQuery["default"].tabletOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "])), getSlideWidth(mockup.tablet), getContainerWidth(mockup.tablet), mockup.tablet.slide.paddingRight, getContainerWidth(mockup.tablet)), _mediaQuery["default"].desktopOnly(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "])), getSlideWidth(mockup.desktop), mockup.desktop.slide.paddingRight), _mediaQuery["default"].hdOnly(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "])), getSlideWidth(mockup.hd), mockup.hd.slide.paddingRight));
-
-var SlideMask = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "slideshow__SlideMask",
-  componentId: "sc-1skir21-11"
-})(["position:absolute;top:0;height:100%;opacity:0.55;"]);
-
-var LeftSlideMask = /*#__PURE__*/(0, _styledComponents["default"])(SlideMask).withConfig({
-  displayName: "slideshow__LeftSlideMask",
-  componentId: "sc-1skir21-12"
-})(["left:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), getLeftMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), getLeftMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), getLeftMaskWidth(mockup.hd)));
-var RightSlideMask = /*#__PURE__*/(0, _styledComponents["default"])(SlideMask).withConfig({
-  displayName: "slideshow__RightSlideMask",
-  componentId: "sc-1skir21-13"
-})(["right:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), getRightMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), getRightMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), getRightMaskWidth(mockup.hd)));
+})(["height:100%;flex-shrink:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "])), getSlideWidth(mockup.mobile), getContainerWidth(mockup.mobile), mockup.mobile.slide.paddingRight, getContainerWidth(mockup.mobile)), _mediaQuery["default"].tabletOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "])), getSlideWidth(mockup.tablet), getContainerWidth(mockup.tablet), mockup.tablet.slide.paddingRight, getContainerWidth(mockup.tablet)), _mediaQuery["default"].desktopOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "])), getSlideWidth(mockup.desktop), mockup.desktop.slide.paddingRight), _mediaQuery["default"].hdOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "])), getSlideWidth(mockup.hd), mockup.hd.slide.paddingRight));
 
 var SlideshowFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__SlideshowFlexBox",
-  componentId: "sc-1skir21-14"
+  componentId: "sc-1skir21-11"
 })(["", " width:100%;display:flex;justify-content:space-between;flex-wrap:wrap;", " ", " ", ""], function (props) {
   return getSlideshowFlexBoxStyles(props.theme.name);
-}, _mediaQuery["default"].tabletAndBelow(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.hd.container.width));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), mockup.hd.container.width));
 
 function getSlideshowFlexBoxStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray400, ImageNumberCircle, _color.colorSupportive.main, _color.COLOR_PINK_ARTICLE.darkBlue, ImageNumber, _color.COLOR_PINK_ARTICLE.darkBlue, SlideMask, _color.colorSupportive.main);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray400, ImageNumberCircle, _color.colorSupportive.main, _color.COLOR_PINK_ARTICLE.darkBlue, ImageNumber, _color.COLOR_PINK_ARTICLE.darkBlue);
 
     case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.COLOR_PINK_ARTICLE.pink, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white, SlideMask, _color.COLOR_PINK_ARTICLE.lightBlue);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.COLOR_PINK_ARTICLE.pink, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
 
     case _theme["default"].article.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}", "{background-color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.colorSupportive.main, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white, SlideMask, _color.colorSupportive.main);
+      return (0, _styledComponents.css)(["", "{border-color:", ";}", "{background-color:", ";&::after{border-color:", ";}}", "{color:", ";}"], PrevButton, _color.colorGrayscale.gray300, ImageNumberCircle, _color.colorSupportive.main, _color.colorGrayscale.white, ImageNumber, _color.colorGrayscale.white);
   }
 }
 /**
@@ -341,24 +327,6 @@ function getContainerWidth(deviceMockup) {
 function getSlideWidth(deviceMockup) {
   return deviceMockup.slide.width + deviceMockup.slide.paddingRight;
 }
-/**
- * @param {DeviceMockup} deviceMockup
- * @return {number}
- */
-
-
-function getLeftMaskWidth(deviceMockup) {
-  return deviceMockup.offset.left - deviceMockup.slide.paddingRight; // px
-}
-/**
- * @param {DeviceMockup} deviceMockup
- * @return {number}
- */
-
-
-function getRightMaskWidth(deviceMockup) {
-  return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
-}
 
 var imageProp = _propTypes["default"].shape({
   url: _propTypes["default"].string.isRequired
@@ -393,7 +361,6 @@ var Slideshow = /*#__PURE__*/function (_PureComponent) {
       var _images = [].concat(images.slice(-slidesOffset), images, images.slice(defaultCurIndex, slidesOffset));
 
       return _.map(_images, function (img, index) {
-        var objectFit = _.get(img, 'mobile.width', 0) > _.get(img, 'mobile.height', 0) ? 'cover' : 'contain';
         return (
           /*#__PURE__*/
           // since the items of _images would have the same id,
@@ -403,7 +370,7 @@ var Slideshow = /*#__PURE__*/function (_PureComponent) {
           }, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
             imageSet: [img.mobile, img.tablet, img.desktop],
             defaultImage: img.mobile,
-            objectFit: objectFit,
+            objectFit: 'contain',
             sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px"
           }))
         );
@@ -498,7 +465,7 @@ var Slideshow = /*#__PURE__*/function (_PureComponent) {
         translateXUint: translateXUint,
         duration: duration,
         isSliding: isSliding
-      }, slides), /*#__PURE__*/_react["default"].createElement(LeftSlideMask, null), /*#__PURE__*/_react["default"].createElement(RightSlideMask, null)), /*#__PURE__*/_react["default"].createElement(PrevNextSection, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
+      }, slides)), /*#__PURE__*/_react["default"].createElement(PrevNextSection, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
         onClick: isSliding ? undefined : this.slideToPrev
       }, /*#__PURE__*/_react["default"].createElement(PreArrowSvg, null)), /*#__PURE__*/_react["default"].createElement(NextButton, {
         onClick: isSliding ? undefined : this.slideToNext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.13.3-rc.0",
+  "version": "1.14.0-rc.0",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "c4d52ac00fa6a0531cea9f7cf3b17ef3f2b0f755"
+  "gitHead": "7460a0015752cb2e62e09e75c13e3f21569cea4a"
 }