@twreporter/react-components 8.5.0-rc.1

package/lib/listing-page/components/topics/post-item.js

@@ -0,0 +1,139 @@
+"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 _css = require("@twreporter/core/lib/utils/css");
+
+var _predefinedCss = require("../../constants/predefined-css");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _image = _interopRequireDefault(require("../image"));
+
+var _reactRouterDom = require("react-router-dom");
+
+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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+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 styles = {
+  imgLandscape: {
+    mobile: {
+      width: 122,
+      height: 92
+    },
+    tablet: {
+      width: 220,
+      height: 125
+    },
+    desktop: {
+      width: 278,
+      height: 125
+    }
+  },
+  textBlockPadding: {
+    mobile: [10, 0, 10, 12],
+    tablet: [11, 11, 11, 11],
+    desktop: [11, 14, 11, 14]
+  },
+  postBoxPadding: {
+    mobile: [12, 5]
+  }
+};
+var PostBox = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.Link).withConfig({
+  displayName: "post-item__PostBox",
+  componentId: "d3t92f-0"
+})(["display:flex;", " ", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n    width: 100%;\n  "])), (0, _css.arrayToCssShorthand)(styles.postBoxPadding.mobile)), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.tablet.width), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgLandscape.desktop.width), _mediaQuery["default"].tabletAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border: solid .5px #d8d8d8;\n    overflow: hidden;\n    flex-direction: column;\n  "]))), _predefinedCss.resetLinkStyle, _predefinedCss.linkHoverFadeOut);
+
+var PostImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "post-item__PostImage",
+  componentId: "d3t92f-1"
+})(["width:", "px;order:1;", " flex:0 0 auto;> div{width:", "px;height:", "px;", " ", "}"], styles.imgLandscape.mobile.width, _mediaQuery["default"].tabletAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", "px;\n    order: 2;\n  "])), styles.imgLandscape.tablet.width), styles.imgLandscape.mobile.width, styles.imgLandscape.mobile.height, _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      width: ", "px;\n      height: ", "px;\n    "])), styles.imgLandscape.tablet.width, styles.imgLandscape.tablet.height), _mediaQuery["default"].desktopAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      width: ", "px;\n      height: ", "px;\n    "])), styles.imgLandscape.desktop.width, styles.imgLandscape.desktop.height));
+
+var PostText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "post-item__PostText",
+  componentId: "d3t92f-2"
+})(["color:#4a4949;font-weight:", ";font-size:16px;line-height:1.5;flex:1 1 auto;white-space:normal;order:2;", " padding:", ";", " ", ""], _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].tabletAndAbove(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    order: 1;\n  "]))), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.33;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: ", ";\n    line-height: 1.25;\n  "])), (0, _css.arrayToCssShorthand)(styles.textBlockPadding.desktop)));
+
+var PostItem = /*#__PURE__*/function (_PureComponent) {
+  _inherits(PostItem, _PureComponent);
+
+  var _super = _createSuper(PostItem);
+
+  function PostItem() {
+    _classCallCheck(this, PostItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(PostItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          title = _this$props.title,
+          imgUrl = _this$props.imgUrl,
+          linkTo = _this$props.linkTo,
+          linkTarget = _this$props.linkTarget;
+      return /*#__PURE__*/_react["default"].createElement(PostBox, {
+        to: linkTo,
+        target: linkTarget
+      }, /*#__PURE__*/_react["default"].createElement(PostImage, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        src: imgUrl,
+        alt: title
+      }))), /*#__PURE__*/_react["default"].createElement(PostText, null, title));
+    }
+  }]);
+
+  return PostItem;
+}(_react.PureComponent);
+
+PostItem.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  imgUrl: _propTypes["default"].string.isRequired,
+  linkTo: _propTypes["default"].string.isRequired,
+  linkTarget: _propTypes["default"].oneOf(['_blank'])
+};
+PostItem.defaultProps = {
+  linkTarget: null
+};
+var _default = PostItem;
+exports["default"] = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 PostsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "posts__PostsContainer",
+  componentId: "sc-16za9fh-0"
+})(["display:flex;justify-content:space-between;align-items:stretch;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: flex-start;\n    a {\n      border-bottom: solid 1px #d8d8d8;\n    }\n    a:last-child {\n      border-bottom: medium none currentcolor;\n    }\n  "]))));
+
+var _default = PostsContainer;
+exports["default"] = _default;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SectionTitle = exports.ListSectionContent = exports.TopSectionContent = void 0;
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _predefinedCss = require("../../constants/predefined-css");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 RightArrowIcon = function RightArrowIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M1 1l7 7.007L1.013 15",
+    fill: "none",
+    stroke: "#5eb2fd",
+    strokeWidth: "2"
+  }));
+};
+
+RightArrowIcon.defaultProps = {
+  viewBox: "0 0 10 16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fillRule: "evenodd",
+  clipRule: "evenodd"
+};
+var styles = {
+  goToTopicMargin: [20, 'auto', 0, 'auto'],
+  goToTopicPadding: [14, 0, 14, 0],
+  sectionMargin: {
+    mobile: [0, 0, 35, 0],
+    tablet: [0, 0, 42, 0],
+    desktop: [0, 0, 60, 0]
+  },
+  titleMargin: {
+    mobile: [0, 0, 24, 0],
+    tablet: [0, 0, 42, 0]
+  },
+  titlePadding: [16, 0, 16, 0]
+};
+var StyledLink = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.Link).withConfig({
+  displayName: "section__StyledLink",
+  componentId: "sc-125nvxn-0"
+})(["", " display:block;margin:", ";"], _predefinedCss.resetLinkStyle, (0, _css.arrayToCssShorthand)(styles.goToTopicMargin));
+
+var SectionTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "section__SectionTitle",
+  componentId: "sc-125nvxn-1"
+})(["width:100%;border-bottom:2px solid #d8d8d8;padding:", ";color:#4a4949;font-size:18px;font-weight:", ";line-height:1;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.titlePadding), _fontWeight.sourceHanSansTC.bold, (0, _css.arrayToCssShorthand)(styles.titleMargin.mobile), _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.titleMargin.tablet)));
+
+exports.SectionTitle = SectionTitle;
+
+var SectionContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "section__SectionContent",
+  componentId: "sc-125nvxn-2"
+})(["width:100%;margin:", ";", " ", ""], (0, _css.arrayToCssShorthand)(styles.sectionMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.desktop)));
+
+var GoToTopic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "section__GoToTopic",
+  componentId: "sc-125nvxn-3"
+})(["color:#5eb2fd;text-align:center;line-height:1;padding:", ";span{display:inline-block;max-width:400px;", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.1px;font-size:16px;font-weight:", ";}svg{height:16px;vertical-align:baseline;margin-left:0.5em;}"], (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _fontWeight.sourceHanSansTC.normal);
+
+var TopSectionContent = function TopSectionContent(props) {
+  return /*#__PURE__*/_react["default"].createElement(SectionContent, null, props.children, !props.topicName ? null : /*#__PURE__*/_react["default"].createElement(StyledLink, {
+    to: props.topicUrl
+  }, /*#__PURE__*/_react["default"].createElement(GoToTopic, null, /*#__PURE__*/_react["default"].createElement("span", null, "\u66F4\u591A".concat(props.topicName, "\u6587\u7AE0")), /*#__PURE__*/_react["default"].createElement(RightArrowIcon, null))));
+};
+
+exports.TopSectionContent = TopSectionContent;
+TopSectionContent.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  topicUrl: _propTypes["default"].string.isRequired,
+  topicName: _propTypes["default"].string
+};
+TopSectionContent.defaultProps = {
+  topicName: ''
+};
+
+var ListSectionContent = function ListSectionContent(props) {
+  return /*#__PURE__*/_react["default"].createElement(SectionContent, null, props.children);
+};
+
+exports.ListSectionContent = ListSectionContent;
+ListSectionContent.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};

package/lib/listing-page/components/topics/topic-item.js

@@ -0,0 +1,206 @@
+"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 _predefinedCss = require("../../constants/predefined-css");
+
+var _topics = require("../../constants/topics");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _image = _interopRequireDefault(require("../image"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+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 styles = {
+  imgPortrait: {
+    mobile: {
+      width: 150,
+      height: 200
+    },
+    tablet: {
+      width: 164,
+      height: 206
+    }
+  },
+  topicBox: {
+    mobile: {
+      marginBottom: 35
+    },
+    tablet: {
+      marginBottom: 35
+    },
+    desktop: {
+      marginBottom: 45
+    }
+  },
+  textBlock: {
+    mobile: {
+      paddingLeft: 15,
+      titleMarginBottom: 14
+    },
+    tablet: {
+      paddingLeft: 19,
+      paddingBottom: 8
+    },
+    desktop: {
+      paddingLeft: 26,
+      paddingBottom: 8
+    }
+  },
+  fontSize: {
+    title: {
+      mobile: 23,
+      tablet: 30,
+      desktop: 34
+    }
+  }
+};
+var StyledLink = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.Link).withConfig({
+  displayName: "topic-item__StyledLink",
+  componentId: "sc-1tffa4f-0"
+})(["", ""], _predefinedCss.resetLinkStyle);
+
+var TopicBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__TopicBox",
+  componentId: "sc-1tffa4f-1"
+})(["width:100%;display:flex;align-items:stretch;"]);
+
+var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__ItemContainer",
+  componentId: "sc-1tffa4f-2"
+})(["margin-bottom:", ";", " ", " width:100%;", ""], function (props) {
+  return !props.isTop ? "".concat(styles.topicBox.mobile.marginBottom, "px") : "".concat(styles.topicBox.mobile.marginBottom - 10, "px");
+}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-bottom: ", ";\n  "])), function (props) {
+  return !props.isTop ? "".concat(styles.topicBox.tablet.marginBottom, "px") : "".concat(styles.topicBox.tablet.marginBottom - 10, "px");
+}), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: ", ";\n  "])), function (props) {
+  return !props.isTop ? "".concat(styles.topicBox.desktop.marginBottom, "px") : "".concat(styles.topicBox.desktop.marginBottom - 10, "px");
+}), _predefinedCss.linkHoverFadeOut);
+
+var ImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__ImageBlock",
+  componentId: "sc-1tffa4f-3"
+})(["width:", "px;", " flex:0 0 auto;> div{width:", "px;height:", "px;", "}"], styles.imgPortrait.mobile.width, _mediaQuery["default"].tabletAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.imgPortrait.tablet.width), styles.imgPortrait.mobile.width, styles.imgPortrait.mobile.height, _mediaQuery["default"].tabletAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      width: ", "px;\n      height: ", "px;\n    "])), styles.imgPortrait.tablet.width, styles.imgPortrait.tablet.height));
+
+var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__TextBlock",
+  componentId: "sc-1tffa4f-4"
+})(["padding-left:", "px;", " ", " flex:1 1 auto;display:flex;flex-direction:column;color:#4a4949;"], styles.textBlock.mobile.paddingLeft, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.tablet.paddingLeft, styles.textBlock.tablet.paddingBottom), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n  "])), styles.textBlock.desktop.paddingLeft, styles.textBlock.desktop.paddingBottom));
+
+var TopicTitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
+  displayName: "topic-item__TopicTitle",
+  componentId: "sc-1tffa4f-5"
+})(["margin:0;", " font-size:", "px;font-weight:", ";letter-spacing:.2px;line-height:1.43;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n  "])), styles.textBlock.mobile.titleMarginBottom), styles.fontSize.title.mobile, _fontWeight.sourceHanSansTC.bold, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.desktop));
+
+var TopicDate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__TopicDate",
+  componentId: "sc-1tffa4f-6"
+})(["padding-top:15px;padding-bottom:15px;", " font-size:14px;font-weight:", ";letter-spacing:0.5px;"], _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-top: 12px;\n    padding-bottom: 12px;\n  "]))), _fontWeight.sourceHanSansTC.bold);
+
+var TopicDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topic-item__TopicDescription",
+  componentId: "sc-1tffa4f-7"
+})(["font-size:16px;letter-spacing:0.1px;line-height:1.56;text-align:justify;"]);
+
+var DesktopDescription = /*#__PURE__*/(0, _styledComponents["default"])(TopicDescription).withConfig({
+  displayName: "topic-item__DesktopDescription",
+  componentId: "sc-1tffa4f-8"
+})(["", ""], _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+var MobileDescription = /*#__PURE__*/(0, _styledComponents["default"])(TopicDescription).withConfig({
+  displayName: "topic-item__MobileDescription",
+  componentId: "sc-1tffa4f-9"
+})(["display:none;", ""], _mediaQuery["default"].mobileOnly(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: block;\n    margin-top: 12px;\n  "]))));
+
+var TopicItem = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TopicItem, _PureComponent);
+
+  var _super = _createSuper(TopicItem);
+
+  function TopicItem() {
+    _classCallCheck(this, TopicItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(TopicItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          title = _this$props.title,
+          updatedAt = _this$props.updatedAt,
+          description = _this$props.description,
+          imgUrl = _this$props.imgUrl,
+          imgAlt = _this$props.imgAlt,
+          linkTo = _this$props.linkTo,
+          isTop = _this$props.isTop;
+      return /*#__PURE__*/_react["default"].createElement(StyledLink, {
+        to: linkTo
+      }, /*#__PURE__*/_react["default"].createElement(ItemContainer, {
+        isTop: isTop
+      }, /*#__PURE__*/_react["default"].createElement(TopicBox, null, /*#__PURE__*/_react["default"].createElement(ImageBlock, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        src: imgUrl,
+        alt: imgAlt
+      }))), /*#__PURE__*/_react["default"].createElement(TextBlock, null, /*#__PURE__*/_react["default"].createElement(TopicTitle, null, title), /*#__PURE__*/_react["default"].createElement(TopicDate, null, "".concat(_topics.TEXT.LAST_UPDATED, " ").concat(updatedAt)), /*#__PURE__*/_react["default"].createElement(DesktopDescription, null, description))), /*#__PURE__*/_react["default"].createElement(MobileDescription, null, description)));
+    }
+  }]);
+
+  return TopicItem;
+}(_react.PureComponent);
+
+TopicItem.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  updatedAt: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string.isRequired,
+  imgUrl: _propTypes["default"].string.isRequired,
+  imgAlt: _propTypes["default"].string.isRequired,
+  linkTo: _propTypes["default"].string.isRequired,
+  isTop: _propTypes["default"].bool
+};
+TopicItem.defaultProps = {
+  isTop: false
+};
+var _default = TopicItem;
+exports["default"] = _default;

package/lib/listing-page/constants/mockup-spec.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+// 20 is the margin between two items
+var marginBetweenItems = 20;
+var _default = {
+  marginBetweenItems: marginBetweenItems,
+  mobile: {
+    maxWidth: 375,
+    cardWidth: 325,
+    tagsWidth: 240,
+    imgHeight: 205
+  },
+  desktop: {
+    maxWidth: 451 * 2 + marginBetweenItems,
+    cardWidth: 451,
+    textWidth: 421,
+    tagsWidth: 335,
+    imgHeight: 285
+  },
+  tablet: {
+    maxWidth: 339 * 2 + marginBetweenItems,
+    cardWidth: 339,
+    textWidth: 311,
+    tagsWidth: 224,
+    imgHeight: 214
+  },
+  hd: {
+    maxWidth: 555 * 2 + marginBetweenItems,
+    cardWidth: 555,
+    textWidth: 516,
+    tagsWidth: 430,
+    imgHeight: 350
+  }
+};
+exports["default"] = _default;

package/lib/listing-page/constants/predefined-css.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetLinkStyle = exports.linkHoverFadeOut = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+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 linkHoverFadeOut = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: .7;\n      transition: 200ms opacity linear;  \n    }\n  "]))));
+exports.linkHoverFadeOut = linkHoverFadeOut;
+var resetLinkStyle = 'a:hover,a:active,a:link,a:visited { color: inherit; text-decoration: none; }';
+exports.resetLinkStyle = resetLinkStyle;

package/lib/listing-page/constants/topics.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXT = void 0;
+var TEXT = {
+  TOPICS_PAGE_TITLE: '專題',
+  SECTION_TITLE_FEATURED: '最新專題',
+  SECTION_TITLE_OTHERS: '所有專題',
+  LAST_UPDATED: '最後更新'
+};
+exports.TEXT = TEXT;

package/lib/listing-page/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TopicsList", {
+  enumerable: true,
+  get: function get() {
+    return _topics["default"];
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _list["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _topics = _interopRequireDefault(require("./components/topics"));
+
+var _list = _interopRequireDefault(require("./components/list"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  TopicsList: _topics["default"],
+  List: _list["default"]
+};
+exports["default"] = _default;