@twreporter/universal-header 2.2.0-rc.8 → 2.2.0-rc.9

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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

@@ -21,10 +21,14 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
+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); }
@@ -51,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",
@@ -74,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);

package/lib/components/header.js

@@ -90,6 +90,12 @@ var styles = {
     // px
     narrow: [0, 0, 1, 0] // px
 
+  },
+  zIndex: {
+    topRow: 3,
+    channelBottom: 1,
+    channelTop: 4,
+    actionButton: 5
   }
 };
 
@@ -117,12 +123,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",
@@ -144,19 +150,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:#e2e2e2;border-style:solid;border-width:", ";transition:border-width 0.1s linear 0.2s;"], FlexItem, styles.headerHeight.narrow, function (props) {
+})(["", " 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-8"
-})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;height:", "px;right:186px;", " ", " ", ""], styles.headerHeight.narrow, FlexItem, ChannelEffect, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    right: calc(50% - 540px);\n  "]))));
+})(["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,
@@ -177,7 +185,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);
 
@@ -233,7 +243,8 @@ var Header = function Header(_ref) {
       borderWidth: styles.channelTopBorderWidth,
       callback: setPathname
     }))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
-      headerType: toUseNarrow ? 'narrow' : 'wide'
+      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"], {

package/lib/components/mobile-header.js

@@ -105,7 +105,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",
@@ -115,7 +115,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;
@@ -216,7 +216,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;
 
@@ -232,8 +233,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

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.8",
+  "version": "2.2.0-rc.9",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "62a706e2369ff578eecd86c24aa5549516227c22"
+  "gitHead": "81aa803c1e1cb4cfa5a858e5d2ba6bb502c4fef3"
 }