@twreporter/react-article-components 2.1.2-rc.1 → 2.2.0-rc.1

package/lib/components/body/index.js

@@ -1,97 +1,65 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 exports.renderElement = renderElement;
-
 var _elementAlignment = _interopRequireDefault(require("../../constants/element-alignment"));
-
 var _annotation = _interopRequireDefault(require("./annotation"));
-
 var _audio = _interopRequireDefault(require("./audio"));
-
 var _blockquote = _interopRequireDefault(require("./blockquote"));
-
 var _brief = _interopRequireDefault(require("./brief"));
-
 var _centeredQuote = _interopRequireDefault(require("./centered-quote"));
-
 var _embeddedCode = _interopRequireWildcard(require("./embedded-code"));
-
 var _headings = _interopRequireDefault(require("./headings"));
-
 var _image = _interopRequireDefault(require("./image"));
-
 var _imageDiff = _interopRequireDefault(require("./image-diff"));
-
 var _infobox = _interopRequireDefault(require("./infobox"));
-
 var _list = _interopRequireDefault(require("./list"));
-
 var _multimedia = _interopRequireDefault(require("./multimedia"));
-
 var _paragraph = _interopRequireDefault(require("./paragraph"));
-
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _slideshow = _interopRequireDefault(require("./slideshow"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _tableOfContents = _interopRequireDefault(require("../table-of-contents"));
-
 var _youtube = _interopRequireDefault(require("./youtube"));
-
+var _trackingSection = _interopRequireDefault(require("./tracking-section"));
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _map = _interopRequireDefault(require("lodash/map"));
-
 var _smoothScroll = _interopRequireDefault(require("smooth-scroll/dist/smooth-scroll"));
-
 var _anchor = require("../../constants/anchor");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23; // @twreporter
+// lodash
+// Change smooth-scroll import path due to SSR issue:
+// https://github.com/cferdinandi/smooth-scroll/issues/481
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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, descriptor.key, descriptor); } }
-
+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); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var _ = {
   get: _get["default"],
   map: _map["default"]
@@ -147,17 +115,14 @@ var StyledEmbeddedNormal = /*#__PURE__*/(0, _styledComponents["default"])(_embed
   displayName: "body__StyledEmbeddedNormal",
   componentId: "dwuu2m-8"
 })(["", " ", ""], normalWidthCSS, embeddedCSS);
-
 var StyledExtendImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "body__StyledExtendImageBlock",
   componentId: "dwuu2m-9"
 })(["", " ", " margin:", ";"], extendWidthCSS, clearFloatCSS, mockup.margin.extend);
-
 var StyledLargeImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "body__StyledLargeImageBlock",
   componentId: "dwuu2m-10"
 })(["", " ", " ", " margin:", ";", "{margin-bottom:0px;", " ", " ", "}"], largeWidthCSS, clearFloatCSS, _mediaQuery["default"].mobileOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))), mockup.margin.large, _multimedia["default"].Caption, _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      position: absolute;\n      bottom: 0;\n      transform: translateX(100%);\n      &:after {\n        width: 100%;\n      }\n    "]))), _mediaQuery["default"].desktopOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      right: -21px;\n    "]))), _mediaQuery["default"].hdOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      right: -38px;\n    "]))));
-
 var StyledSlideshow = /*#__PURE__*/(0, _styledComponents["default"])(_slideshow["default"]).withConfig({
   displayName: "body__StyledSlideshow",
   componentId: "dwuu2m-11"
@@ -182,16 +147,19 @@ var StyledParagraph = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph[
   displayName: "body__StyledParagraph",
   componentId: "dwuu2m-16"
 })(["", " margin:", ";"], normalWidthCSS, mockup.margin.normal);
-
 var AlignRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "body__AlignRight",
   componentId: "dwuu2m-17"
 })(["", " ", " ", ",", ",", ",", "{", ";}", "{", "}"], extendWidthCSS, clearFloatCSS, StyledCenteredQuote, StyledBlockquote, StyledEmbedded, StyledInfobox, alignRightCSS, StyledEmbedded, _mediaQuery["default"].desktopAndAbove(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      margin: 0 0 20px 30px;\n      ", " {\n        padding: 13px 10px 0 10px;\n      }\n    "])), _embeddedCode.Caption));
-
 var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "body__ClearFloat",
   componentId: "dwuu2m-18"
 })(["", ""], clearFloatCSS);
+var StyledTrackingSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "body__StyledTrackingSection",
+  componentId: "dwuu2m-19"
+})(["", ";margin:40px auto 48px;"], normalWidthCSS);
+
 /**
  *  Element Data
  *  See `elementData` in `src/constants/prop-types/body.js`
@@ -210,26 +178,21 @@ var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  * @param {boolean} isScrollingToAnchor - state of scrolling to an anchor or not
  * @returns
  */
-
-
 function renderElement() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var isScrollingToAnchor = arguments.length > 1 ? arguments[1] : undefined;
   var isCenterAligned = data.alignment === _elementAlignment["default"].center || data.alignment === _elementAlignment["default"].centerSmall;
-
   switch (data.type) {
     case 'annotation':
       return /*#__PURE__*/_react["default"].createElement(StyledAnnotation, {
         key: data.id,
         data: data
       });
-
     case 'audio':
       return /*#__PURE__*/_react["default"].createElement(StyledAudio, {
         key: data.id,
         content: data.content[0]
       });
-
     case 'centered-quote':
     case 'quoteby':
       return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledCenteredQuote, {
@@ -240,7 +203,6 @@ function renderElement() {
       }, /*#__PURE__*/_react["default"].createElement(StyledCenteredQuote, {
         data: data
       }));
-
     case 'blockquote':
       return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledBlockquote, {
         key: data.id,
@@ -250,22 +212,18 @@ function renderElement() {
       }, /*#__PURE__*/_react["default"].createElement(StyledBlockquote, {
         data: data
       }));
-
     case 'header-one':
       return /*#__PURE__*/_react["default"].createElement(StyledHeaderOne, {
         key: data.id,
         data: data
       });
-
     case 'header-two':
       return /*#__PURE__*/_react["default"].createElement(StyledHeaderTwo, {
         key: data.id,
         data: data
       });
-
     case 'code':
       return null;
-
     case 'embedded-code':
     case 'embeddedCode':
     case 'embeddedcode':
@@ -280,14 +238,12 @@ function renderElement() {
               isScrollingToAnchor: isScrollingToAnchor
             }));
           }
-
         case _elementAlignment["default"].centerSmall:
           return /*#__PURE__*/_react["default"].createElement(StyledEmbeddedNormal, {
             key: data.id,
             data: data,
             isScrollingToAnchor: isScrollingToAnchor
           });
-
         case _elementAlignment["default"].center:
         default:
           {
@@ -298,7 +254,6 @@ function renderElement() {
             });
           }
       }
-
     case 'small-image':
     case 'image':
     case 'image-link':
@@ -316,14 +271,12 @@ function renderElement() {
               data: data,
               small: true
             }));
-
           case _elementAlignment["default"].centerSmall:
             return /*#__PURE__*/_react["default"].createElement(StyledLargeImageBlock, {
               key: data.id
             }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
               data: data
             }));
-
           case _elementAlignment["default"].center:
           default:
             return /*#__PURE__*/_react["default"].createElement(StyledExtendImageBlock, {
@@ -333,7 +286,6 @@ function renderElement() {
             }));
         }
       }
-
     case 'imageDiff':
     case 'imagediff':
       return /*#__PURE__*/_react["default"].createElement(StyledExtendImageBlock, {
@@ -342,7 +294,6 @@ function renderElement() {
         key: data.id,
         data: data
       }));
-
     case 'infobox':
       return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledInfobox, {
         key: data.id,
@@ -352,37 +303,37 @@ function renderElement() {
       }, /*#__PURE__*/_react["default"].createElement(StyledInfobox, {
         data: data
       }));
-
     case 'ordered-list-item':
       return /*#__PURE__*/_react["default"].createElement(StyledOrderedList, {
         key: data.id,
         data: data
       });
-
     case 'unordered-list-item':
       return /*#__PURE__*/_react["default"].createElement(StyledUnorderedList, {
         key: data.id,
         data: data
       });
-
     case 'unstyled':
       return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
         key: data.id,
         data: data
       });
-
     case 'slideshow':
       return /*#__PURE__*/_react["default"].createElement(StyledSlideshow, {
         key: data.id,
         data: data
       });
-
     case 'youtube':
       return /*#__PURE__*/_react["default"].createElement(StyledYoutube, {
         key: data.id,
         data: data
       });
-
+    case 'tracking-section':
+      return /*#__PURE__*/_react["default"].createElement(StyledTrackingSection, {
+        key: data.id
+      }, /*#__PURE__*/_react["default"].createElement(_trackingSection["default"], {
+        data: data
+      }));
     default:
       return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
         key: data.id,
@@ -390,32 +341,23 @@ function renderElement() {
       });
   }
 }
-
-var Body = /*#__PURE__*/function (_Component) {
+var Body = exports["default"] = /*#__PURE__*/function (_Component) {
   _inherits(Body, _Component);
-
   var _super = _createSuper(Body);
-
   function Body(props) {
     var _this;
-
     _classCallCheck(this, Body);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "tocManager", _tableOfContents["default"].createManager());
-
     _defineProperty(_assertThisInitialized(_this), "_scrollStartHandler", function () {
       _this._onStartScrollingToAnchor(true);
     });
-
     _defineProperty(_assertThisInitialized(_this), "_scrollStopHandler", function () {
       // Wait for a short time to avoid trigger waypoint's onEnter() of infogram embed close to the anchor
       setTimeout(function () {
         return _this._onStartScrollingToAnchor(false);
       }, _anchor.WAIT_AFTER_REACH_ANCHOR);
     });
-
     _defineProperty(_assertThisInitialized(_this), "_onStartScrollingToAnchor", function (isScrollingToAnchor, callback) {
       _this.setState({
         isScrollingToAnchor: isScrollingToAnchor
@@ -425,21 +367,17 @@ var Body = /*#__PURE__*/function (_Component) {
         }
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "_buildContentElement", function (data, index) {
       if (!data.id) {
         data.id = "body_element_".concat(index);
       }
-
       return renderElement(data, _this.state.isScrollingToAnchor);
     });
-
     _this.state = {
       isScrollingToAnchor: false
     };
     return _this;
   }
-
   _createClass(Body, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -465,27 +403,38 @@ var Body = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          brief = _this$props.brief,
-          content = _this$props.content,
-          onToggleTabExpanded = _this$props.onToggleTabExpanded,
-          scrollStage = _this$props.scrollStage;
+        brief = _this$props.brief,
+        content = _this$props.content,
+        onToggleTabExpanded = _this$props.onToggleTabExpanded,
+        scrollStage = _this$props.scrollStage,
+        trackingSection = _this$props.trackingSection;
+      var trackingSectionHeaderOne = {
+        type: 'header-one',
+        content: ['後續與迴響']
+      };
       var enableTOC = false;
-      var contentJsx = Array.isArray(content) ? _.map(content, function (data, index) {
+      var renderContent = null;
+      if (Array.isArray(content)) {
+        if (Array.isArray(trackingSection) && trackingSection.length > 0) {
+          renderContent = [].concat(_toConsumableArray(content), [trackingSectionHeaderOne], _toConsumableArray(trackingSection));
+        } else {
+          renderContent = _toConsumableArray(content);
+        }
+      }
+      var contentJsx = Array.isArray(renderContent) ? _.map(renderContent, function (data, index) {
         var elementJSX = _this2._buildContentElement(data, index);
-
         if (data.type === 'header-one') {
           enableTOC = true;
           return /*#__PURE__*/_react["default"].createElement(_tableOfContents["default"].React.Anchor, {
-            key: data.id // provide header-one string as anchor id for article
+            key: data.id
+            // provide header-one string as anchor id for article
             ,
             id: _.get(data, 'content.0', "section-".concat(index)),
             label: _.get(data, 'content.0'),
             manager: _this2.tocManager
           }, elementJSX);
         }
-
         return elementJSX;
       }) : null;
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledBrief, {
@@ -498,22 +447,20 @@ var Body = /*#__PURE__*/function (_Component) {
       }) : null);
     }
   }]);
-
   return Body;
 }(_react.Component);
-
-exports["default"] = Body;
-
 _defineProperty(Body, "propTypes", {
   brief: _propTypes["default"].arrayOf(_body["default"].elementData),
   content: _propTypes["default"].arrayOf(_body["default"].elementData),
   onToggleTabExpanded: _propTypes["default"].func,
-  scrollStage: _propTypes["default"].number
+  scrollStage: _propTypes["default"].number,
+  // for tracking section feature toggle
+  trackingSection: _propTypes["default"].array
 });
-
 _defineProperty(Body, "defaultProps", {
   brief: [],
   content: [],
   onToggleTabExpanded: function onToggleTabExpanded() {},
-  scollStage: 1
+  scollStage: 1,
+  trackingSection: []
 });

package/lib/components/body/infobox.js

@@ -1,128 +1,94 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
-
 var _css = _interopRequireDefault(require("../../constants/css"));
-
 var _theme = _interopRequireDefault(require("../../constants/theme"));
-
 var _typography = _interopRequireDefault(require("../../constants/typography"));
-
 var _anchor = require("../../constants/anchor");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _color = require("@twreporter/core/lib/constants/color");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // constants
+// twreporter
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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 _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, descriptor.key, descriptor); } }
-
+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); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var _ = {
   get: _get["default"]
 };
-var widthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: calc(248/300*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 445px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 480px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 580px;\n  "]))));
-
+var articleBodyWidthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: calc(248/300*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 445px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 480px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 580px;\n  "]))));
+var trackingSectionWidthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 256px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 386px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 476px;\n  "]))));
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Title",
   componentId: "sc-1rp3uhy-0"
-})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
+})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], function (props) {
+  return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
+}, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
 });
-
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Content",
   componentId: "sc-1rp3uhy-1"
-})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
+})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], function (props) {
+  return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
+}, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
   return props.theme.fontSizeOffset + 16;
 });
-
 function getContainerStyles(themeName) {
   switch (themeName) {
     case _theme["default"].article.v2.photo:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.heavy);
-
     case _theme["default"].article.v2.pink:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.COLOR_PINK_ARTICLE.pink);
-
     case _theme["default"].article.v2["default"]:
     default:
       return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.main);
   }
 }
-
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Container",
   componentId: "sc-1rp3uhy-2"
 })(["", " ", " white-space:pre-wrap;background:", ";position:relative;margin:60px auto 0 auto;", " ", " &::before{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:right center;position:absolute;right:-15px;top:28px;}&::after{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:left center;position:absolute;left:-6px;bottom:22px;}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
-
-var Infobox = /*#__PURE__*/function (_PureComponent) {
+}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
+var Infobox = exports["default"] = /*#__PURE__*/function (_PureComponent) {
   _inherits(Infobox, _PureComponent);
-
   var _super = _createSuper(Infobox);
-
   function Infobox() {
     _classCallCheck(this, Infobox);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(Infobox, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
-          data = _this$props.data;
-
+        className = _this$props.className,
+        data = _this$props.data,
+        forTrackingSection = _this$props.forTrackingSection;
       var contentHtmlString = _.get(data, ['content', 0, 'body'], '');
-
       var title = _.get(data, ['content', 0, 'title'], '');
-
       var anchorRegex = /<a([^>]*)>/g;
       var hashRegex = /href={?["']#/;
       var mutatedContentHtmlString = contentHtmlString === null || contentHtmlString === void 0 ? void 0 : contentHtmlString.replace(anchorRegex, function (anchorString, attrs) {
@@ -131,25 +97,26 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
         return hashRegex.exec(anchorString) ? "<a ".concat(_anchor.ARTICLE_ANCHOR_SCROLL, "=\"true\" ").concat(attrs, ">") : anchorString;
       });
       return mutatedContentHtmlString ? /*#__PURE__*/_react["default"].createElement(Container, {
-        className: className
-      }, title ? /*#__PURE__*/_react["default"].createElement(Title, null, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
+        className: className,
+        $forTrackingSection: forTrackingSection
+      }, title ? /*#__PURE__*/_react["default"].createElement(Title, {
+        $forTrackingSection: forTrackingSection
+      }, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
+        $forTrackingSection: forTrackingSection,
         dangerouslySetInnerHTML: {
           __html: mutatedContentHtmlString
         }
       })) : null;
     }
   }]);
-
   return Infobox;
 }(_react.PureComponent);
-
-exports["default"] = Infobox;
-
 _defineProperty(Infobox, "propTypes", {
   className: _propTypes["default"].string,
-  data: _body["default"].elementData.isRequired
+  data: _body["default"].elementData.isRequired,
+  forTrackingSection: _propTypes["default"].bool
 });
-
 _defineProperty(Infobox, "defaultProps", {
-  className: ''
+  className: '',
+  forTrackingSection: false
 });