@twreporter/universal-header 2.3.0 → 2.4.0-rc.0

package/lib/components/header.js

@@ -11,13 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _links = require("../utils/links");
+
+var _theme = require("../utils/theme");
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _hamburgerMenu = require("../constants/hamburger-menu");
 
 var _channels = _interopRequireDefault(require("./channels"));
 
@@ -27,19 +31,23 @@ var _icons = _interopRequireDefault(require("./icons"));
 
 var _slogan = _interopRequireDefault(require("./slogan"));
 
+var _hamburgerMenu2 = _interopRequireDefault(require("./hamburger-menu"));
+
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
+
 var _logo = require("@twreporter/react-components/lib/logo");
 
 var _button = require("@twreporter/react-components/lib/button");
 
 var _icon = require("@twreporter/react-components/lib/icon");
 
-var _color = require("@twreporter/core/lib/constants/color");
+var _hook = require("@twreporter/react-components/lib/hook");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -47,102 +55,222 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var narrowHeaderHeight = 65;
+var channelHeight = 50;
+var animation = {
+  step1Duration: '200ms',
+  step2Delay: '150ms',
+  step2Duration: '50ms',
+  step3Delay: '150ms',
+  step3Duration: '200ms'
+};
+var zIndex = {
+  hamburger: 4,
+  header: 3,
+  topRow: 2,
+  channel: 1
+};
+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"
-})(["display:flex;flex-direction:column;width:100%;margin:auto;", " ", " ", " ", ""], _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  "]))));
+})(["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';
+});
+
+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  "]))));
 
 var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__LogoContainer",
-  componentId: "sc-1krza7i-1"
+  componentId: "sc-1krza7i-2"
 })(["display:flex;align-items:center;margin-right:16px;"]);
 
 var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideWhenNarrow",
-  componentId: "sc-1krza7i-2"
+  componentId: "sc-1krza7i-3"
 })([""]);
 
 var ShowWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ShowWhenNarrow",
-  componentId: "sc-1krza7i-3"
+  componentId: "sc-1krza7i-4"
 })([""]);
 
 var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TopRow",
-  componentId: "sc-1krza7i-4"
-})(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;background-color:", ";z-index:501;", "{opacity:", ";transition:opacity 100ms;transition-delay:", ";}", "{opacity:", ";transition:opacity 100ms;}", "{margin-left:", ";transform:translateX(", ");transition:transform 100ms;img,a{height:", ";transition:height 100ms;}}"], function (props) {
+  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) {
   return props.toUseNarrow ? '16px' : '24px';
-}, _color.colorGrayscale.gray100, ShowWhenNarrow, function (props) {
+}, zIndex.topRow, function (props) {
+  return props.topRowBgColor;
+}, ShowWhenNarrow, function (props) {
   return props.toUseNarrow ? '1' : '0';
-}, function (props) {
-  return props.toUseNarrow ? '100ms' : 0;
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? '350ms' : 0;
 }, HideWhenNarrow, function (props) {
   return props.toUseNarrow ? '0' : '1';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
 }, LogoContainer, function (props) {
   return props.toUseNarrow ? '24px' : '0';
 }, function (props) {
   return props.toUseNarrow ? '0' : '-24px';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
 }, function (props) {
   return props.toUseNarrow ? '24px' : '32px';
+}, animation.step3Duration, function (props) {
+  return props.toUseNarrow ? animation.step3Delay : 0;
+});
+
+var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
+  displayName: "header__StyledDivider",
+  componentId: "sc-1krza7i-6"
+})(["opacity:", ";transition:opacity ", ";transition-delay:", ";"], function (props) {
+  return props.toUseNarrow ? '0' : '1';
+}, animation.step2Duration, function (props) {
+  return props.toUseNarrow ? animation.step2Delay : 0;
 });
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__IconContainer",
-  componentId: "sc-1krza7i-5"
+  componentId: "sc-1krza7i-7"
 })(["margin-left:24px;"]);
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__FlexGroup",
-  componentId: "sc-1krza7i-6"
+  componentId: "sc-1krza7i-8"
 })(["display:flex;align-items:center;"]);
 
-var StyledChannel = /*#__PURE__*/(0, _styledComponents["default"])(_channels["default"]).withConfig({
-  displayName: "header__StyledChannel",
-  componentId: "sc-1krza7i-7"
-})(["transform:translateY(", ");transition:transform 300ms z-index:500;"], function (props) {
-  return props.toUseNarrow ? '-50px' : '0';
-});
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__ChannelContainer",
+  componentId: "sc-1krza7i-9"
+})(["z-index:", ";", ""], zIndex.channel, ChannelEffect);
+
+var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__HamburgerContainer",
+  componentId: "sc-1krza7i-10"
+})(["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) {
+  return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.tablet : 0;
+}), HamburgerEffect);
 
 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;
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$hbActions = _ref.hbActions,
+      hbActions = _ref$hbActions === void 0 ? [] : _ref$hbActions;
 
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
       releaseBranch = _useContext.releaseBranch,
       isLinkExternal = _useContext.isLinkExternal,
       theme = _useContext.theme,
-      toUseNarrow = _useContext.toUseNarrow;
+      toUseNarrow = _useContext.toUseNarrow,
+      hideHeader = _useContext.hideHeader;
 
-  var logoLink = _links["default"].getLogoLink(isLinkExternal, releaseBranch);
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showHamburger = _useState2[0],
+      setShowHamburger = _useState2[1];
 
-  var logoType = _theme["default"].selectLogoType(theme);
+  var logoLink = (0, _links.getLogoLink)(isLinkExternal, releaseBranch);
+  var logoType = (0, _theme.selectLogoType)(theme);
 
   var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
     releaseBranch: releaseBranch
   });
 
-  return /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
-    toUseNarrow: toUseNarrow
+  var _selectHeaderTheme = (0, _theme.selectHeaderTheme)(theme),
+      bgColor = _selectHeaderTheme.bgColor,
+      topRowBgColor = _selectHeaderTheme.topRowBgColor;
+
+  var toggleHamburger = function toggleHamburger(e) {
+    e.stopPropagation();
+    setShowHamburger(!showHamburger);
+  };
+
+  var closeHamburger = function closeHamburger() {
+    return setShowHamburger(false);
+  };
+
+  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, {
+    toUseNarrow: toUseNarrow,
+    topRowBgColor: topRowBgColor
   }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: HamburgerIcon,
-    theme: theme
+    theme: theme,
+    onClick: toggleHamburger
   })), /*#__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(StyledChannel, {
+  })), /*#__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,
+    classNames: "channel-effect",
+    timeout: {
+      appear: 0,
+      enter: 350,
+      exit: 200
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
+    onClickHambuger: toggleHamburger
+  }))))), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
+    ref: ref,
+    showHamburger: showHamburger
+  }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+    "in": showHamburger,
+    classNames: "hamburger-effect",
+    timeout: {
+      appear: 0,
+      enter: 300,
+      exit: 300
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], {
+    actions: hbActions,
+    handleClose: closeHamburger
+  }))));
 };
 
 Header.propTypes = {
   pathname: _propTypes["default"].string,
-  actions: _propTypes["default"].array
+  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.header = exports["default"] = void 0;
+exports.desktop = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -28,6 +28,12 @@ var _default = {
         type: 'boolean'
       }
     },
+    hideHeader: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
     theme: _theme.THEME_STORYBOOK_ARG_TYPE,
     releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
   }
@@ -39,26 +45,29 @@ var defaultActions = [{
   key: 'support'
 }];
 
-var header = function header(props) {
+var desktop = function desktop(props) {
   var theme = props.theme,
       releaseBranch = props.releaseBranch,
-      toUseNarrow = props.toUseNarrow;
+      toUseNarrow = props.toUseNarrow,
+      hideHeader = props.hideHeader;
   var context = {
     theme: theme,
     releaseBranch: releaseBranch,
     toUseNarrow: toUseNarrow,
+    hideHeader: hideHeader,
     isLinkExternal: true
   };
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
     value: context
   }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
-    actions: defaultActions
+    actions: defaultActions,
+    hbActions: defaultActions
   }));
 };
 
-exports.header = header;
-header.parameters = {
+exports.desktop = desktop;
+desktop.parameters = {
   controls: {
-    exclude: ['pathname', 'actions']
+    exclude: ['pathname', 'actions', 'hbActions']
   }
 };

package/lib/components/icons-old.js

@@ -19,13 +19,13 @@ var _searchBox = _interopRequireDefault(require("./search-box"));
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _linksOld = _interopRequireDefault(require("../utils/links-old"));
 
 var _querystring = _interopRequireDefault(require("querystring"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -122,11 +122,11 @@ var Icons = /*#__PURE__*/function (_React$PureComponent) {
       });
 
       if (isAuthed) {
-        window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+        window.location = _linksOld["default"].getLogoutLink(releaseBranch).to + '?' + query;
         return;
       }
 
-      window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+      window.location = _linksOld["default"].getLoginLink(releaseBranch).to + '?' + query;
     });
 
     _this.state = {
@@ -166,7 +166,7 @@ var Icons = /*#__PURE__*/function (_React$PureComponent) {
         var releaseBranch = _ref.releaseBranch,
             theme = _ref.theme;
 
-        var _themeUtils$selectSer = _slicedToArray(_theme["default"].selectServiceIcons(theme).login, 2),
+        var _themeUtils$selectSer = _slicedToArray(_themeOld["default"].selectServiceIcons(theme).login, 2),
             LogInIcon = _themeUtils$selectSer[0],
             LogInHoverIcon = _themeUtils$selectSer[1];
 
@@ -184,7 +184,7 @@ var Icons = /*#__PURE__*/function (_React$PureComponent) {
         var releaseBranch = _ref2.releaseBranch,
             theme = _ref2.theme;
 
-        var _themeUtils$selectSer2 = _slicedToArray(_theme["default"].selectServiceIcons(theme).logout, 2),
+        var _themeUtils$selectSer2 = _slicedToArray(_themeOld["default"].selectServiceIcons(theme).logout, 2),
             LogOutIcon = _themeUtils$selectSer2[0],
             LogOutHoverIcon = _themeUtils$selectSer2[1];
 
@@ -203,7 +203,7 @@ var Icons = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref3) {
         var theme = _ref3.theme;
 
-        var _themeUtils$selectSer3 = _slicedToArray(_theme["default"].selectServiceIcons(theme).search, 2),
+        var _themeUtils$selectSer3 = _slicedToArray(_themeOld["default"].selectServiceIcons(theme).search, 2),
             SearchIcon = _themeUtils$selectSer3[0],
             SearchHoverIcon = _themeUtils$selectSer3[1];
 
@@ -221,11 +221,11 @@ var Icons = /*#__PURE__*/function (_React$PureComponent) {
             isLinkExternal = _ref4.isLinkExternal,
             theme = _ref4.theme;
 
-        var _themeUtils$selectSer4 = _slicedToArray(_theme["default"].selectServiceIcons(theme).bookmark, 2),
+        var _themeUtils$selectSer4 = _slicedToArray(_themeOld["default"].selectServiceIcons(theme).bookmark, 2),
             BookmarkIcon = _themeUtils$selectSer4[0],
             BookmarkHoverIcon = _themeUtils$selectSer4[1];
 
-        var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+        var link = _linksOld["default"].getBookmarksLink(isLinkExternal, releaseBranch);
 
         return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkHoverIcon, null)));
       }));

package/lib/components/icons.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _links = require("../utils/links");
 
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
@@ -110,7 +110,7 @@ var LogInOutIcon = function LogInOutIcon() {
       destination: redirectURL
     });
 
-    window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+    window.location = (0, _links.getLogoutLink)(releaseBranch).to + '?' + query;
   };
 
   var onClickLogOut = function onClickLogOut(e) {
@@ -121,7 +121,7 @@ var LogInOutIcon = function LogInOutIcon() {
       destination: redirectURL
     });
 
-    window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+    window.location = (0, _links.getLoginLink)(releaseBranch).to + '?' + query;
   };
 
   var closeDialog = function closeDialog() {
@@ -185,7 +185,7 @@ var SearchIcon = function SearchIcon() {
       return;
     }
 
-    window.location = "".concat(_links["default"].getSearchLink(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
+    window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
   };
 
   var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Search, {
@@ -218,7 +218,7 @@ var BookmarkIcon = function BookmarkIcon() {
       isLinkExternal = _useContext3.isLinkExternal,
       theme = _useContext3.theme;
 
-  var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+  var link = (0, _links.getBookmarksLink)(isLinkExternal, releaseBranch);
 
   var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
     releaseBranch: releaseBranch

package/lib/components/mobile-header.js

@@ -17,19 +17,19 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _linksOld = _interopRequireDefault(require("../utils/links-old"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
 var _animations = _interopRequireDefault(require("../utils/animations"));
 
 var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
-var _hamburgerMenu = _interopRequireDefault(require("./hamburger-menu"));
+var _hamburgerMenuOld = _interopRequireDefault(require("./hamburger-menu-old"));
 
-var _actionButton = _interopRequireDefault(require("./action-button"));
+var _actionButtonOld = _interopRequireDefault(require("./action-button-old"));
 
-var _slogan = _interopRequireDefault(require("./slogan"));
+var _sloganOld = _interopRequireDefault(require("./slogan-old"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -207,7 +207,7 @@ var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
           menuActions = _this$props.menuActions;
       var isMenuOpen = this.state.isMenuOpen;
 
-      var hamburgerJSX = /*#__PURE__*/_react["default"].createElement(_hamburgerMenu["default"], {
+      var hamburgerJSX = /*#__PURE__*/_react["default"].createElement(_hamburgerMenuOld["default"], {
         channels: menuChannels,
         services: menuServices,
         actions: menuActions,
@@ -222,22 +222,22 @@ var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
             toUseNarrow = _ref.toUseNarrow,
             hideHeader = _ref.hideHeader;
 
-        var _themeUtils$selectHea = _theme["default"].selectHeaderTheme(theme),
+        var _themeUtils$selectHea = _themeOld["default"].selectHeaderTheme(theme),
             bgColor = _themeUtils$selectHea.bgColor;
 
-        var MenuIcon = _theme["default"].selectIcons(theme).menu;
+        var MenuIcon = _themeOld["default"].selectIcons(theme).menu;
 
-        var logoType = _theme["default"].selectLogoType(theme);
+        var logoType = _themeOld["default"].selectLogoType(theme);
 
         return /*#__PURE__*/_react["default"].createElement(FlexBox, {
           bgColor: bgColor,
           isHide: hideHeader
-        }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, _links["default"].getLogoLink(isLinkExternal, releaseBranch), {
+        }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, _linksOld["default"].getLogoLink(isLinkExternal, releaseBranch), {
           onClick: _this2.closeMenu
         }), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
           type: logoType,
           releaseBranch: releaseBranch
-        }))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
+        }))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_actionButtonOld["default"], {
           actions: toUseNarrow ? narrowActions : actions
         })), /*#__PURE__*/_react["default"].createElement(TabletOnly, null, /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
           "in": !toUseNarrow,
@@ -247,7 +247,7 @@ var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
             enter: 400,
             exit: 400
           }
-        }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))))), /*#__PURE__*/_react["default"].createElement(Hamburger, {
+        }, /*#__PURE__*/_react["default"].createElement(_sloganOld["default"], null))))), /*#__PURE__*/_react["default"].createElement(Hamburger, {
           onClick: _this2.handleOnHamburgerClick
         }, /*#__PURE__*/_react["default"].createElement(MenuIcon, null)));
       }));

package/lib/components/search-box.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _links = _interopRequireDefault(require("../utils/links"));
+var _linksOld = _interopRequireDefault(require("../utils/links-old"));
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
@@ -142,7 +142,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       var keywords = this.state.keywords;
 
       if (window) {
-        window.location = "".concat(_links["default"].getSearchLink(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
+        window.location = "".concat(_linksOld["default"].getSearchLink(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
       }
     }
   }, {

package/lib/components/slogan-old.js

@@ -17,7 +17,7 @@ var _slogan = _interopRequireDefault(require("../constants/slogan"));
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _themeOld = _interopRequireDefault(require("../utils/theme-old"));
 
 var _color = require("@twreporter/core/lib/constants/color");
 
@@ -51,7 +51,7 @@ Slogan.propTypes = {
   themeFunction: _propTypes["default"].func
 };
 Slogan.defaultProps = {
-  themeFunction: _theme["default"].selectSloganTheme
+  themeFunction: _themeOld["default"].selectSloganTheme
 };
 var _default = Slogan;
 exports["default"] = _default;

package/lib/components/slogan.js

@@ -40,7 +40,7 @@ var Slogan = function Slogan(_ref) {
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
       theme = _useContext.theme;
 
-  var color = (0, _theme.selectSloganThemeNew)(theme);
+  var color = (0, _theme.selectSloganTheme)(theme);
   return /*#__PURE__*/_react["default"].createElement(SloganContainer, _extends({
     color: color
   }, props), _slogan["default"]);

package/lib/constants/actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.actionOrder = exports.ACTION_BUTTON_TYPE = exports.ACTION_LABEL = exports.actionKeys = void 0;
+exports.ACTION_ORDER = exports.ACTION_BUTTON_TYPE = exports.ACTION_LABEL = exports.ACTION_KEY = void 0;
 
 var _row, _column, _ACTION_BUTTON_TYPE;
 
@@ -13,7 +13,8 @@ var actionKeys = {
   support: 'support',
   newsLetter: 'newsLetter'
 };
-exports.actionKeys = 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)
@@ -21,16 +22,9 @@ var ACTION_LABEL = {
 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);
 exports.ACTION_BUTTON_TYPE = ACTION_BUTTON_TYPE;
-var actionOrder = {
+var ACTION_ORDER = {
   mobile: [actionKeys.support],
   desktop: [actionKeys.newsLetter, actionKeys.support],
   hamburger: [actionKeys.newsLetter, actionKeys.support]
 };
-exports.actionOrder = actionOrder;
-var _default = {
-  actionKeys: actionKeys,
-  actionOrder: actionOrder,
-  ACTION_LABEL: ACTION_LABEL,
-  ACTION_BUTTON_TYPE: ACTION_BUTTON_TYPE
-};
-exports["default"] = _default;
+exports.ACTION_ORDER = ACTION_ORDER;