@twreporter/react-article-components 2.2.0-rc.0 → 2.2.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/components/article-page.js +39 -108
  3. package/lib/components/aside/desktop-aside.js +25 -65
  4. package/lib/components/aside/desktop-tools.js +11 -57
  5. package/lib/components/aside/metadata.js +22 -89
  6. package/lib/components/aside/mobile-tool-bar.js +79 -175
  7. package/lib/components/aside/utils/theme.js +5 -11
  8. package/lib/components/body/annotation.js +15 -73
  9. package/lib/components/body/audio/audio-contexts.js +4 -16
  10. package/lib/components/body/audio/audio-provider.js +13 -48
  11. package/lib/components/body/audio/control-button.js +4 -28
  12. package/lib/components/body/audio/index.js +10 -56
  13. package/lib/components/body/audio/seek-bar.js +6 -23
  14. package/lib/components/body/audio/time.js +0 -6
  15. package/lib/components/body/blockquote.js +11 -52
  16. package/lib/components/body/brief.js +10 -55
  17. package/lib/components/body/centered-quote.js +10 -52
  18. package/lib/components/body/embedded-code.js +22 -101
  19. package/lib/components/body/headings.js +6 -23
  20. package/lib/components/body/image-diff.js +13 -66
  21. package/lib/components/body/image.js +11 -46
  22. package/lib/components/body/index.js +21 -118
  23. package/lib/components/body/infobox.js +13 -58
  24. package/lib/components/body/list.js +8 -29
  25. package/lib/components/body/multimedia.js +10 -29
  26. package/lib/components/body/paragraph.js +5 -23
  27. package/lib/components/body/slider/index.js +28 -96
  28. package/lib/components/body/slideshow/index.js +36 -107
  29. package/lib/components/body/tracking-section.js +7 -46
  30. package/lib/components/body/youtube.js +8 -41
  31. package/lib/components/donation-box.js +10 -44
  32. package/lib/components/img-with-placeholder/index.js +34 -106
  33. package/lib/components/leading/extend.js +6 -25
  34. package/lib/components/leading/fullscreen.js +17 -63
  35. package/lib/components/leading/index.js +2 -10
  36. package/lib/components/leading/normal.js +19 -64
  37. package/lib/components/leading/pink.js +20 -59
  38. package/lib/components/leading/small.js +6 -25
  39. package/lib/components/license.js +9 -40
  40. package/lib/components/link.js +8 -37
  41. package/lib/components/related/card.js +20 -73
  42. package/lib/components/related/index.js +25 -71
  43. package/lib/components/related/list.js +16 -70
  44. package/lib/components/related/mockup.js +10 -12
  45. package/lib/components/separation-curve.js +0 -15
  46. package/lib/components/table-of-contents/index.js +17 -46
  47. package/lib/components/table-of-contents/styled.js +10 -38
  48. package/lib/constants/anchor.js +4 -8
  49. package/lib/constants/css.js +2 -15
  50. package/lib/constants/element-alignment.js +2 -3
  51. package/lib/constants/prop-types/article-page.js +2 -7
  52. package/lib/constants/prop-types/aside.js +2 -8
  53. package/lib/constants/prop-types/body.js +4 -9
  54. package/lib/constants/prop-types/img-with-placeholder.js +2 -7
  55. package/lib/constants/prop-types/leading.js +8 -13
  56. package/lib/constants/prop-types/related.js +2 -7
  57. package/lib/constants/theme.js +2 -3
  58. package/lib/constants/typography.js +2 -5
  59. package/lib/contexts/dynamic-components-context.js +2 -8
  60. package/lib/managers/layout-manager.js +13 -28
  61. package/lib/managers/theme-manager.js +13 -32
  62. package/lib/managers/ui-manager.js +14 -26
  63. package/lib/utils/image.js +5 -14
  64. package/package.json +6 -6
@@ -1,124 +1,86 @@
1
1
  "use strict";
2
2
 
3
- 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); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports["default"] = void 0;
9
-
10
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
8
  var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
13
-
14
9
  var _react = _interopRequireWildcard(require("react"));
15
-
16
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
11
  var _css = _interopRequireDefault(require("../../constants/css"));
19
-
20
12
  var _theme = _interopRequireDefault(require("../../constants/theme"));
21
-
22
13
  var _typography = _interopRequireDefault(require("../../constants/typography"));
23
-
24
14
  var _color = require("@twreporter/core/lib/constants/color");
25
-
26
15
  var _get = _interopRequireDefault(require("lodash/get"));
27
-
28
- 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); }
29
-
30
- 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; }
31
-
16
+ 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); }
17
+ 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; }
32
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
33
-
19
+ 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); }
34
20
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
35
-
36
- 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); } }
37
-
21
+ 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); } }
38
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
39
-
40
23
  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); }
41
-
42
24
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
43
-
44
25
  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); }; }
45
-
46
26
  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); }
47
-
48
27
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
49
-
50
28
  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; } }
51
-
52
29
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
53
-
54
- 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; }
55
-
30
+ 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; }
31
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
32
+ 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); } // lodash
56
33
  var _ = {
57
34
  get: _get["default"]
58
35
  };
59
-
60
36
  var QuoteContent = /*#__PURE__*/_styledComponents["default"].blockquote.withConfig({
61
37
  displayName: "centered-quote__QuoteContent",
62
38
  componentId: "oc409x-0"
63
39
  })(["white-space:pre-wrap;margin:0;font-weight:", ";font-size:", "px;line-height:1.56;letter-spacing:1.1px;text-align:center;"], _typography["default"].font.weight.normal, function (props) {
64
40
  return props.theme.fontSizeOffset + 32;
65
41
  });
66
-
67
42
  var QuoteBy = /*#__PURE__*/_styledComponents["default"].cite.withConfig({
68
43
  displayName: "centered-quote__QuoteBy",
69
44
  componentId: "oc409x-1"
70
45
  })(["margin:25px auto 0 auto;display:block;font-style:normal;font-weight:", ";font-size:", "px;line-height:1.56;letter-spacing:0.5px;text-align:center;", ""], _typography["default"].font.weight.normal, function (props) {
71
46
  return props.theme.fontSizeOffset + 16;
72
47
  }, _css["default"].linkChildren);
73
-
74
48
  var VerticalLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
75
49
  displayName: "centered-quote__VerticalLine",
76
50
  componentId: "oc409x-2"
77
51
  })(["width:2px;height:80px;margin:0 auto 40px auto;"]);
78
-
79
52
  var QuoteContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
80
53
  displayName: "centered-quote__QuoteContainer",
81
54
  componentId: "oc409x-3"
82
55
  })(["", ""], function (props) {
83
56
  return getQuoteContainerStyles(props.theme.name);
84
57
  });
85
-
86
58
  function getQuoteContainerStyles(themeName) {
87
59
  switch (themeName) {
88
60
  case _theme["default"].article.v2.pink:
89
61
  return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.COLOR_PINK_ARTICLE.pink);
90
-
91
62
  case _theme["default"].article.v2.photo:
92
63
  return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray300, VerticalLine, _color.colorSupportive.heavy);
93
-
94
64
  case _theme["default"].article.v2["default"]:
95
65
  default:
96
66
  return (0, _styledComponents.css)(["", ",", "{color:", ";}", "{background-color:", ";}"], QuoteContent, QuoteBy, _color.colorGrayscale.gray800, VerticalLine, _color.colorSupportive.main);
97
67
  }
98
68
  }
99
-
100
- var CenteredQuote = /*#__PURE__*/function (_PureComponent) {
69
+ var CenteredQuote = exports["default"] = /*#__PURE__*/function (_PureComponent) {
101
70
  _inherits(CenteredQuote, _PureComponent);
102
-
103
71
  var _super = _createSuper(CenteredQuote);
104
-
105
72
  function CenteredQuote() {
106
73
  _classCallCheck(this, CenteredQuote);
107
-
108
74
  return _super.apply(this, arguments);
109
75
  }
110
-
111
76
  _createClass(CenteredQuote, [{
112
77
  key: "render",
113
78
  value: function render() {
114
79
  var _this$props = this.props,
115
- className = _this$props.className,
116
- data = _this$props.data;
117
-
80
+ className = _this$props.className,
81
+ data = _this$props.data;
118
82
  var content = _.get(data, ['content', 0, 'quote']);
119
-
120
83
  var by = _.get(data, ['content', 0, 'quoteBy']);
121
-
122
84
  return content ? /*#__PURE__*/_react["default"].createElement(QuoteContainer, {
123
85
  className: className
124
86
  }, /*#__PURE__*/_react["default"].createElement(VerticalLine, null), /*#__PURE__*/_react["default"].createElement(QuoteContent, {
@@ -132,12 +94,8 @@ var CenteredQuote = /*#__PURE__*/function (_PureComponent) {
132
94
  }) : null) : null;
133
95
  }
134
96
  }]);
135
-
136
97
  return CenteredQuote;
137
98
  }(_react.PureComponent);
138
-
139
- exports["default"] = CenteredQuote;
140
-
141
99
  _defineProperty(CenteredQuote, "propTypes", {
142
100
  className: _propTypes["default"].string,
143
101
  data: _body["default"].elementData.isRequired
@@ -1,76 +1,46 @@
1
1
  "use strict";
2
2
 
3
- 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); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports["default"] = exports.Caption = exports.Block = void 0;
9
-
10
7
  var _react = _interopRequireWildcard(require("react"));
11
-
12
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
10
  var _reactWaypoint = require("react-waypoint");
17
-
18
11
  var _forEach = _interopRequireDefault(require("lodash/forEach"));
19
-
20
12
  var _get = _interopRequireDefault(require("lodash/get"));
21
-
22
13
  var _merge = _interopRequireDefault(require("lodash/merge"));
23
-
24
14
  var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
25
-
26
15
  var _theme = _interopRequireDefault(require("../../constants/theme"));
27
-
28
16
  var _color = require("@twreporter/core/lib/constants/color");
29
-
30
17
  var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
31
-
32
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
33
-
34
- 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); }
35
-
36
- 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; }
37
-
19
+ 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); }
20
+ 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; }
21
+ 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); }
38
22
  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); }
39
-
40
23
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
41
-
42
24
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
43
-
44
25
  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); }
45
-
46
- 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; }
47
-
48
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
49
-
26
+ 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; }
27
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
50
28
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
51
-
52
29
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
53
-
54
- 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); } }
55
-
30
+ 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); } }
56
31
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
57
-
58
32
  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); }
59
-
60
33
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
61
-
62
34
  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); }; }
63
-
64
35
  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); }
65
-
66
36
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
67
-
68
37
  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; } }
69
-
70
38
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
71
-
72
- 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; }
73
-
39
+ 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; }
40
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
41
+ 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); } // lodash
42
+ // constants
43
+ // twreporter
74
44
  var _ = {
75
45
  forEach: _forEach["default"],
76
46
  get: _get["default"],
@@ -81,77 +51,56 @@ var embedNamespace = {
81
51
  twreporter: '__twreporterEmbeddedData',
82
52
  storyTellingReporter: '@story-telling-reporter'
83
53
  };
84
-
85
- var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
54
+ var Block = exports.Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
86
55
  displayName: "embedded-code__Block",
87
56
  componentId: "tkafgt-0"
88
57
  })(["position:relative;z-index:", ";img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"], function (props) {
89
58
  return props.$shouldEscalateZIndex ? _zIndex["default"].embedUp : _zIndex["default"].embedDown;
90
59
  });
91
-
92
- exports.Block = Block;
93
-
94
- var Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
60
+ var Caption = exports.Caption = /*#__PURE__*/_styledComponents["default"].div.withConfig({
95
61
  displayName: "embedded-code__Caption",
96
62
  componentId: "tkafgt-1"
97
63
  })(["line-height:1.43;letter-spacing:0.4px;font-size:14px;color:", ";padding:15px 15px 0 15px;"], function (props) {
98
64
  switch (props.theme.name) {
99
65
  case _theme["default"].article.v2.photo:
100
66
  return _color.colorGrayscale.gray300;
101
-
102
67
  case _theme["default"].article.v2.pink:
103
68
  case _theme["default"].article.v2["default"]:
104
69
  default:
105
70
  return _color.colorGrayscale.gray600;
106
71
  }
107
72
  });
108
-
109
- exports.Caption = Caption;
110
-
111
73
  function dispatchWindowLoadEvent() {
112
74
  var loadEvent;
113
-
114
75
  try {
115
76
  loadEvent = new Event('load'); // eslint-disable-line no-undef
116
77
  } catch (err) {
117
78
  loadEvent = document.createEvent('Event');
118
79
  loadEvent.initEvent('load', true, true);
119
80
  }
120
-
121
81
  window.dispatchEvent(loadEvent);
122
82
  }
123
-
124
83
  var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
125
84
  _inherits(EmbeddedCode, _React$PureComponent);
126
-
127
85
  var _super = _createSuper(EmbeddedCode);
128
-
129
86
  function EmbeddedCode(props) {
130
87
  var _this;
131
-
132
88
  _classCallCheck(this, EmbeddedCode);
133
-
134
89
  _this = _super.call(this, props);
135
-
136
90
  _defineProperty(_assertThisInitialized(_this), "state", {
137
91
  isLoaded: false,
138
92
  shouldEscalateZIndex: false
139
93
  });
140
-
141
94
  _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
142
95
  var node = _this._embedded.current;
143
-
144
96
  var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']);
145
-
146
97
  if (node && Array.isArray(scripts)) {
147
98
  var scriptsCount = scripts.length;
148
99
  var loadScriptsCount = 0;
149
100
  var scriptsFragment = new DocumentFragment(); // eslint-disable-line no-undef
150
-
151
101
  _.forEach(scripts, function (script) {
152
102
  var scriptEle = document.createElement('script');
153
103
  var attribs = script.attribs;
154
-
155
104
  _.forEach(attribs, function (value, name) {
156
105
  try {
157
106
  scriptEle.setAttribute(name, value);
@@ -159,31 +108,25 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
159
108
  console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
160
109
  }
161
110
  });
162
-
163
- scriptEle.text = script.text || ''; // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics:
111
+ scriptEle.text = script.text || '';
112
+ // `dispatchWindowLoadEvent` is a workaround to trigger rendering of venngage infographics:
164
113
  // The embedded venngage code (https://infograph.venngage.com/js/embed/v1/embed.js)
165
114
  // will only initiate when `load` event on `window` is emitted.
166
115
  // Hence, we need to emit the `load` event of `window` manually after all scripts are load.
167
-
168
116
  var handleLoad = function handleLoad() {
169
117
  loadScriptsCount += 1;
170
-
171
118
  if (loadScriptsCount === scriptsCount) {
172
119
  /* all scripts are load */
173
120
  dispatchWindowLoadEvent();
174
121
  }
175
-
176
122
  scriptEle.removeEventListener('load', handleLoad);
177
123
  };
178
-
179
124
  scriptEle.addEventListener('load', handleLoad);
180
125
  scriptsFragment.appendChild(scriptEle);
181
126
  });
182
-
183
127
  node.appendChild(scriptsFragment);
184
128
  }
185
129
  });
186
-
187
130
  _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
188
131
  if (!_this.state.isLoaded) {
189
132
  _this.setState({
@@ -191,25 +134,20 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
191
134
  }, _this.executeScript);
192
135
  }
193
136
  });
194
-
195
137
  _this._embedded = /*#__PURE__*/_react["default"].createRef();
196
-
197
138
  var _$get = _.get(_this.props, ['data', 'content', 0], {}),
198
- caption = _$get.caption,
199
- embeddedCode = _$get.embeddedCode,
200
- embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
201
-
139
+ caption = _$get.caption,
140
+ embeddedCode = _$get.embeddedCode,
141
+ embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
202
142
  _this._caption = caption;
203
143
  _this._embeddedCodeWithoutScript = embeddedCodeWithoutScript;
204
144
  _this._embeddedCode = embeddedCode;
205
145
  return _this;
206
146
  }
207
-
208
147
  _createClass(EmbeddedCode, [{
209
148
  key: "componentDidMount",
210
149
  value: function componentDidMount() {
211
150
  var _this$_embeddedCode, _this$_embeddedCode2;
212
-
213
151
  // !! WORKAROUND !!
214
152
  // After upgrading to react v18,
215
153
  // `EmbeddedCode` component becomes abnormal.
@@ -242,10 +180,8 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
242
180
  key: "render",
243
181
  value: function render() {
244
182
  var _this$_embeddedCodeWi;
245
-
246
183
  var className = this.props.className;
247
184
  var shouldEscalateZIndex = this.state.shouldEscalateZIndex;
248
-
249
185
  var embed = /*#__PURE__*/_react["default"].createElement("div", {
250
186
  className: className
251
187
  }, /*#__PURE__*/_react["default"].createElement(Block, {
@@ -255,57 +191,44 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
255
191
  __html: this._embeddedCodeWithoutScript
256
192
  }
257
193
  }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
258
-
259
194
  if ((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram)) {
260
195
  return this.state.isLoaded ? embed : null;
261
196
  }
262
-
263
197
  return embed;
264
198
  }
265
199
  }]);
266
-
267
200
  return EmbeddedCode;
268
201
  }(_react["default"].PureComponent); // Serious layout shifts show up when loading bunch of infograms due to lack of heights,
269
202
  // so here we apply waypoint wrapper to load infogram dynamically to avoid layout shifts for anchors.
270
203
  // https://twreporter-org.atlassian.net/browse/TWREPORTER-60
271
-
272
-
273
204
  _defineProperty(EmbeddedCode, "propTypes", {
274
205
  className: _propTypes["default"].string,
275
206
  data: _body["default"].elementData
276
207
  });
277
-
278
208
  _defineProperty(EmbeddedCode, "defaultProps", {
279
209
  className: ''
280
210
  });
281
-
282
211
  var WayPointWrapper = function WayPointWrapper(props) {
283
212
  var isScrollingToAnchor = props.isScrollingToAnchor;
284
-
285
213
  var _useState = (0, _react.useState)(false),
286
- _useState2 = _slicedToArray(_useState, 2),
287
- isInViewPort = _useState2[0],
288
- setIsInViewPort = _useState2[1];
289
-
214
+ _useState2 = _slicedToArray(_useState, 2),
215
+ isInViewPort = _useState2[0],
216
+ setIsInViewPort = _useState2[1];
290
217
  var embedRef = (0, _react.useRef)(null);
291
218
  (0, _react.useEffect)(function () {
292
219
  if (!isScrollingToAnchor && isInViewPort) {
293
220
  embedRef.current.loadEmbed();
294
221
  }
295
222
  }, [isScrollingToAnchor]);
296
-
297
223
  var onEnter = function onEnter() {
298
224
  setIsInViewPort(true);
299
-
300
225
  if (!isScrollingToAnchor) {
301
226
  embedRef.current.loadEmbed();
302
227
  }
303
228
  };
304
-
305
229
  var onLeave = function onLeave() {
306
230
  setIsInViewPort(false);
307
231
  };
308
-
309
232
  return (
310
233
  /*#__PURE__*/
311
234
  // Note: When an anchor is exactly below an infogram embed, onLeave() is not fired
@@ -323,12 +246,10 @@ var WayPointWrapper = function WayPointWrapper(props) {
323
246
  }))))
324
247
  );
325
248
  };
326
-
327
249
  WayPointWrapper.defaultProps = {
328
250
  isScrollingToAnchor: false
329
251
  };
330
252
  WayPointWrapper.propTypes = {
331
253
  isScrollingToAnchor: _propTypes["default"].bool
332
254
  };
333
- var _default = WayPointWrapper;
334
- exports["default"] = _default;
255
+ var _default = exports["default"] = WayPointWrapper;
@@ -1,31 +1,21 @@
1
1
  "use strict";
2
2
 
3
- 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); }
4
-
3
+ 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); }
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _get = _interopRequireDefault(require("lodash/get"));
13
-
14
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
-
16
11
  var _theme = _interopRequireDefault(require("../../constants/theme"));
17
-
18
12
  var _color = require("@twreporter/core/lib/constants/color");
19
-
20
13
  var _headline = require("@twreporter/react-components/lib/text/headline");
21
-
22
- 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); }
23
-
24
- 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; }
25
-
14
+ 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); }
15
+ 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; }
26
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
-
28
17
  // @twreporter
18
+
29
19
  var _ = {
30
20
  get: _get["default"]
31
21
  };
@@ -33,7 +23,6 @@ var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;color:", ";"],
33
23
  switch (props.theme.name) {
34
24
  case _theme["default"].article.v2.photo:
35
25
  return _color.colorGrayscale.gray300;
36
-
37
26
  case _theme["default"].article.v2.pink:
38
27
  case _theme["default"].article.v2["default"]:
39
28
  default:
@@ -48,29 +37,23 @@ var StyledH2 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H3).with
48
37
  displayName: "headings__StyledH2",
49
38
  componentId: "sc-1hpcjc2-1"
50
39
  })(["", ""], heading);
51
-
52
40
  var H1 = function H1(props) {
53
41
  var content = _.get(props, 'data.content.0', '');
54
-
55
42
  var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
56
43
  return /*#__PURE__*/_react["default"].createElement(StyledH1, {
57
44
  className: _.get(props, 'className', ''),
58
45
  text: text
59
46
  });
60
47
  };
61
-
62
48
  var H2 = function H2(props) {
63
49
  var content = _.get(props, 'data.content.0', '');
64
-
65
50
  var text = content.split(/<strong>|<\/strong>/).filter(Boolean).join('');
66
51
  return /*#__PURE__*/_react["default"].createElement(StyledH2, {
67
52
  className: _.get(props, 'className', ''),
68
53
  text: text
69
54
  });
70
55
  };
71
-
72
- var _default = {
56
+ var _default = exports["default"] = {
73
57
  H1: H1,
74
58
  H2: H2
75
- };
76
- exports["default"] = _default;
59
+ };