@twreporter/react-article-components 1.4.12 → 1.5.0-rc.2

package/lib/components/aside/mobile-tool-bar.js

@@ -0,0 +1,504 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
+
+var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
+
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _anchor = require("../../constants/anchor");
+
+var _theme2 = require("./utils/theme");
+
+var _bookmarkWidget = _interopRequireDefault(require("@twreporter/react-components/lib/bookmark-widget"));
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _button = require("@twreporter/react-components/lib/button");
+
+var _snackBar = require("@twreporter/react-components/lib/snack-bar");
+
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var _ = {
+  isNil: _isNil["default"]
+}; // global var
+
+var HideTextContext = /*#__PURE__*/(0, _react.createContext)();
+var defaultFbAppID = '962589903815787';
+
+var defaultFunc = function defaultFunc() {};
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__ButtonContainer",
+  componentId: "do65sv-0"
+})(["display:flex;flex-direction:column;align-items:center;width:50px;margin-right:8px;&:last-child{margin-right:0;}"]);
+
+var ShareContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__ShareContainer",
+  componentId: "do65sv-1"
+})(["display:flex;align-items:center;padding:8px;border-radius:50%;margin-right:8px;&:last-child{margin-right:0;}"]);
+
+var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__OptionContainer",
+  componentId: "do65sv-2"
+})(["opacity:", ";transition:opacity 100ms;position:absolute;top:-55px;left:50%;transform:translateX(-50%);display:flex;"], function (props) {
+  return props.isShow ? '1' : '0';
+});
+
+var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__SnackBarContainer",
+  componentId: "do65sv-3"
+})(["opacity:", ";position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
+  return props.showSnackBar ? '1' : '0';
+});
+
+var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__ToolBarContainer",
+  componentId: "do65sv-4"
+})(["display:flex;align-items:center;width:fit-content;background-color:", ";padding:0 16px;border-radius:60px;position:fixed;left:50%;transform:translate(-50%,0);bottom:calc(env(safe-area-inset-bottom,0) + 8px);z-index:999;height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.hideText ? '38px' : '56px';
+}, function (props) {
+  return props.shadow;
+}, ShareContainer, function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.shadow;
+}, SnackBarContainer, function (props) {
+  return props.hideText ? '46px' : '64px';
+});
+
+var useOutsideClick = function useOutsideClick(callback) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var handleClick = function handleClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback(event);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return function () {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref]);
+  return ref;
+};
+
+var FbShare = function FbShare(_ref) {
+  var appID = _ref.appID;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToFb = function shareToFb() {
+    var currentURL = window.location.href;
+    var location = 'https://www.facebook.com/dialog/feed?' + 'display=page' + "&app_id=".concat(appID) + "&link=".concat(encodeURIComponent(currentURL)) + "&redirect_uri=".concat(encodeURIComponent('https://www.facebook.com/'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "fb-share",
+    onClick: shareToFb
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Facebook, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+FbShare.propTypes = {
+  appID: _aside["default"].tools.fbAppID
+};
+
+var LineShare = function LineShare() {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToLine = function shareToLine() {
+    var currentURL = window.location.href;
+    var location = "https://social-plugins.line.me/lineit/share?url=".concat(encodeURIComponent(currentURL));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "line-share",
+    onClick: shareToLine
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Line, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+var TwitterShare = function TwitterShare() {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToTwitter = function shareToTwitter() {
+    var currentURL = window.location.href;
+    var location = 'https://twitter.com/intent/tweet?' + "url=".concat(encodeURIComponent(currentURL), "&text=").concat(encodeURIComponent(document.title + ' #報導者'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "twitter-share",
+    onClick: shareToTwitter
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Twitter, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+var CopyUrl = function CopyUrl(_ref2) {
+  var _ref2$onclick = _ref2.onclick,
+      onclick = _ref2$onclick === void 0 ? defaultFunc : _ref2$onclick;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var copyUrl = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var currentURL;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              currentURL = window.location.href;
+              _context.next = 4;
+              return navigator.clipboard.writeText(currentURL);
+
+            case 4:
+              onclick(true);
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              onclick(false);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+
+    return function copyUrl() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    onClick: copyUrl
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Copy, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+CopyUrl.propTypes = {
+  onclick: _propTypes["default"].func
+};
+
+var ShareBy = function ShareBy(_ref4) {
+  var fbAppID = _ref4.fbAppID;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showOption = _useState2[0],
+      setShowState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showSnackBar = _useState4[0],
+      setSnackBar = _useState4[1];
+
+  var hideText = (0, _react.useContext)(HideTextContext);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var onCopyUrl = function onCopyUrl(isCopied) {
+    if (!isCopied) {
+      return;
+    }
+
+    setSnackBar(true);
+    setTimeout(function () {
+      setSnackBar(false);
+    }, 3000);
+  };
+
+  var onButtonClick = function onButtonClick() {
+    return setShowState(function (prevValue) {
+      return !prevValue;
+    });
+  };
+
+  var onClickOutside = function onClickOutside() {
+    return setShowState(false);
+  };
+
+  var ref = useOutsideClick(onClickOutside);
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    ref: ref,
+    onClick: onButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u5206\u4EAB",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  }), /*#__PURE__*/_react["default"].createElement(OptionContainer, {
+    isShow: showOption
+  }, /*#__PURE__*/_react["default"].createElement(FbShare, {
+    appID: fbAppID
+  }), /*#__PURE__*/_react["default"].createElement(LineShare, null), /*#__PURE__*/_react["default"].createElement(TwitterShare, null), /*#__PURE__*/_react["default"].createElement(CopyUrl, {
+    onclick: onCopyUrl
+  })), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
+    showSnackBar: showSnackBar
+  }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
+    text: "\u5DF2\u8907\u88FD",
+    theme: theme
+  })));
+};
+
+ShareBy.propTypes = {
+  fbAppID: _aside["default"].tools.fbAppID
+};
+
+var FontLevel = function FontLevel(_ref5) {
+  var changeFontLevel = _ref5.changeFontLevel;
+  var hideText = (0, _react.useContext)(HideTextContext);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: changeFontLevel
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6587\u5B57\u5927\u5C0F",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Text, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  }));
+};
+
+FontLevel.propTypes = {
+  changeFontLevel: _aside["default"].tools.onFontLevelChange
+};
+
+var BookmarkBlock = function BookmarkBlock(_ref6) {
+  var articleMeta = _ref6.articleMeta;
+  var hideText = (0, _react.useContext)(HideTextContext);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
+    var iconType = isBookmarked ? 'saved' : 'add';
+    var text = isBookmarked ? '已儲存' : '加入書籤';
+    return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+      onClick: isBookmarked ? removeAction : addAction
+    }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+      text: text,
+      iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+        type: iconType,
+        releaseBranch: releaseBranch
+      }),
+      theme: theme,
+      hideText: hideText
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
+    toAutoCheck: false,
+    articleMeta: articleMeta,
+    renderIcon: renderIcon
+  });
+};
+
+BookmarkBlock.propTypes = {
+  articleMeta: _aside["default"].tools.articleMetaForBookmark
+};
+
+var BackToTopic = function BackToTopic(_ref7) {
+  var backToTopic = _ref7.backToTopic;
+  var hideText = (0, _react.useContext)(HideTextContext);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
+    return /*#__PURE__*/_react["default"].createElement(components.Link, {
+      to: backToTopic,
+      target: "_self"
+    }, /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+      text: "\u5C08\u984C",
+      iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Topic, {
+        releaseBranch: releaseBranch
+      }),
+      theme: theme,
+      hideText: hideText
+    })));
+  });
+};
+
+BackToTopic.propTypes = {
+  backToTopic: _aside["default"].tools.backToTopic
+};
+
+var RelatedPost = function RelatedPost() {
+  var hideText = (0, _react.useContext)(HideTextContext);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var scrollToBottom = function scrollToBottom() {
+    document.getElementById(_anchor.relatedPostAnchor).scrollIntoView({
+      behavior: 'smooth'
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: scrollToBottom
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u76F8\u95DC\u6587\u7AE0",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Article, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  }));
+};
+
+var ToolBar = function ToolBar(_ref8) {
+  var backToTopic = _ref8.backToTopic,
+      _ref8$fbAppID = _ref8.fbAppID,
+      fbAppID = _ref8$fbAppID === void 0 ? defaultFbAppID : _ref8$fbAppID,
+      articleMetaForBookmark = _ref8.articleMetaForBookmark,
+      onFontLevelChange = _ref8.onFontLevelChange,
+      className = _ref8.className;
+
+  var _useState5 = (0, _react.useState)('init'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      scrollDirection = _useState6[0],
+      setScrollDirection = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    var threshold = 8;
+    var lastScrollY = window.pageYOffset;
+    var ticking = false;
+
+    var updateScrollDirection = function updateScrollDirection() {
+      var scrollY = window.pageYOffset;
+
+      if (_.isNil(lastScrollY)) {
+        ticking = false;
+        return;
+      }
+
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false;
+        return;
+      }
+
+      var scrollDirection = scrollY > lastScrollY ? 'down' : 'up';
+      setScrollDirection(scrollDirection);
+      lastScrollY = scrollY > 0 ? scrollY : 0;
+      ticking = false;
+    };
+
+    var onScroll = function onScroll() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDirection);
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', onScroll);
+    return function () {
+      window.removeEventListener('scroll', onScroll);
+      lastScrollY = null;
+      ticking = null;
+    };
+  }, [scrollDirection]);
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  var _getToolBarTheme = (0, _theme2.getToolBarTheme)(themeContext.name),
+      bgColor = _getToolBarTheme.bgColor,
+      shadow = _getToolBarTheme.shadow;
+
+  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
+    backToTopic: backToTopic
+  }) : null;
+  var hideText = scrollDirection === 'down';
+  return /*#__PURE__*/_react["default"].createElement(HideTextContext.Provider, {
+    value: hideText
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, {
+    bgColor: bgColor,
+    shadow: shadow,
+    hideText: hideText,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(FontLevel, {
+    changeFontLevel: onFontLevelChange
+  }), /*#__PURE__*/_react["default"].createElement(ShareBy, {
+    fbAppID: fbAppID
+  }), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
+    articleMeta: articleMetaForBookmark
+  }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX));
+};
+
+ToolBar.propTypes = _aside["default"].tools;
+var _default = ToolBar;
+exports["default"] = _default;

package/lib/components/aside/utils/theme.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.getToolBarTheme = void 0;
+
+var _theme = _interopRequireDefault(require("../../../constants/theme"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// constants
+// @twreporter
+var getToolBarTheme = function getToolBarTheme(theme) {
+  switch (theme) {
+    case _theme["default"].article.v2.photo:
+      return {
+        bgColor: _color.colorPhoto.dark,
+        shadow: '0px 0px 8px rgba(0, 0, 0, 0.5)'
+      };
+
+    case _theme["default"].article.v2["default"]:
+    default:
+      return {
+        bgColor: _color.colorGrayscale.white,
+        shadow: '0px 0px 8px rgba(0, 0, 0, 0.1)'
+      };
+  }
+};
+
+exports.getToolBarTheme = getToolBarTheme;
+var _default = {
+  getToolBarTheme: getToolBarTheme
+};
+exports["default"] = _default;

package/lib/components/license.js

@@ -83,7 +83,8 @@ var License = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var _this$props = this.props,
           license = _this$props.license,
-          publishedDate = _this$props.publishedDate;
+          publishedDate = _this$props.publishedDate,
+          id = _this$props.id;
 
       var year = this._extractYear(publishedDate);
 
@@ -95,7 +96,9 @@ var License = /*#__PURE__*/function (_React$PureComponent) {
         licenseJSX = /*#__PURE__*/_react["default"].createElement(Text, null, "\u672C\u6587\u4F9D CC \u5275\u7528\u59D3\u540D\u6A19\u793A-\u975E\u5546\u696D\u6027-\u7981\u6B62\u6539\u4F5C3.0\u53F0\u7063\u6388\u6B0A\u689D\u6B3E\u91CB\u51FA");
       }
 
-      return /*#__PURE__*/_react["default"].createElement(Container, null, licenseJSX);
+      return /*#__PURE__*/_react["default"].createElement(Container, {
+        id: id
+      }, licenseJSX);
     }
   }]);
 
@@ -106,10 +109,12 @@ exports["default"] = License;
 
 _defineProperty(License, "defaultProps", {
   license: 'Creative-Commons',
-  publishedDate: ''
+  publishedDate: '',
+  id: ''
 });
 
 _defineProperty(License, "propTypes", {
   license: _propTypes["default"].string,
-  publishedDate: _propTypes["default"].string
+  publishedDate: _propTypes["default"].string,
+  id: _propTypes["default"].string
 });

package/lib/constants/anchor.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.relatedPostAnchor = void 0;
+var relatedPostAnchor = 'related-post-anchor';
+exports.relatedPostAnchor = relatedPostAnchor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.4.12",
+  "version": "1.5.0-rc.2",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.4.1",
-    "@twreporter/react-components": "^8.9.0",
+    "@twreporter/react-components": "^8.10.0-rc.1",
     "@twreporter/redux": "^7.2.1",
-    "@twreporter/universal-header": "^2.2.9",
+    "@twreporter/universal-header": "^2.2.10-rc.1",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -39,5 +39,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "073c0fdf93dbca043d66e4a5bdf2285c789c7111"
+  "gitHead": "0c1c304760a2d20f3873ccc7d44501a8ba8b661f"
 }