@twreporter/universal-header 2.2.0-rc.6 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.12...@twreporter/universal-header@2.2.0) (2021-10-12)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+# [2.2.0-rc.12](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.11...@twreporter/universal-header@2.2.0-rc.12) (2021-10-12)
+
+
+### Bug Fixes
+
+* **universal-header:** remove channel underline active UI ([87dfdb8](https://github.com/twreporter/twreporter-npm-packages/commit/87dfdb80f02807ac24b7781a6b9459127d31817e))
+
+
+
+
+
+# [2.2.0-rc.11](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.10...@twreporter/universal-header@2.2.0-rc.11) (2021-10-08)
+
+
+### Bug Fixes
+
+* **universal-header:** fix ui defect ([a1592da](https://github.com/twreporter/twreporter-npm-packages/commit/a1592da85a0f3f9e38fe86b0f5ef86a8a1c83ba6))
+
+
+
+
+
+# [2.2.0-rc.10](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.9...@twreporter/universal-header@2.2.0-rc.10) (2021-10-07)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+# [2.2.0-rc.9](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.8...@twreporter/universal-header@2.2.0-rc.9) (2021-10-06)
+
+
+### Bug Fixes
+
+* **universal-header:** fix tablet slogan animation delay & duration ([50027da](https://github.com/twreporter/twreporter-npm-packages/commit/50027da20ea34bfc656412803d6b772d25e7f3d7))
+* **universal-header:** fix ui defect ([8d8c20a](https://github.com/twreporter/twreporter-npm-packages/commit/8d8c20a558f4bdcf4f76480125bd0b2426ed53be))
+
+
+
+
+
+# [2.2.0-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.7...@twreporter/universal-header@2.2.0-rc.8) (2021-10-05)
+
+
+### Bug Fixes
+
+* fix ui defect ([2ab85e2](https://github.com/twreporter/twreporter-npm-packages/commit/2ab85e2eabd9ae33b857353712358777b50a9f9a))
+* **universal-header:** fix ui defect ([c1be79f](https://github.com/twreporter/twreporter-npm-packages/commit/c1be79f6ab811b0c44d9a8753230f73486be57cc))
+
+
+
+
+
+# [2.2.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.6...@twreporter/universal-header@2.2.0-rc.7) (2021-09-29)
+
+
+### Bug Fixes
+
+* **universal-header:** fix active state should remain after transforming & eslint error ([f942be7](https://github.com/twreporter/twreporter-npm-packages/commit/f942be7f4d4c1b9a5d84ed4dd96dbff16cf4ca10))
+* **universal-header:** refactor function assignment ([0629392](https://github.com/twreporter/twreporter-npm-packages/commit/062939250aaaab2ffaf70c839d2893a508122d4c))
+
+
+
+
+
 # [2.2.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.5...@twreporter/universal-header@2.2.0-rc.6) (2021-09-28)
 
 

package/lib/components/action-button.js

@@ -105,15 +105,17 @@ var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button__ActionContainer",
   componentId: "sc-4wc24t-1"
-})(["transition:opacity 0.3s;transition-delay:400ms;opacity:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
+})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";pointer-events:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
   return props.isActive ? 1 : 0;
+}, function (props) {
+  return props.isActive ? 'auto' : 'none';
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
 }, function (props) {
   return props.color || _colors["default"].white;
-}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
   return styles.fontSize.tablet[props.direction];
-}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
   return styles.fontSize.mobile[props.direction];
 }));
 

package/lib/components/channels.js

@@ -19,8 +19,6 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _theme = _interopRequireDefault(require("../utils/theme"));
 
-var _animations = _interopRequireDefault(require("../utils/animations"));
-
 var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
 var _channels = _interopRequireDefault(require("../constants/channels"));
@@ -33,14 +31,16 @@ var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
 
 var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
-var _css = require("@twreporter/core/lib/utils/css");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _css = require("@twreporter/core/lib/utils/css");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _templateObject;
+
 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; }
@@ -83,6 +83,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var _ = {
   get: _get["default"],
   map: _map["default"]
@@ -114,19 +116,16 @@ var styles = {
     column: 'relative'
   },
   dropdownTop: {
-    row: 35,
-    // px
-    column: 0 //px
-
+    row: "calc(100% + 1px)",
+    column: 0
   }
 };
 var dropDownMenuEffectCSS = /*#__PURE__*/(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 400ms ease-in 100ms;}"]);
-var linkUnderline = /*#__PURE__*/(0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:-1px;display:block;content:'';width:100%;height:4px;background-color:#A67A44;"], _animations["default"].changeOpacity('0', '1'));
 
 var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__DropDownMenuWrapper",
   componentId: "nu2llv-0"
-})(["position:", ";z-index:999;width:100%;left:0;top:", "px;", ""], function (props) {
+})(["position:", ";z-index:999;width:100%;left:0;top:", ";", ""], function (props) {
   return styles.dropdownPosition[props.direction];
 }, function (props) {
   return styles.dropdownTop[props.direction];
@@ -135,12 +134,12 @@ var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConf
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__Box",
   componentId: "nu2llv-1"
-})(["width:100%;"]);
+})(["width:100%;height:100%;"]);
 
 var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   displayName: "channels__List",
   componentId: "nu2llv-2"
-})(["justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
+})(["height:100%;justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
   return props.bgColor || _colors["default"].white;
 }, function (props) {
   return props.direction;
@@ -153,7 +152,7 @@ var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "channels__ListItem",
   componentId: "nu2llv-3"
-})(["display:flex;flex-direction:", ";position:relative;width:", ";font-size:", ";letter-spacing:0.5px;cursor:pointer;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}&::after{", "}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}}"], function (props) {
+})(["display:flex;flex-direction:", ";position:relative;width:", ";height:100%;font-size:", ";letter-spacing:0.5px;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}", "}"], function (props) {
   return props.direction;
 }, function (props) {
   return styles.itemWidth[props.direction];
@@ -163,8 +162,6 @@ var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   return (0, _css.arrayToCssShorthand)(styles.itemBorderWidth[props.direction]);
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemBorderWidthFirstChild[props.direction]);
-}, function (props) {
-  return props.isActive && props.direction === 'row' ? linkUnderline : '';
 }, _fonts["default"].size.base, _fonts["default"].weight.bold, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemPadding[props.direction]);
 }, function (props) {
@@ -173,7 +170,7 @@ var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   return props.hoverBgColor;
 }, function (props) {
   return props.hoverFontColor;
-});
+}, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n    "]))));
 
 var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__ShowOnHover",
@@ -200,18 +197,26 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call(this, props);
     _this.state = {
-      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname)
+      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname),
+      activeDropdownIndex: invalidDataIndex
     };
     _this.handleDropDownChannelClick = _this._handleDropDownChannelClick.bind(_assertThisInitialized(_this));
     _this.handleNormalChannelClick = _this._handleNormalChannelClick.bind(_assertThisInitialized(_this));
     _this.handleDropDownMenuClick = _this._handleDropDownMenuClick.bind(_assertThisInitialized(_this));
-    _this.setActiveData = _this._setActiveData.bind(_assertThisInitialized(_this));
-    _this.resetActiveData = _this._resetActiveDataIndex.bind(_assertThisInitialized(_this));
     _this.callback = _this._callback.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Channels, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.context.hideHeader) {
+        this.setState({
+          activeDropdownIndex: invalidDataIndex
+        });
+      }
+    }
+  }, {
     key: "_checkWhichChannelActive",
     value: function _checkWhichChannelActive(currentPathname) {
       var data = this.props.data;
@@ -247,38 +252,35 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
     key: "_handleDropDownChannelClick",
     value: function _handleDropDownChannelClick(e, channelIndex) {
       e.preventDefault();
-      this.setActiveData(channelIndex, true);
+      var activeDropdownIndex = this.state.activeDropdownIndex;
+      var nextActiveDropdownIndex = channelIndex === activeDropdownIndex ? invalidDataIndex : channelIndex;
+      this.setState({
+        activeDropdownIndex: nextActiveDropdownIndex
+      });
     }
   }, {
     key: "_handleNormalChannelClick",
     value: function _handleNormalChannelClick(channelIndex) {
-      this.setActiveData(channelIndex, false);
-      this.callback();
+      this.setState({
+        activeDataIndex: channelIndex,
+        activeDropdownIndex: invalidDataIndex
+      });
+      this.callback(channelIndex);
     }
   }, {
     key: "_handleDropDownMenuClick",
-    value: function _handleDropDownMenuClick() {
-      this.resetActiveData(invalidDataIndex);
-      this.callback();
-    }
-  }, {
-    key: "_setActiveData",
-    value: function _setActiveData(dataIndex, clickTwiceInactive) {
-      var activeDataIndex = this.state.activeDataIndex;
-      var nextActiveIndex = clickTwiceInactive && activeDataIndex === dataIndex ? invalidDataIndex : dataIndex;
+    value: function _handleDropDownMenuClick(parentIndex) {
       this.setState({
-        activeDataIndex: nextActiveIndex
+        activeDataIndex: parentIndex,
+        activeDropdownIndex: invalidDataIndex
       });
-    }
-  }, {
-    key: "_resetActiveDataIndex",
-    value: function _resetActiveDataIndex() {
-      this.setActiveData(invalidDataIndex);
+      this.callback(parentIndex);
     }
   }, {
     key: "_callback",
-    value: function _callback() {
-      this.props.callback();
+    value: function _callback(dataIndex) {
+      var currentActivePathname = dataIndex === invalidDataIndex ? '' : this.props.data[dataIndex].pathname;
+      this.props.callback(currentActivePathname);
     }
   }, {
     key: "_prepareChannelItemJSX",
@@ -293,8 +295,8 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
         var _this$props = this.props,
             data = _this$props.data,
             direction = _this$props.direction;
-        var activeDataIndex = this.state.activeDataIndex;
-        var toShowDropdownMenu = activeDataIndex === dataIndex;
+        var activeDropdownIndex = this.state.activeDropdownIndex;
+        var toShowDropdownMenu = activeDropdownIndex === dataIndex;
 
         var dropdownMenuData = _.get(data, [dataIndex, dropDownMenuKey], []);
 
@@ -309,11 +311,12 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
           unmountOnExit: true
         }, /*#__PURE__*/_react["default"].createElement(_dropDownMenu["default"], {
           data: dropdownMenuData,
-          onClick: this.handleDropDownMenuClick
+          onClick: function onClick(e) {
+            return _this2.handleDropDownMenuClick(dataIndex);
+          }
         })));
 
-        var isActive = activeDataIndex === dataIndex;
-        var status = isActive ? 'collapse' : 'expand';
+        var status = toShowDropdownMenu ? 'collapse' : 'expand';
 
         var _themeUtils$selectIco = _slicedToArray(_theme["default"].selectIcons(theme)[status], 2),
             StatusIcon = _themeUtils$selectIco[0],
@@ -340,15 +343,12 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
       var _this3 = this;
 
       var _this$props2 = this.props,
-          currentPathname = _this$props2.currentPathname,
           data = _this$props2.data,
           direction = _this$props2.direction,
           borderWidth = _this$props2.borderWidth,
           themeFunction = _this$props2.themeFunction;
-      var activeDataIndex = this.state.activeDataIndex;
 
       var channelsJSX = _.map(data, function (channelItem, dataIndex) {
-        var isActive = activeDataIndex === dataIndex;
         return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, {
           key: channelItem.key
         }, function (_ref) {
@@ -357,14 +357,12 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
           var _themeFunction = themeFunction(theme),
               fontColor = _themeFunction.fontColor,
               hoverFontColor = _themeFunction.hoverFontColor,
-              hoverBgColor = _themeFunction.hoverBgColor,
-              borderColor = _themeFunction.borderColor;
+              hoverBgColor = _themeFunction.hoverBgColor;
 
           var channelItemJSX = _this3._prepareChannelItemJSX(channelItem, dataIndex, theme);
 
           return /*#__PURE__*/_react["default"].createElement(ListItem, {
             direction: direction,
-            isActive: isActive,
             onClick: _this3.handleClickChannel,
             fontColor: fontColor,
             hoverFontColor: hoverFontColor,
@@ -416,5 +414,7 @@ _defineProperty(Channels, "defaultProps", {
   callback: function callback() {}
 });
 
+_defineProperty(Channels, "contextType", _headerContext["default"]);
+
 var _default = Channels;
 exports["default"] = _default;

package/lib/components/drop-down-menu.js

@@ -21,14 +21,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
-var _css = require("@twreporter/core/lib/utils/css");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -55,10 +55,20 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var _ = {
   get: _get["default"],
   map: _map["default"]
 };
+var styles = {
+  subMenuHeight: {
+    mobile: 58,
+    // px
+    desktop: 46 // px
+
+  }
+};
 
 var ViewPort = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "drop-down-menu__ViewPort",
@@ -78,12 +88,12 @@ var MenuContent = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var SubMenuBox = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "drop-down-menu__SubMenuBox",
   componentId: "sc-8es5ea-3"
-})(["display:flex;box-sizing:border-box;white-space:nowrap;position:relative;margin:0;border-bottom:1px solid #e2e2e2;width:100%;a,a:link,a:visited{width:100%;border:0;color:#808080;&:hover{color:", ";background-color:rgba(0,0,0,0.1);}}"], _colors["default"].grayDark);
+})(["display:flex;box-sizing:border-box;white-space:nowrap;position:relative;margin:0;border-bottom:1px solid #e2e2e2;width:100%;height:", "px;", " a,a:link,a:visited{width:100%;border:0;color:#808080;&:hover{color:", ";background-color:rgba(0,0,0,0.1);}}"], styles.subMenuHeight.mobile, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.subMenuHeight.desktop), _colors["default"].grayDark);
 
 var SubMenuContent = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "drop-down-menu__SubMenuContent",
   componentId: "sc-8es5ea-4"
-})(["font-size:", ";font-weight:", ";cursor:pointer;"], _fonts["default"].size.base, _fonts["default"].weight.normal);
+})(["font-size:", ";font-weight:", ";cursor:pointer;"], _fonts["default"].size.base, _fonts["default"].weight.bold);
 
 var DropDownMenu = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(DropDownMenu, _React$PureComponent);
@@ -102,7 +112,6 @@ var DropDownMenu = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           data = _this$props.data,
           onClick = _this$props.onClick;
-      var subMenuCount = data.length;
 
       var menuJSX = _.map(data, function (subMenuItem, index) {
         return /*#__PURE__*/_react["default"].createElement(SubMenuBox, {

package/lib/components/hamburger-icons.js

@@ -66,7 +66,7 @@ var styles = {
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-icons__IconContainer",
   componentId: "sc-11ma9zq-0"
-})(["height:", "px;width:", "px;display:flex;justify-content:center;align-items:center;margin-right:17px;a{display:flex;}", ""], styles.iconHeight.mobile, styles.iconWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    margin-right: 25px;\n  "])), styles.iconHeight.tablet, styles.iconWidth.tablet));
+})(["height:", "px;width:", "px;display:flex;justify-content:center;align-items:center;margin-right:17px;a{display:flex;cursor:default;}", ""], styles.iconHeight.mobile, styles.iconWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    margin-right: 25px;\n  "])), styles.iconHeight.tablet, styles.iconWidth.tablet));
 
 var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-icons__IconsContainer",

package/lib/components/hamburger-menu.js

@@ -19,14 +19,10 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _theme = _interopRequireDefault(require("../utils/theme"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _actionButton = _interopRequireDefault(require("./action-button"));
 
 var _slogan = _interopRequireDefault(require("./slogan"));
 
-var _customizedLink = _interopRequireDefault(require("./customized-link"));
-
 var _hamburgerIcons = _interopRequireDefault(require("./hamburger-icons"));
 
 var _channels = _interopRequireDefault(require("./channels.js"));

package/lib/components/header.js

@@ -23,8 +23,6 @@ var _theme = _interopRequireDefault(require("../utils/theme"));
 
 var _animations = _interopRequireDefault(require("../utils/animations"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _channels = _interopRequireDefault(require("./channels"));
 
 var _actionButton = _interopRequireDefault(require("./action-button"));
@@ -35,9 +33,11 @@ var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
 var _slogan = _interopRequireDefault(require("./slogan"));
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _css = require("@twreporter/core/lib/utils/css");
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _templateObject;
 
 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); }
 
@@ -45,8 +45,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// @twreporter
-var CHANNEL_HEIGHT = 37; // px
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var CHANNEL_HEIGHT = 36; // px
 
 var styles = {
   headerHeight: {
@@ -68,26 +69,40 @@ var styles = {
     hd: 1320 // px
 
   },
-  channelBottomBorderWidth: [1, 0, 1, 0] // px
+  channelTopBorderWidth: [0, 1, 1, 0],
+  // px
+  channelBottomBorderWidth: [1, 0, 1, 0],
+  // px
+  iconBorderWidth: {
+    wide: [0, 0, 0, 0],
+    // px
+    narrow: [0, 0, 1, 0] // px
 
+  },
+  zIndex: {
+    topRow: 3,
+    channelBottom: 1,
+    channelTop: 4,
+    actionButton: 5
+  }
 };
 
 var headerWide = _animations["default"].changeHeight("".concat(styles.headerHeight.narrow, "px"), "".concat(styles.headerHeight.wide, "px"));
 
 var headerNarrow = _animations["default"].changeHeight("".concat(styles.headerHeight.wide, "px"), "".concat(styles.headerHeight.narrow, "px"));
 
-var HeaderEffect = /*#__PURE__*/(0, _styledComponents.css)([".header-effect-enter{height:", "px;}.header-effect-enter-active{animation:", " 0.3s linear;animation-delay:400ms;}.header-effect-exit-active{animation:", " 0.3s linear;animation-delay:400ms;}.header-effect-exit-done{height:", "px;}"], styles.headerHeight.narrow, headerWide, headerNarrow, styles.headerHeight.narrow);
-var ActionEffect = /*#__PURE__*/(0, _styledComponents.css)([".action-effect-enter{transform:translateX(-40px);}.action-effect-enter-active{animation:", " 0.3s;animation-delay:400ms;}.action-effect-exit-active{animation:", " 0.3s;animation-delay:400ms;}.action-effect-exit-done{transform:translateX(-40px);}"], _animations["default"].changeTranslateX('-40px', 0), _animations["default"].changeTranslateX(0, '-40px'));
-var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
+var HeaderEffect = /*#__PURE__*/(0, _styledComponents.css)([".header-effect-enter{height:", "px;}.header-effect-enter-active{animation:", " 0.2s linear;animation-delay:300ms;}.header-effect-exit-active{animation:", " 0.2s linear;animation-delay:300ms;}.header-effect-exit-done{height:", "px;}"], styles.headerHeight.narrow, headerWide, headerNarrow, styles.headerHeight.narrow);
+var ActionEffect = /*#__PURE__*/(0, _styledComponents.css)([".action-effect-enter{transform:translateX(-40px);}.action-effect-enter-active{animation:", " 0.2s;animation-delay:300ms;}.action-effect-exit-active{animation:", " 0.2s;animation-delay:300ms;}.action-effect-exit-done{transform:translateX(-40px);}"], _animations["default"].changeTranslateX('-40px', 0), _animations["default"].changeTranslateX(0, '-40px'));
+var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.2s;animation-delay:300ms;}.slogan-effect-exit-active{animation:", " 0.2s;animation-delay:300ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
 var channelSlideIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(", "px);opacity:0;}to{transform:translateY(0);opacity:1;}"], -CHANNEL_HEIGHT);
 var channelSlideOut = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(0);}to{transform:translateY(", "px);}"], -CHANNEL_HEIGHT);
-var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " 0.2s linear;animation-delay:500ms;}.channel-effect-exit-active{animation:", " 0.2s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
-var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{width:80%;}.logo-effect-enter-active{animation:", " 0.3s linear;animation-delay:400ms;}.logo-effect-exit-active{animation:", " 0.3s linear;animation-delay:400ms;}.logo-effect-exit-done{width:80%;}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
+var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " 0.2s linear;animation-delay:400ms;}.channel-effect-exit-active{animation:", " 0.1s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
+var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{width:80%;}.logo-effect-enter-active{animation:", " 0.2s linear;animation-delay:300ms;}.logo-effect-exit-active{animation:", " 0.2s linear;animation-delay:300ms;}.logo-effect-exit-done{width:80%;}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
 
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__Box",
   componentId: "sc-1krza7i-0"
-})(["transform:translateY(", ");transition:transform 0.3s linear;background-color:", ";box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;a:link,a:visited,a:hover,a:active{text-decoration:none;}", ""], function (props) {
+})(["transform:translateY( ", " );transition:transform 0.3s linear;background-color:", ";box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;a:link,a:visited,a:hover,a:active{text-decoration:none;}", ""], function (props) {
   return props.isHide ? "".concat(-styles.headerHeight.narrow, "px") : 0;
 }, function (props) {
   return props.bgColor;
@@ -96,12 +111,12 @@ var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TopRow",
   componentId: "sc-1krza7i-1"
-})(["height:", "px;padding:", ";max-width:", "px;width:100%;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;z-index:3;"], styles.headerHeight.wide, (0, _css.arrayToCssShorthand)(styles.topRowPadding.desktop), styles.topRowMaxWidth.hd);
+})(["height:", "px;padding:", ";max-width:", "px;width:100%;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;z-index:", ";"], styles.headerHeight.wide, (0, _css.arrayToCssShorthand)(styles.topRowPadding.desktop), styles.topRowMaxWidth.hd, styles.zIndex.topRow);
 
 var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ChannelContainer",
   componentId: "sc-1krza7i-2"
-})(["width:calc(100% - 120px);max-width:", "px;z-index:1;", ""], styles.channelMaxWidth.hd, ChannelEffect);
+})(["width:calc(100% - 120px);max-width:", "px;z-index:", ";", ""], styles.channelMaxWidth.hd, styles.zIndex.channelBottom, ChannelEffect);
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__FlexGroup",
@@ -123,12 +138,21 @@ var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ActionContainer",
   componentId: "sc-1krza7i-6"
-})(["", " ", ""], FlexItem, ActionEffect);
+})(["z-index:", ";", " ", ""], styles.zIndex.actionButton, FlexItem, ActionEffect);
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__IconContainer",
+  componentId: "sc-1krza7i-7"
+})(["", " height:", "px;margin:0;padding-left:14px;border-color:", ";border-style:solid;border-width:", ";transition:border-width 0.1s linear 0.2s;"], FlexItem, styles.headerHeight.narrow, function (props) {
+  return props.borderColor;
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.iconBorderWidth[props.headerType]);
+});
 
 var ChannelTopContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ChannelTopContainer",
-  componentId: "sc-1krza7i-7"
-})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;right:calc(50% - 540px);", " ", ""], FlexItem, ChannelEffect);
+  componentId: "sc-1krza7i-8"
+})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;height:", "px;right:186px;z-index:", ";", " ", " ", ""], styles.headerHeight.narrow, styles.zIndex.channelTop, FlexItem, ChannelEffect, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    right: calc(50% - 540px);\n  "]))));
 
 var Header = function Header(_ref) {
   var pathname = _ref.pathname,
@@ -143,7 +167,9 @@ var Header = function Header(_ref) {
         toUseNarrow = _ref2.toUseNarrow,
         hideHeader = _ref2.hideHeader;
 
-    var bgColor = _theme["default"].selectBgColor(theme);
+    var _themeUtils$selectHea = _theme["default"].selectHeaderTheme(theme),
+        bgColor = _themeUtils$selectHea.bgColor,
+        borderColor = _themeUtils$selectHea.borderColor;
 
     var Logo = _theme["default"].selectLogoComponent(theme);
 
@@ -155,24 +181,24 @@ var Header = function Header(_ref) {
       classNames: "header-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(TopRow, null, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _links["default"].getLogoLink(isLinkExternal, releaseBranch), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "logo-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(Logo, null)))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "action-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
       actions: toUseNarrow ? narrowActions : actions
@@ -181,30 +207,34 @@ var Header = function Header(_ref) {
       classNames: "slogan-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null)))), /*#__PURE__*/_react["default"].createElement(ChannelTopContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": toUseNarrow,
       classNames: "channel-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 300
+        enter: 600,
+        exit: 200
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
       currentPathname: pathname,
-      data: channels
-    }))), /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+      data: channels,
+      borderWidth: styles.channelTopBorderWidth
+    }))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      headerType: toUseNarrow ? 'narrow' : 'wide',
+      borderColor: borderColor
+    }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
       services: services
-    }))), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+    })))), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "channel-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 300
+        enter: 600,
+        exit: 200
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {

package/lib/components/icons.js

@@ -23,8 +23,6 @@ var _links = _interopRequireDefault(require("../utils/links"));
 
 var _querystring = _interopRequireDefault(require("querystring"));
 
-var _services = _interopRequireDefault(require("../constants/services"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = _interopRequireDefault(require("../utils/theme"));

package/lib/components/mobile-header.js

@@ -23,8 +23,6 @@ var _theme = _interopRequireDefault(require("../utils/theme"));
 
 var _animations = _interopRequireDefault(require("../utils/animations"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
 var _hamburgerMenu = _interopRequireDefault(require("./hamburger-menu"));
@@ -37,7 +35,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _css = require("@twreporter/core/lib/utils/css");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -81,7 +79,13 @@ var styles = {
   headerPadding: {
     mobile: [24],
     // px
-    tablet: [24, 30, 24, 50] //px
+    tablet: [24, 30, 24, 50] // px
+
+  },
+  hamburgerPadding: {
+    mobile: [24],
+    // px
+    tablet: [24, 30] // px
 
   },
   logoHeight: {
@@ -107,7 +111,7 @@ var styles = {
 
   }
 };
-var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
+var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.1s;animation-delay:300ms;}.slogan-effect-exit-active{animation:", " 0.1s;animation-delay:300ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
 
 var TabletOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-header__TabletOnly",
@@ -117,7 +121,7 @@ var TabletOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-header__FlexBox",
   componentId: "sc-1vxvz2u-1"
-})(["transform:translateY(", ");transition:transform 0.3s linear;background-color:", ";display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:", ";", ""], function (props) {
+})(["transform:translateY( ", " );transition:transform 0.3s linear;background-color:", ";display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:", ";", ""], function (props) {
   return props.isHide ? "".concat(-styles.headerHeight.mobile, "px") : 0;
 }, function (props) {
   return props.bgColor;
@@ -153,7 +157,7 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
 var Hamburger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-header__Hamburger",
   componentId: "sc-1vxvz2u-7"
-})(["display:flex;cursor:pointer;"]);
+})(["display:flex;position:absolute;right:0;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.hamburgerPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.hamburgerPadding.tablet)));
 
 var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(MobileHeader, _React$PureComponent);
@@ -218,7 +222,8 @@ var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
 
         var Logo = _theme["default"].selectLogoComponent(theme);
 
-        var bgColor = _theme["default"].selectBgColor(theme);
+        var _themeUtils$selectHea = _theme["default"].selectHeaderTheme(theme),
+            bgColor = _themeUtils$selectHea.bgColor;
 
         var MenuIcon = _theme["default"].selectIcons(theme).menu;
 
@@ -234,8 +239,8 @@ var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
           classNames: "slogan-effect",
           timeout: {
             appear: 0,
-            enter: 700,
-            exit: 700
+            enter: 400,
+            exit: 400
           }
         }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))))), /*#__PURE__*/_react["default"].createElement(Hamburger, {
           onClick: _this2.handleOnHamburgerClick
@@ -251,6 +256,7 @@ exports["default"] = MobileHeader;
 
 _defineProperty(MobileHeader, "propTypes", {
   actions: _propTypes["default"].array,
+  narrowActions: _propTypes["default"].array,
   menuChannels: _propTypes["default"].array,
   menuServices: _propTypes["default"].array,
   menuActions: _propTypes["default"].array
@@ -258,6 +264,7 @@ _defineProperty(MobileHeader, "propTypes", {
 
 _defineProperty(MobileHeader, "defaultProps", {
   actions: [],
+  narrowActions: [],
   menuChannels: [],
   menuServices: [],
   menuActions: []

package/lib/components/slogan.js

@@ -32,9 +32,9 @@ var style = {
 var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
-})(["color:", ";font-size:", ";font-family:Noto Serif TC;display:flex;align-items:center;"], function (props) {
+})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;cursor:default;"], function (props) {
   return props.color || _colors["default"].grayDark;
-}, style.fontSize.desktop);
+}, style.fontSize.desktop, _fonts["default"].family.serif);
 
 var Slogan = function Slogan(_ref) {
   var themeFunction = _ref.themeFunction;

package/lib/constants/fonts.js

@@ -27,6 +27,9 @@ var _default = {
     normal: '300',
     medium: '500',
     bold: '700'
+  },
+  family: {
+    serif: 'source-han-serif-tc,serif'
   }
 };
 exports["default"] = _default;

package/lib/containers/header.js

@@ -91,9 +91,9 @@ var _ = {
   throttle: _throttle["default"]
 };
 var HIDE_HEADER_THRESHOLD = 46;
-var TRANSFORM_HEADER_THRESHOLD = 20;
+var TRANSFORM_HEADER_THRESHOLD = 40;
 var TRANSFORM_TIMEOUT = 800;
-var stickyTop = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;top:0;z-index:999;"]);
+var stickyTop = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;top:0;z-index:1000;"]);
 
 var MobileOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__MobileOnly",
@@ -168,14 +168,13 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
       var _this2 = this;
 
       var isCurrentNarrow = this.state.toUseNarrow;
+      var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
       var scrollState = {};
 
       if (this.isTransforming) {
         return scrollState;
       }
 
-      scrollState.toUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
-
       if (scrollDirection === 'up') {
         this.readyY = scrollTop;
         scrollState.hideHeader = false;
@@ -186,6 +185,14 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
         if (isCurrentNarrow && scrollTop - this.readyY > HIDE_HEADER_THRESHOLD) {
           scrollState.hideHeader = true;
         }
+      }
+
+      if (isCurrentNarrow) {
+        // after transforming to narrow header, always remain narrow when scroll down
+        scrollState.toUseNarrow = scrollDirection === 'down' ? true : nextToUseNarrow;
+      } else {
+        // after transfroming to wide header, always remain wide when scroll up
+        scrollState.toUseNarrow = scrollDirection === 'up' ? false : nextToUseNarrow;
       } // register transform timer to mark header transform status
 
 

package/lib/utils/theme.js

@@ -220,27 +220,39 @@ function selectChannelTheme(theme) {
   }
 }
 
-function selectBgColor(theme) {
+function selectHeaderTheme(theme) {
   switch (theme) {
     case _theme["default"].photography:
       {
-        return _colors["default"].photography;
+        return {
+          bgColor: _colors["default"].photography,
+          borderColor: 'rgba(128, 128, 128, 0.2)'
+        };
       }
 
     case _theme["default"].transparent:
       {
-        return 'rgba(0, 0, 0, 0.1)';
+        return {
+          bgColor: 'rgba(0, 0, 0, 0.1)',
+          borderColor: 'rgba(128, 128, 128, 0.2)'
+        };
       }
 
     case _theme["default"].index:
       {
-        return _colors["default"].white;
+        return {
+          bgColor: _colors["default"].white,
+          borderColor: _colors["default"].gray
+        };
       }
 
     case _theme["default"].normal:
     default:
       {
-        return _colors["default"].grayLight;
+        return {
+          bgColor: _colors["default"].grayLight,
+          borderColor: _colors["default"].gray
+        };
       }
   }
 }
@@ -398,11 +410,11 @@ function selectSloganHBTheme(theme) {
 }
 
 var _default = {
-  selectBgColor: selectBgColor,
   selectLogoComponent: selectLogoComponent,
   selectServiceIcons: selectServiceIcons,
   selectHamburgerServiceIcons: selectHamburgerServiceIcons,
   selectIcons: selectIcons,
+  selectHeaderTheme: selectHeaderTheme,
   selectChannelTheme: selectChannelTheme,
   selectActionButtonTheme: selectActionButtonTheme,
   selectSloganTheme: selectSloganTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.2.0-rc.6",
+  "version": "2.2.0",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@twreporter/core": "^1.2.1",
-    "@twreporter/react-components": "8.5.0-rc.0",
+    "@twreporter/react-components": "^8.5.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "fb8726c9e2b313d1c9198524c340f9ef5cfcdc1b"
+  "gitHead": "b482beff13f1826cc6698022aff715194d6a4b4f"
 }