@twreporter/react-article-components 1.9.2-rc.1 → 1.10.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 +12 -0
- package/lib/components/body/headings.js +10 -15
- package/lib/components/leading/normal.js +13 -9
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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
|
+
# [1.10.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.2-rc.1...@twreporter/react-article-components@1.10.0-rc.0) (2023-12-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* change article content h1 h2 ([9912503](https://github.com/twreporter/twreporter-npm-packages/commit/99125037d81eef23fd66140d93e87ddd3cb13ab7))
|
|
12
|
+
* use design system h1 for article title ([b7c0223](https://github.com/twreporter/twreporter-npm-packages/commit/b7c0223f43f0a87086804b7e514589e3d526504f))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [1.9.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.2-rc.0...@twreporter/react-article-components@1.9.2-rc.1) (2023-12-05)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @twreporter/react-article-components
|
|
@@ -15,20 +15,21 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
15
15
|
|
|
16
16
|
var _theme = _interopRequireDefault(require("../../constants/theme"));
|
|
17
17
|
|
|
18
|
-
var _typography = _interopRequireDefault(require("../../constants/typography"));
|
|
19
|
-
|
|
20
18
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
21
19
|
|
|
20
|
+
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
21
|
+
|
|
22
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
23
|
|
|
24
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
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
27
|
|
|
28
|
+
// @twreporter
|
|
28
29
|
var _ = {
|
|
29
30
|
get: _get["default"]
|
|
30
31
|
};
|
|
31
|
-
var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;
|
|
32
|
+
var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;color:", ";"], function (props) {
|
|
32
33
|
switch (props.theme.name) {
|
|
33
34
|
case _theme["default"].article.v2.photo:
|
|
34
35
|
return _color.colorGrayscale.gray300;
|
|
@@ -39,25 +40,21 @@ var heading = /*#__PURE__*/(0, _styledComponents.css)(["margin:0;font-weight:",
|
|
|
39
40
|
return _color.colorGrayscale.gray800;
|
|
40
41
|
}
|
|
41
42
|
});
|
|
42
|
-
|
|
43
|
-
var StyledH1 = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
|
|
43
|
+
var StyledH1 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H2).withConfig({
|
|
44
44
|
displayName: "headings__StyledH1",
|
|
45
45
|
componentId: "sc-1hpcjc2-0"
|
|
46
|
-
})(["", "
|
|
47
|
-
|
|
48
|
-
var StyledH2 = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
|
|
46
|
+
})(["", ""], heading);
|
|
47
|
+
var StyledH2 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H3).withConfig({
|
|
49
48
|
displayName: "headings__StyledH2",
|
|
50
49
|
componentId: "sc-1hpcjc2-1"
|
|
51
|
-
})(["", "
|
|
50
|
+
})(["", ""], heading);
|
|
52
51
|
|
|
53
52
|
var H1 = function H1(props) {
|
|
54
53
|
var content = _.get(props, 'data.content.0', '');
|
|
55
54
|
|
|
56
55
|
return /*#__PURE__*/_react["default"].createElement(StyledH1, {
|
|
57
56
|
className: _.get(props, 'className', ''),
|
|
58
|
-
|
|
59
|
-
__html: content
|
|
60
|
-
}
|
|
57
|
+
text: content
|
|
61
58
|
});
|
|
62
59
|
};
|
|
63
60
|
|
|
@@ -66,9 +63,7 @@ var H2 = function H2(props) {
|
|
|
66
63
|
|
|
67
64
|
return /*#__PURE__*/_react["default"].createElement(StyledH2, {
|
|
68
65
|
className: _.get(props, 'className', ''),
|
|
69
|
-
|
|
70
|
-
__html: content
|
|
71
|
-
}
|
|
66
|
+
text: content
|
|
72
67
|
});
|
|
73
68
|
};
|
|
74
69
|
|
|
@@ -25,9 +25,11 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
|
|
|
25
25
|
|
|
26
26
|
var _color = require("@twreporter/core/lib/constants/color");
|
|
27
27
|
|
|
28
|
+
var _headline = require("@twreporter/react-components/lib/text/headline");
|
|
29
|
+
|
|
28
30
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
29
31
|
|
|
30
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21
|
|
32
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
31
33
|
|
|
32
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
33
35
|
|
|
@@ -73,15 +75,15 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
73
75
|
componentId: "qpgeb2-1"
|
|
74
76
|
})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-left: 24px;\n padding-right: 24px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: calc(513/768*100%);\n "]))), _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 718px;\n "]))));
|
|
75
77
|
|
|
76
|
-
var Title = /*#__PURE__*/_styledComponents["default"].
|
|
78
|
+
var Title = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H1).withConfig({
|
|
77
79
|
displayName: "normal__Title",
|
|
78
80
|
componentId: "qpgeb2-2"
|
|
79
|
-
})(["
|
|
81
|
+
})(["margin:0 0 40px 0;", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-bottom: 38px;\n "]))));
|
|
80
82
|
|
|
81
83
|
var Subtitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
|
|
82
84
|
displayName: "normal__Subtitle",
|
|
83
85
|
componentId: "qpgeb2-3"
|
|
84
|
-
})(["font-weight:", ";margin:0 0 10px 0;", " ", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].mobileOnly(
|
|
86
|
+
})(["font-weight:", ";margin:0 0 10px 0;", " ", ""], _typography["default"].font.weight.bold, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 16px;\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n line-height: 2.1;\n font-size: 20px;\n "]))));
|
|
85
87
|
|
|
86
88
|
var Topic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
87
89
|
displayName: "normal__Topic",
|
|
@@ -98,14 +100,14 @@ var Figure = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
|
|
|
98
100
|
var FigCaption = /*#__PURE__*/_styledComponents["default"].figcaption.withConfig({
|
|
99
101
|
displayName: "normal__FigCaption",
|
|
100
102
|
componentId: "qpgeb2-6"
|
|
101
|
-
})(["margin-top:15px;", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(
|
|
103
|
+
})(["margin-top:15px;", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: 14px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-left: calc(6/375*100%);\n margin-right: calc(6/375*100%);\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin-left: calc(15/768*100%);\n margin-right: calc(15/768*100%);\n "]))), _mediaQuery["default"].hdOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-top: 20px;\n "]))));
|
|
102
104
|
|
|
103
105
|
var BackgroundBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
104
106
|
displayName: "normal__BackgroundBlock",
|
|
105
107
|
componentId: "qpgeb2-7"
|
|
106
108
|
})(["", " ", " ", " ", " ", ""], function (props) {
|
|
107
109
|
return getBackgroundBlockStyles(props.theme.name);
|
|
108
|
-
}, _mediaQuery["default"].hdOnly(
|
|
110
|
+
}, _mediaQuery["default"].hdOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding-top: 100px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-top: 48px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding-top: 32px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n padding-top: 30px;\n "]))));
|
|
109
111
|
|
|
110
112
|
function getBackgroundBlockStyles(themeName) {
|
|
111
113
|
switch (themeName) {
|
|
@@ -140,7 +142,7 @@ var NormalLeading = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
140
142
|
_createClass(NormalLeading, [{
|
|
141
143
|
key: "getFigureCSS",
|
|
142
144
|
value: function getFigureCSS() {
|
|
143
|
-
return (0, _styledComponents.css)(["", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(
|
|
145
|
+
return (0, _styledComponents.css)(["", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n width: 100%;\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n margin: 0 auto;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n width: calc(", "/768*100%);\n "])), this.figureWidth.tablet), _mediaQuery["default"].desktopOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), this.figureWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), this.figureWidth.hd));
|
|
144
146
|
}
|
|
145
147
|
}, {
|
|
146
148
|
key: "render",
|
|
@@ -157,7 +159,9 @@ var NormalLeading = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
157
159
|
return /*#__PURE__*/_react["default"].createElement(components.Link, {
|
|
158
160
|
to: topicHref
|
|
159
161
|
}, /*#__PURE__*/_react["default"].createElement(Topic, null, shortTitle));
|
|
160
|
-
}) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null, /*#__PURE__*/_react["default"].createElement(Title,
|
|
162
|
+
}) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null, /*#__PURE__*/_react["default"].createElement(Title, {
|
|
163
|
+
text: title
|
|
164
|
+
})), /*#__PURE__*/_react["default"].createElement(_StyledFigure, {
|
|
161
165
|
_css: this.getFigureCSS()
|
|
162
166
|
}, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
|
|
163
167
|
imgPlaceholderSrc: _.get(poster, 'tiny.url', ''),
|
|
@@ -184,6 +188,6 @@ _defineProperty(NormalLeading, "defaultProps", {
|
|
|
184
188
|
isTopicPublished: false
|
|
185
189
|
});
|
|
186
190
|
|
|
187
|
-
var _StyledFigure = (0, _styledComponents["default"])(Figure)(
|
|
191
|
+
var _StyledFigure = (0, _styledComponents["default"])(Figure)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["", ""])), function (p) {
|
|
188
192
|
return p._css;
|
|
189
193
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twreporter/react-article-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.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",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@twreporter/core": "^1.15.0-rc.1",
|
|
28
|
-
"@twreporter/react-components": "^8.
|
|
28
|
+
"@twreporter/react-components": "^8.22.0-rc.0",
|
|
29
29
|
"@twreporter/redux": "^7.8.2-rc.1",
|
|
30
|
-
"@twreporter/universal-header": "^2.9.0-rc.
|
|
30
|
+
"@twreporter/universal-header": "^2.9.0-rc.2",
|
|
31
31
|
"howler": "^2.2.3",
|
|
32
32
|
"lodash": "^4.17.11",
|
|
33
33
|
"memoize-one": "^5.0.5",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"files": [
|
|
41
41
|
"lib"
|
|
42
42
|
],
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "11d31bc72b486f38fd486f792c7cdd466ce21ce0"
|
|
44
44
|
}
|