@twreporter/react-article-components 2.2.0-rc.3 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.2.0-rc.4...@twreporter/react-article-components@2.2.0) (2024-06-24)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+# [2.2.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.2.0-rc.3...@twreporter/react-article-components@2.2.0-rc.4) (2024-06-24)
+
+
+### Features
+
+* prop for tracking section ([9c8d5a4](https://github.com/twreporter/twreporter-npm-packages/commit/9c8d5a4f6948ec948232fe402b70fde05ebbde42))
+
+
+
+
+
 # [2.2.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.2.0-rc.2...@twreporter/react-article-components@2.2.0-rc.3) (2024-06-23)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/body/image.js

@@ -4,15 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
+var _color = require("@twreporter/core/lib/constants/color");
 var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 var _multimedia = _interopRequireDefault(require("./multimedia"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
-var _react = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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, _toPropertyKey(descriptor.key), descriptor); } }
@@ -26,7 +29,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // @twreporter
+// components
+// constants
+// lodash
 var _ = {
   get: _get["default"]
 };
@@ -35,6 +41,10 @@ var imgProps = {
 };
 var Container = _multimedia["default"].Block;
 var Caption = _multimedia["default"].Caption;
+var CaptionForTrackingSection = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "image__CaptionForTrackingSection",
+  componentId: "os4hbb-0"
+})(["color:", ";margin-top:8px;"], _color.colorGrayscale.gray700);
 var Image = exports["default"] = /*#__PURE__*/function (_PureComponent) {
   _inherits(Image, _PureComponent);
   var _super = _createSuper(Image);
@@ -48,7 +58,8 @@ var Image = exports["default"] = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
         className = _this$props.className,
         data = _this$props.data,
-        small = _this$props.small;
+        small = _this$props.small,
+        forTrackingSection = _this$props.forTrackingSection;
       var image = _.get(data, ['content', 0]);
       var caption = _.get(image, 'description');
       var alt = _.get(image, 'keywords', caption);
@@ -66,7 +77,9 @@ var Image = exports["default"] = /*#__PURE__*/function (_PureComponent) {
         defaultImage: image.mobile,
         clickable: true
         /* TODO: add sizes */
-      }), caption ? /*#__PURE__*/_react["default"].createElement(Caption, {
+      }), caption ? forTrackingSection ? /*#__PURE__*/_react["default"].createElement(CaptionForTrackingSection, {
+        text: caption
+      }) : /*#__PURE__*/_react["default"].createElement(Caption, {
         itemprop: "description"
       }, caption) : null));
     }
@@ -76,9 +89,11 @@ var Image = exports["default"] = /*#__PURE__*/function (_PureComponent) {
 _defineProperty(Image, "propTypes", {
   className: _propTypes["default"].string,
   data: _body["default"].elementData.isRequired,
-  small: _propTypes["default"].bool
+  small: _propTypes["default"].bool,
+  forTrackingSection: _propTypes["default"].bool
 });
 _defineProperty(Image, "defaultProps", {
   className: '',
-  small: false
+  small: false,
+  forTrackingSection: false
 });

package/lib/components/body/paragraph.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Paragraph;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _color = require("@twreporter/core/lib/constants/color");
+var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 var _css = _interopRequireDefault(require("../../constants/css"));
 var _theme = _interopRequireDefault(require("../../constants/theme"));
-var _color = require("@twreporter/core/lib/constants/color");
 var _get = _interopRequireDefault(require("lodash/get"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+// @twreporter
+
+// constants
+
 // lodash
 
 var _ = {
@@ -24,7 +28,9 @@ var _ = {
 var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "paragraph__P",
   componentId: "ebafhp-0"
-})(["", " ", " ", ""], _css["default"].paragraphText, _css["default"].linkChildren, function (props) {
+})(["", " ", " ", ";", ""], _css["default"].paragraphText, _css["default"].linkChildren, function (props) {
+  return props.$forTrackingSection ? "font-size: ".concat(props.theme.fontSizeOffset + 16, "px") : '';
+}, function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
       return (0, _styledComponents.css)(["strong{color:", ";}"], _color.colorGrayscale.gray300);
@@ -33,20 +39,22 @@ var P = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   }
 });
 function Paragraph(_ref) {
-  var className = _ref.className,
-    data = _ref.data;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    data = _ref.data,
+    _ref$forTrackingSecti = _ref.forTrackingSection,
+    forTrackingSection = _ref$forTrackingSecti === void 0 ? false : _ref$forTrackingSecti;
   var innerHtmlString = _.get(data, ['content', 0]);
   return innerHtmlString ? /*#__PURE__*/_react["default"].createElement(P, {
     className: className,
     dangerouslySetInnerHTML: {
       __html: innerHtmlString
-    }
+    },
+    $forTrackingSection: forTrackingSection
   }) : null;
 }
 Paragraph.propTypes = {
   className: _propTypes["default"].string,
-  data: _body["default"].elementData
-};
-Paragraph.defaultProps = {
-  className: ''
+  data: _body["default"].elementData,
+  forTrackingSection: _propTypes["default"].bool
 };

package/lib/components/body/tracking-section.js

@@ -91,14 +91,16 @@ var TrackingSection = function TrackingSection(_ref) {
       case 'unstyled':
         return /*#__PURE__*/_react["default"].createElement(_paragraph2["default"], {
           key: data.id,
-          data: data
+          data: data,
+          forTrackingSection: true
         });
       case 'small-image':
       case 'image':
       case 'image-link':
         return /*#__PURE__*/_react["default"].createElement(_image["default"], {
           key: data.id,
-          data: data
+          data: data,
+          forTrackingSection: true
         });
       case 'infobox':
         return /*#__PURE__*/_react["default"].createElement(InfoBoxContainer, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.2.0-rc.3",
+  "version": "2.2.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",
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.22.1",
-    "@twreporter/react-components": "^9.1.0-rc.1",
-    "@twreporter/redux": "^8.0.3-rc.0",
-    "@twreporter/universal-header": "^3.0.3-rc.3",
+    "@twreporter/react-components": "^9.1.0",
+    "@twreporter/redux": "^8.0.3",
+    "@twreporter/universal-header": "^3.0.3",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "71085043100578f659308e6d6d37a3de0a51eab2"
+  "gitHead": "d4e15f1555f27b231f403fb987576cec3c23e800"
 }