@twreporter/react-components 8.5.0-rc.1

package/lib/listing-page/components/list-item.js

@@ -0,0 +1,197 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _image = _interopRequireDefault(require("./image"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+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); }
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); }; }
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  forEach: _forEach["default"],
+  get: _get["default"]
+};
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__Container",
+  componentId: "sc-1dx5lew-0"
+})(["width:", "px;", " ", " ", " a{color:#4a4949;}"], _mockupSpec["default"].hd.cardWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.cardWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.cardWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+
+var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__HoverEffect",
+  componentId: "sc-1dx5lew-1"
+})(["opacity:1;", ""], _mediaQuery["default"].tabletAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.7;\n    }\n    transition: 200ms opacity linear;\n  "]))));
+
+var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__ImgFrame",
+  componentId: "sc-1dx5lew-2"
+})(["height:", "px;", " ", " ", ""], _mockupSpec["default"].hd.imgHeight, _mediaQuery["default"].desktopOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), _mockupSpec["default"].desktop.imgHeight), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), _mockupSpec["default"].tablet.imgHeight), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), _mockupSpec["default"].mobile.imgHeight));
+
+var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__TextBlock",
+  componentId: "sc-1dx5lew-3"
+})(["width:", "%;margin:12px auto 0 auto;cursor:pointer;", ""], _mockupSpec["default"].desktop.textWidth / _mockupSpec["default"].desktop.cardWidth * 100, _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
+
+var Category = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__Category",
+  componentId: "sc-1dx5lew-4"
+})(["color:#c4333e;font-size:12px;line-height:1.33;margin-bottom:10px;"]);
+
+var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__Title",
+  componentId: "sc-1dx5lew-5"
+})(["font-size:20px;font-weight:", ";line-height:1.4;color:#4a4949;margin-bottom:10px;"], _fontWeight.sourceHanSansTC.bold);
+
+var Desc = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__Desc",
+  componentId: "sc-1dx5lew-6"
+})(["position:relative;font-size:16px;line-height:1.5;text-align:justify;padding-bottom:30px;"]);
+
+var Tags = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  displayName: "list-item__Tags",
+  componentId: "sc-1dx5lew-7"
+})(["list-style:none;width:", "%;margin-bottom:40px;padding-left:15px;line-height:1;", ""], _mockupSpec["default"].desktop.tagsWidth / _mockupSpec["default"].desktop.cardWidth * 100, _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: ", "%;\n    padding-left: 0;\n  "])), _mockupSpec["default"].mobile.tagsWidth / _mockupSpec["default"].mobile.cardWidth * 100));
+
+var PubDate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list-item__PubDate",
+  componentId: "sc-1dx5lew-8"
+})(["position:absolute;bottom:-20px;font-size:12px;right:0;"]);
+
+var Tag = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  displayName: "list-item__Tag",
+  componentId: "sc-1dx5lew-9"
+})(["background-color:", ";border:2px solid #c4333e;border-radius:68px;color:", ";display:inline-block;text-decoration:none;line-height:1.45;font-size:12px;font-weight:", ";padding:2px 10px;margin-right:13px;margin-bottom:10px;"], function (props) {
+  return props.selected ? '#c4333e' : '#f1f1f1';
+}, function (props) {
+  return props.selected ? '#ffffff' : '#c4333e';
+}, _fontWeight.sourceHanSansTC.bold);
+
+var ListItem = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ListItem, _PureComponent);
+
+  var _super = _createSuper(ListItem);
+
+  function ListItem() {
+    _classCallCheck(this, ListItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ListItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          title = _this$props.title,
+          desc = _this$props.desc,
+          img = _this$props.img,
+          link = _this$props.link,
+          category = _this$props.category,
+          tags = _this$props.tags,
+          pubDate = _this$props.pubDate;
+      var tagsJSX = [];
+
+      _.forEach(tags, function (tag) {
+        var id = _.get(tag, 'id');
+
+        var name = _.get(tag, 'name');
+
+        if (id && name) {
+          tagsJSX.push( /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+            key: id,
+            to: _entityPath["default"].tag + id
+          }, /*#__PURE__*/_react["default"].createElement(Tag, {
+            selected: _.get(tag, 'selected')
+          }, name)));
+        }
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, link, /*#__PURE__*/_react["default"].createElement(HoverEffect, null, /*#__PURE__*/_react["default"].createElement(ImgFrame, null, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        alt: _.get(img, 'alt', ''),
+        src: _.get(img, 'src', '')
+      })), /*#__PURE__*/_react["default"].createElement(TextBlock, null, /*#__PURE__*/_react["default"].createElement(Category, null, category), /*#__PURE__*/_react["default"].createElement(Title, null, title), /*#__PURE__*/_react["default"].createElement(Desc, null, desc, /*#__PURE__*/_react["default"].createElement(PubDate, null, pubDate))))), /*#__PURE__*/_react["default"].createElement(Tags, null, tagsJSX));
+    }
+  }]);
+
+  return ListItem;
+}(_react.PureComponent);
+
+ListItem.defaultProps = {
+  tags: [],
+  link: {
+    to: '',
+    target: ''
+  }
+};
+ListItem.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  desc: _propTypes["default"].string.isRequired,
+  img: _propTypes["default"].shape({
+    src: _propTypes["default"].string.isRequired,
+    alt: _propTypes["default"].string
+  }).isRequired,
+  link: _propTypes["default"].shape({
+    to: _propTypes["default"].string.isRequired,
+    target: _propTypes["default"].string
+  }),
+  category: _propTypes["default"].string.isRequired,
+  pubDate: _propTypes["default"].string.isRequired,
+  tags: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
+    selected: _propTypes["default"].bool
+  }))
+};
+var _default = ListItem;
+exports["default"] = _default;

package/lib/listing-page/components/list.js

@@ -0,0 +1,188 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _date = require("@twreporter/core/lib/utils/date");
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _listItem = _interopRequireDefault(require("./list-item"));
+
+var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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); }
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); }; }
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  forEach: _forEach["default"],
+  get: _get["default"],
+  map: _map["default"]
+};
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list__Container",
+  componentId: "sc-1olquk4-0"
+})(["margin:45px auto 0 auto;"]);
+
+var Header = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list__Header",
+  componentId: "sc-1olquk4-1"
+})(["font-size:36px;font-weight:", ";color:#404040;margin:0 auto 45px auto;text-align:center;", ""], _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n    text-align: left;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+
+var FlexItems = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "list__FlexItems",
+  componentId: "sc-1olquk4-2"
+})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;> div:nth-child(odd){margin-right:", "px;}", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mockupSpec["default"].marginBetweenItems, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    > div:nth-child(odd) {\n      margin-right: 0;\n    }\n    justify-content: center;\n  "]))));
+
+var Items = (0, _isFetchingWrapper["default"])(FlexItems);
+
+var List = /*#__PURE__*/function (_PureComponent) {
+  _inherits(List, _PureComponent);
+
+  var _super = _createSuper(List);
+
+  function List() {
+    _classCallCheck(this, List);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(List, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          data = _this$props.data,
+          catName = _this$props.catName,
+          tagName = _this$props.tagName,
+          isFetching = _this$props.isFetching,
+          showSpinner = _this$props.showSpinner;
+      var listJSX = [];
+
+      _.forEach(data, function (item) {
+        var style = _.get(item, 'style');
+
+        var slug = _.get(item, 'slug'); // TODO extract interactive as to a const file
+
+
+        var to = style === 'interactive' ? _entityPath["default"].interactiveArticle + slug : _entityPath["default"].article + slug;
+
+        var tags = _.map(_.get(item, 'tags'), function (tag) {
+          if (_.get(tag, 'name') === tagName) {
+            return {
+              id: tag.id,
+              name: tag.name,
+              selected: true
+            };
+          }
+
+          return {
+            id: _.get(tag, 'id'),
+            name: _.get(tag, 'name', '')
+          };
+        });
+
+        listJSX.push( /*#__PURE__*/_react["default"].createElement(_listItem["default"], {
+          key: _.get(item, 'id'),
+          title: _.get(item, 'title', ''),
+          desc: _.get(item, 'og_description', ''),
+          img: {
+            alt: _.get(item, 'hero_image.description'),
+            // Displaying `hero_image` is a default setting for listing.
+            // In cases which do not have `hero_image`, display `og_image` as fallback.
+            src: _.get(item, 'hero_image.resized_targets.mobile.url') || _.get(item, 'og_image.resized_targets.mobile.url')
+          },
+          category: _.get(item, 'categories.0.name', ''),
+          pubDate: (0, _date.date2yyyymmdd)(_.get(item, 'published_date', ''), '.'),
+          tags: tags,
+          link: {
+            to: to,
+            target: style === 'interactive' ? '_blank' : ''
+          }
+        }));
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Header, null, catName || (tagName ? "#".concat(tagName) : '')), /*#__PURE__*/_react["default"].createElement(Items, {
+        isFetching: isFetching,
+        showSpinner: showSpinner
+      }, listJSX));
+    }
+  }]);
+
+  return List;
+}(_react.PureComponent);
+
+List.defaultProps = {
+  data: [],
+  catName: '',
+  tagName: '',
+  isFetching: false,
+  showSpinner: false
+};
+List.propTypes = {
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    og_description: _propTypes["default"].string.isRequired,
+    hero_image: _propTypes["default"].object.isRequired,
+    categories: _propTypes["default"].array,
+    published_date: _propTypes["default"].string.isRequired,
+    tags: _propTypes["default"].array,
+    style: _propTypes["default"].string
+  })),
+  tagName: _propTypes["default"].string,
+  catName: _propTypes["default"].string,
+  isFetching: _propTypes["default"].bool,
+  showSpinner: _propTypes["default"].bool
+};
+var _default = List;
+exports["default"] = _default;

package/lib/listing-page/components/topics/index.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _topics = require("../../constants/topics");
+
+var _section = require("./section");
+
+var _isFetchingWrapper = _interopRequireDefault(require("../../../is-fetching-wrapper"));
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _pageContent = _interopRequireDefault(require("./page-content"));
+
+var _postItem = _interopRequireDefault(require("./post-item"));
+
+var _posts = _interopRequireDefault(require("./posts"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _topicItem = _interopRequireDefault(require("./topic-item"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+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); }
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); }; }
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var _ = {
+  get: _get["default"],
+  map: _map["default"]
+};
+
+var NoData = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topics__NoData",
+  componentId: "sc-1n6udj1-0"
+})(["width:100%;font-size:16px;color:#4a4949;font-weight:", ";text-align:center;"], _fontWeight.sourceHanSansTC.normal);
+
+var Topics = /*#__PURE__*/function (_Component) {
+  _inherits(Topics, _Component);
+
+  var _super = _createSuper(Topics);
+
+  function Topics() {
+    _classCallCheck(this, Topics);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Topics, [{
+    key: "_buildRelatedPosts",
+    value: function _buildRelatedPosts(posts) {
+      var _buildPostJSX = function _buildPostJSX(post) {
+        if (_typeof(post) !== 'object' || post === null) {
+          return null;
+        }
+
+        var id = post.id,
+            linkTarget = post.linkTarget,
+            linkTo = post.linkTo,
+            title = post.title,
+            imgUrl = post.imgUrl;
+        return /*#__PURE__*/_react["default"].createElement(_postItem["default"], {
+          key: "post-".concat(id),
+          title: title,
+          imgUrl: imgUrl,
+          linkTo: linkTo,
+          linkTarget: linkTarget
+        });
+      };
+
+      return _.map(posts, _buildPostJSX);
+    }
+  }, {
+    key: "_buildTopicBoxes",
+    value: function _buildTopicBoxes(topics) {
+      var _buildTopicBox = function _buildTopicBox(item, index) {
+        var id = item.id,
+            linkTo = item.linkTo,
+            title = item.title,
+            updatedAt = item.updatedAt,
+            description = item.description,
+            imgUrl = item.imgUrl,
+            imgAlt = item.imgAlt;
+        return /*#__PURE__*/_react["default"].createElement(_topicItem["default"], {
+          key: "topic-".concat(id),
+          title: title,
+          updatedAt: updatedAt,
+          description: description,
+          imgUrl: imgUrl,
+          imgAlt: imgAlt,
+          isTop: index === 0,
+          linkTo: linkTo
+        });
+      };
+
+      return _.map(topics, _buildTopicBox);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          topics = _this$props.topics,
+          currentPage = _this$props.currentPage,
+          isFetching = _this$props.isFetching,
+          showSpinner = _this$props.showSpinner;
+
+      if (!isFetching && _.get(topics, 'length', 0) <= 0) {
+        return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, /*#__PURE__*/_react["default"].createElement(NoData, null, "\u7121\u8CC7\u6599"));
+      }
+
+      var isFirstPage = currentPage === 1;
+      /* Build PageContent */
+
+      var topicsJSX = this._buildTopicBoxes(topics);
+
+      var topTopicJSX = null;
+      var listedTopicsJSX = null;
+      var topRelatedPosts = null;
+      var topTopicName = null;
+      var topicUrl = null;
+      var topSectionJSX = null;
+
+      if (isFirstPage && !isFetching) {
+        topTopicJSX = topicsJSX[0];
+        listedTopicsJSX = topicsJSX.slice(1);
+        topRelatedPosts = _.get(topics, [0, 'relateds'], []).slice(-3);
+        /* take last 3 posts from the end */
+
+        topTopicName = _.get(topics, [0, 'topic_name'], '');
+        topicUrl = _.get(topics, [0, 'linkTo'], '');
+        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_section.SectionTitle, {
+          key: "top-title"
+        }, _topics.TEXT.SECTION_TITLE_FEATURED), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
+          key: "top-section",
+          topicName: topTopicName,
+          topicUrl: topicUrl
+        }, topTopicJSX, /*#__PURE__*/_react["default"].createElement(_posts["default"], null, this._buildRelatedPosts(topRelatedPosts)))];
+      } else {
+        listedTopicsJSX = topicsJSX;
+      }
+
+      var WrappedListSectionContent = (0, _isFetchingWrapper["default"])( /*#__PURE__*/_react["default"].createElement(_section.ListSectionContent, null, listedTopicsJSX));
+      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, topSectionJSX, isFetching && isFirstPage ? null : /*#__PURE__*/_react["default"].createElement(_section.SectionTitle, null, _topics.TEXT.SECTION_TITLE_OTHERS), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
+        isFetching: isFetching,
+        showSpinner: showSpinner
+      }));
+    }
+  }]);
+
+  return Topics;
+}(_react.Component);
+
+Topics.propTypes = {
+  topics: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    linkTo: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    topic_name: _propTypes["default"].string.isRequired,
+    updatedAt: _propTypes["default"].string.isRequired,
+    description: _propTypes["default"].string.isRequired,
+    imgUrl: _propTypes["default"].string.isRequired,
+    imgAlt: _propTypes["default"].string.isRequired,
+    relateds: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      id: _propTypes["default"].string.isRequired,
+      title: _propTypes["default"].string.isRequired,
+      imgUrl: _propTypes["default"].string.isRequired,
+      linkTarget: _propTypes["default"].string,
+      linkTo: _propTypes["default"].string.isRequired
+    }))
+  })),
+  currentPage: _propTypes["default"].number.isRequired,
+  isFetching: _propTypes["default"].bool.isRequired,
+  showSpinner: _propTypes["default"].bool
+};
+Topics.defaultProps = {
+  topics: [],
+  currentPage: 1,
+  showSpinner: false
+};
+var _default = Topics;
+exports["default"] = _default;

package/lib/listing-page/components/topics/page-content.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _predefinedCss = require("../../constants/predefined-css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var styles = {
+  contentWidth: {
+    min: 300,
+    // px
+    mobile: 95,
+    // %
+    tablet: 700,
+    // px
+    desktop: 870 // px
+
+  },
+  titlePadding: 0,
+  titleMargin: {
+    mobile: [0, 0, 19, 0],
+    tablet: [0, 0, 33, 0]
+  }
+};
+
+var PageContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "page-content__PageContent",
+  componentId: "sc-1x8tj4h-0"
+})(["min-width:", "px;width:", "%;", " ", " margin:0 auto;", ""], styles.contentWidth.min, styles.contentWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.desktop), _predefinedCss.resetLinkStyle);
+
+var _default = PageContent;
+exports["default"] = _default;