@twreporter/universal-header 2.4.0-rc.5 → 2.4.0-rc.7

package/lib/components/icons.js

@@ -5,10 +5,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.MobileIcons = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _querystring = _interopRequireDefault(require("querystring"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -87,7 +89,10 @@ var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_card.Dialog).
   return props.showDialog ? '1' : '0';
 });
 
-var LogInOutIcon = function LogInOutIcon() {
+var LogInOutIcon = function LogInOutIcon(_ref) {
+  var _ref$loginButtonType = _ref.loginButtonType,
+      loginButtonType = _ref$loginButtonType === void 0 ? 'icon' : _ref$loginButtonType;
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       showDialog = _useState2[0],
@@ -136,15 +141,19 @@ var LogInOutIcon = function LogInOutIcon() {
     releaseBranch: releaseBranch
   });
 
+  var LoginButton = loginButtonType === 'icon' || isAuthed ? /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: Icon,
+    theme: theme
+  }) : /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+    text: "\u767B\u5165",
+    theme: theme
+  });
   return /*#__PURE__*/_react["default"].createElement(IconContainer, {
     key: "login"
   }, /*#__PURE__*/_react["default"].createElement(LogContainer, {
     onClick: onClickIcon,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
-    iconComponent: Icon,
-    theme: theme
-  }), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+  }, LoginButton, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
     "in": showDialog,
     classNames: "dialog-effect",
     timeout: {
@@ -161,6 +170,10 @@ var LogInOutIcon = function LogInOutIcon() {
   }))));
 };
 
+LogInOutIcon.propTypes = {
+  loginButtonType: _propTypes["default"].oneOf(['icon', 'text'])
+};
+
 var SearchIcon = function SearchIcon() {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -248,5 +261,12 @@ var Icons = function Icons() {
   return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null), /*#__PURE__*/_react["default"].createElement(LogInOutIcon, null));
 };
 
+var MobileIcons = function MobileIcons() {
+  return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(LogInOutIcon, {
+    loginButtonType: "text"
+  }));
+};
+
+exports.MobileIcons = MobileIcons;
 var _default = Icons;
 exports["default"] = _default;

package/lib/components/slogan.js

@@ -15,6 +15,8 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _slogan = _interopRequireDefault(require("../constants/slogan"));
 
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
 var _theme = require("../utils/theme");
 
 var _font = require("@twreporter/core/lib/constants/font");
@@ -32,7 +34,7 @@ var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1eoofl8-0"
 })(["color:", ";display:flex;align-items:center;cursor:default;font-family:", ";font-weight:", ";font-size:14px;"], function (props) {
   return props.color;
-}, _font.fontFamily.title, _font.fontWeight.normal);
+}, _fonts["default"].family.serif, _font.fontWeight.normal);
 
 var Slogan = function Slogan(_ref) {
   var props = _extends({}, _ref);

package/lib/components/tab-bar.js

@@ -0,0 +1,117 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
+
+var _links = require("../utils/links");
+
+var _theme = require("../utils/theme");
+
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _button = require("@twreporter/react-components/lib/button");
+
+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; }
+
+// context
+// utils
+// @twreporter
+var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab-bar__TabBarContainer",
+  componentId: "bdt7uj-0"
+})(["display:flex;justify-content:space-between;padding:4px 16px;border-top:1px solid ", ";background-color:", ";a{text-decoration:none;}"], function (props) {
+  return props.borderColor;
+}, function (props) {
+  return props.bgColor;
+});
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab-bar__ButtonContainer",
+  componentId: "bdt7uj-1"
+})(["display:flex;justify-content:center;margin-right:8px;flex:1;&:last-child{margin-right:0;}a{text-decoration:none;}"]);
+
+var TabBar = function TabBar() {
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      theme = _useContext.theme,
+      releaseBranch = _useContext.releaseBranch,
+      isLinkExternal = _useContext.isLinkExternal,
+      pathname = _useContext.pathname;
+
+  var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
+      toggleHamburger = _useContext2.toggleHamburger,
+      isHamburgerMenuOpen = _useContext2.isHamburgerMenuOpen;
+
+  var _getTabBarLinks = (0, _links.getTabBarLinks)(isLinkExternal, releaseBranch),
+      home = _getTabBarLinks.home,
+      latest = _getTabBarLinks.latest,
+      bookmark = _getTabBarLinks.bookmark;
+
+  var HomeIcon = /*#__PURE__*/_react["default"].createElement(_icon.Home, {
+    releaseBranch: releaseBranch
+  });
+
+  var ClockIcon = /*#__PURE__*/_react["default"].createElement(_icon.Clock, {
+    releaseBranch: releaseBranch
+  });
+
+  var BookmarkIcon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    releaseBranch: releaseBranch
+  });
+
+  var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
+    releaseBranch: releaseBranch
+  });
+
+  var _selectTabBarTheme = (0, _theme.selectTabBarTheme)(theme),
+      bgColor = _selectTabBarTheme.bgColor,
+      borderColor = _selectTabBarTheme.borderColor;
+
+  var isHomeActive = !isHamburgerMenuOpen && pathname === '/';
+  var isLatestActive = !isHamburgerMenuOpen && pathname === '/latest';
+  var isBookmarkActive = !isHamburgerMenuOpen && pathname === '/bookmarks';
+  return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
+    bgColor: bgColor,
+    borderColor: borderColor
+  }, /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], home, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u9996\u9801",
+    iconComponent: HomeIcon,
+    theme: theme,
+    active: isHomeActive
+  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], latest, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6700\u65B0",
+    iconComponent: ClockIcon,
+    theme: theme,
+    active: isLatestActive
+  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], bookmark, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6211\u7684\u66F8\u7C64",
+    iconComponent: BookmarkIcon,
+    theme: theme,
+    active: isBookmarkActive
+  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: toggleHamburger
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u9078\u55AE",
+    iconComponent: HamburgerIcon,
+    theme: theme,
+    active: isHamburgerMenuOpen
+  })));
+};
+
+var _default = TabBar;
+exports["default"] = _default;

package/lib/components/tab-bar.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabBar = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _tabBar = _interopRequireDefault(require("./tab-bar"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: 'Tab Bar',
+  component: _tabBar["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tab-barstories__Container",
+  componentId: "paqbaf-0"
+})(["width:320px;"]);
+
+var tabBar = function tabBar(props) {
+  var theme = props.theme,
+      releaseBranch = props.releaseBranch;
+  var context = {
+    theme: theme,
+    releaseBranch: releaseBranch,
+    isLinkExternal: true
+  };
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_tabBar["default"], null)));
+};
+
+exports.tabBar = tabBar;

package/lib/constants/action-item-types.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BUTTON_SIZE_STORYBOOK_ARG_TYPE = exports.BUTTON_SIZE_PROP_TYPE = exports.BUTTON_SIZE_TYPE = exports.BUTTON_WIDTH_STORYBOOK_ARG_TYPE = exports.BUTTON_WIDTH_PROP_TYPE = exports.BUTTON_WIDTH_TYPE = exports.TEXT_STORYBOOK_ARG_TYPE = exports.TEXT_PROP_TYPE = exports.TEXT_TYPE = exports.DIRECTION_STORYBOOK_ARG_TYPE = exports.DIRECTION_PROP_TYPE = exports.DIRECTION_TYPE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var DIRECTION_TYPE = {
+  row: 'row',
+  column: 'column'
+};
+exports.DIRECTION_TYPE = DIRECTION_TYPE;
+
+var DIRECTION_PROP_TYPE = _propTypes["default"].oneOf([DIRECTION_TYPE.row, DIRECTION_TYPE.column]);
+
+exports.DIRECTION_PROP_TYPE = DIRECTION_PROP_TYPE;
+var DIRECTION_STORYBOOK_ARG_TYPE = {
+  defaultValue: DIRECTION_TYPE.row,
+  options: [DIRECTION_TYPE.row, DIRECTION_TYPE.column],
+  control: {
+    type: 'radio'
+  }
+};
+exports.DIRECTION_STORYBOOK_ARG_TYPE = DIRECTION_STORYBOOK_ARG_TYPE;
+var TEXT_TYPE = {
+  brief: 'brief',
+  full: 'full'
+};
+exports.TEXT_TYPE = TEXT_TYPE;
+
+var TEXT_PROP_TYPE = _propTypes["default"].oneOf([TEXT_TYPE.brief, TEXT_TYPE.full]);
+
+exports.TEXT_PROP_TYPE = TEXT_PROP_TYPE;
+var TEXT_STORYBOOK_ARG_TYPE = {
+  defaultValue: TEXT_TYPE.brief,
+  options: [TEXT_TYPE.brief, TEXT_TYPE.full],
+  control: {
+    type: 'radio'
+  }
+};
+exports.TEXT_STORYBOOK_ARG_TYPE = TEXT_STORYBOOK_ARG_TYPE;
+var BUTTON_WIDTH_TYPE = {
+  fit: 'fit',
+  stretch: 'stretch'
+};
+exports.BUTTON_WIDTH_TYPE = BUTTON_WIDTH_TYPE;
+
+var BUTTON_WIDTH_PROP_TYPE = _propTypes["default"].oneOf([BUTTON_WIDTH_TYPE.fit, BUTTON_WIDTH_TYPE.stretch]);
+
+exports.BUTTON_WIDTH_PROP_TYPE = BUTTON_WIDTH_PROP_TYPE;
+var BUTTON_WIDTH_STORYBOOK_ARG_TYPE = {
+  defaultValue: BUTTON_WIDTH_TYPE.fit,
+  options: [BUTTON_WIDTH_TYPE.fit, BUTTON_WIDTH_TYPE.stretch],
+  control: {
+    type: 'radio'
+  }
+};
+exports.BUTTON_WIDTH_STORYBOOK_ARG_TYPE = BUTTON_WIDTH_STORYBOOK_ARG_TYPE;
+var BUTTON_SIZE_TYPE = {
+  S: 'S',
+  L: 'L'
+};
+exports.BUTTON_SIZE_TYPE = BUTTON_SIZE_TYPE;
+
+var BUTTON_SIZE_PROP_TYPE = _propTypes["default"].oneOf([BUTTON_SIZE_TYPE.S, BUTTON_SIZE_TYPE.L]);
+
+exports.BUTTON_SIZE_PROP_TYPE = BUTTON_SIZE_PROP_TYPE;
+var BUTTON_SIZE_STORYBOOK_ARG_TYPE = {
+  defaultValue: BUTTON_SIZE_TYPE.S,
+  options: [BUTTON_SIZE_TYPE.S, BUTTON_SIZE_TYPE.L],
+  control: {
+    type: 'radio'
+  }
+};
+exports.BUTTON_SIZE_STORYBOOK_ARG_TYPE = BUTTON_SIZE_STORYBOOK_ARG_TYPE;

package/lib/constants/actions.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTION_ORDER = exports.ACTION_BUTTON_TYPE = exports.ACTION_LABEL = exports.ACTION_KEY = void 0;
 
-var _row, _column, _ACTION_BUTTON_TYPE;
+var _brief, _full, _ACTION_BUTTON_TYPE;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -16,8 +16,8 @@ var actionKeys = {
 var ACTION_KEY = actionKeys;
 exports.ACTION_KEY = ACTION_KEY;
 var ACTION_LABEL = {
-  row: (_row = {}, _defineProperty(_row, actionKeys.support, '贊助'), _defineProperty(_row, actionKeys.newsLetter, '訂閱'), _row),
-  column: (_column = {}, _defineProperty(_column, actionKeys.support, '贊助我們'), _defineProperty(_column, actionKeys.newsLetter, '訂閱電子報'), _column)
+  brief: (_brief = {}, _defineProperty(_brief, actionKeys.support, '贊助'), _defineProperty(_brief, actionKeys.newsLetter, '訂閱'), _brief),
+  full: (_full = {}, _defineProperty(_full, actionKeys.support, '贊助我們'), _defineProperty(_full, actionKeys.newsLetter, '訂閱電子報'), _full)
 };
 exports.ACTION_LABEL = ACTION_LABEL;
 var ACTION_BUTTON_TYPE = (_ACTION_BUTTON_TYPE = {}, _defineProperty(_ACTION_BUTTON_TYPE, actionKeys.support, 'primary'), _defineProperty(_ACTION_BUTTON_TYPE, actionKeys.newsLetter, 'secondary'), _ACTION_BUTTON_TYPE);

package/lib/constants/channels.js

@@ -28,7 +28,7 @@ var channelKey = {
 var CHANNEL_KEY = channelKey; // external links are in external-links.js file
 
 exports.CHANNEL_KEY = CHANNEL_KEY;
-var CHANNEL_PATH = (_CHANNEL_PATH = {}, _defineProperty(_CHANNEL_PATH, channelKey.latest, '/categories/latest'), _defineProperty(_CHANNEL_PATH, channelKey.topic, '/topics'), _defineProperty(_CHANNEL_PATH, channelKey.humanStory, '/tags/58db34a30f56b40d001ae6a6'), _defineProperty(_CHANNEL_PATH, channelKey.photography, '/photography'), _defineProperty(_CHANNEL_PATH, channelKey.infographic, "/tags/".concat(_infogram.INFOGRAM_ID)), _CHANNEL_PATH);
+var CHANNEL_PATH = (_CHANNEL_PATH = {}, _defineProperty(_CHANNEL_PATH, channelKey.latest, '/latest'), _defineProperty(_CHANNEL_PATH, channelKey.topic, '/topics'), _defineProperty(_CHANNEL_PATH, channelKey.humanStory, '/tags/58db34a30f56b40d001ae6a6'), _defineProperty(_CHANNEL_PATH, channelKey.photography, '/photography'), _defineProperty(_CHANNEL_PATH, channelKey.infographic, "/tags/".concat(_infogram.INFOGRAM_ID)), _CHANNEL_PATH);
 exports.CHANNEL_PATH = CHANNEL_PATH;
 var CHANNEL_LABEL = (_CHANNEL_LABEL = {}, _defineProperty(_CHANNEL_LABEL, channelKey.latest, '最新'), _defineProperty(_CHANNEL_LABEL, channelKey.topic, '深度專題'), _defineProperty(_CHANNEL_LABEL, channelKey.category, '議題'), _defineProperty(_CHANNEL_LABEL, channelKey.opinion, '評論'), _defineProperty(_CHANNEL_LABEL, channelKey.column, '專欄'), _defineProperty(_CHANNEL_LABEL, channelKey.humanStory, '人物故事'), _defineProperty(_CHANNEL_LABEL, channelKey.photography, '影像'), _defineProperty(_CHANNEL_LABEL, channelKey.podcast, 'Podcast'), _defineProperty(_CHANNEL_LABEL, channelKey.kidsReporter, '少年報導者'), _defineProperty(_CHANNEL_LABEL, channelKey.infographic, '數位敘事'), _CHANNEL_LABEL);
 exports.CHANNEL_LABEL = CHANNEL_LABEL;

package/lib/constants/prop-types.js

@@ -31,10 +31,14 @@ var linkPropTypes = {
   isExternal: _propTypes["default"].bool.isRequired
 };
 var hamburgerContextPropTypes = {
-  closeHamburgerMenu: _propTypes["default"].func
+  toggleHamburger: _propTypes["default"].func,
+  closeHamburgerMenu: _propTypes["default"].func,
+  isHamburgerMenuOpen: _propTypes["default"]["boolean"]
 };
 var hamburgerContextDefaultProps = {
-  closeHamburgerMenu: function closeHamburgerMenu() {}
+  toggleHamburger: function toggleHamburger() {},
+  closeHamburgerMenu: function closeHamburgerMenu() {},
+  isHamburgerMenuOpen: false
 };
 var CONTEXT_PROP = {
   propTypes: contextPropTypes,

package/lib/containers/header.js

@@ -29,7 +29,7 @@ var _map = _interopRequireDefault(require("lodash/map"));
 
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
 
-var _excluded = ["releaseBranch", "isAuthed", "isLinkExternal", "theme"];
+var _excluded = ["releaseBranch", "isAuthed", "isLinkExternal", "theme", "pathname"];
 
 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); }
 
@@ -227,6 +227,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
           isAuthed = _this$props.isAuthed,
           isLinkExternal = _this$props.isLinkExternal,
           theme = _this$props.theme,
+          pathname = _this$props.pathname,
           passThrough = _objectWithoutProperties(_this$props, _excluded);
 
       var _this$state = this.state,
@@ -237,6 +238,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
         isAuthed: isAuthed,
         isLinkExternal: isLinkExternal,
         theme: theme,
+        pathname: pathname,
         toUseNarrow: toUseNarrow,
         hideHeader: hideHeader
       };
@@ -257,11 +259,13 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 _defineProperty(Container, "defaultProps", _objectSpread(_objectSpread({}, _propTypes2.CONTEXT_PROP.defaultProps), {}, {
-  pathname: ''
+  pathname: '',
+  location: {}
 }));
 
 _defineProperty(Container, "propTypes", _objectSpread(_objectSpread({}, _propTypes2.CONTEXT_PROP.propTypes), {}, {
-  pathname: _propTypes["default"].string
+  pathname: _propTypes["default"].string,
+  location: _propTypes["default"].object
 }));
 
 function mapStateToProps(state) {

package/lib/utils/links.js

@@ -12,7 +12,8 @@ exports.getActionLinks = getActionLinks;
 exports.getFooterLinks = getFooterLinks;
 exports.getSocialMediaLinks = getSocialMediaLinks;
 exports.getChannelLinks = getChannelLinks;
-exports.getCategoryLink = void 0;
+exports.getTabBarLinks = getTabBarLinks;
+exports.getCategoryLink = exports.checkReferrer = void 0;
 
 var _services = require("../constants/services");
 
@@ -34,13 +35,16 @@ var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
 
+var _split = _interopRequireDefault(require("lodash/split"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var _ = {
   forEach: _forEach["default"],
-  reduce: _reduce["default"]
+  reduce: _reduce["default"],
+  split: _split["default"]
 };
 var originsForClient = _requestOrigins["default"].forClientSideRendering;
 /**
@@ -97,6 +101,15 @@ var __composeExternalLink = function __composeExternalLink(link) {
   };
 };
 
+var checkReferrer = function checkReferrer() {
+  var referrer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
+  var url = new URL(referrer);
+  return url.origin === mainBaseURL[releaseBranch];
+};
+
+exports.checkReferrer = checkReferrer;
+
 var getCategoryLink = function getCategoryLink() {
   var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
   var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
@@ -181,4 +194,14 @@ function getChannelLinks() {
 
   links[_channels.CHANNEL_KEY.kidsReporter] = __composeExternalLink(__getExternalLinks().kidsReporter, '_blank');
   return links;
+}
+
+function getTabBarLinks() {
+  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
+  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
+  return {
+    home: __getLink(isExternal, releaseBranch, mainBaseURL, ''),
+    latest: __getLink(isExternal, releaseBranch, mainBaseURL, '/latest'),
+    bookmark: __getLink(isExternal, releaseBranch, mainBaseURL, _services.servicePathnames.bookmarks)
+  };
 }