@twreporter/universal-header 2.2.15-rc.2 → 2.3.0-rc.0

package/lib/components/header-old.js

@@ -0,0 +1,274 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _links = _interopRequireDefault(require("../utils/links"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _animations = _interopRequireDefault(require("../utils/animations"));
+
+var _channelsOld = _interopRequireDefault(require("./channels-old"));
+
+var _actionButtonOld = _interopRequireDefault(require("./action-button-old"));
+
+var _iconsOld = _interopRequireDefault(require("./icons-old"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _sloganOld = _interopRequireDefault(require("./slogan-old"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _logo = require("@twreporter/react-components/lib/logo");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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: {
+    wide: 83,
+    // px
+    narrow: 46 // px
+
+  },
+  topRowPadding: {
+    desktop: [0, 60] // px
+
+  },
+  topRowMaxWidth: {
+    desktop: 1024,
+    hd: 1440 // px
+
+  },
+  channelMaxWidth: {
+    hd: 1320 // 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: {
+    flexGroup: 3,
+    channelBottom: 1,
+    channelTop: {
+      wide: 2,
+      narrow: 4
+    }
+  }
+};
+
+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.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:400ms;}.channel-effect-exit-active{animation:", " 0.1s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
+var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{img{width:80%;}}.logo-effect-enter-active{img{animation:", " 0.2s linear;animation-delay:300ms;}}.logo-effect-exit-active{img{animation:", " 0.2s linear;animation-delay:300ms;}}.logo-effect-exit-done{img{width:80%;}}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
+
+var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__Box",
+  componentId: "sc-1fortyi-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) {
+  return props.isHide ? "".concat(-styles.headerHeight.narrow, "px") : 0;
+}, function (props) {
+  return props.bgColor;
+}, HeaderEffect);
+
+var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__TopRow",
+  componentId: "sc-1fortyi-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;"], styles.headerHeight.wide, (0, _css.arrayToCssShorthand)(styles.topRowPadding.desktop), styles.topRowMaxWidth.hd);
+
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__ChannelContainer",
+  componentId: "sc-1fortyi-2"
+})(["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-old__FlexGroup",
+  componentId: "sc-1fortyi-3"
+})(["display:flex;z-index:", ";"], styles.zIndex.flexGroup);
+
+var FlexItem = /*#__PURE__*/(0, _styledComponents.css)(["margin-right:14px;display:flex;align-items:center;"]);
+
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__LogoContainer",
+  componentId: "sc-1fortyi-4"
+})(["", " ", " img{width:210px;}"], FlexItem, LogoEffect);
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__SloganContainer",
+  componentId: "sc-1fortyi-5"
+})(["", " ", ""], FlexItem, SloganEffect);
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__ActionContainer",
+  componentId: "sc-1fortyi-6"
+})(["", " ", ""], FlexItem, ActionEffect);
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header-old__IconContainer",
+  componentId: "sc-1fortyi-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-old__ChannelTopContainer",
+  componentId: "sc-1fortyi-8"
+})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;height:", "px;right:186px;z-index:", ";", " ", " ", ""], styles.headerHeight.narrow, function (props) {
+  return styles.zIndex.channelTop[props.headerType];
+}, FlexItem, ChannelEffect, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    right: calc(50% - 540px);\n  "]))));
+
+var Header = function Header(_ref) {
+  var pathname = _ref.pathname,
+      channels = _ref.channels,
+      services = _ref.services,
+      actions = _ref.actions,
+      narrowActions = _ref.narrowActions;
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var releaseBranch = _ref2.releaseBranch,
+        isLinkExternal = _ref2.isLinkExternal,
+        theme = _ref2.theme,
+        toUseNarrow = _ref2.toUseNarrow,
+        hideHeader = _ref2.hideHeader;
+
+    var _themeUtils$selectHea = _theme["default"].selectHeaderTheme(theme),
+        bgColor = _themeUtils$selectHea.bgColor,
+        borderColor = _themeUtils$selectHea.borderColor;
+
+    var logoType = _theme["default"].selectLogoType(theme);
+
+    return /*#__PURE__*/_react["default"].createElement(Box, {
+      bgColor: bgColor,
+      isHide: hideHeader
+    }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      "in": !toUseNarrow,
+      classNames: "header-effect",
+      timeout: {
+        appear: 0,
+        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(_CSSTransition["default"], {
+      "in": !toUseNarrow,
+      classNames: "logo-effect",
+      timeout: {
+        appear: 0,
+        enter: 500,
+        exit: 500
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _links["default"].getLogoLink(isLinkExternal, releaseBranch), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
+      type: logoType,
+      releaseBranch: releaseBranch
+    })))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      "in": !toUseNarrow,
+      classNames: "action-effect",
+      timeout: {
+        appear: 0,
+        enter: 500,
+        exit: 500
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_actionButtonOld["default"], {
+      actions: toUseNarrow ? narrowActions : actions
+    }))), /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      "in": !toUseNarrow,
+      classNames: "slogan-effect",
+      timeout: {
+        appear: 0,
+        enter: 500,
+        exit: 500
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_sloganOld["default"], null)))), /*#__PURE__*/_react["default"].createElement(ChannelTopContainer, {
+      headerType: toUseNarrow ? 'narrow' : 'wide'
+    }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      "in": toUseNarrow,
+      classNames: "channel-effect",
+      timeout: {
+        appear: 0,
+        enter: 600,
+        exit: 200
+      },
+      unmountOnExit: true
+    }, /*#__PURE__*/_react["default"].createElement(_channelsOld["default"], {
+      currentPathname: pathname,
+      data: channels,
+      borderWidth: styles.channelTopBorderWidth
+    }))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      headerType: toUseNarrow ? 'narrow' : 'wide',
+      borderColor: borderColor
+    }, /*#__PURE__*/_react["default"].createElement(_iconsOld["default"], {
+      services: services
+    })))), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+      "in": !toUseNarrow,
+      classNames: "channel-effect",
+      timeout: {
+        appear: 0,
+        enter: 600,
+        exit: 200
+      },
+      unmountOnExit: true
+    }, /*#__PURE__*/_react["default"].createElement(_channelsOld["default"], {
+      currentPathname: pathname,
+      data: channels,
+      borderWidth: styles.channelBottomBorderWidth
+    }))));
+  });
+};
+
+Header.propTypes = {
+  pathname: _propTypes["default"].string,
+  channels: _channelsOld["default"].propTypes.data,
+  services: _propTypes["default"].array,
+  actions: _propTypes["default"].array,
+  narrowActions: _propTypes["default"].array
+};
+Header.defaultProps = {
+  pathname: '',
+  channels: _channelsOld["default"].defaultProps.data,
+  services: [],
+  actions: [],
+  narrowActions: []
+};
+var _default = Header;
+exports["default"] = _default;

package/lib/components/header.js

@@ -7,13 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
@@ -21,254 +19,130 @@ var _links = _interopRequireDefault(require("../utils/links"));
 
 var _theme = _interopRequireDefault(require("../utils/theme"));
 
-var _animations = _interopRequireDefault(require("../utils/animations"));
-
 var _channels = _interopRequireDefault(require("./channels"));
 
 var _actionButton = _interopRequireDefault(require("./action-button"));
 
 var _icons = _interopRequireDefault(require("./icons"));
 
-var _customizedLink = _interopRequireDefault(require("./customized-link"));
-
 var _slogan = _interopRequireDefault(require("./slogan"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
-var _css = require("@twreporter/core/lib/utils/css");
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _logo = require("@twreporter/react-components/lib/logo");
 
-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); }
+var _button = require("@twreporter/react-components/lib/button");
 
-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; }
+var _icon = require("@twreporter/react-components/lib/icon");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _color = require("@twreporter/core/lib/constants/color");
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var CHANNEL_HEIGHT = 36; // px
-
-var styles = {
-  headerHeight: {
-    wide: 83,
-    // px
-    narrow: 46 // px
-
-  },
-  topRowPadding: {
-    desktop: [0, 60] // px
-
-  },
-  topRowMaxWidth: {
-    desktop: 1024,
-    hd: 1440 // px
-
-  },
-  channelMaxWidth: {
-    hd: 1320 // 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: {
-    flexGroup: 3,
-    channelBottom: 1,
-    channelTop: {
-      wide: 2,
-      narrow: 4
-    }
-  }
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var headerWide = _animations["default"].changeHeight("".concat(styles.headerHeight.narrow, "px"), "".concat(styles.headerHeight.wide, "px"));
+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); }
 
-var headerNarrow = _animations["default"].changeHeight("".concat(styles.headerHeight.wide, "px"), "".concat(styles.headerHeight.narrow, "px"));
+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; }
 
-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:400ms;}.channel-effect-exit-active{animation:", " 0.1s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
-var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{img{width:80%;}}.logo-effect-enter-active{img{animation:", " 0.2s linear;animation-delay:300ms;}}.logo-effect-exit-active{img{animation:", " 0.2s linear;animation-delay:300ms;}}.logo-effect-exit-done{img{width:80%;}}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__Box",
+var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__HeaderContainer",
   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) {
-  return props.isHide ? "".concat(-styles.headerHeight.narrow, "px") : 0;
-}, function (props) {
-  return props.bgColor;
-}, HeaderEffect);
+})(["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  "]))));
 
-var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__TopRow",
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__LogoContainer",
   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;"], styles.headerHeight.wide, (0, _css.arrayToCssShorthand)(styles.topRowPadding.desktop), styles.topRowMaxWidth.hd);
+})(["display:flex;align-items:center;margin-right:16px;"]);
 
-var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__ChannelContainer",
+var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__HideWhenNarrow",
   componentId: "sc-1krza7i-2"
-})(["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",
+var ShowWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__ShowWhenNarrow",
   componentId: "sc-1krza7i-3"
-})(["display:flex;z-index:", ";"], styles.zIndex.flexGroup);
-
-var FlexItem = /*#__PURE__*/(0, _styledComponents.css)(["margin-right:14px;display:flex;align-items:center;"]);
+})([""]);
 
-var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__LogoContainer",
+var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__TopRow",
   componentId: "sc-1krza7i-4"
-})(["", " ", " img{width:210px;}"], FlexItem, LogoEffect);
+})(["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) {
+  return props.toUseNarrow ? '16px' : '24px';
+}, _color.colorGrayscale.gray100, ShowWhenNarrow, function (props) {
+  return props.toUseNarrow ? '1' : '0';
+}, function (props) {
+  return props.toUseNarrow ? '100ms' : 0;
+}, HideWhenNarrow, function (props) {
+  return props.toUseNarrow ? '0' : '1';
+}, LogoContainer, function (props) {
+  return props.toUseNarrow ? '24px' : '0';
+}, function (props) {
+  return props.toUseNarrow ? '0' : '-24px';
+}, function (props) {
+  return props.toUseNarrow ? '24px' : '32px';
+});
 
-var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__SloganContainer",
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__IconContainer",
   componentId: "sc-1krza7i-5"
-})(["", " ", ""], FlexItem, SloganEffect);
+})(["margin-left:24px;"]);
 
-var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__ActionContainer",
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__FlexGroup",
   componentId: "sc-1krza7i-6"
-})(["", " ", ""], FlexItem, ActionEffect);
+})(["display:flex;align-items:center;"]);
 
-var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "header__IconContainer",
+var StyledChannel = /*#__PURE__*/(0, _styledComponents["default"])(_channels["default"]).withConfig({
+  displayName: "header__StyledChannel",
   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]);
+})(["transform:translateY(", ");transition:transform 300ms z-index:500;"], function (props) {
+  return props.toUseNarrow ? '-50px' : '0';
 });
 
-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;z-index:", ";", " ", " ", ""], styles.headerHeight.narrow, function (props) {
-  return styles.zIndex.channelTop[props.headerType];
-}, FlexItem, ChannelEffect, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    right: calc(50% - 540px);\n  "]))));
-
 var Header = function Header(_ref) {
-  var pathname = _ref.pathname,
-      channels = _ref.channels,
-      services = _ref.services,
-      actions = _ref.actions,
-      narrowActions = _ref.narrowActions;
-  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
-    var releaseBranch = _ref2.releaseBranch,
-        isLinkExternal = _ref2.isLinkExternal,
-        theme = _ref2.theme,
-        toUseNarrow = _ref2.toUseNarrow,
-        hideHeader = _ref2.hideHeader;
-
-    var _themeUtils$selectHea = _theme["default"].selectHeaderTheme(theme),
-        bgColor = _themeUtils$selectHea.bgColor,
-        borderColor = _themeUtils$selectHea.borderColor;
-
-    var logoType = _theme["default"].selectLogoType(theme);
-
-    return /*#__PURE__*/_react["default"].createElement(Box, {
-      bgColor: bgColor,
-      isHide: hideHeader
-    }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
-      "in": !toUseNarrow,
-      classNames: "header-effect",
-      timeout: {
-        appear: 0,
-        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(_CSSTransition["default"], {
-      "in": !toUseNarrow,
-      classNames: "logo-effect",
-      timeout: {
-        appear: 0,
-        enter: 500,
-        exit: 500
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _links["default"].getLogoLink(isLinkExternal, releaseBranch), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
-      type: logoType,
-      releaseBranch: releaseBranch
-    })))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
-      "in": !toUseNarrow,
-      classNames: "action-effect",
-      timeout: {
-        appear: 0,
-        enter: 500,
-        exit: 500
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
-      actions: toUseNarrow ? narrowActions : actions
-    }))), /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
-      "in": !toUseNarrow,
-      classNames: "slogan-effect",
-      timeout: {
-        appear: 0,
-        enter: 500,
-        exit: 500
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null)))), /*#__PURE__*/_react["default"].createElement(ChannelTopContainer, {
-      headerType: toUseNarrow ? 'narrow' : 'wide'
-    }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
-      "in": toUseNarrow,
-      classNames: "channel-effect",
-      timeout: {
-        appear: 0,
-        enter: 600,
-        exit: 200
-      },
-      unmountOnExit: true
-    }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
-      currentPathname: pathname,
-      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"], {
-      "in": !toUseNarrow,
-      classNames: "channel-effect",
-      timeout: {
-        appear: 0,
-        enter: 600,
-        exit: 200
-      },
-      unmountOnExit: true
-    }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
-      currentPathname: pathname,
-      data: channels,
-      borderWidth: styles.channelBottomBorderWidth
-    }))));
+  var _ref$pathname = _ref.pathname,
+      pathname = _ref$pathname === void 0 ? '' : _ref$pathname,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions;
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      releaseBranch = _useContext.releaseBranch,
+      isLinkExternal = _useContext.isLinkExternal,
+      theme = _useContext.theme,
+      toUseNarrow = _useContext.toUseNarrow;
+
+  var logoLink = _links["default"].getLogoLink(isLinkExternal, releaseBranch);
+
+  var logoType = _theme["default"].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
+  }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: HamburgerIcon,
+    theme: theme
+  })), /*#__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, {
+    toUseNarrow: toUseNarrow
+  }));
 };
 
 Header.propTypes = {
   pathname: _propTypes["default"].string,
-  channels: _channels["default"].propTypes.data,
-  services: _propTypes["default"].array,
-  actions: _propTypes["default"].array,
-  narrowActions: _propTypes["default"].array
-};
-Header.defaultProps = {
-  pathname: '',
-  channels: _channels["default"].defaultProps.data,
-  services: [],
-  actions: [],
-  narrowActions: []
+  actions: _propTypes["default"].array
 };
 var _default = Header;
 exports["default"] = _default;