@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,111 +1,65 @@
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
8
  exports.renderElement = renderElement;
10
-
11
9
  var _elementAlignment = _interopRequireDefault(require("../../constants/element-alignment"));
12
-
13
10
  var _annotation = _interopRequireDefault(require("./annotation"));
14
-
15
11
  var _audio = _interopRequireDefault(require("./audio"));
16
-
17
12
  var _blockquote = _interopRequireDefault(require("./blockquote"));
18
-
19
13
  var _brief = _interopRequireDefault(require("./brief"));
20
-
21
14
  var _centeredQuote = _interopRequireDefault(require("./centered-quote"));
22
-
23
15
  var _embeddedCode = _interopRequireWildcard(require("./embedded-code"));
24
-
25
16
  var _headings = _interopRequireDefault(require("./headings"));
26
-
27
17
  var _image = _interopRequireDefault(require("./image"));
28
-
29
18
  var _imageDiff = _interopRequireDefault(require("./image-diff"));
30
-
31
19
  var _infobox = _interopRequireDefault(require("./infobox"));
32
-
33
20
  var _list = _interopRequireDefault(require("./list"));
34
-
35
21
  var _multimedia = _interopRequireDefault(require("./multimedia"));
36
-
37
22
  var _paragraph = _interopRequireDefault(require("./paragraph"));
38
-
39
23
  var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
40
-
41
24
  var _propTypes = _interopRequireDefault(require("prop-types"));
42
-
43
25
  var _react = _interopRequireWildcard(require("react"));
44
-
45
26
  var _slideshow = _interopRequireDefault(require("./slideshow"));
46
-
47
27
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
48
-
49
28
  var _tableOfContents = _interopRequireDefault(require("../table-of-contents"));
50
-
51
29
  var _youtube = _interopRequireDefault(require("./youtube"));
52
-
53
30
  var _trackingSection = _interopRequireDefault(require("./tracking-section"));
54
-
55
31
  var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
56
-
57
32
  var _get = _interopRequireDefault(require("lodash/get"));
58
-
59
33
  var _map = _interopRequireDefault(require("lodash/map"));
60
-
61
34
  var _smoothScroll = _interopRequireDefault(require("smooth-scroll/dist/smooth-scroll"));
62
-
63
35
  var _anchor = require("../../constants/anchor");
64
-
65
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
66
-
67
- 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); }
68
-
69
- 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; }
70
-
36
+ 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
37
+ // lodash
38
+ // Change smooth-scroll import path due to SSR issue:
39
+ // https://github.com/cferdinandi/smooth-scroll/issues/481
40
+ 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); }
41
+ 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; }
71
42
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
72
-
73
43
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
74
-
75
44
  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."); }
76
-
77
45
  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); }
78
-
79
46
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
80
-
81
47
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
82
-
83
- 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; }
84
-
48
+ 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; }
85
49
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
86
-
87
- 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); } }
88
-
50
+ 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); } }
89
51
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
90
-
91
52
  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); }
92
-
93
53
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
94
-
95
54
  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); }; }
96
-
97
55
  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); }
98
-
99
56
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
100
-
101
57
  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; } }
102
-
103
58
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
104
-
105
- 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; }
106
-
59
+ 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; }
60
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
61
+ 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); }
107
62
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
108
-
109
63
  var _ = {
110
64
  get: _get["default"],
111
65
  map: _map["default"]
@@ -161,17 +115,14 @@ var StyledEmbeddedNormal = /*#__PURE__*/(0, _styledComponents["default"])(_embed
161
115
  displayName: "body__StyledEmbeddedNormal",
162
116
  componentId: "dwuu2m-8"
163
117
  })(["", " ", ""], normalWidthCSS, embeddedCSS);
164
-
165
118
  var StyledExtendImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
166
119
  displayName: "body__StyledExtendImageBlock",
167
120
  componentId: "dwuu2m-9"
168
121
  })(["", " ", " margin:", ";"], extendWidthCSS, clearFloatCSS, mockup.margin.extend);
169
-
170
122
  var StyledLargeImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
171
123
  displayName: "body__StyledLargeImageBlock",
172
124
  componentId: "dwuu2m-10"
173
125
  })(["", " ", " ", " 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 "]))));
174
-
175
126
  var StyledSlideshow = /*#__PURE__*/(0, _styledComponents["default"])(_slideshow["default"]).withConfig({
176
127
  displayName: "body__StyledSlideshow",
177
128
  componentId: "dwuu2m-11"
@@ -196,21 +147,19 @@ var StyledParagraph = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph[
196
147
  displayName: "body__StyledParagraph",
197
148
  componentId: "dwuu2m-16"
198
149
  })(["", " margin:", ";"], normalWidthCSS, mockup.margin.normal);
199
-
200
150
  var AlignRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
201
151
  displayName: "body__AlignRight",
202
152
  componentId: "dwuu2m-17"
203
153
  })(["", " ", " ", ",", ",", ",", "{", ";}", "{", "}"], 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));
204
-
205
154
  var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
206
155
  displayName: "body__ClearFloat",
207
156
  componentId: "dwuu2m-18"
208
157
  })(["", ""], clearFloatCSS);
209
-
210
158
  var StyledTrackingSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
211
159
  displayName: "body__StyledTrackingSection",
212
160
  componentId: "dwuu2m-19"
213
161
  })(["", ";margin:40px auto 48px;"], normalWidthCSS);
162
+
214
163
  /**
215
164
  * Element Data
216
165
  * See `elementData` in `src/constants/prop-types/body.js`
@@ -229,26 +178,21 @@ var StyledTrackingSection = /*#__PURE__*/_styledComponents["default"].div.withCo
229
178
  * @param {boolean} isScrollingToAnchor - state of scrolling to an anchor or not
230
179
  * @returns
231
180
  */
232
-
233
-
234
181
  function renderElement() {
235
182
  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
236
183
  var isScrollingToAnchor = arguments.length > 1 ? arguments[1] : undefined;
237
184
  var isCenterAligned = data.alignment === _elementAlignment["default"].center || data.alignment === _elementAlignment["default"].centerSmall;
238
-
239
185
  switch (data.type) {
240
186
  case 'annotation':
241
187
  return /*#__PURE__*/_react["default"].createElement(StyledAnnotation, {
242
188
  key: data.id,
243
189
  data: data
244
190
  });
245
-
246
191
  case 'audio':
247
192
  return /*#__PURE__*/_react["default"].createElement(StyledAudio, {
248
193
  key: data.id,
249
194
  content: data.content[0]
250
195
  });
251
-
252
196
  case 'centered-quote':
253
197
  case 'quoteby':
254
198
  return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledCenteredQuote, {
@@ -259,7 +203,6 @@ function renderElement() {
259
203
  }, /*#__PURE__*/_react["default"].createElement(StyledCenteredQuote, {
260
204
  data: data
261
205
  }));
262
-
263
206
  case 'blockquote':
264
207
  return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledBlockquote, {
265
208
  key: data.id,
@@ -269,22 +212,18 @@ function renderElement() {
269
212
  }, /*#__PURE__*/_react["default"].createElement(StyledBlockquote, {
270
213
  data: data
271
214
  }));
272
-
273
215
  case 'header-one':
274
216
  return /*#__PURE__*/_react["default"].createElement(StyledHeaderOne, {
275
217
  key: data.id,
276
218
  data: data
277
219
  });
278
-
279
220
  case 'header-two':
280
221
  return /*#__PURE__*/_react["default"].createElement(StyledHeaderTwo, {
281
222
  key: data.id,
282
223
  data: data
283
224
  });
284
-
285
225
  case 'code':
286
226
  return null;
287
-
288
227
  case 'embedded-code':
289
228
  case 'embeddedCode':
290
229
  case 'embeddedcode':
@@ -299,14 +238,12 @@ function renderElement() {
299
238
  isScrollingToAnchor: isScrollingToAnchor
300
239
  }));
301
240
  }
302
-
303
241
  case _elementAlignment["default"].centerSmall:
304
242
  return /*#__PURE__*/_react["default"].createElement(StyledEmbeddedNormal, {
305
243
  key: data.id,
306
244
  data: data,
307
245
  isScrollingToAnchor: isScrollingToAnchor
308
246
  });
309
-
310
247
  case _elementAlignment["default"].center:
311
248
  default:
312
249
  {
@@ -317,7 +254,6 @@ function renderElement() {
317
254
  });
318
255
  }
319
256
  }
320
-
321
257
  case 'small-image':
322
258
  case 'image':
323
259
  case 'image-link':
@@ -335,14 +271,12 @@ function renderElement() {
335
271
  data: data,
336
272
  small: true
337
273
  }));
338
-
339
274
  case _elementAlignment["default"].centerSmall:
340
275
  return /*#__PURE__*/_react["default"].createElement(StyledLargeImageBlock, {
341
276
  key: data.id
342
277
  }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
343
278
  data: data
344
279
  }));
345
-
346
280
  case _elementAlignment["default"].center:
347
281
  default:
348
282
  return /*#__PURE__*/_react["default"].createElement(StyledExtendImageBlock, {
@@ -352,7 +286,6 @@ function renderElement() {
352
286
  }));
353
287
  }
354
288
  }
355
-
356
289
  case 'imageDiff':
357
290
  case 'imagediff':
358
291
  return /*#__PURE__*/_react["default"].createElement(StyledExtendImageBlock, {
@@ -361,7 +294,6 @@ function renderElement() {
361
294
  key: data.id,
362
295
  data: data
363
296
  }));
364
-
365
297
  case 'infobox':
366
298
  return isCenterAligned ? /*#__PURE__*/_react["default"].createElement(StyledInfobox, {
367
299
  key: data.id,
@@ -371,44 +303,37 @@ function renderElement() {
371
303
  }, /*#__PURE__*/_react["default"].createElement(StyledInfobox, {
372
304
  data: data
373
305
  }));
374
-
375
306
  case 'ordered-list-item':
376
307
  return /*#__PURE__*/_react["default"].createElement(StyledOrderedList, {
377
308
  key: data.id,
378
309
  data: data
379
310
  });
380
-
381
311
  case 'unordered-list-item':
382
312
  return /*#__PURE__*/_react["default"].createElement(StyledUnorderedList, {
383
313
  key: data.id,
384
314
  data: data
385
315
  });
386
-
387
316
  case 'unstyled':
388
317
  return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
389
318
  key: data.id,
390
319
  data: data
391
320
  });
392
-
393
321
  case 'slideshow':
394
322
  return /*#__PURE__*/_react["default"].createElement(StyledSlideshow, {
395
323
  key: data.id,
396
324
  data: data
397
325
  });
398
-
399
326
  case 'youtube':
400
327
  return /*#__PURE__*/_react["default"].createElement(StyledYoutube, {
401
328
  key: data.id,
402
329
  data: data
403
330
  });
404
-
405
331
  case 'tracking-section':
406
332
  return /*#__PURE__*/_react["default"].createElement(StyledTrackingSection, {
407
333
  key: data.id
408
334
  }, /*#__PURE__*/_react["default"].createElement(_trackingSection["default"], {
409
335
  data: data
410
336
  }));
411
-
412
337
  default:
413
338
  return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
414
339
  key: data.id,
@@ -416,32 +341,23 @@ function renderElement() {
416
341
  });
417
342
  }
418
343
  }
419
-
420
- var Body = /*#__PURE__*/function (_Component) {
344
+ var Body = exports["default"] = /*#__PURE__*/function (_Component) {
421
345
  _inherits(Body, _Component);
422
-
423
346
  var _super = _createSuper(Body);
424
-
425
347
  function Body(props) {
426
348
  var _this;
427
-
428
349
  _classCallCheck(this, Body);
429
-
430
350
  _this = _super.call(this, props);
431
-
432
351
  _defineProperty(_assertThisInitialized(_this), "tocManager", _tableOfContents["default"].createManager());
433
-
434
352
  _defineProperty(_assertThisInitialized(_this), "_scrollStartHandler", function () {
435
353
  _this._onStartScrollingToAnchor(true);
436
354
  });
437
-
438
355
  _defineProperty(_assertThisInitialized(_this), "_scrollStopHandler", function () {
439
356
  // Wait for a short time to avoid trigger waypoint's onEnter() of infogram embed close to the anchor
440
357
  setTimeout(function () {
441
358
  return _this._onStartScrollingToAnchor(false);
442
359
  }, _anchor.WAIT_AFTER_REACH_ANCHOR);
443
360
  });
444
-
445
361
  _defineProperty(_assertThisInitialized(_this), "_onStartScrollingToAnchor", function (isScrollingToAnchor, callback) {
446
362
  _this.setState({
447
363
  isScrollingToAnchor: isScrollingToAnchor
@@ -451,21 +367,17 @@ var Body = /*#__PURE__*/function (_Component) {
451
367
  }
452
368
  });
453
369
  });
454
-
455
370
  _defineProperty(_assertThisInitialized(_this), "_buildContentElement", function (data, index) {
456
371
  if (!data.id) {
457
372
  data.id = "body_element_".concat(index);
458
373
  }
459
-
460
374
  return renderElement(data, _this.state.isScrollingToAnchor);
461
375
  });
462
-
463
376
  _this.state = {
464
377
  isScrollingToAnchor: false
465
378
  };
466
379
  return _this;
467
380
  }
468
-
469
381
  _createClass(Body, [{
470
382
  key: "componentDidMount",
471
383
  value: function componentDidMount() {
@@ -491,20 +403,18 @@ var Body = /*#__PURE__*/function (_Component) {
491
403
  key: "render",
492
404
  value: function render() {
493
405
  var _this2 = this;
494
-
495
406
  var _this$props = this.props,
496
- brief = _this$props.brief,
497
- content = _this$props.content,
498
- onToggleTabExpanded = _this$props.onToggleTabExpanded,
499
- scrollStage = _this$props.scrollStage,
500
- trackingSection = _this$props.trackingSection;
407
+ brief = _this$props.brief,
408
+ content = _this$props.content,
409
+ onToggleTabExpanded = _this$props.onToggleTabExpanded,
410
+ scrollStage = _this$props.scrollStage,
411
+ trackingSection = _this$props.trackingSection;
501
412
  var trackingSectionHeaderOne = {
502
413
  type: 'header-one',
503
414
  content: ['後續與迴響']
504
415
  };
505
416
  var enableTOC = false;
506
417
  var renderContent = null;
507
-
508
418
  if (Array.isArray(content)) {
509
419
  if (Array.isArray(trackingSection) && trackingSection.length > 0) {
510
420
  renderContent = [].concat(_toConsumableArray(content), [trackingSectionHeaderOne], _toConsumableArray(trackingSection));
@@ -512,21 +422,19 @@ var Body = /*#__PURE__*/function (_Component) {
512
422
  renderContent = _toConsumableArray(content);
513
423
  }
514
424
  }
515
-
516
425
  var contentJsx = Array.isArray(renderContent) ? _.map(renderContent, function (data, index) {
517
426
  var elementJSX = _this2._buildContentElement(data, index);
518
-
519
427
  if (data.type === 'header-one') {
520
428
  enableTOC = true;
521
429
  return /*#__PURE__*/_react["default"].createElement(_tableOfContents["default"].React.Anchor, {
522
- key: data.id // provide header-one string as anchor id for article
430
+ key: data.id
431
+ // provide header-one string as anchor id for article
523
432
  ,
524
433
  id: _.get(data, 'content.0', "section-".concat(index)),
525
434
  label: _.get(data, 'content.0'),
526
435
  manager: _this2.tocManager
527
436
  }, elementJSX);
528
437
  }
529
-
530
438
  return elementJSX;
531
439
  }) : null;
532
440
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledBrief, {
@@ -539,12 +447,8 @@ var Body = /*#__PURE__*/function (_Component) {
539
447
  }) : null);
540
448
  }
541
449
  }]);
542
-
543
450
  return Body;
544
451
  }(_react.Component);
545
-
546
- exports["default"] = Body;
547
-
548
452
  _defineProperty(Body, "propTypes", {
549
453
  brief: _propTypes["default"].arrayOf(_body["default"].elementData),
550
454
  content: _propTypes["default"].arrayOf(_body["default"].elementData),
@@ -553,7 +457,6 @@ _defineProperty(Body, "propTypes", {
553
457
  // for tracking section feature toggle
554
458
  trackingSection: _propTypes["default"].array
555
459
  });
556
-
557
460
  _defineProperty(Body, "defaultProps", {
558
461
  brief: [],
559
462
  content: [],
@@ -1,72 +1,45 @@
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 = _interopRequireWildcard(require("react"));
11
-
12
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
-
16
11
  var _get = _interopRequireDefault(require("lodash/get"));
17
-
18
12
  var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
19
-
20
13
  var _css = _interopRequireDefault(require("../../constants/css"));
21
-
22
14
  var _theme = _interopRequireDefault(require("../../constants/theme"));
23
-
24
15
  var _typography = _interopRequireDefault(require("../../constants/typography"));
25
-
26
16
  var _anchor = require("../../constants/anchor");
27
-
28
17
  var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
29
-
30
18
  var _color = require("@twreporter/core/lib/constants/color");
31
-
32
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
33
-
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // constants
20
+ // twreporter
34
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
35
-
36
- 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); }
37
-
38
- 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; }
39
-
22
+ 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); }
23
+ 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; }
40
24
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
41
-
42
- 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); } }
43
-
25
+ 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); } }
44
26
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
45
-
46
27
  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); }
47
-
48
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
49
-
50
29
  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); }; }
51
-
52
30
  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); }
53
-
54
31
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
55
-
56
32
  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; } }
57
-
58
33
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
59
-
60
- 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; }
61
-
34
+ 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; }
35
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
36
+ 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); }
62
37
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
63
-
64
38
  var _ = {
65
39
  get: _get["default"]
66
40
  };
67
41
  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 "]))));
68
42
  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 "]))));
69
-
70
43
  var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
71
44
  displayName: "infobox__Title",
72
45
  componentId: "sc-1rp3uhy-0"
@@ -75,7 +48,6 @@ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
75
48
  }, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
76
49
  return props.theme.fontSizeOffset + 20;
77
50
  });
78
-
79
51
  var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
80
52
  displayName: "infobox__Content",
81
53
  componentId: "sc-1rp3uhy-1"
@@ -84,51 +56,39 @@ var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
84
56
  }, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
85
57
  return props.theme.fontSizeOffset + 16;
86
58
  });
87
-
88
59
  function getContainerStyles(themeName) {
89
60
  switch (themeName) {
90
61
  case _theme["default"].article.v2.photo:
91
62
  return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.heavy);
92
-
93
63
  case _theme["default"].article.v2.pink:
94
64
  return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.COLOR_PINK_ARTICLE.pink);
95
-
96
65
  case _theme["default"].article.v2["default"]:
97
66
  default:
98
67
  return (0, _styledComponents.css)(["&::before,&::after{background:", ";}"], _color.colorSupportive.main);
99
68
  }
100
69
  }
101
-
102
70
  var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
103
71
  displayName: "infobox__Container",
104
72
  componentId: "sc-1rp3uhy-2"
105
73
  })(["", " ", " 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) {
106
74
  return getContainerStyles(props.theme.name);
107
75
  }, _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 "]))));
108
-
109
- var Infobox = /*#__PURE__*/function (_PureComponent) {
76
+ var Infobox = exports["default"] = /*#__PURE__*/function (_PureComponent) {
110
77
  _inherits(Infobox, _PureComponent);
111
-
112
78
  var _super = _createSuper(Infobox);
113
-
114
79
  function Infobox() {
115
80
  _classCallCheck(this, Infobox);
116
-
117
81
  return _super.apply(this, arguments);
118
82
  }
119
-
120
83
  _createClass(Infobox, [{
121
84
  key: "render",
122
85
  value: function render() {
123
86
  var _this$props = this.props,
124
- className = _this$props.className,
125
- data = _this$props.data,
126
- forTrackingSection = _this$props.forTrackingSection;
127
-
87
+ className = _this$props.className,
88
+ data = _this$props.data,
89
+ forTrackingSection = _this$props.forTrackingSection;
128
90
  var contentHtmlString = _.get(data, ['content', 0, 'body'], '');
129
-
130
91
  var title = _.get(data, ['content', 0, 'title'], '');
131
-
132
92
  var anchorRegex = /<a([^>]*)>/g;
133
93
  var hashRegex = /href={?["']#/;
134
94
  var mutatedContentHtmlString = contentHtmlString === null || contentHtmlString === void 0 ? void 0 : contentHtmlString.replace(anchorRegex, function (anchorString, attrs) {
@@ -149,18 +109,13 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
149
109
  })) : null;
150
110
  }
151
111
  }]);
152
-
153
112
  return Infobox;
154
113
  }(_react.PureComponent);
155
-
156
- exports["default"] = Infobox;
157
-
158
114
  _defineProperty(Infobox, "propTypes", {
159
115
  className: _propTypes["default"].string,
160
116
  data: _body["default"].elementData.isRequired,
161
117
  forTrackingSection: _propTypes["default"].bool
162
118
  });
163
-
164
119
  _defineProperty(Infobox, "defaultProps", {
165
120
  className: '',
166
121
  forTrackingSection: false