@twreporter/react-components 8.27.2-rc.1 → 8.28.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.28.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.2-rc.2...@twreporter/react-components@8.28.0-rc.0) (2024-05-08)
+
+
+### Bug Fixes
+
+* add link for button ([58ecbb8](https://github.com/twreporter/twreporter-npm-packages/commit/58ecbb8f1008c6ad8d71b2ef35d690ebd6370a70))
+* remove unused hover ([fe9f420](https://github.com/twreporter/twreporter-npm-packages/commit/fe9f4204baa5d905e75dd52d4e67e2f88ee5a308))
+* use js default value and fix comments ([313a7d9](https://github.com/twreporter/twreporter-npm-packages/commit/313a7d93a9767edd13e3a45002eb42ee8e872e60))
+
+
+### Features
+
+* add footer links contants and components ([2a5d284](https://github.com/twreporter/twreporter-npm-packages/commit/2a5d284493488b7fff8d7ec940e0a7772f15c3d8))
+* add footer storybooks ([b74d8e0](https://github.com/twreporter/twreporter-npm-packages/commit/b74d8e0524196ccabc1f528bc0dbe58a2cc918b7))
+* logo component for footer ([2684955](https://github.com/twreporter/twreporter-npm-packages/commit/2684955bbf04e2c22338f3a51de2390383bf3f65))
+* logo footer ([5887d57](https://github.com/twreporter/twreporter-npm-packages/commit/5887d577a2509214f3e00dd22d404c506e517ab6))
+* new footer component ([fff4e74](https://github.com/twreporter/twreporter-npm-packages/commit/fff4e74c8e485eba0ccb8b96bb50014a446a7eaf))
+* plurk icon ([9876c40](https://github.com/twreporter/twreporter-npm-packages/commit/9876c409e1c3e2e84ab8e100837f72d997d61d2f))
+
+
+
+
+
+## [8.27.2-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.2-rc.1...@twreporter/react-components@8.27.2-rc.2) (2024-05-07)
+
+
+### Bug Fixes
+
+* prevent ios chrome email format detection ([fd19ce7](https://github.com/twreporter/twreporter-npm-packages/commit/fd19ce7816bf2121a52dc66d572e1b9f6a020c78))
+
+
+
+
+
 ## [8.27.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.2-rc.0...@twreporter/react-components@8.27.2-rc.1) (2024-05-07)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/footer/constants/links.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSocialMediaLinks = exports.getLinksGroups = void 0;
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var gtmId = {
+  support: 'footer-support',
+  newsletter: 'footer-newsletter'
+};
+
+var getLinksGroups = function getLinksGroups(mainOrigin) {
+  return [[{
+    slug: 'about',
+    text: '關於我們',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].aboutus),
+    target: '_blank'
+  }, {
+    slug: 'authors',
+    text: '作者群',
+    to: "".concat(mainOrigin, "/authors"),
+    target: '_blank'
+  }, {
+    slug: 'contact',
+    text: '聯絡我們',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].article, "contact-footer"),
+    target: '_blank'
+  }, {
+    slug: 'about',
+    text: '加入我們',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].article, "hiring-job-description"),
+    target: '_blank'
+  }, {
+    slug: 'license',
+    text: '常見問題',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].article, "about-us-questions"),
+    target: '_blank'
+  }], [{
+    slug: 'donate',
+    text: '捐款徵信',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].article, "credit-donate"),
+    target: '_blank'
+  }, {
+    slug: 'media-center',
+    text: '基金會消息',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].categories, "foundation"),
+    target: '_blank'
+  }, {
+    slug: 'impact-and-annual-report',
+    text: '影響力報告',
+    to: "".concat(mainOrigin).concat(_entityPath["default"].article, "impact-and-annual-report"),
+    target: '_blank'
+  }, {
+    slug: 'publication-and-merchandise',
+    text: '出版品與周邊',
+    to: 'https://twreporter.backme.tw/shops/3619?locale=zh-TW',
+    target: '_blank'
+  }], [{
+    slug: 'subcribe-email',
+    text: '訂閱電子報',
+    to: 'http://eepurl.com/djVwF9',
+    target: '_blank',
+    id: gtmId.newsletter
+  }, {
+    slug: 'subcribe-podcast',
+    text: '訂閱 Podcast',
+    to: 'https://bit.ly/4cxM3Tm',
+    target: '_blank'
+  }, {
+    slug: 'subcribe-RSS',
+    text: '訂閱 RSS',
+    to: 'https://public.twreporter.org/rss/twreporter-rss.xml',
+    target: '_blank'
+  }, {
+    slug: 'install-web-app',
+    text: '安裝Web App',
+    to: 'https://www.twreporter.org/a/how-to-follow-the-reporter#方法3：安裝Web App',
+    target: '_blank'
+  }, {
+    slug: 'subcribe-telegram',
+    text: '訂閱Telegram',
+    to: 'https://t.me/tw_reporter_org',
+    target: '_blank'
+  }]];
+};
+
+exports.getLinksGroups = getLinksGroups;
+
+var getSocialMediaLinks = function getSocialMediaLinks() {
+  return [{
+    slug: 'facebook',
+    icon: 'facebook',
+    to: 'https://www.facebook.com/twreporter/',
+    target: '_blank'
+  }, {
+    slug: 'instagram',
+    icon: 'instagram',
+    to: 'https://www.instagram.com/twreporter/',
+    target: '_blank'
+  }, {
+    slug: 'x',
+    icon: 'twitter',
+    to: 'https://twitter.com/tw_reporter_org',
+    target: '_blank'
+  }, {
+    slug: 'medium',
+    icon: 'medium',
+    to: 'https://medium.com/twreporter',
+    target: '_blank'
+  }, {
+    slug: 'youtube',
+    icon: 'youtube',
+    to: 'https://www.youtube.com/@TwreporterOrg',
+    target: '_blank'
+  }, {
+    slug: 'plurk',
+    icon: 'plurk',
+    to: 'https://www.plurk.com/twreporter',
+    target: '_blank'
+  }];
+};
+
+exports.getSocialMediaLinks = getSocialMediaLinks;

package/lib/footer/footer.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footer = exports["default"] = void 0;
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _constants = require("../storybook/constants");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Footer',
+  component: _index["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+var footer = {
+  args: {
+    releaseBranch: _releaseBranch["default"].master
+  }
+};
+exports.footer = footer;

package/lib/footer/index.js

@@ -1,139 +1,185 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _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 _content = _interopRequireDefault(require("./content"));
-
-var _iconList = _interopRequireDefault(require("./icon-list"));
-
-var _styles = _interopRequireDefault(require("./constants/styles"));
-
-var _css = require("@twreporter/core/lib/utils/css");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
 
 var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
-var _font = require("@twreporter/core/lib/constants/font");
-
 var _fundraising = _interopRequireDefault(require("@twreporter/core/lib/constants/fundraising"));
 
 var _color = require("@twreporter/core/lib/constants/color");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
-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"); } }
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
 
-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); } }
+var _button = require("../button");
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _divider = _interopRequireDefault(require("../divider"));
 
-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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _paragraph = require("../text/paragraph");
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _rwd = require("../rwd");
 
-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); }; }
+var _customizedLink = _interopRequireDefault(require("../customized-link"));
 
-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); }
+var _link = require("./link");
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var _logo = _interopRequireDefault(require("./logo"));
 
-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; } }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "footer__FooterContainer",
   componentId: "d1uef9-0"
-})(["border-top:solid 0.5px ", ";width:100%;background-color:", ";padding:0;", " *{box-sizing:border-box;}"], _color.colorGrayscale.gray300, function (props) {
-  return props.bgColor;
-}, _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-height: ", "px;\n  "])), _styles["default"].footerHeight.desktop));
+})(["width:100%;background-color:", ";"], _color.colorGrayscale.white);
 
-var FooterContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "footer__FooterContent",
+var FooterSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__FooterSection",
   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));
+})(["display:flex;flex-direction:column;margin:auto;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 1200px;\n    padding: 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: center;\n    max-width: 400px;\n    padding: 48px 16px;\n  "]))));
 
-var CompanyInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "footer__CompanyInfo",
+var UpperContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__UpperContainer",
   componentId: "d1uef9-2"
-})(["display:flex;align-items:center;", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    p:last-child {\n      margin-top: 10px;\n    }\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin-top: 30px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    align-items: baseline;\n    margin-top: 50px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin-top: 30px;\n    justify-content: space-between;\n  "]))));
+})(["width:100%;display:flex;flex-direction:row;justify-content:space-between;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: center;\n  "]))));
 
-var InfoContainer = /*#__PURE__*/_styledComponents["default"].p.withConfig({
-  displayName: "footer__InfoContainer",
+var InformationContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__InformationContainer",
   componentId: "d1uef9-3"
-})(["font-size:12px;font-weight:", ";letter-spacing:0.4px;color:", ";", ""], _font.fontWeight.normal, _color.colorGrayscale.gray500, _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    text-align: center;\n  "]))));
+})(["display:flex;flex-direction:column;justify-content:space-between;a{text-decoration:none;}", " ", " .button{width:280px;justify-content:center;}"], _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 320px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    gap: 32px;\n    width: 100%;\n    margin-bottom: 48px;\n    align-items: center;\n    text-align: center;\n  "]))));
+
+var LogoAndDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__LogoAndDescription",
+  componentId: "d1uef9-4"
+})(["width:100%;display:flex;flex-direction:column;gap:24px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    align-items: center;\n    gap: 16px;\n  "]))));
+
+var LinksContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__LinksContainer",
+  componentId: "d1uef9-5"
+})(["display:flex;gap:24px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: 16px;\n    gap: 16px;\n  "]))));
 
-var Copyright = function Copyright() {
-  var currentYear = new Date().getFullYear();
-  return /*#__PURE__*/_react["default"].createElement(InfoContainer, null, "Copyright \xA9 ".concat(currentYear, " The Reporter."));
+var Divider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
+  displayName: "footer__Divider",
+  componentId: "d1uef9-6"
+})(["width:100%;margin-top:24px;margin-bottom:24px;"]);
+
+var BottomContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__BottomContainer",
+  componentId: "d1uef9-7"
+})(["display:flex;justify-content:space-between;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    flex-direction: column-reverse;\n    gap: 24px;\n    align-items: center;\n    text-align: center;\n  "]))));
+
+var InfoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__InfoContainer",
+  componentId: "d1uef9-8"
+})(["display:flex;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    align-items: center;\n  "]))));
+
+var DescWithLink = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "footer__DescWithLink",
+  componentId: "d1uef9-9"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+
+var IconList = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__IconList",
+  componentId: "d1uef9-10"
+})(["display:flex;gap:16px;"]);
+
+var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "footer__P2Gray600",
+  componentId: "d1uef9-11"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+var P3Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "footer__P3Gray600",
+  componentId: "d1uef9-12"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+
+var DesktopAndAboveWithFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "footer__DesktopAndAboveWithFlex",
+  componentId: "d1uef9-13"
+})(["display:flex;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+
+var InfoLink = function InfoLink(_ref) {
+  var _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].release : _ref$releaseBranch;
+  var mainOrigin = _requestOrigins["default"].forClientSideRendering[releaseBranch].main;
+  return /*#__PURE__*/_react["default"].createElement(DescWithLink, null, /*#__PURE__*/_react["default"].createElement(_button.InheritLinkButton, {
+    text: "\u8A31\u53EF\u5354\u8B70",
+    link: {
+      isExternal: true,
+      to: "".concat(mainOrigin, "/a/license-footer"),
+      target: '_blank'
+    },
+    type: _button.InheritLinkButton.Type.UNDERLINE
+  }), "\uFF5C", /*#__PURE__*/_react["default"].createElement(_button.InheritLinkButton, {
+    text: "\u96B1\u79C1\u653F\u7B56",
+    link: {
+      isExternal: true,
+      to: "".concat(mainOrigin, "/a/privacy-footer"),
+      target: '_blank'
+    },
+    type: _button.InheritLinkButton.Type.UNDERLINE
+  }), "\uFF5C", /*#__PURE__*/_react["default"].createElement(_button.InheritLinkButton, {
+    text: "\u54C1\u724C\u898F\u7BC4",
+    link: {
+      isExternal: true,
+      to: 'https://twreporter.gitbook.io/the-reporter-brand-guidelines',
+      target: '_blank'
+    },
+    type: _button.InheritLinkButton.Type.UNDERLINE
+  }));
 };
 
-var Fundraising = function Fundraising() {
-  if (!_fundraising["default"]) return null;
-  return /*#__PURE__*/_react["default"].createElement(InfoContainer, null, _fundraising["default"]);
+InfoLink.propTypes = {
+  releaseBranch: _propTypes["default"].releaseBranch
 };
 
-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;
-      return /*#__PURE__*/_react["default"].createElement(FooterContainer, {
-        bgColor: bgColor
-      }, /*#__PURE__*/_react["default"].createElement(FooterContent, null, /*#__PURE__*/_react["default"].createElement(_content["default"], {
-        pathname: pathname,
-        host: host,
-        releaseBranch: releaseBranch
-      }), /*#__PURE__*/_react["default"].createElement(_iconList["default"], null), /*#__PURE__*/_react["default"].createElement(CompanyInfo, null, /*#__PURE__*/_react["default"].createElement(Fundraising, null), /*#__PURE__*/_react["default"].createElement(Copyright, null))));
-    }
-  }]);
-
-  return Footer;
-}(_react["default"].PureComponent);
+var Footer = function Footer(_ref2) {
+  var _ref2$releaseBranch = _ref2.releaseBranch,
+      releaseBranch = _ref2$releaseBranch === void 0 ? _releaseBranch["default"].release : _ref2$releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(FooterContainer, null, /*#__PURE__*/_react["default"].createElement(FooterSection, null, /*#__PURE__*/_react["default"].createElement(UpperContainer, null, /*#__PURE__*/_react["default"].createElement(InformationContainer, null, /*#__PURE__*/_react["default"].createElement(LogoAndDescription, null, /*#__PURE__*/_react["default"].createElement(_logo["default"], {
+    releaseBranch: releaseBranch
+  }), /*#__PURE__*/_react["default"].createElement(P2Gray600, {
+    text: "\u53F0\u7063\u7B2C\u4E00\u500B\u7531\u516C\u76CA\u57FA\u91D1\u6703\u6210\u7ACB\u7684\u7DB2\u8DEF\u5A92\u9AD4\uFF0C\u81F4\u529B\u65BC\u516C\u5171\u9818\u57DF\u8ABF\u67E5\u5831\u5C0E\uFF0C\u6253\u9020\u591A\u5143\u9032\u6B65\u7684\u5A92\u9AD4\u74B0\u5883\u3002"
+  })), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+    to: _requestOrigins["default"].forClientSideRendering[releaseBranch].accounts,
+    target: "_blank"
+  }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
+    className: "button",
+    type: _button.PillButton.Type.SECONDARY,
+    text: '贊助我們'
+  }))), /*#__PURE__*/_react["default"].createElement(LinksContainer, null, /*#__PURE__*/_react["default"].createElement(_link.FooterLinkButtonGroups, {
+    releaseBranch: releaseBranch
+  }))), /*#__PURE__*/_react["default"].createElement(Divider, null), /*#__PURE__*/_react["default"].createElement(BottomContainer, null, /*#__PURE__*/_react["default"].createElement(InfoContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray600, {
+    text: _fundraising["default"]
+  }), /*#__PURE__*/_react["default"].createElement(DesktopAndAboveWithFlex, null, /*#__PURE__*/_react["default"].createElement(P3Gray600, {
+    text: "\uFF5C"
+  }), /*#__PURE__*/_react["default"].createElement(InfoLink, {
+    releaseBranch: releaseBranch
+  }), /*#__PURE__*/_react["default"].createElement(P3Gray600, {
+    text: "\uFF5C"
+  })), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(InfoLink, {
+    releaseBranch: releaseBranch
+  })), /*#__PURE__*/_react["default"].createElement(P3Gray600, {
+    text: "Copyright \xA9 ".concat(new Date().getFullYear(), " The Reporter.")
+  })), /*#__PURE__*/_react["default"].createElement(IconList, null, /*#__PURE__*/_react["default"].createElement(_link.FooterSocialMediaIcons, {
+    releaseBranch: releaseBranch
+  })))));
+};
 
 Footer.propTypes = {
-  bgColor: _propTypes["default"].string,
-  releaseBranch: _propTypes2["default"].releaseBranch,
-  host: _propTypes["default"].string,
-  pathname: _propTypes["default"].string
-};
-Footer.defaultProps = {
-  bgColor: _color.colorGrayscale.white,
-  releaseBranch: _releaseBranch["default"].release,
-  host: '',
-  pathname: ''
+  releaseBranch: _propTypes["default"].releaseBranch
 };
 var _default = Footer;
 exports["default"] = _default;

package/lib/footer/link.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FooterSocialMediaIcons = exports.FooterLinkButtonGroups = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+var _icon = require("../icon");
+
+var _button = require("../button");
+
+var _paragraph = require("../text/paragraph");
+
+var _customizedLink = _interopRequireDefault(require("../customized-link"));
+
+var _links = require("./constants/links");
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 LinkColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "link__LinkColumn",
+  componentId: "sc-7lr0di-0"
+})(["display:flex;flex-direction:column;gap:16px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    flex-basis: 33%;\n    word-wrap: break-word;\n    max-width: 33%;\n    gap: 8px;\n  "]))));
+
+var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "link__LinkContainer",
+  componentId: "sc-7lr0di-1"
+})(["text-decoration:none;"]);
+var LinkItem = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "link__LinkItem",
+  componentId: "sc-7lr0di-2"
+})(["color:", ";&:hover{color:", ";}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray800);
+
+var FooterLinkButton = function FooterLinkButton(_ref) {
+  var slug = _ref.slug,
+      text = _ref.text,
+      to = _ref.to,
+      target = _ref.target,
+      id = _ref.id;
+  return /*#__PURE__*/_react["default"].createElement(LinkContainer, {
+    slug: slug,
+    to: to,
+    target: target,
+    id: id
+  }, /*#__PURE__*/_react["default"].createElement(LinkItem, {
+    text: text
+  }));
+};
+
+FooterLinkButton.propTypes = {
+  slug: _propTypes["default"].string,
+  text: _propTypes["default"].string,
+  to: _propTypes["default"].string,
+  target: _propTypes["default"].oneOf(['_blank', '_self']),
+  id: _propTypes["default"].string
+};
+
+var FooterSocialMediaIcon = function FooterSocialMediaIcon(_ref2) {
+  var releaseBranch = _ref2.releaseBranch,
+      slug = _ref2.slug,
+      icon = _ref2.icon,
+      to = _ref2.to,
+      target = _ref2.target;
+
+  var Icon = /*#__PURE__*/_react["default"].createElement(_icon.SocialMedia, {
+    mediaType: icon,
+    releaseBranch: releaseBranch
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(LinkContainer, {
+    slug: slug,
+    to: to,
+    target: target
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon
+  }));
+};
+
+FooterSocialMediaIcon.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch,
+  slug: _propTypes["default"].string,
+  icon: _propTypes["default"].string,
+  to: _propTypes["default"].string,
+  target: _propTypes["default"].oneOf(['_blank', '_self'])
+};
+
+var FooterLinkButtonGroups = function FooterLinkButtonGroups(_ref3) {
+  var _ref3$releaseBranch = _ref3.releaseBranch,
+      releaseBranch = _ref3$releaseBranch === void 0 ? _releaseBranch["default"].release : _ref3$releaseBranch;
+  var mainOrigin = _requestOrigins["default"].forClientSideRendering[releaseBranch].main;
+  var linksGroups = (0, _links.getLinksGroups)(mainOrigin);
+  return _.map(linksGroups, function (links, indexofGroup) {
+    return /*#__PURE__*/_react["default"].createElement(LinkColumn, {
+      key: indexofGroup
+    }, _.map(links, function (link, indexofLink) {
+      return /*#__PURE__*/_react["default"].createElement(FooterLinkButton, _extends({
+        key: indexofLink
+      }, link));
+    }));
+  });
+};
+
+exports.FooterLinkButtonGroups = FooterLinkButtonGroups;
+FooterLinkButtonGroups.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
+var FooterSocialMediaIcons = function FooterSocialMediaIcons(_ref4) {
+  var _ref4$releaseBranch = _ref4.releaseBranch,
+      releaseBranch = _ref4$releaseBranch === void 0 ? _releaseBranch["default"].release : _ref4$releaseBranch;
+  var icons = (0, _links.getSocialMediaLinks)();
+  return _.map(icons, function (icon, index) {
+    return /*#__PURE__*/_react["default"].createElement(FooterSocialMediaIcon, _extends({
+      key: index,
+      releaseBranch: releaseBranch
+    }, icon));
+  });
+};
+
+exports.FooterSocialMediaIcons = FooterSocialMediaIcons;
+FooterSocialMediaIcons.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};