@twreporter/index-page 1.3.3 → 1.4.0-rc.1

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 (7) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/components/category-section.js +6 -6
  3. package/lib/components/latest-section-old.js +172 -0
  4. package/lib/components/latest-section.js +6 -1
  5. package/lib/components/reviews.js +7 -8
  6. package/lib/index.js +7 -1
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
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.4.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.4.0-rc.0...@twreporter/index-page@1.4.0-rc.1) (2022-09-21)
7
+
8
+ **Note:** Version bump only for package @twreporter/index-page
9
+
10
+
11
+
12
+
13
+
14
+ # [1.4.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.3...@twreporter/index-page@1.4.0-rc.0) (2022-09-20)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * apply feature toggle on index-page latest section ([716b9cb](https://github.com/twreporter/twreporter-npm-packages/commit/716b9cb157438e1431a433e67060c61c3fa55557))
20
+
21
+
22
+ ### Features
23
+
24
+ * add category set const & apply category set to index-page ([c497f90](https://github.com/twreporter/twreporter-npm-packages/commit/c497f90752246e2a0ffd2707fa246c054fa6da78))
25
+
26
+
27
+
28
+
29
+
6
30
  ## [1.3.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.3.3-rc.3...@twreporter/index-page@1.3.3) (2022-09-14)
7
31
 
8
32
  **Note:** Version bump only for package @twreporter/index-page
package/lib/components/category-section.js CHANGED
@@ -45,7 +45,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
45
45
 
46
46
  var _get = _interopRequireDefault(require("lodash/get"));
47
47
 
48
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
48
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
49
49
 
50
50
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
51
51
 
@@ -104,17 +104,17 @@ var SectionWrapper = /*#__PURE__*/(0, _styledComponents["default"])(_section["de
104
104
  var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
105
105
  displayName: "category-section__FlexBox",
106
106
  componentId: "sc-1vfzdxm-2"
107
- })(["display:flex;flex-wrap:wrap;width:1002px;margin:0 auto;justify-content:center;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 690px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 690px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "]))));
107
+ })(["display:flex;flex-wrap:wrap;padding:0 47px;justify-content:center;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 34px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: none;\n "]))));
108
108
 
109
109
  var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
110
110
  displayName: "category-section__FlexItem",
111
111
  componentId: "sc-1vfzdxm-3"
112
- })(["background-color:white;position:relative;margin-bottom:70px;padding-bottom:20px;width:314px;&:nth-child(3n+2){margin-right:30px;margin-left:30px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 210px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 210px;\n &:nth-child(3n+2) {\n margin-right: 20px;\n margin-left: 20px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n margin-bottom: 0;\n "]))));
112
+ })(["background-color:white;position:relative;margin-bottom:70px;padding-bottom:20px;width:312px;margin-right:32.6px;&:nth-child(4n){margin-right:0px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 210px;\n margin-right: 30px;\n &:nth-child(4n) {\n margin-right: 0px;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 160px;\n margin-right: 20px;\n &:nth-child(4n) {\n margin-right: 0px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n margin-bottom: 0;\n "]))));
113
113
 
114
114
  var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
115
115
  displayName: "category-section__ImgFrame",
116
116
  componentId: "sc-1vfzdxm-4"
117
- })(["height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
117
+ })(["height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
118
118
 
119
119
  var CategoryName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
120
120
  displayName: "category-section__CategoryName",
@@ -129,12 +129,12 @@ var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
129
129
  var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
130
130
  displayName: "category-section__Title",
131
131
  componentId: "sc-1vfzdxm-7"
132
- })(["font-family:", ";font-weight:", ";font-size:20px;color:", ";line-height:1.4;width:92%;margin:0 auto;", ""], _font.fontFamily.title, _font.fontWeight.bold, _color["default"].darkGray, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: ", "%;\n "])), mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100));
132
+ })(["font-family:", ";font-weight:", ";font-size:20px;color:", ";line-height:1.4;width:92%;margin:0 auto;", ""], _font.fontFamily.title, _font.fontWeight.bold, _color["default"].darkGray, _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: ", "%;\n "])), mockup.mobile.titleWidth / mockup.mobile.titleFrameWidth * 100));
133
133
 
134
134
  var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
135
135
  displayName: "category-section__More",
136
136
  componentId: "sc-1vfzdxm-8"
137
- })(["position:absolute;left:50%;bottom:-16px;padding-top:16px;transform:translateX(-50%);text-align:center;width:101%;background-color:", ";", ""], backgroundColor, _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n bottom: -24px;\n "]))));
137
+ })(["position:absolute;left:50%;bottom:-16px;padding-top:16px;transform:translateX(-50%);text-align:center;width:101%;background-color:", ";", ""], backgroundColor, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n bottom: -24px;\n "]))));
138
138
 
139
139
  var Category = /*#__PURE__*/function (_React$PureComponent) {
140
140
  _inherits(Category, _React$PureComponent);
package/lib/components/latest-section-old.js ADDED
@@ -0,0 +1,172 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _post = _interopRequireDefault(require("./prop-types/post"));
15
+
16
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
17
+
18
+ var _getHref = require("../utils/getHref");
19
+
20
+ var _styleUtils = require("../utils/style-utils");
21
+
22
+ var _categoryName = _interopRequireDefault(require("./common-utils/category-name"));
23
+
24
+ var _imgWrapper = _interopRequireDefault(require("./common-utils/img-wrapper"));
25
+
26
+ var _sectionContentWrapper = _interopRequireDefault(require("./common-utils/section-content-wrapper"));
27
+
28
+ var _twreporterLink = _interopRequireDefault(require("./common-utils/twreporter-link"));
29
+
30
+ var _color = _interopRequireDefault(require("../constants/color"));
31
+
32
+ var _font = require("@twreporter/core/lib/constants/font");
33
+
34
+ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
35
+
36
+ var _get = _interopRequireDefault(require("lodash/get"));
37
+
38
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
39
+
40
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
41
+
42
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
43
+
44
+ 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); } }
45
+
46
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
47
+
48
+ 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
49
+
50
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
51
+
52
+ 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); }; }
53
+
54
+ 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); }
55
+
56
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
57
+
58
+ 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; } }
59
+
60
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
61
+
62
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
63
+
64
+ var _ = {
65
+ get: _get["default"]
66
+ };
67
+ var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
68
+ var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
69
+ var mobileMidWidth = '578px';
70
+ var mobileSemiMidWidth = '414px';
71
+ var mobileMinWidth = '320px';
72
+ var mockup = {
73
+ img: {
74
+ sizes: {
75
+ desktop: '199px',
76
+ tablet: '160px',
77
+ mobile: '136px'
78
+ }
79
+ }
80
+ };
81
+ var headerPadding = {
82
+ desktop: '47px',
83
+ tablet: '34px',
84
+ mobile: '16px'
85
+ };
86
+
87
+ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
88
+ displayName: "latest-section-old__Container",
89
+ componentId: "sc-1ho0gdl-0"
90
+ })(["background-color:", ";position:relative;", ""], _color["default"].lightGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0;\n "]))));
91
+
92
+ var ContentContainer = /*#__PURE__*/(0, _styledComponents["default"])(_sectionContentWrapper["default"]).withConfig({
93
+ displayName: "latest-section-old__ContentContainer",
94
+ componentId: "sc-1ho0gdl-1"
95
+ })(["display:flex;padding:30px ", ";overflow-x:hidden;justify-content:center;", " ", ""], headerPadding.desktop, _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 30px ", ";\n "])), headerPadding.tablet), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 30px ", ";\n "])), headerPadding.mobile));
96
+
97
+ var ItemFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
98
+ displayName: "latest-section-old__ItemFrame",
99
+ componentId: "sc-1ho0gdl-2"
100
+ })(["width:199px;padding:0;margin-left:30px;&:first-child{margin:0;}", " ", " ", " @media (max-width:", "){&:nth-child(4){display:none;}}@media (max-width:", "){&:nth-child(3){display:none;}}@media (max-width:", "){width:136px;margin-left:16px;}"], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 130px;\n "]))), _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:nth-child(6) {\n display: none;\n }\n &:nth-child(5) {\n display: none;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 160px;\n margin-left: 20px;\n "]))), mobileMidWidth, mobileSemiMidWidth, mobileMinWidth);
101
+
102
+ var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
103
+ displayName: "latest-section-old__ImageFrame",
104
+ componentId: "sc-1ho0gdl-3"
105
+ })(["width:100%;height:128px;background:", ";background-size:cover;background-position:center;display:block;", " ", " ", " @media (max-width:", "){height:93px;}@media (max-width:", "){height:88px;}"], function (props) {
106
+ return props.background ? "url(".concat(props.background, ")") : 'backgroun-image';
107
+ }, _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 90px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 110px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 100px;\n "]))), mobileSemiMidWidth, mobileMinWidth);
108
+
109
+ var ContentFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
110
+ displayName: "latest-section-old__ContentFrame",
111
+ componentId: "sc-1ho0gdl-4"
112
+ })(["margin:0 auto;"]);
113
+
114
+ var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
115
+ displayName: "latest-section-old__Category",
116
+ componentId: "sc-1ho0gdl-5"
117
+ })(["height:16px;line-height:1.33;margin-top:12px;margin-bottom:4px;"]);
118
+
119
+ var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
120
+ displayName: "latest-section-old__Title",
121
+ componentId: "sc-1ho0gdl-6"
122
+ })(["height:auto;font-size:16px;font-weight:", ";font-family:", ";color:", ";"], _font.fontWeight.bold, _font.fontFamily.title, _color["default"].darkGray);
123
+
124
+ var LatestSection = /*#__PURE__*/function (_React$Component) {
125
+ _inherits(LatestSection, _React$Component);
126
+
127
+ var _super = _createSuper(LatestSection);
128
+
129
+ function LatestSection() {
130
+ _classCallCheck(this, LatestSection);
131
+
132
+ return _super.apply(this, arguments);
133
+ }
134
+
135
+ _createClass(LatestSection, [{
136
+ key: "render",
137
+ value: function render() {
138
+ var latestItems = this.props.data.map(function (item) {
139
+ var isExternal = _.get(item, 'is_external', false);
140
+
141
+ var href = (0, _getHref.getHref)(_.get(item, 'slug', 'error'), isExternal);
142
+
143
+ var imgObj = _.get(item, 'hero_image') || _.get(item, 'og_image');
144
+
145
+ return /*#__PURE__*/_react["default"].createElement(ItemFrame, {
146
+ key: _.get(item, 'id')
147
+ }, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
148
+ href: href,
149
+ redirect: isExternal
150
+ }, /*#__PURE__*/_react["default"].createElement(ImageFrame, null, /*#__PURE__*/_react["default"].createElement(_imgWrapper["default"], {
151
+ alt: _.get(imgObj, 'description'),
152
+ src: _.get(imgObj, 'resized_targets.mobile.url'),
153
+ srcSet: _.get(imgObj, 'resized_targets'),
154
+ sizes: "(min-width: ".concat(desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
155
+ })), /*#__PURE__*/_react["default"].createElement(ContentFrame, null, /*#__PURE__*/_react["default"].createElement(Category, null, _.get(item, 'categories[0].name', '')), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(item, 'title', '')))));
156
+ });
157
+ return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, latestItems));
158
+ }
159
+ }]);
160
+
161
+ return LatestSection;
162
+ }(_react["default"].Component);
163
+
164
+ LatestSection.defaultProps = {
165
+ data: [],
166
+ moduleMap: {}
167
+ };
168
+ LatestSection.propTypes = {
169
+ data: _propTypes["default"].arrayOf((0, _post["default"])())
170
+ };
171
+ var _default = LatestSection;
172
+ exports["default"] = _default;
package/lib/components/latest-section.js CHANGED
@@ -142,6 +142,11 @@ var LatestSection = /*#__PURE__*/function (_React$Component) {
142
142
 
143
143
  var imgObj = _.get(item, 'hero_image') || _.get(item, 'og_image');
144
144
 
145
+ var categoryName = _.get(item, 'category_set[0].category.name', '');
146
+
147
+ var subcategoryName = _.get(item, 'category_set[0].subcategory.name', '');
148
+
149
+ var categorySetName = "".concat(categoryName, "/").concat(subcategoryName || '全部');
145
150
  return /*#__PURE__*/_react["default"].createElement(ItemFrame, {
146
151
  key: _.get(item, 'id')
147
152
  }, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
@@ -152,7 +157,7 @@ var LatestSection = /*#__PURE__*/function (_React$Component) {
152
157
  src: _.get(imgObj, 'resized_targets.mobile.url'),
153
158
  srcSet: _.get(imgObj, 'resized_targets'),
154
159
  sizes: "(min-width: ".concat(desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
155
- })), /*#__PURE__*/_react["default"].createElement(ContentFrame, null, /*#__PURE__*/_react["default"].createElement(Category, null, _.get(item, 'categories[0].name', '')), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(item, 'title', '')))));
160
+ })), /*#__PURE__*/_react["default"].createElement(ContentFrame, null, /*#__PURE__*/_react["default"].createElement(Category, null, categorySetName), /*#__PURE__*/_react["default"].createElement(Title, null, _.get(item, 'title', '')))));
156
161
  });
157
162
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, latestItems));
158
163
  }
package/lib/components/reviews.js CHANGED
@@ -47,7 +47,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
47
47
 
48
48
  var _get = _interopRequireDefault(require("lodash/get"));
49
49
 
50
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
50
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
51
51
 
52
52
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
53
53
 
@@ -86,7 +86,6 @@ var mockup = {
86
86
  }
87
87
  };
88
88
  var desktopMinWidth = _styleUtils.breakPoints.desktopMinWidth;
89
- var tabletMaxWidth = _styleUtils.breakPoints.tabletMaxWidth;
90
89
  var tabletMinWidth = _styleUtils.breakPoints.tabletMinWidth;
91
90
  var maxSwipableItems = 3;
92
91
  var moreText = '更多評論文章';
@@ -98,17 +97,17 @@ var Container = /*#__PURE__*/(0, _styledComponents["default"])(_section["default
98
97
  var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
99
98
  displayName: "reviews__FlexBox",
100
99
  componentId: "wgotxd-1"
101
- })(["display:flex;padding:0 47px;justify-content:center;@media (max-width:", "){padding:0 35px;}", ""], tabletMaxWidth, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: none;\n "]))));
100
+ })(["display:flex;padding:0 47px;justify-content:center;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 0 35px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "]))));
102
101
 
103
102
  var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
104
103
  displayName: "reviews__FlexItem",
105
104
  componentId: "wgotxd-2"
106
- })(["width:312px;&:nth-child(3){margin-left:32.6px;}&:nth-child(even){margin-left:32.6px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 210px;\n &:nth-child(3) {\n margin-left: 30px;\n }\n &:nth-child(even) {\n margin-left: 30px;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 160px;\n &:nth-child(3) {\n margin-left: 20px;\n }\n &:nth-child(even) {\n margin-left: 20px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-top: 10px;\n width: 100%;\n "]))));
105
+ })(["width:312px;&:nth-child(3){margin-left:32.6px;}&:nth-child(even){margin-left:32.6px;}", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 210px;\n &:nth-child(3) {\n margin-left: 30px;\n }\n &:nth-child(even) {\n margin-left: 30px;\n }\n "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 160px;\n &:nth-child(3) {\n margin-left: 20px;\n }\n &:nth-child(even) {\n margin-left: 20px;\n }\n "]))), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-top: 10px;\n width: 100%;\n "]))));
107
106
 
108
107
  var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
109
108
  displayName: "reviews__ImgFrame",
110
109
  componentId: "wgotxd-3"
111
- })(["width:100%;height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 102px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
110
+ })(["width:100%;height:202px;", " ", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n height: 138px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 102px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 186px;\n "]))));
112
111
 
113
112
  var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
114
113
  displayName: "reviews__TextFrame",
@@ -118,17 +117,17 @@ var TextFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
118
117
  var Category = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
119
118
  displayName: "reviews__Category",
120
119
  componentId: "wgotxd-5"
121
- })(["line-height:1.33;", ""], _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-top: 9px;\n "]))));
120
+ })(["line-height:1.33;", ""], _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin-top: 9px;\n "]))));
122
121
 
123
122
  var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
124
123
  displayName: "reviews__Title",
125
124
  componentId: "wgotxd-6"
126
- })(["margin-top:2px;font-size:20px;font-weight:", ";font-family:", ";line-height:1.5;", " color:", ";"], _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _color["default"].darkGray);
125
+ })(["margin-top:2px;font-size:20px;font-weight:", ";font-family:", ";line-height:1.5;", " color:", ";"], _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].tabletOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _color["default"].darkGray);
127
126
 
128
127
  var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
129
128
  displayName: "reviews__Description",
130
129
  componentId: "wgotxd-7"
131
- })(["margin-top:8px;font-size:16px;color:", ";", " ", " ", ""], _color["default"].darkGray, _mediaQuery["default"].tabletOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n font-size: 18px;\n "]))), (0, _styleUtils.truncate)('relative', 1.5, 5, 'white'));
130
+ })(["margin-top:8px;font-size:16px;color:", ";", " ", " ", ""], _color["default"].darkGray, _mediaQuery["default"].tabletOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: 144px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n font-size: 18px;\n "]))), (0, _styleUtils.truncate)('relative', 1.5, 5, 'white'));
132
131
 
133
132
  var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
134
133
  displayName: "reviews__More",
package/lib/index.js CHANGED
@@ -17,6 +17,8 @@ var _juniorBoxSection = _interopRequireDefault(require("./components/junior-box-
17
17
 
18
18
  var _latestSection = _interopRequireDefault(require("./components/latest-section"));
19
19
 
20
+ var _latestSectionOld = _interopRequireDefault(require("./components/latest-section-old"));
21
+
20
22
  var _latestTopic = _interopRequireDefault(require("./components/latest-topic"));
21
23
 
22
24
  var _newsLetterSection = _interopRequireDefault(require("./components/news-letter-section"));
@@ -33,8 +35,12 @@ var _searchBox = _interopRequireDefault(require("./components/search-box"));
33
35
 
34
36
  var _topicsSection = _interopRequireDefault(require("./components/topics-section"));
35
37
 
38
+ var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
39
+
36
40
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
37
41
 
42
+ // feature toggle
43
+ var LatestSection = _featureFlag.ENABLE_NEW_INFO_ARCH ? _latestSection["default"] : _latestSectionOld["default"];
38
44
  var _default = {
39
45
  components: {
40
46
  CategorySection: _categorySection["default"],
@@ -42,7 +48,7 @@ var _default = {
42
48
  EditorPicks: _editorPicks["default"],
43
49
  InforgraphicSection: _infographicSection["default"],
44
50
  JuniorBoxSection: _juniorBoxSection["default"],
45
- LatestSection: _latestSection["default"],
51
+ LatestSection: LatestSection,
46
52
  LatestTopicSection: _latestTopic["default"],
47
53
  NewsLetterSection: _newsLetterSection["default"],
48
54
  PhotographySection: _photographySection["default"],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twreporter/index-page",
3
- "version": "1.3.3",
3
+ "version": "1.4.0-rc.1",
4
4
  "main": "lib/index.js",
5
5
  "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
6
6
  "author": "twreporter <developer@twreporter.org>",
@@ -12,8 +12,8 @@
12
12
  "prepublishOnly": "make build"
13
13
  },
14
14
  "dependencies": {
15
- "@twreporter/core": "^1.6.0",
16
- "@twreporter/react-components": "^8.13.0",
15
+ "@twreporter/core": "^1.7.0-rc.1",
16
+ "@twreporter/react-components": "^8.13.1-rc.1",
17
17
  "lodash": "^4.0.0",
18
18
  "prop-types": "^15.0.0",
19
19
  "react": "^16.3.0",
@@ -27,5 +27,5 @@
27
27
  "files": [
28
28
  "lib"
29
29
  ],
30
- "gitHead": "26c77ca4dbdfdd65e156c41c5fb96149f820b304"
30
+ "gitHead": "145b9cb8d1412262ffae3cf50c7b756432ec37d6"
31
31
  }