@twreporter/universal-header 2.2.0-rc.5

package/lib/components/hamburger-icons.js

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _links = _interopRequireDefault(require("../utils/links"));
+
+var _querystring = _interopRequireDefault(require("querystring"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  map: _map["default"]
+};
+var styles = {
+  iconHeight: {
+    mobile: 42,
+    // px
+    tablet: 60 // px
+
+  },
+  iconWidth: {
+    mobile: 42,
+    // px
+    tablet: 60 // px
+
+  }
+};
+
+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));
+
+var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-icons__IconsContainer",
+  componentId: "sc-11ma9zq-1"
+})(["display:flex;", "{border:1px solid;border-radius:50%;border-color:", ";}"], IconContainer, function (props) {
+  return props.borderColor;
+});
+
+var Login = function Login(_ref) {
+  var callback = _ref.callback;
+
+  var handleLogin = function handleLogin(releaseBranch) {
+    var redirectURL = window.location.href;
+
+    var query = _querystring["default"].stringify({
+      destination: redirectURL
+    });
+
+    window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+  };
+
+  var handleClick = function handleClick(e, releaseBranch) {
+    e.preventDefault();
+    handleLogin(releaseBranch);
+    callback();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var releaseBranch = _ref2.releaseBranch,
+        theme = _ref2.theme;
+
+    var _themeUtils$selectHam = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).login, 1),
+        LogInIcon = _themeUtils$selectHam[0];
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+      onClick: function onClick(e) {
+        return handleClick(e, releaseBranch);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(LogInIcon, null));
+  }));
+};
+
+Login.propTypes = {
+  callback: _propTypes["default"].func
+};
+Login.defaultProps = {
+  callback: function callback() {}
+};
+
+var Logout = function Logout(_ref3) {
+  var callback = _ref3.callback;
+
+  var handleLogout = function handleLogout(releaseBranch) {
+    var redirectURL = window.location.href;
+
+    var query = _querystring["default"].stringify({
+      destination: redirectURL
+    });
+
+    window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+  };
+
+  var handleClick = function handleClick(e, releaseBranch) {
+    e.preventDefault();
+    handleLogout(releaseBranch);
+    callback();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref4) {
+    var releaseBranch = _ref4.releaseBranch,
+        theme = _ref4.theme;
+
+    var _themeUtils$selectHam2 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).logout, 1),
+        LogOutIcon = _themeUtils$selectHam2[0];
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+      onClick: function onClick(e) {
+        return handleClick(e, releaseBranch);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(LogOutIcon, null));
+  }));
+};
+
+Logout.propTypes = {
+  callback: _propTypes["default"].func
+};
+Logout.defaultProps = {
+  callback: function callback() {}
+};
+
+var Search = function Search(_ref5) {
+  var callback = _ref5.callback;
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref6) {
+    var releaseBranch = _ref6.releaseBranch,
+        isLinkExternal = _ref6.isLinkExternal,
+        theme = _ref6.theme;
+
+    var _themeUtils$selectHam3 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).search, 1),
+        SearchIcon = _themeUtils$selectHam3[0];
+
+    var link = _links["default"].getSearchLink(isLinkExternal, releaseBranch);
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
+      onClick: callback
+    }), /*#__PURE__*/_react["default"].createElement(SearchIcon, null));
+  }));
+};
+
+Search.propTypes = {
+  callback: _propTypes["default"].func
+};
+Search.defaultProps = {
+  callback: function callback() {}
+};
+
+var Bookmark = function Bookmark(_ref7) {
+  var callback = _ref7.callback;
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref8) {
+    var releaseBranch = _ref8.releaseBranch,
+        isLinkExternal = _ref8.isLinkExternal,
+        theme = _ref8.theme;
+
+    var _themeUtils$selectHam4 = _slicedToArray(_theme["default"].selectHamburgerServiceIcons(theme).bookmark, 1),
+        BookmarkIcon = _themeUtils$selectHam4[0];
+
+    var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+
+    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
+      onClick: callback
+    }), /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null));
+  }));
+};
+
+Bookmark.propTypes = {
+  callback: _propTypes["default"].func
+};
+Bookmark.defaultProps = {
+  callback: function callback() {}
+};
+
+var HamburgerService = function HamburgerService(_ref9) {
+  var services = _ref9.services,
+      callback = _ref9.callback;
+
+  var _prepareIconJsx = function _prepareIconJsx(service) {
+    var serviceKey = service.key;
+
+    switch (serviceKey) {
+      case 'login':
+        return /*#__PURE__*/_react["default"].createElement(Login, {
+          callback: callback,
+          key: serviceKey
+        });
+
+      case 'logout':
+        return /*#__PURE__*/_react["default"].createElement(Logout, {
+          callback: callback,
+          key: serviceKey
+        });
+
+      case 'search':
+        return /*#__PURE__*/_react["default"].createElement(Search, {
+          callback: callback,
+          key: serviceKey
+        });
+
+      case 'bookmarks':
+        return /*#__PURE__*/_react["default"].createElement(Bookmark, {
+          callback: callback,
+          key: serviceKey
+        });
+
+      default:
+        return null;
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref10) {
+    var theme = _ref10.theme;
+
+    var _themeUtils$selectHam5 = _theme["default"].selectHamburgerServiceTheme(theme),
+        borderColor = _themeUtils$selectHam5.borderColor;
+
+    return /*#__PURE__*/_react["default"].createElement(IconsContainer, {
+      borderColor: borderColor
+    }, _.map(services, function (service) {
+      return _prepareIconJsx(service);
+    }));
+  });
+};
+
+HamburgerService.propTypes = {
+  services: _propTypes["default"].array,
+  callback: _propTypes["default"].func
+};
+HamburgerService.defaultProps = {
+  services: [],
+  callback: function callback() {}
+};
+var _default = HamburgerService;
+exports["default"] = _default;

package/lib/components/hamburger-menu.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mobilePopUpModal = _interopRequireDefault(require("@twreporter/react-components/lib/mobile-pop-up-modal"));
+
+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"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 styles = {
+  closeButtonHeight: {
+    mobile: 42,
+    // px
+    tablet: 60 // px
+
+  },
+  sloganMargin: {
+    mobile: [28, 0],
+    tablet: [38, 0]
+  },
+  channelMargin: {
+    mobile: [20, 0, 0, 0],
+    tablet: [40, 0, 0, 0]
+  },
+  serviceMargin: {
+    mobile: [16, 0, 22, 0],
+    tablet: [24, 0, 42, 0]
+  }
+};
+
+var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__MenuContainer",
+  componentId: "sc-15rzowt-0"
+})(["background-color:", ";display:flex;flex-direction:column;justify-content:space-between;height:auto;min-height:100%;"], function (props) {
+  return props.bgColor;
+});
+
+var CloseContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__CloseContainer",
+  componentId: "sc-15rzowt-1"
+})(["position:absolute;top:10px;right:10px;height:", "px;width:", "px;", ""], styles.closeButtonHeight.mobile, styles.closeButtonHeight.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n  "])), styles.closeButtonHeight.tablet, styles.closeButtonHeight.tablet));
+
+var FlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__FlexBox",
+  componentId: "sc-15rzowt-2"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__SloganContainer",
+  componentId: "sc-15rzowt-3"
+})(["margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.sloganMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sloganMargin.tablet)));
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__ActionContainer",
+  componentId: "sc-15rzowt-4"
+})(["width:100%;padding:0 30px;"]);
+
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__ChannelContainer",
+  componentId: "sc-15rzowt-5"
+})(["width:100%;margin:10px 0;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.channelMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.channelMargin.tablet)));
+
+var ServiceContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "hamburger-menu__ServiceContainer",
+  componentId: "sc-15rzowt-6"
+})(["position:relative;bottom:0;display:flex;justify-content:center;align-items:center;width:100%;margin:", ";", ""], (0, _css.arrayToCssShorthand)(styles.serviceMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.serviceMargin.tablet)));
+
+var HamburgerMenu = function HamburgerMenu(_ref) {
+  var channels = _ref.channels,
+      services = _ref.services,
+      actions = _ref.actions,
+      handleClose = _ref.handleClose;
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+    var theme = _ref2.theme;
+
+    var _themeUtils$selectHam = _theme["default"].selectHamburgerMenuTheme(theme),
+        bgColor = _themeUtils$selectHam.bgColor;
+
+    var CloseIcon = _theme["default"].selectIcons(theme).close;
+
+    var closeJSX = /*#__PURE__*/_react["default"].createElement(CloseContainer, {
+      onClick: handleClose
+    }, /*#__PURE__*/_react["default"].createElement(CloseIcon, null));
+
+    return /*#__PURE__*/_react["default"].createElement(_mobilePopUpModal["default"], null, /*#__PURE__*/_react["default"].createElement(MenuContainer, {
+      bgColor: bgColor
+    }, closeJSX, /*#__PURE__*/_react["default"].createElement(FlexBox, null, /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], {
+      themeFunction: _theme["default"].selectSloganHBTheme
+    })), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
+      actions: actions,
+      direction: "column",
+      themeFunction: _theme["default"].selectActionButtonHBTheme,
+      callback: handleClose
+    })), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
+      data: channels,
+      direction: "column",
+      currentPathname: "",
+      themeFunction: _theme["default"].selectChannelHBTheme,
+      callback: handleClose
+    }))), /*#__PURE__*/_react["default"].createElement(ServiceContainer, null, /*#__PURE__*/_react["default"].createElement(_hamburgerIcons["default"], {
+      services: services,
+      callback: handleClose
+    }))));
+  });
+};
+
+HamburgerMenu.propTypes = {
+  channels: _propTypes["default"].array,
+  services: _propTypes["default"].array,
+  actions: _propTypes["default"].array,
+  handleClose: _propTypes["default"].func
+};
+HamburgerMenu.defaultProps = {
+  channels: [],
+  services: [],
+  actions: [],
+  handleClose: function handleClose() {}
+};
+var _default = HamburgerMenu;
+exports["default"] = _default;

package/lib/components/header.js

@@ -0,0 +1,233 @@
+"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 _colors = _interopRequireDefault(require("../constants/colors"));
+
+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 _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+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 }; }
+
+// @twreporter
+var CHANNEL_HEIGHT = 37; // 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
+
+  },
+  channelBottomBorderWidth: [1, 0, 1, 0] // px
+
+};
+
+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 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 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) {
+  return props.isHide ? "".concat(-styles.headerHeight.narrow, "px") : 0;
+}, function (props) {
+  return props.bgColor;
+}, HeaderEffect);
+
+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);
+
+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);
+
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__FlexGroup",
+  componentId: "sc-1krza7i-3"
+})(["display:flex;"]);
+
+var FlexItem = /*#__PURE__*/(0, _styledComponents.css)(["margin-right:14px;display:flex;align-items:center;"]);
+
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__LogoContainer",
+  componentId: "sc-1krza7i-4"
+})(["", " ", ""], FlexItem, LogoEffect);
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__SloganContainer",
+  componentId: "sc-1krza7i-5"
+})(["", " ", ""], FlexItem, SloganEffect);
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__ActionContainer",
+  componentId: "sc-1krza7i-6"
+})(["", " ", ""], FlexItem, ActionEffect);
+
+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);
+
+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 bgColor = _theme["default"].selectBgColor(theme);
+
+    var Logo = _theme["default"].selectLogoComponent(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: 700,
+        exit: 700
+      }
+    }, /*#__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
+      }
+    }, /*#__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
+      }
+    }, /*#__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: 700,
+        exit: 700
+      }
+    }, /*#__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
+      },
+      unmountOnExit: true
+    }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
+      currentPathname: pathname,
+      data: channels
+    }))), /*#__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: 700,
+        exit: 300
+      },
+      unmountOnExit: true
+    }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
+      currentPathname: pathname,
+      data: channels,
+      borderWidth: styles.channelBottomBorderWidth
+    }))));
+  });
+};
+
+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: []
+};
+var _default = Header;
+exports["default"] = _default;