@twreporter/react-article-components 2.1.2-rc.1 → 2.2.0-rc.0
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.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.2.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.2-rc.1...@twreporter/react-article-components@2.2.0-rc.0) (2024-06-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **react-article-component:** fix tracking section propTypes ([9bf13d3](https://github.com/twreporter/twreporter-npm-packages/commit/9bf13d32a23d1907283e05ec904ccee1c55b2aa0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* add tracking section for article components ([669d39d](https://github.com/twreporter/twreporter-npm-packages/commit/669d39d4046456299feb3bbf254eda134987d063))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [2.1.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.2-rc.0...@twreporter/react-article-components@2.1.2-rc.1) (2024-06-18)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @twreporter/react-article-components
|
|
@@ -361,7 +361,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
|
|
|
361
361
|
hasMoreRelateds = _this$props2.hasMoreRelateds,
|
|
362
362
|
loadMoreRelateds = _this$props2.loadMoreRelateds,
|
|
363
363
|
releaseBranch = _this$props2.releaseBranch,
|
|
364
|
-
onToggleTabExpanded = _this$props2.onToggleTabExpanded
|
|
364
|
+
onToggleTabExpanded = _this$props2.onToggleTabExpanded,
|
|
365
|
+
trackingSection = _this$props2.trackingSection;
|
|
365
366
|
var articleMetaForBookmark = {
|
|
366
367
|
slug: _.get(post, 'slug', ''),
|
|
367
368
|
title: _.get(post, 'title', ''),
|
|
@@ -428,7 +429,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
|
|
|
428
429
|
brief: _.get(post, 'brief.api_data'),
|
|
429
430
|
content: _.get(post, 'content.api_data'),
|
|
430
431
|
onToggleTabExpanded: onToggleTabExpanded,
|
|
431
|
-
scrollStage: this.state.scrollStage
|
|
432
|
+
scrollStage: this.state.scrollStage,
|
|
433
|
+
trackingSection: trackingSection
|
|
432
434
|
})), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
|
|
433
435
|
license: post.copyright,
|
|
434
436
|
publishedDate: post.published_date,
|
|
@@ -458,7 +460,8 @@ _defineProperty(Article, "propTypes", {
|
|
|
458
460
|
hasMoreRelateds: _propTypes["default"].bool,
|
|
459
461
|
loadMoreRelateds: _propTypes["default"].func,
|
|
460
462
|
releaseBranch: _propTypes2["default"].releaseBranch,
|
|
461
|
-
onToggleTabExpanded: _propTypes["default"].func
|
|
463
|
+
onToggleTabExpanded: _propTypes["default"].func,
|
|
464
|
+
trackingSection: _propTypes["default"].array
|
|
462
465
|
});
|
|
463
466
|
|
|
464
467
|
_defineProperty(Article, "defaultProps", {
|
|
@@ -469,5 +472,6 @@ _defineProperty(Article, "defaultProps", {
|
|
|
469
472
|
hasMoreRelateds: false,
|
|
470
473
|
loadMoreRelateds: noop,
|
|
471
474
|
releaseBranch: _releaseBranch["default"].master,
|
|
472
|
-
onToggleTabExpanded: function onToggleTabExpanded() {}
|
|
475
|
+
onToggleTabExpanded: function onToggleTabExpanded() {},
|
|
476
|
+
trackingSection: []
|
|
473
477
|
});
|
|
@@ -50,6 +50,8 @@ var _tableOfContents = _interopRequireDefault(require("../table-of-contents"));
|
|
|
50
50
|
|
|
51
51
|
var _youtube = _interopRequireDefault(require("./youtube"));
|
|
52
52
|
|
|
53
|
+
var _trackingSection = _interopRequireDefault(require("./tracking-section"));
|
|
54
|
+
|
|
53
55
|
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
54
56
|
|
|
55
57
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
@@ -68,6 +70,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
68
70
|
|
|
69
71
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
70
72
|
|
|
73
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
74
|
+
|
|
75
|
+
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
|
+
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
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
80
|
+
|
|
81
|
+
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
|
+
|
|
71
85
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
72
86
|
|
|
73
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); } }
|
|
@@ -192,6 +206,11 @@ var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
192
206
|
displayName: "body__ClearFloat",
|
|
193
207
|
componentId: "dwuu2m-18"
|
|
194
208
|
})(["", ""], clearFloatCSS);
|
|
209
|
+
|
|
210
|
+
var StyledTrackingSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
211
|
+
displayName: "body__StyledTrackingSection",
|
|
212
|
+
componentId: "dwuu2m-19"
|
|
213
|
+
})(["", ";margin:40px auto 48px;"], normalWidthCSS);
|
|
195
214
|
/**
|
|
196
215
|
* Element Data
|
|
197
216
|
* See `elementData` in `src/constants/prop-types/body.js`
|
|
@@ -383,6 +402,13 @@ function renderElement() {
|
|
|
383
402
|
data: data
|
|
384
403
|
});
|
|
385
404
|
|
|
405
|
+
case 'tracking-section':
|
|
406
|
+
return /*#__PURE__*/_react["default"].createElement(StyledTrackingSection, {
|
|
407
|
+
key: data.id
|
|
408
|
+
}, /*#__PURE__*/_react["default"].createElement(_trackingSection["default"], {
|
|
409
|
+
data: data
|
|
410
|
+
}));
|
|
411
|
+
|
|
386
412
|
default:
|
|
387
413
|
return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
|
|
388
414
|
key: data.id,
|
|
@@ -470,9 +496,24 @@ var Body = /*#__PURE__*/function (_Component) {
|
|
|
470
496
|
brief = _this$props.brief,
|
|
471
497
|
content = _this$props.content,
|
|
472
498
|
onToggleTabExpanded = _this$props.onToggleTabExpanded,
|
|
473
|
-
scrollStage = _this$props.scrollStage
|
|
499
|
+
scrollStage = _this$props.scrollStage,
|
|
500
|
+
trackingSection = _this$props.trackingSection;
|
|
501
|
+
var trackingSectionHeaderOne = {
|
|
502
|
+
type: 'header-one',
|
|
503
|
+
content: ['後續與迴響']
|
|
504
|
+
};
|
|
474
505
|
var enableTOC = false;
|
|
475
|
-
var
|
|
506
|
+
var renderContent = null;
|
|
507
|
+
|
|
508
|
+
if (Array.isArray(content)) {
|
|
509
|
+
if (Array.isArray(trackingSection) && trackingSection.length > 0) {
|
|
510
|
+
renderContent = [].concat(_toConsumableArray(content), [trackingSectionHeaderOne], _toConsumableArray(trackingSection));
|
|
511
|
+
} else {
|
|
512
|
+
renderContent = _toConsumableArray(content);
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
var contentJsx = Array.isArray(renderContent) ? _.map(renderContent, function (data, index) {
|
|
476
517
|
var elementJSX = _this2._buildContentElement(data, index);
|
|
477
518
|
|
|
478
519
|
if (data.type === 'header-one') {
|
|
@@ -508,12 +549,15 @@ _defineProperty(Body, "propTypes", {
|
|
|
508
549
|
brief: _propTypes["default"].arrayOf(_body["default"].elementData),
|
|
509
550
|
content: _propTypes["default"].arrayOf(_body["default"].elementData),
|
|
510
551
|
onToggleTabExpanded: _propTypes["default"].func,
|
|
511
|
-
scrollStage: _propTypes["default"].number
|
|
552
|
+
scrollStage: _propTypes["default"].number,
|
|
553
|
+
// for tracking section feature toggle
|
|
554
|
+
trackingSection: _propTypes["default"].array
|
|
512
555
|
});
|
|
513
556
|
|
|
514
557
|
_defineProperty(Body, "defaultProps", {
|
|
515
558
|
brief: [],
|
|
516
559
|
content: [],
|
|
517
560
|
onToggleTabExpanded: function onToggleTabExpanded() {},
|
|
518
|
-
scollStage: 1
|
|
561
|
+
scollStage: 1,
|
|
562
|
+
trackingSection: []
|
|
519
563
|
});
|
|
@@ -29,7 +29,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
|
|
|
29
29
|
|
|
30
30
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
31
31
|
|
|
32
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
32
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
33
33
|
|
|
34
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
35
35
|
|
|
@@ -64,19 +64,24 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
64
64
|
var _ = {
|
|
65
65
|
get: _get["default"]
|
|
66
66
|
};
|
|
67
|
-
var
|
|
67
|
+
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
|
+
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 "]))));
|
|
68
69
|
|
|
69
70
|
var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
70
71
|
displayName: "infobox__Title",
|
|
71
72
|
componentId: "sc-1rp3uhy-0"
|
|
72
|
-
})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"],
|
|
73
|
+
})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], function (props) {
|
|
74
|
+
return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
|
|
75
|
+
}, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
|
|
73
76
|
return props.theme.fontSizeOffset + 20;
|
|
74
77
|
});
|
|
75
78
|
|
|
76
79
|
var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
77
80
|
displayName: "infobox__Content",
|
|
78
81
|
componentId: "sc-1rp3uhy-1"
|
|
79
|
-
})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"],
|
|
82
|
+
})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], function (props) {
|
|
83
|
+
return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
|
|
84
|
+
}, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
|
|
80
85
|
return props.theme.fontSizeOffset + 16;
|
|
81
86
|
});
|
|
82
87
|
|
|
@@ -99,7 +104,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
99
104
|
componentId: "sc-1rp3uhy-2"
|
|
100
105
|
})(["", " ", " 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) {
|
|
101
106
|
return getContainerStyles(props.theme.name);
|
|
102
|
-
}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(
|
|
107
|
+
}, _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 "]))));
|
|
103
108
|
|
|
104
109
|
var Infobox = /*#__PURE__*/function (_PureComponent) {
|
|
105
110
|
_inherits(Infobox, _PureComponent);
|
|
@@ -117,7 +122,8 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
|
|
|
117
122
|
value: function render() {
|
|
118
123
|
var _this$props = this.props,
|
|
119
124
|
className = _this$props.className,
|
|
120
|
-
data = _this$props.data
|
|
125
|
+
data = _this$props.data,
|
|
126
|
+
forTrackingSection = _this$props.forTrackingSection;
|
|
121
127
|
|
|
122
128
|
var contentHtmlString = _.get(data, ['content', 0, 'body'], '');
|
|
123
129
|
|
|
@@ -131,8 +137,12 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
|
|
|
131
137
|
return hashRegex.exec(anchorString) ? "<a ".concat(_anchor.ARTICLE_ANCHOR_SCROLL, "=\"true\" ").concat(attrs, ">") : anchorString;
|
|
132
138
|
});
|
|
133
139
|
return mutatedContentHtmlString ? /*#__PURE__*/_react["default"].createElement(Container, {
|
|
134
|
-
className: className
|
|
135
|
-
|
|
140
|
+
className: className,
|
|
141
|
+
$forTrackingSection: forTrackingSection
|
|
142
|
+
}, title ? /*#__PURE__*/_react["default"].createElement(Title, {
|
|
143
|
+
$forTrackingSection: forTrackingSection
|
|
144
|
+
}, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
|
|
145
|
+
$forTrackingSection: forTrackingSection,
|
|
136
146
|
dangerouslySetInnerHTML: {
|
|
137
147
|
__html: mutatedContentHtmlString
|
|
138
148
|
}
|
|
@@ -147,9 +157,11 @@ exports["default"] = Infobox;
|
|
|
147
157
|
|
|
148
158
|
_defineProperty(Infobox, "propTypes", {
|
|
149
159
|
className: _propTypes["default"].string,
|
|
150
|
-
data: _body["default"].elementData.isRequired
|
|
160
|
+
data: _body["default"].elementData.isRequired,
|
|
161
|
+
forTrackingSection: _propTypes["default"].bool
|
|
151
162
|
});
|
|
152
163
|
|
|
153
164
|
_defineProperty(Infobox, "defaultProps", {
|
|
154
|
-
className: ''
|
|
165
|
+
className: '',
|
|
166
|
+
forTrackingSection: false
|
|
155
167
|
});
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _color = require("@twreporter/core/lib/constants/color");
|
|
15
|
+
|
|
16
|
+
var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
|
|
17
|
+
|
|
18
|
+
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
19
|
+
|
|
20
|
+
var _date = require("@twreporter/core/lib/utils/date");
|
|
21
|
+
|
|
22
|
+
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
|
|
23
|
+
|
|
24
|
+
var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
|
|
25
|
+
|
|
26
|
+
var _annotation = _interopRequireDefault(require("./annotation"));
|
|
27
|
+
|
|
28
|
+
var _paragraph2 = _interopRequireDefault(require("./paragraph"));
|
|
29
|
+
|
|
30
|
+
var _image = _interopRequireDefault(require("./image"));
|
|
31
|
+
|
|
32
|
+
var _infobox = _interopRequireDefault(require("./infobox"));
|
|
33
|
+
|
|
34
|
+
var _list = _interopRequireDefault(require("./list"));
|
|
35
|
+
|
|
36
|
+
var _centeredQuote = _interopRequireDefault(require("./centered-quote"));
|
|
37
|
+
|
|
38
|
+
var _blockquote = _interopRequireDefault(require("./blockquote"));
|
|
39
|
+
|
|
40
|
+
var _map = _interopRequireDefault(require("lodash/map"));
|
|
41
|
+
|
|
42
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
43
|
+
|
|
44
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
45
|
+
|
|
46
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
47
|
+
|
|
48
|
+
var _ = {
|
|
49
|
+
map: _map["default"]
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
var TrackingSectionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
53
|
+
displayName: "tracking-section__TrackingSectionContainer",
|
|
54
|
+
componentId: "sc-104lyb5-0"
|
|
55
|
+
})(["display:flex;flex-direction:column;width:100%;"]);
|
|
56
|
+
|
|
57
|
+
var Dot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
58
|
+
displayName: "tracking-section__Dot",
|
|
59
|
+
componentId: "sc-104lyb5-1"
|
|
60
|
+
})(["width:8px;height:8px;background-color:", ";border-radius:50%;"], _color.colorSupportive.heavy);
|
|
61
|
+
|
|
62
|
+
var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
|
|
63
|
+
displayName: "tracking-section__P2Gray600",
|
|
64
|
+
componentId: "sc-104lyb5-2"
|
|
65
|
+
})(["color:", ";"], _color.colorGrayscale.gray600);
|
|
66
|
+
var H4Gray800 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H4).withConfig({
|
|
67
|
+
displayName: "tracking-section__H4Gray800",
|
|
68
|
+
componentId: "sc-104lyb5-3"
|
|
69
|
+
})(["color:", ";"], _color.colorGrayscale.gray800);
|
|
70
|
+
|
|
71
|
+
var DateRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
72
|
+
displayName: "tracking-section__DateRow",
|
|
73
|
+
componentId: "sc-104lyb5-4"
|
|
74
|
+
})(["display:flex;width:100%;gap:24px;&:first-child{align-items:center;}"]);
|
|
75
|
+
|
|
76
|
+
var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
77
|
+
displayName: "tracking-section__ContentContainer",
|
|
78
|
+
componentId: "sc-104lyb5-5"
|
|
79
|
+
})(["display:flex;margin-top:20px;margin-left:4px;border-left:1px solid ", ";"], _color.colorGrayscale.gray300);
|
|
80
|
+
|
|
81
|
+
var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
82
|
+
displayName: "tracking-section__Content",
|
|
83
|
+
componentId: "sc-104lyb5-6"
|
|
84
|
+
})(["display:flex;flex-direction:column;margin-left:24px;gap:20px;"]);
|
|
85
|
+
|
|
86
|
+
var InfoBoxContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
87
|
+
displayName: "tracking-section__InfoBoxContainer",
|
|
88
|
+
componentId: "sc-104lyb5-7"
|
|
89
|
+
})(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 296px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 456px;\n "]))), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 556px;\n "]))));
|
|
90
|
+
|
|
91
|
+
var TrackingSection = function TrackingSection(_ref) {
|
|
92
|
+
var data = _ref.data;
|
|
93
|
+
var title = data.title,
|
|
94
|
+
publishDate = data.publishDate,
|
|
95
|
+
content = data.content;
|
|
96
|
+
|
|
97
|
+
var createContentElement = function createContentElement(data, idx) {
|
|
98
|
+
if (!data.id) {
|
|
99
|
+
data.id = "body_element_".concat(idx);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
switch (data.type) {
|
|
103
|
+
case 'annotation':
|
|
104
|
+
return /*#__PURE__*/_react["default"].createElement(_annotation["default"], {
|
|
105
|
+
key: data.id,
|
|
106
|
+
data: data
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
case 'centered-quote':
|
|
110
|
+
case 'quoteby':
|
|
111
|
+
return /*#__PURE__*/_react["default"].createElement(_centeredQuote["default"], {
|
|
112
|
+
key: data.id,
|
|
113
|
+
data: data
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
case 'blockquote':
|
|
117
|
+
return /*#__PURE__*/_react["default"].createElement(_blockquote["default"], {
|
|
118
|
+
key: data.id,
|
|
119
|
+
data: data
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
case 'unstyled':
|
|
123
|
+
return /*#__PURE__*/_react["default"].createElement(_paragraph2["default"], {
|
|
124
|
+
key: data.id,
|
|
125
|
+
data: data
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
case 'small-image':
|
|
129
|
+
case 'image':
|
|
130
|
+
case 'image-link':
|
|
131
|
+
return /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
132
|
+
key: data.id,
|
|
133
|
+
data: data
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
case 'infobox':
|
|
137
|
+
return /*#__PURE__*/_react["default"].createElement(InfoBoxContainer, {
|
|
138
|
+
key: data.id
|
|
139
|
+
}, /*#__PURE__*/_react["default"].createElement(_infobox["default"], {
|
|
140
|
+
data: data,
|
|
141
|
+
forTrackingSection: true
|
|
142
|
+
}));
|
|
143
|
+
|
|
144
|
+
case 'ordered-list-item':
|
|
145
|
+
return /*#__PURE__*/_react["default"].createElement(_list["default"].OrderedList, {
|
|
146
|
+
key: data.id,
|
|
147
|
+
data: data
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
case 'unordered-list-item':
|
|
151
|
+
return /*#__PURE__*/_react["default"].createElement(_list["default"].UnorderedList, {
|
|
152
|
+
key: data.id,
|
|
153
|
+
data: data
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
default:
|
|
157
|
+
return null;
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
var contentJSX = Array.isArray(content) ? _.map(content, function (data, idx) {
|
|
162
|
+
var elementJSX = createContentElement(data, idx);
|
|
163
|
+
return elementJSX;
|
|
164
|
+
}) : null;
|
|
165
|
+
return /*#__PURE__*/_react["default"].createElement(TrackingSectionContainer, null, /*#__PURE__*/_react["default"].createElement(DateRow, null, /*#__PURE__*/_react["default"].createElement(Dot, null), /*#__PURE__*/_react["default"].createElement(P2Gray600, {
|
|
166
|
+
text: (0, _date.date2yyyymmdd)(publishDate, '/')
|
|
167
|
+
})), /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(H4Gray800, {
|
|
168
|
+
text: title
|
|
169
|
+
}), contentJSX)));
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
TrackingSection.propTypes = {
|
|
173
|
+
data: _propTypes["default"].shape({
|
|
174
|
+
title: _propTypes["default"].string,
|
|
175
|
+
publishDate: _propTypes["default"].string,
|
|
176
|
+
content: _propTypes["default"].arrayOf(_body["default"].elementData)
|
|
177
|
+
}).isRequired
|
|
178
|
+
};
|
|
179
|
+
var _default = TrackingSection;
|
|
180
|
+
exports["default"] = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twreporter/react-article-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-rc.0",
|
|
4
4
|
"description": "The Reporter react article components, which are used in article page",
|
|
5
5
|
"main": "lib/components/article-page.js",
|
|
6
6
|
"repository": "https://github.com/twreporter/twreporter-npm-packages.git",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"files": [
|
|
42
42
|
"lib"
|
|
43
43
|
],
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "ce3c5ec8cd131df3f79db9cabb6269a1d14c5dbd"
|
|
45
45
|
}
|