@twreporter/react-article-components 1.9.2-rc.0 → 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.
Files changed (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/lib/components/body/headings.js +10 -15
  3. package/lib/components/leading/normal.js +13 -9
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
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
+
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)
19
+
20
+ **Note:** Version bump only for package @twreporter/react-article-components
21
+
22
+
23
+
24
+
25
+
6
26
  ## [1.9.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.9.1...@twreporter/react-article-components@1.9.2-rc.0) (2023-12-05)
7
27
 
8
28
  **Note:** Version bump only for package @twreporter/react-article-components
package/lib/components/body/headings.js CHANGED
@@ -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;font-weight:", ";color:", ";"], _typography["default"].font.weight.bold, function (props) {
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
- })(["", " font-size:34px;"], heading);
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
- })(["", " font-size:28px;"], heading);
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
- dangerouslySetInnerHTML: {
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
- dangerouslySetInnerHTML: {
70
- __html: content
71
- }
66
+ text: content
72
67
  });
73
68
  };
74
69
 
package/lib/components/leading/normal.js CHANGED
@@ -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, _templateObject22;
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"].h1.withConfig({
78
+ var Title = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H1).withConfig({
77
79
  displayName: "normal__Title",
78
80
  componentId: "qpgeb2-2"
79
- })(["letter-spacing:0.4px;font-weight:", ";font-family:", ";margin:0 0 40px 0;", " ", ""], _typography["default"].font.weight.bold, _typography["default"].font.family.title, _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 34px;\n margin-bottom: 38px;\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 42px;\n line-height: 1.38;\n "]))));
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(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n font-size: 16px;\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n line-height: 2.1;\n font-size: 20px;\n "]))));
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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: 14px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin-left: calc(6/375*100%);\n margin-right: calc(6/375*100%);\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-left: calc(15/768*100%);\n margin-right: calc(15/768*100%);\n "]))), _mediaQuery["default"].hdOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin-top: 20px;\n "]))));
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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-top: 100px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding-top: 48px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n padding-top: 32px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n padding-top: 30px;\n "]))));
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(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n width: 100%;\n "]))), _mediaQuery["default"].tabletAndAbove(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n margin: 0 auto;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n width: calc(", "/768*100%);\n "])), this.figureWidth.tablet), _mediaQuery["default"].desktopOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), this.figureWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), this.figureWidth.hd));
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, null, title)), /*#__PURE__*/_react["default"].createElement(_StyledFigure, {
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)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["", ""])), function (p) {
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.9.2-rc.0",
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",
@@ -24,10 +24,10 @@
24
24
  "webpack-dev-server": "^3.7.2"
25
25
  },
26
26
  "dependencies": {
27
- "@twreporter/core": "^1.15.0-rc.0",
28
- "@twreporter/react-components": "^8.21.1-rc.0",
29
- "@twreporter/redux": "^7.8.2-rc.0",
30
- "@twreporter/universal-header": "^2.9.0-rc.0",
27
+ "@twreporter/core": "^1.15.0-rc.1",
28
+ "@twreporter/react-components": "^8.22.0-rc.0",
29
+ "@twreporter/redux": "^7.8.2-rc.1",
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": "7b84e49e2dc5533fc9af185daa6d1bee406032e0"
43
+ "gitHead": "11d31bc72b486f38fd486f792c7cdd466ce21ce0"
44
44
  }