@twreporter/universal-header 2.4.0-rc.4 → 2.4.0-rc.6

package/lib/components/hamburger-menu.js

@@ -23,20 +23,20 @@ var _channels = require("../constants/channels");
 
 var _hamburgerMenu = require("../constants/hamburger-menu");
 
-var _actionButton = _interopRequireDefault(require("./action-button"));
+var _actionButton = require("./action-button");
 
 var _hamburgerFooter = _interopRequireDefault(require("./hamburger-footer"));
 
 var _hamburgerMenuItem = require("./hamburger-menu-item");
 
+var _icons = require("./icons");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
 
-var _mobilePopUpModal = _interopRequireDefault(require("@twreporter/react-components/lib/mobile-pop-up-modal"));
-
 var _button = require("@twreporter/react-components/lib/button");
 
 var _icon = require("@twreporter/react-components/lib/icon");
@@ -49,11 +49,11 @@ var _categorySet = require("@twreporter/core/lib/constants/category-set");
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _map = _interopRequireDefault(require("lodash/map"));
+var _rwd = require("@twreporter/react-components/lib/rwd");
 
-var _excluded = ["actions", "handleClose"];
+var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
 
@@ -63,10 +63,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign || 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 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."); }
@@ -84,64 +80,78 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _ = {
   map: _map["default"]
 };
-var StyledModal = /*#__PURE__*/(0, _styledComponents["default"])(_mobilePopUpModal["default"]).withConfig({
-  displayName: "hamburger-menu__StyledModal",
-  componentId: "sc-15rzowt-0"
-})(["box-shadow:0px 0px 24px rgba(0,0,0,0.1);background-color:", ";overflow-y:unset;"], function (props) {
-  return props.bgColor;
-});
 
 var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__MenuContainer",
-  componentId: "sc-15rzowt-1"
-})(["max-width:", ";max-height:100vh;overflow-y:scroll;overscroll-behavior:none;background-color:", ";", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
+  componentId: "sc-15rzowt-0"
+})(["width:", ";max-height:100vh;overflow-y:scroll;overscroll-behavior:none;background-color:", ";", " ", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
   return props.bgColor;
-}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), function (props) {
+}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: calc(100vh - 51px);\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.mobile), function (props) {
   return props.scrollBarColor;
 });
 
 var CloseSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__CloseSection",
-  componentId: "sc-15rzowt-2"
-})(["display:flex;padding:24px 32px 16px 0;justify-content:end;align-items:center;", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+  componentId: "sc-15rzowt-1"
+})(["display:flex;padding:24px 32px 16px 0;justify-content:end;align-items:center;", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var LogoSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__LogoSection",
-  componentId: "sc-15rzowt-3"
-})(["display:flex;justify-content:center;a{display:flex;}img{height:24px;width:24px;}", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+  componentId: "sc-15rzowt-2"
+})(["display:flex;justify-content:center;a{display:flex;}img{height:24px;width:24px;}", ""], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var SearchSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__SearchSection",
-  componentId: "sc-15rzowt-4"
-})(["padding:16px 32px 0 32px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 24px 32px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+  componentId: "sc-15rzowt-3"
+})(["display:flex;justify-content:center;align-items:center;padding:16px 32px 0 32px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 24px 32px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var ContentSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__ContentSection",
-  componentId: "sc-15rzowt-5"
+  componentId: "sc-15rzowt-4"
 })(["padding-top:16px;"]);
 
 var ActionSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__ActionSection",
-  componentId: "sc-15rzowt-6"
+  componentId: "sc-15rzowt-5"
 })(["padding:40px 32px 32px 32px;"]);
 
+var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__HeaderSection",
+  componentId: "sc-15rzowt-6"
+})(["display:flex;justify-content:space-between;padding:16px 24px;"]);
+
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__FlexGroup",
+  componentId: "sc-15rzowt-7"
+})(["display:flex;align-items:center;img{height:21px;}"]);
+
 var DropdownItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__DropdownItemContainer",
-  componentId: "sc-15rzowt-7"
+  componentId: "sc-15rzowt-8"
 })([""]);
 
 var SubContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__SubContainer",
-  componentId: "sc-15rzowt-8"
+  componentId: "sc-15rzowt-9"
 })(["max-height:", ";overflow:hidden;transition:max-height 300ms ease-in-out;"], function (props) {
   return props.isActive ? '300px' : '0';
 });
 
 var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__DividerContainer",
-  componentId: "sc-15rzowt-9"
+  componentId: "sc-15rzowt-10"
 })(["margin:16px 32px;"]);
 
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__IconContainer",
+  componentId: "sc-15rzowt-11"
+})(["margin-left:24px;"]);
+
+var StyledMobileHamburgerAction = /*#__PURE__*/(0, _styledComponents["default"])(_actionButton.MobileHamburgerAction).withConfig({
+  displayName: "hamburger-menu__StyledMobileHamburgerAction",
+  componentId: "sc-15rzowt-12"
+})(["width:100%;"]);
+
 var DropdownContent = function DropdownContent(_ref) {
   var itemKey = _ref.itemKey,
       isActive = _ref.isActive,
@@ -184,7 +194,7 @@ var DropdownContent = function DropdownContent(_ref) {
         path = "/categories/".concat(_categorySet.CATEGORY_PATH[itemKey]);
 
         if (subItem.key !== 'all') {
-          path += "/{subItem.key}";
+          path += "/".concat(subItem.key);
         }
       }
 
@@ -294,15 +304,16 @@ var Content = function Content() {
 };
 
 var HamburgerMenu = function HamburgerMenu(_ref2) {
-  var actions = _ref2.actions,
-      handleClose = _ref2.handleClose,
-      props = _objectWithoutProperties(_ref2, _excluded);
+  var props = _extends({}, _ref2);
 
   var _useContext5 = (0, _react.useContext)(_headerContext["default"]),
       theme = _useContext5.theme,
       releaseBranch = _useContext5.releaseBranch,
       isLinkExternal = _useContext5.isLinkExternal;
 
+  var _useContext6 = (0, _react.useContext)(_headerContext.HamburgerContext),
+      closeHamburgerMenu = _useContext6.closeHamburgerMenu;
+
   var menuTheme = theme === _theme2.THEME.photography ? theme : _theme2.THEME.noraml;
 
   var _selectHamburgerMenuT = (0, _theme.selectHamburgerMenuTheme)(menuTheme),
@@ -325,37 +336,29 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
     window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
   };
 
-  var modalHeight = '100vh';
-  var modalWidth = _hamburgerMenu.MENU_WIDTH.desktop;
-  var contextValue = {
-    closeHamburgerMenu: handleClose
-  };
-  return /*#__PURE__*/_react["default"].createElement(_headerContext.HamburgerContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react["default"].createElement(StyledModal, {
-    modalHeight: modalHeight,
-    modalWidth: modalWidth,
-    bgColor: bgColor
-  }, /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
+  return /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
     bgColor: bgColor,
     scrollBarColor: scrollBarColor
-  }, props), /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+  }, props), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: CloseIcon,
     theme: menuTheme,
-    onClick: handleClose
-  })), /*#__PURE__*/_react["default"].createElement(LogoSection, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoSymbol, {
-    type: logoType
-  }))), /*#__PURE__*/_react["default"].createElement(SearchSection, null, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
-    onSearch: onSearch
-  })), /*#__PURE__*/_react["default"].createElement(Content, null), /*#__PURE__*/_react["default"].createElement(_hamburgerFooter["default"], null), /*#__PURE__*/_react["default"].createElement(ActionSection, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
-    actions: actions,
-    direction: "column"
-  })))));
+    onClick: closeHamburgerMenu
+  })), /*#__PURE__*/_react["default"].createElement(LogoSection, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, logoLink, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_logo.LogoSymbol, {
+    type: logoType,
+    releaseBranch: releaseBranch
+  })))), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, logoLink, {
+    onClick: closeHamburgerMenu
+  }), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
+    type: logoType,
+    releaseBranch: releaseBranch
+  }))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_actionButton.MobileHeaderAction, null), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.MobileIcons, null))))), /*#__PURE__*/_react["default"].createElement(SearchSection, null, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
+    onSearch: onSearch,
+    autofocus: false,
+    widthType: "stretch"
+  })), /*#__PURE__*/_react["default"].createElement(Content, null), /*#__PURE__*/_react["default"].createElement(_hamburgerFooter["default"], null), /*#__PURE__*/_react["default"].createElement(ActionSection, null, /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHamburgerAction, null)), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(StyledMobileHamburgerAction, null))));
 };
 
-HamburgerMenu.propTypes = {
-  actions: _propTypes["default"].array,
-  handleClose: _propTypes["default"].func
-};
 var _default = HamburgerMenu;
 exports["default"] = _default;

package/lib/components/hamburger-menu.stories.js

@@ -27,11 +27,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var defaultActions = [{
-  key: 'newsLetter'
-}, {
-  key: 'support'
-}];
 
 var onClose = function onClose() {
   var _window;
@@ -54,11 +49,10 @@ var menu = function menu(props) {
 
 exports.menu = menu;
 menu.args = {
-  actions: defaultActions,
   handleClose: onClose
 };
 menu.parameter = {
   controls: {
-    exclude: ['actions', 'handleClose']
+    exclude: ['handleClose']
   }
 };

package/lib/components/header.js

@@ -9,13 +9,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
-var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
 
 var _links = require("../utils/links");
 
@@ -25,14 +23,16 @@ var _hamburgerMenu = require("../constants/hamburger-menu");
 
 var _channels = _interopRequireDefault(require("./channels"));
 
-var _actionButton = _interopRequireDefault(require("./action-button"));
+var _actionButton = require("./action-button");
 
-var _icons = _interopRequireDefault(require("./icons"));
+var _icons = _interopRequireWildcard(require("./icons"));
 
 var _slogan = _interopRequireDefault(require("./slogan"));
 
 var _hamburgerMenu2 = _interopRequireDefault(require("./hamburger-menu"));
 
+var _tabBar = _interopRequireDefault(require("./tab-bar"));
+
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
@@ -47,7 +47,11 @@ var _icon = require("@twreporter/react-components/lib/icon");
 
 var _hook = require("@twreporter/react-components/lib/hook");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _rwd = require("@twreporter/react-components/lib/rwd");
+
+var _split = _interopRequireDefault(require("lodash/split"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -69,6 +73,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var _ = {
+  split: _split["default"]
+};
 var narrowHeaderHeight = 65;
 var channelHeight = 50;
 var animation = {
@@ -87,43 +94,49 @@ var zIndex = {
 var channelSlideIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(", "px);opacity:0;}to{transform:translateY(0);opacity:1;}"], -channelHeight);
 var channelSlideOut = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(0);}to{transform:translateY(", "px);}"], -channelHeight);
 var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " ", " linear;animation-delay:150ms;}.channel-effect-exit-active{animation:", " ", " linear;animation-delay:0ms;}"], channelSlideIn, animation.step1Duration, channelSlideOut, animation.step1Duration);
-var HamburgerEffect = /*#__PURE__*/(0, _styledComponents.css)([".hamburger-effect-enter{}.hamburger-effect-enter-active,.hamburger-effect-enter-done{}.hamburger-effect-exit-active{}"]);
 
 var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HeaderContainer",
   componentId: "sc-1krza7i-0"
-})(["width:100%;background-color:", ";transform:translateY( ", " );transition:transform 300ms ", ";"], function (props) {
+})(["width:100%;background-color:", ";transform:translateY( ", " );transition:transform 300ms ", ";", ""], function (props) {
   return props.bgColor;
 }, function (props) {
   return props.hideHeader ? "".concat(-narrowHeaderHeight, "px") : '0';
 }, function (props) {
   return props.hideHeader ? 'ease-in' : 'ease-out';
-});
+}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
+  return props.forceShowOnMobile ? 'transform: translateY(0);' : '';
+}));
 
 var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HeaderSection",
   componentId: "sc-1krza7i-1"
-})(["display:flex;flex-direction:column;margin:auto;z-index:", ";", " ", " ", " ", ""], zIndex.header, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 1280px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 24px;\n  "]))));
+})(["display:flex;flex-direction:column;margin:auto;z-index:", ";", " ", " ", " ", ""], zIndex.header, _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 1280px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 0 24px;\n  "]))));
 
 var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__LogoContainer",
   componentId: "sc-1krza7i-2"
-})(["display:flex;align-items:center;margin-right:16px;"]);
+})(["display:flex;align-items:center;margin-right:16px;a{display:flex;}"]);
+
+var MobileLogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__MobileLogoContainer",
+  componentId: "sc-1krza7i-3"
+})(["display:flex;align-items:center;img{height:21px;}"]);
 
 var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideWhenNarrow",
-  componentId: "sc-1krza7i-3"
+  componentId: "sc-1krza7i-4"
 })([""]);
 
 var ShowWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ShowWhenNarrow",
-  componentId: "sc-1krza7i-4"
+  componentId: "sc-1krza7i-5"
 })([""]);
 
 var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TopRow",
-  componentId: "sc-1krza7i-5"
-})(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;z-index:", ";background-color:", ";", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{margin-left:", ";transform:translateX(", ");transition:all ", ";transition-delay:", ";img,a{height:", ";transition:height ", ";transition-delay:", ";}}"], function (props) {
+  componentId: "sc-1krza7i-6"
+})(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;z-index:", ";background-color:", ";", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{margin-left:", ";transform:translateX(", ");transition:all ", ";transition-delay:", ";img,a{height:", ";transition:height ", ";transition-delay:", ";}}", ""], function (props) {
   return props.toUseNarrow ? '16px' : '24px';
 }, zIndex.topRow, function (props) {
   return props.topRowBgColor;
@@ -145,11 +158,11 @@ var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.toUseNarrow ? '24px' : '32px';
 }, animation.step3Duration, function (props) {
   return props.toUseNarrow ? animation.step3Delay : 0;
-});
+}, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 16px 0;\n  "]))));
 
 var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
   displayName: "header__StyledDivider",
-  componentId: "sc-1krza7i-6"
+  componentId: "sc-1krza7i-7"
 })(["opacity:", ";transition:opacity ", ";transition-delay:", ";"], function (props) {
   return props.toUseNarrow ? '0' : '1';
 }, animation.step2Duration, function (props) {
@@ -158,42 +171,57 @@ var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["def
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__IconContainer",
-  componentId: "sc-1krza7i-7"
+  componentId: "sc-1krza7i-8"
 })(["margin-left:24px;"]);
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__FlexGroup",
-  componentId: "sc-1krza7i-8"
+  componentId: "sc-1krza7i-9"
 })(["display:flex;align-items:center;"]);
 
 var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ChannelContainer",
-  componentId: "sc-1krza7i-9"
+  componentId: "sc-1krza7i-10"
 })(["z-index:", ";", ""], zIndex.channel, ChannelEffect);
 
 var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HamburgerContainer",
-  componentId: "sc-1krza7i-10"
+  componentId: "sc-1krza7i-11"
 })(["z-index:", ";position:absolute;top:0;left:-", ";transition:transform 300ms ease-in-out;transform:translateX( ", " );", " ", ""], zIndex.hamburger, _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
   return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.desktop : 0;
-}, _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
+}, _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
   return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.tablet : 0;
-}), HamburgerEffect);
+}), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: 0;\n    transform: none;\n    opacity: ", ";\n  "])), function (props) {
+  return props.showHamburger ? 1 : 0;
+}));
+
+var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__TabBarContainer",
+  componentId: "sc-1krza7i-12"
+})(["position:fixed;bottom:env(safe-area-inset-bottom,0);left:0;width:100%;"]);
+
+var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__HideOnArticle",
+  componentId: "sc-1krza7i-13"
+})(["", ""], function (props) {
+  return props.isOnArticlePage ? 'display: none;' : '';
+});
 
-var Header = function Header(_ref) {
-  var _ref$pathname = _ref.pathname,
-      pathname = _ref$pathname === void 0 ? '' : _ref$pathname,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      _ref$hbActions = _ref.hbActions,
-      hbActions = _ref$hbActions === void 0 ? [] : _ref$hbActions;
+var ShowOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__ShowOnArticle",
+  componentId: "sc-1krza7i-14"
+})(["", " margin-right:16px;"], function (props) {
+  return props.isOnArticlePage ? '' : 'display: none;';
+});
 
+var Header = function Header() {
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
       releaseBranch = _useContext.releaseBranch,
       isLinkExternal = _useContext.isLinkExternal,
       theme = _useContext.theme,
       toUseNarrow = _useContext.toUseNarrow,
-      hideHeader = _useContext.hideHeader;
+      hideHeader = _useContext.hideHeader,
+      pathname = _useContext.pathname;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -221,10 +249,29 @@ var Header = function Header(_ref) {
   };
 
   var ref = (0, _hook.useOutsideClick)(closeHamburger);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
-    bgColor: bgColor,
-    hideHeader: hideHeader
-  }, /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
+  var contextValue = {
+    toggleHamburger: toggleHamburger,
+    closeHamburgerMenu: closeHamburger,
+    isHamburgerMenuOpen: showHamburger
+  };
+  var isOnArticlePage = _.split(pathname, '/')[1] === 'a';
+
+  var BackToPrevIcon = /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "left",
+    releaseBranch: releaseBranch
+  });
+
+  var gotoPrev = function gotoPrev() {
+    if ((0, _links.checkReferrer)(document.referrer, releaseBranch)) {
+      // go to previous page when referer is twreporter site
+      window.history.back();
+    } else {
+      // go to home page when referer is not twreporter site
+      window.location.href = '/';
+    }
+  };
+
+  var DesktopHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
     toUseNarrow: toUseNarrow,
     topRowBgColor: topRowBgColor
   }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
@@ -234,9 +281,7 @@ var Header = function Header(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
     type: logoType,
     releaseBranch: releaseBranch
-  }))), /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
-    actions: actions
-  })), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)))), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
+  }))), /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHeaderAction, null)), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)))), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
     toUseNarrow: toUseNarrow
   }), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
     "in": !toUseNarrow,
@@ -249,7 +294,29 @@ var Header = function Header(_ref) {
     unmountOnExit: true
   }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
     onClickHambuger: toggleHamburger
-  }))))), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
+  }))));
+
+  var MobileHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
+    toUseNarrow: toUseNarrow,
+    topRowBgColor: topRowBgColor
+  }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowOnArticle, {
+    isOnArticlePage: isOnArticlePage
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: BackToPrevIcon,
+    theme: theme,
+    onClick: gotoPrev
+  })), /*#__PURE__*/_react["default"].createElement(MobileLogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
+    type: logoType,
+    releaseBranch: releaseBranch
+  })))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_actionButton.MobileHeaderAction, null), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.MobileIcons, null)))));
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext.HamburgerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
+    bgColor: bgColor,
+    hideHeader: hideHeader,
+    forceShowOnMobile: showHamburger
+  }, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, DesktopHeaderJSX), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, MobileHeaderJSX)), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
     ref: ref,
     showHamburger: showHamburger
   }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
@@ -261,16 +328,12 @@ var Header = function Header(_ref) {
       exit: 300
     },
     unmountOnExit: true
-  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], {
-    actions: hbActions,
-    handleClose: closeHamburger
-  }))));
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], null))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(HideOnArticle, {
+    isOnArticlePage: isOnArticlePage
+  }, /*#__PURE__*/_react["default"].createElement(TabBarContainer, null, /*#__PURE__*/_react["default"].createElement(_tabBar["default"], {
+    toggleHamburger: toggleHamburger
+  })))));
 };
 
-Header.propTypes = {
-  pathname: _propTypes["default"].string,
-  actions: _propTypes["default"].array,
-  hbActions: _propTypes["default"].array
-};
 var _default = Header;
 exports["default"] = _default;

package/lib/components/header.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.desktop = exports["default"] = void 0;
+exports.universal = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -18,8 +18,9 @@ var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /* eslint-disable react/prop-types */
+// @twerporter
 var _default = {
-  title: 'Header/Desktop',
+  title: 'Header/Universal',
   component: _header["default"],
   argTypes: {
     toUseNarrow: {
@@ -34,40 +35,40 @@ var _default = {
         type: 'boolean'
       }
     },
+    isAuthed: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
     theme: _theme.THEME_STORYBOOK_ARG_TYPE,
     releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;
-var defaultActions = [{
-  key: 'newsLetter'
-}, {
-  key: 'support'
-}];
 
-var desktop = function desktop(props) {
+var universal = function universal(props) {
   var theme = props.theme,
       releaseBranch = props.releaseBranch,
       toUseNarrow = props.toUseNarrow,
-      hideHeader = props.hideHeader;
+      hideHeader = props.hideHeader,
+      isAuthed = props.isAuthed;
   var context = {
     theme: theme,
     releaseBranch: releaseBranch,
     toUseNarrow: toUseNarrow,
     hideHeader: hideHeader,
+    isAuthed: isAuthed,
     isLinkExternal: true
   };
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
     value: context
-  }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
-    actions: defaultActions,
-    hbActions: defaultActions
-  }));
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], null));
 };
 
-exports.desktop = desktop;
-desktop.parameters = {
+exports.universal = universal;
+universal.parameters = {
   controls: {
-    exclude: ['pathname', 'actions', 'hbActions']
+    exclude: ['pathname']
   }
 };