@twreporter/react-components 8.5.0-rc.1

package/lib/footer/constants/styles.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  reporterLogo: {
+    width: {
+      mobile: 300,
+      // px
+      desktop: 258,
+      // px
+      hd: 300 // px
+
+    },
+    height: {
+      mobile: 55,
+      // px
+      desktop: 45,
+      // px
+      hd: 55 // px
+
+    }
+  },
+  icon: {
+    width: {
+      tabletAndAbove: 30,
+      // px
+      mobile: 40 // px
+
+    },
+    height: {
+      tabletAndAbove: 30,
+      // px
+      mobile: 40 // px
+
+    }
+  },
+  footerHeight: {
+    desktop: 309 // px
+
+  },
+  footerContentPadding: {
+    hd: [60, 60, 41, 60],
+    // px
+    desktop: [60, 50, 40, 50],
+    // px
+    tablet: [50, 35, 0, 35],
+    // px
+    mobile: [60, 40, 60, 35] // px
+
+  },
+  footerContentMaxWidth: {
+    desktop: 1024,
+    // px
+    hd: 1440 // px
+
+  },
+  contentRow: {
+    width: {
+      tablet: 531,
+      // px
+      desktop: 682,
+      // px
+      hd: 908 // px
+
+    },
+    height: {
+      desktop: 123,
+      // px
+      hd: 96 // px
+
+    }
+  },
+  grayScaleOpacity: {
+    pureBlackWhiteSrc: 0.4,
+    normal: 0.8
+  }
+};
+exports["default"] = _default;

package/lib/footer/content.js

@@ -0,0 +1,227 @@
+"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 _donationLink = _interopRequireDefault(require("../donation-link"));
+
+var _logo = _interopRequireDefault(require("./logo"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = _interopRequireDefault(require("./constants/styles"));
+
+var _siteMeta = require("@twreporter/core/lib/constants/site-meta");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _externalLinks = _interopRequireDefault(require("@twreporter/core/lib/constants/external-links"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+
+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 _ = {
+  map: _map["default"]
+};
+
+function getItemGroups(mainOrigin) {
+  return [[{
+    slug: 'about',
+    text: '關於我們',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].aboutus),
+    target: '_blank'
+  }, {
+    slug: 'contact',
+    text: '聯絡我們',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "contact-footer"),
+    target: '_blank'
+  }, {
+    slug: 'authors',
+    text: '作者群',
+    link: "".concat(mainOrigin, "/authors"),
+    target: '_self'
+  }, {
+    slug: 'impact-and-annual-report',
+    text: '影響力報告',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "impact-and-annual-report"),
+    target: '_self'
+  }], [{
+    slug: 'privacy',
+    text: '隱私政策',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "privacy-footer"),
+    target: '_blank'
+  }, {
+    slug: 'license',
+    text: '許可協議',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "license-footer"),
+    target: '_blank'
+  }, {
+    slug: 'donate',
+    text: '捐款徵信',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "credit-donate"),
+    target: '_blank'
+  }, {
+    slug: 'license',
+    text: '常見問題',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "about-us-questions"),
+    target: '_blank'
+  }], [{
+    slug: 'about',
+    text: '加入我們',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "hiring-job-description"),
+    target: '_blank'
+  }, {
+    slug: 'subcribe',
+    text: '訂閱電子報',
+    link: _externalLinks["default"].newsLetter,
+    target: '_blank'
+  }, {
+    slug: 'podcast-list',
+    text: 'Podcast節目列表',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].article, "podcast-list"),
+    target: '_blank',
+    newFlag: true
+  }, {
+    slug: 'media-center',
+    text: '報導者基金會新聞專區',
+    link: "".concat(mainOrigin).concat(_entityPath["default"].topics, "media-center"),
+    target: '_blank'
+  }]];
+}
+
+var Intro = /*#__PURE__*/_styledComponents["default"].p.withConfig({
+  displayName: "content__Intro",
+  componentId: "sc-12bve65-0"
+})(["width:100%;font-size:12px;font-weight:", ";line-height:1.5;letter-spacing:0.4px;color:#9c9c9c;", ""], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 16px;\n    line-height: 1.63;\n    letter-spacing: 0.6px;\n  "]))));
+
+var ContentRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "content__ContentRow",
+  componentId: "sc-12bve65-1"
+})(["", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].contentRow.width.hd, _styles["default"].contentRow.height.hd), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;\n  "])), _styles["default"].contentRow.width.desktop, _styles["default"].contentRow.height.desktop), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _styles["default"].contentRow.width.tablet));
+
+var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "content__Column",
+  componentId: "sc-12bve65-2"
+})(["display:inline-block;", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: 100%;\n  "]))));
+
+var IntroColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
+  displayName: "content__IntroColumn",
+  componentId: "sc-12bve65-3"
+})(["", " ", " ", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-right: 60px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 510px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 290px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 260px;\n  "]))));
+var LinksColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
+  displayName: "content__LinksColumn",
+  componentId: "sc-12bve65-4"
+})(["padding-left:40px;", " ", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: 397px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 392px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    float: right;\n    border-left: solid 0.25px #d8d8d8;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    width: 270px;\n    padding-left: 31px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n    padding-left: 0;\n  "]))));
+
+var ItemList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "content__ItemList",
+  componentId: "sc-12bve65-5"
+})(["width:100%;"]);
+
+var ItemGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "content__ItemGroup",
+  componentId: "sc-12bve65-6"
+})(["display:inline-block;width:calc(100% / 3);white-space:nowrap;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    float: left;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: calc(100% / 2);\n    &:last-child{\n      margin-top: 35px;\n    }\n  "]))));
+
+var flickerAnimation = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%,100%{opacity:1;}50%{opacity:.6;}"]);
+
+var Item = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "content__Item",
+  componentId: "sc-12bve65-7"
+})(["text-decoration:none !important;display:block;width:100%;p{display:inline;font-size:14px;font-family:ff-tisa-web-pro,source-han-sans-traditional,sans-serif;font-weight:", ";letter-spacing:1.3px;color:#9c9c9c;}span{visibility:", ";background:#c7000a;color:#ffffff;font-size:9px;font-family:Roboto;margin-right:5px;padding:2px 5px;vertical-align:middle;animation:", " 0.7s infinite;}&:hover{p{color:#262626;}}", " ", ""], _fontWeight.sourceHanSansTC.medium, function (props) {
+  return props.visible ? 'visible' : 'hidden';
+}, flickerAnimation, _mediaQuery["default"].desktopAndAbove(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    height: calc(", "px / 3);\n  "])), _styles["default"].contentRow.height.hd), _mediaQuery["default"].mobileOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    p {\n      font-size: 18px;\n      letter-spacing: 1.6px;\n      line-height: 2;\n    }\n  "]))));
+
+var DonateButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "content__DonateButton",
+  componentId: "sc-12bve65-8"
+})(["a{text-decoration:none !important;width:140px;height:55px;background-color:#ffffff;border:solid 0.5px #a67a44;display:table;&:hover{background-color:#a67a44;}p{display:table-cell;text-align:center;vertical-align:middle;color:#a67a44;font-size:14px;font-weight:", ";letter-spacing:1.3px;&:hover{color:#ffffff;}}", " ", " ", " ", "}"], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].tabletAndAbove(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      position: absolute;\n      right: 0;\n      top: 0;\n    "]))), _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.desktop[0], _styles["default"].footerContentPadding.desktop[1]), _mediaQuery["default"].tabletOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      margin-top: ", "px;\n      margin-right: ", "px;\n    "])), _styles["default"].footerContentPadding.tablet[0], _styles["default"].footerContentPadding.tablet[1]), _mediaQuery["default"].mobileOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      width: 100%;\n      margin: 60px auto 40px auto;\n    "]))));
+
+var buildList = function buildList(itemGroups) {
+  return _.map(itemGroups, function (items, indexofGroup) {
+    return /*#__PURE__*/_react["default"].createElement(ItemGroup, {
+      key: indexofGroup
+    }, _.map(items, function (item, indexofItem) {
+      return /*#__PURE__*/_react["default"].createElement(Item, {
+        key: "item-".concat(indexofGroup, "-").concat(indexofItem),
+        visible: item.newFlag,
+        href: item.link,
+        target: item.target
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "New"), /*#__PURE__*/_react["default"].createElement("p", null, item.text));
+    }));
+  });
+};
+
+var Content = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Content, _React$PureComponent);
+
+  var _super = _createSuper(Content);
+
+  function Content() {
+    _classCallCheck(this, Content);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Content, [{
+    key: "render",
+    value: function render() {
+      var mainOrigin = this.props.mainOrigin;
+      return /*#__PURE__*/_react["default"].createElement(ContentRow, null, /*#__PURE__*/_react["default"].createElement(IntroColumn, null, /*#__PURE__*/_react["default"].createElement(_logo["default"], {
+        mainOrigin: mainOrigin
+      }), /*#__PURE__*/_react["default"].createElement(Intro, null, _siteMeta.shortDescription)), /*#__PURE__*/_react["default"].createElement(LinksColumn, null, /*#__PURE__*/_react["default"].createElement(ItemList, null, buildList(getItemGroups(mainOrigin)))), /*#__PURE__*/_react["default"].createElement(DonateButton, null, /*#__PURE__*/_react["default"].createElement(_donationLink["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "\u8D0A\u52A9\u6211\u5011"))));
+    }
+  }]);
+
+  return Content;
+}(_react["default"].PureComponent);
+
+Content.propTypes = {
+  mainOrigin: _propTypes["default"].string
+};
+Content.defaultProps = {
+  mainOrigin: ''
+};
+var _default = Content;
+exports["default"] = _default;

package/lib/footer/icon-list.js

@@ -0,0 +1,191 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = _interopRequireDefault(require("./constants/styles"));
+
+var _paths = require("./constants/paths");
+
+var _externalLinks = _interopRequireDefault(require("@twreporter/core/lib/constants/external-links"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 _ = {
+  map: _map["default"]
+};
+var iconList = [{
+  slug: 'facebook',
+  text: 'Facebook',
+  link: _externalLinks["default"].facebook,
+  target: '_blank'
+}, {
+  slug: 'instagram',
+  text: 'Instagram',
+  link: _externalLinks["default"].instagram,
+  target: '_blank'
+}, {
+  slug: 'line',
+  text: 'Line',
+  link: _externalLinks["default"].line,
+  target: '_blank'
+}, {
+  slug: 'medium',
+  text: 'Medium',
+  link: _externalLinks["default"].medium,
+  target: '_blank',
+  logoInPureBlackWhite: true
+}, {
+  slug: 'github',
+  text: 'Github',
+  link: _externalLinks["default"].github,
+  target: '_blank',
+  logoInPureBlackWhite: true
+}, {
+  slug: 'rss',
+  text: 'RSS',
+  link: _externalLinks["default"].rss,
+  target: '_blank'
+}];
+
+var IconLink = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "icon-list__IconLink",
+  componentId: "sc-1pjab65-0"
+})(["text-decoration:none !important;position:relative;display:inline-block;margin-right:11px;", " ", ""], _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: ", "px;  \n  "])), _styles["default"].icon.width.tabletAndAbove, _styles["default"].icon.height.tabletAndAbove), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-right: 0;\n    width: 30px;\n    height: 30px;\n  "]))));
+
+var Icons = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icon-list__Icons",
+  componentId: "sc-1pjab65-1"
+})(["margin-top:20px;transform:translateX(-5px);opacity:0.8;", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n  "]))));
+
+var Icon = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Icon, _React$PureComponent);
+
+  var _super = _createSuper(Icon);
+
+  function Icon(props) {
+    var _this;
+
+    _classCallCheck(this, Icon);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      isMouseEnter: false
+    };
+    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
+    _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Icon, [{
+    key: "handleMouseEnter",
+    value: function handleMouseEnter(e) {
+      e.preventDefault();
+      this.setState({
+        isMouseEnter: true
+      });
+    }
+  }, {
+    key: "handleMouseLeave",
+    value: function handleMouseLeave(e) {
+      e.preventDefault();
+      this.setState({
+        isMouseEnter: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isMouseEnter = this.state.isMouseEnter;
+      var icon = this.props.icon;
+      var iconSrc = "".concat(_paths.assets).concat(icon.slug, "-logo-default.svg");
+      var iconHoverSrc = "".concat(_paths.assets).concat(icon.slug, "-logo-hover.svg");
+      return /*#__PURE__*/_react["default"].createElement(IconLink, {
+        href: icon.link,
+        target: icon.target,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: icon.slug,
+        src: isMouseEnter ? iconHoverSrc : iconSrc
+      }));
+    }
+  }]);
+
+  return Icon;
+}(_react["default"].PureComponent);
+
+Icon.propTypes = {
+  icon: _propTypes["default"].shape({
+    link: _propTypes["default"].string,
+    slug: _propTypes["default"].string,
+    target: _propTypes["default"].string
+  }).isRequired
+};
+
+var IconList = /*#__PURE__*/function (_React$PureComponent2) {
+  _inherits(IconList, _React$PureComponent2);
+
+  var _super2 = _createSuper(IconList);
+
+  function IconList() {
+    _classCallCheck(this, IconList);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(IconList, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(Icons, null, _.map(iconList, function (icon) {
+        return /*#__PURE__*/_react["default"].createElement(Icon, {
+          key: icon.slug,
+          icon: icon
+        });
+      }));
+    }
+  }]);
+
+  return IconList;
+}(_react["default"].PureComponent);
+
+var _default = IconList;
+exports["default"] = _default;

package/lib/footer/index.js

@@ -0,0 +1,123 @@
+"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 _styles = _interopRequireDefault(require("./constants/styles"));
+
+var _content = _interopRequireDefault(require("./content"));
+
+var _iconList = _interopRequireDefault(require("./icon-list"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _fontWeight = require("@twreporter/core/lib/constants/font-weight");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+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 FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__FooterContainer",
+  componentId: "d1uef9-0"
+})(["border-top:solid 0.5px #d8d8d8;width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], function (props) {
+  return props.bgColor;
+}, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-height: ", "px;\n  "])), _styles["default"].footerHeight.desktop));
+
+var FooterContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__FooterContent",
+  componentId: "d1uef9-1"
+})(["position:relative;", " ", " ", " ", " margin-left:auto;margin-right:auto;position:relative;width:100%;"], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n  "])), (0, _css.arrayToCssShorthand)(_styles["default"].footerContentPadding.mobile)), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: ", ";\n    max-width: \n  "])), (0, _css.arrayToCssShorthand)(_styles["default"].footerContentPadding.tablet)), _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", ";\n    max-width: ", "px;  \n  "])), (0, _css.arrayToCssShorthand)(_styles["default"].footerContentPadding.desktop), _styles["default"].footerContentMaxWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: ", ";\n    max-width: ", "px;\n  "])), (0, _css.arrayToCssShorthand)(_styles["default"].footerContentPadding.hd), _styles["default"].footerContentMaxWidth.hd));
+
+var CopyRight = /*#__PURE__*/_styledComponents["default"].p.withConfig({
+  displayName: "footer__CopyRight",
+  componentId: "d1uef9-2"
+})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:#9c9c9c;", " ", " ", "  "], _fontWeight.sourceHanSansTC.medium, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    text-align: center;\n    margin-top: 10px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-top: 60px;\n  "]))));
+
+var Footer = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Footer, _React$PureComponent);
+
+  var _super = _createSuper(Footer);
+
+  function Footer() {
+    _classCallCheck(this, Footer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Footer, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          bgColor = _this$props.bgColor,
+          releaseBranch = _this$props.releaseBranch,
+          pathname = _this$props.pathname,
+          host = _this$props.host;
+      var currentYear = new Date().getFullYear();
+      return /*#__PURE__*/_react["default"].createElement(FooterContainer, {
+        bgColor: bgColor
+      }, /*#__PURE__*/_react["default"].createElement(FooterContent, null, /*#__PURE__*/_react["default"].createElement(_content["default"], {
+        mainOrigin: _requestOrigins["default"].forClientSideRendering[releaseBranch].main,
+        pathname: pathname,
+        host: host
+      }), /*#__PURE__*/_react["default"].createElement(_iconList["default"], null), /*#__PURE__*/_react["default"].createElement(CopyRight, null, "Copyright \xA9 ".concat(currentYear, " The Reporter."))));
+    }
+  }]);
+
+  return Footer;
+}(_react["default"].PureComponent);
+
+Footer.propTypes = {
+  bgColor: _propTypes["default"].string,
+  releaseBranch: _propTypes2["default"].releaseBranch,
+  host: _propTypes["default"].string,
+  pathname: _propTypes["default"].string
+};
+Footer.defaultProps = {
+  bgColor: '#ffffff',
+  releaseBranch: _releaseBranch["default"].release,
+  host: '',
+  pathname: ''
+};
+var _default = Footer;
+exports["default"] = _default;