@twreporter/react-article-components 1.4.8 → 1.4.9-rc.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.9-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.8...@twreporter/react-article-components@1.4.9-rc.0) (2022-04-01)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.4.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.8-rc.0...@twreporter/react-article-components@1.4.8) (2022-03-22)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -154,7 +154,7 @@ var RelatedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).withConfig({
   displayName: "article-page__BackgroundBlock",
   componentId: "sc-1wuywdb-11"
-})(["", " ", " @media print{.hidden-print{display:none;}.avoid-break{break-inside:avoid;}}padding-left:10px;padding-right:10px;"], fontFamilyCss, function (props) {
+})(["", " ", " @media print{-webkit-print-color-adjust:exact;color-adjust:exact;.hidden-print{display:none;}.avoid-break{break-inside:avoid;}}padding-left:10px;padding-right:10px;"], fontFamilyCss, function (props) {
   return getBackgroundBlockStyles(props.theme.name);
 });
 

package/lib/components/body/image-diff.js

@@ -81,13 +81,15 @@ var unicodeToString = function unicodeToString(unicode) {
 };
 
 var getResponsiveBackground = function getResponsiveBackground(imageSetPropKey) {
-  return (0, _styledComponents.css)(["", " ", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", ");\n  "])), function (props) {
+  return (0, _styledComponents.css)(["", " ", " ", " @media print{background-image:url(", ");}"], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", ");\n  "])), function (props) {
     return (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(props, [imageSetPropKey, 'desktop', 'url']));
   }), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: url(", ");\n  "])), function (props) {
     return (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(props, [imageSetPropKey, 'tablet', 'url']));
   }), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: url(", ");\n  "])), function (props) {
     return (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(props, [imageSetPropKey, 'mobile', 'url']));
-  }));
+  }), function (props) {
+    return (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(props, [imageSetPropKey, 'desktop', 'url']));
+  });
 };
 
 var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["padding-top:4px;text-align:center;font-size:12px;display:block;position:absolute;top:0;width:24px;height:24px;background:", ";color:", ";"], _color["default"].white, function (props) {
@@ -104,8 +106,8 @@ var sharedStyleOfIndicatorPointer = /*#__PURE__*/(0, _styledComponents.css)(["pa
   }
 });
 
-var Image = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "image-diff__Image",
+var ImageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "image-diff__ImageContainer",
   componentId: "sc-1y1eq1w-0"
 })(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
   return "".concat(100 * props.heightWidthRatio, "%");
@@ -145,7 +147,8 @@ var ImageDiff = /*#__PURE__*/function (_PureComponent) {
 
       var caption = _.get(leftImageSet, 'description', _.get(rightImageSet, 'description'));
 
-      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Image, {
+      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, {
+        className: "avoid-break",
         heightWidthRatio: renderedHeightWidthRation,
         leftImageSet: leftImageSet,
         rightImageSet: rightImageSet

package/lib/components/body/image.js

@@ -81,8 +81,9 @@ var Image = /*#__PURE__*/function (_PureComponent) {
 
       var alt = _.get(image, 'keywords', caption);
 
+      var appendedClassName = className + ' avoid-break';
       return /*#__PURE__*/_react["default"].createElement(Container, {
-        className: className,
+        className: appendedClassName,
         small: small
       }, /*#__PURE__*/_react["default"].createElement("figure", {
         itemScope: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.4.8",
+  "version": "1.4.9-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",
@@ -39,5 +39,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "c3b7c794f5b83f5c7f0de7100e0070d449b7b325"
+  "gitHead": "e4803b574a68d58406e85adaea036e4b0f4b84f7"
 }