@twreporter/universal-header 2.2.0-rc.5

package/lib/components/icons.js

@@ -0,0 +1,276 @@
+"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 _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _searchBox = _interopRequireDefault(require("./search-box"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+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"));
+
+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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 _ = {
+  map: _map["default"]
+};
+var styles = {
+  iconContainerSize: 3 // em
+
+};
+
+var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__IconsContainer",
+  componentId: "ay66zn-0"
+})(["position:relative;display:table;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__IconContainer",
+  componentId: "ay66zn-1"
+})(["font-size:", ";cursor:pointer;display:table-cell;width:", "em;height:", "em;line-height:1;position:relative;opacity:", ";transition:opacity 600ms ease;a{display:flex;}svg{opacity:1;position:absolute;height:100%;top:0;left:30%;z-index:1;}"], _fonts["default"].size.base, styles.iconContainerSize, styles.iconContainerSize, function (props) {
+  return props.isSearchOpened ? '0' : '1';
+});
+
+var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__ShowOnHover",
+  componentId: "ay66zn-2"
+})(["display:none;", ":hover &{display:block;}"], IconContainer);
+
+var HideOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons__HideOnHover",
+  componentId: "ay66zn-3"
+})(["display:block;", ":hover &{display:none;}"], IconContainer);
+
+var Icons = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Icons, _React$PureComponent);
+
+  var _super = _createSuper(Icons);
+
+  function Icons(props) {
+    var _this;
+
+    _classCallCheck(this, Icons);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_handleLogIconClick", function (e, isAuthed, releaseBranch) {
+      e.preventDefault();
+      var redirectURL = window.location.href;
+
+      var query = _querystring["default"].stringify({
+        destination: redirectURL
+      });
+
+      if (isAuthed) {
+        window.location = _links["default"].getLogoutLink(releaseBranch).to + '?' + query;
+        return;
+      }
+
+      window.location = _links["default"].getLoginLink(releaseBranch).to + '?' + query;
+    });
+
+    _this.state = {
+      isSearchOpened: false
+    };
+    _this._closeSearchBox = _this._closeSearchBox.bind(_assertThisInitialized(_this));
+    _this._handleClickSearch = _this._handleClickSearch.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Icons, [{
+    key: "_closeSearchBox",
+    value: function _closeSearchBox() {
+      this.setState({
+        isSearchOpened: false
+      });
+    }
+  }, {
+    key: "_handleClickSearch",
+    value: function _handleClickSearch(e) {
+      e.preventDefault();
+      this.setState({
+        isSearchOpened: true
+      });
+    }
+  }, {
+    key: "_prepareIconJsx",
+    value: function _prepareIconJsx(service) {
+      var _this2 = this;
+
+      var isSearchOpened = this.state.isSearchOpened;
+
+      var Login = /*#__PURE__*/_react["default"].createElement(IconContainer, {
+        isSearchOpened: isSearchOpened,
+        key: "login"
+      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref) {
+        var releaseBranch = _ref.releaseBranch,
+            theme = _ref.theme;
+
+        var _themeUtils$selectSer = _slicedToArray(_theme["default"].selectServiceIcons(theme).login, 2),
+            LogInIcon = _themeUtils$selectSer[0],
+            LogInHoverIcon = _themeUtils$selectSer[1];
+
+        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+          onClick: function onClick(e) {
+            _this2._handleLogIconClick(e, false, releaseBranch);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(LogInIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(LogInHoverIcon, null)));
+      }));
+
+      var Logout = /*#__PURE__*/_react["default"].createElement(IconContainer, {
+        isSearchOpened: isSearchOpened,
+        key: "logout"
+      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+        var releaseBranch = _ref2.releaseBranch,
+            theme = _ref2.theme;
+
+        var _themeUtils$selectSer2 = _slicedToArray(_theme["default"].selectServiceIcons(theme).logout, 2),
+            LogOutIcon = _themeUtils$selectSer2[0],
+            LogOutHoverIcon = _themeUtils$selectSer2[1];
+
+        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+          onClick: function onClick(e) {
+            _this2._handleLogIconClick(e, true, releaseBranch);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(LogOutIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(LogOutHoverIcon, null)));
+      }));
+
+      var Search = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: "search"
+      }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
+        onClick: this._handleClickSearch,
+        isSearchOpened: isSearchOpened
+      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref3) {
+        var theme = _ref3.theme;
+
+        var _themeUtils$selectSer3 = _slicedToArray(_theme["default"].selectServiceIcons(theme).search, 2),
+            SearchIcon = _themeUtils$selectSer3[0],
+            SearchHoverIcon = _themeUtils$selectSer3[1];
+
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(SearchHoverIcon, null)));
+      })), /*#__PURE__*/_react["default"].createElement(_searchBox["default"], {
+        isSearchOpened: isSearchOpened,
+        closeSearchBox: this._closeSearchBox
+      }));
+
+      var Bookmark = /*#__PURE__*/_react["default"].createElement(IconContainer, {
+        isSearchOpened: isSearchOpened,
+        key: "bookmark"
+      }, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref4) {
+        var releaseBranch = _ref4.releaseBranch,
+            isLinkExternal = _ref4.isLinkExternal,
+            theme = _ref4.theme;
+
+        var _themeUtils$selectSer4 = _slicedToArray(_theme["default"].selectServiceIcons(theme).bookmark, 2),
+            BookmarkIcon = _themeUtils$selectSer4[0],
+            BookmarkHoverIcon = _themeUtils$selectSer4[1];
+
+        var link = _links["default"].getBookmarksLink(isLinkExternal, releaseBranch);
+
+        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(BookmarkHoverIcon, null)));
+      }));
+
+      switch (service) {
+        case 'login':
+          return Login;
+
+        case 'logout':
+          return Logout;
+
+        case 'search':
+          return Search;
+
+        case 'bookmarks':
+          return Bookmark;
+
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var services = this.props.services;
+      return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, _.map(services, function (service) {
+        return _this3._prepareIconJsx(service.key);
+      }));
+    }
+  }]);
+
+  return Icons;
+}(_react["default"].PureComponent);
+
+_defineProperty(Icons, "propTypes", {
+  services: _propTypes["default"].array
+});
+
+_defineProperty(Icons, "defaultProps", {
+  services: []
+});
+
+var _default = Icons;
+exports["default"] = _default;

package/lib/components/mobile-header.js

@@ -0,0 +1,264 @@
+"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 _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _hamburgerMenu = _interopRequireDefault(require("./hamburger-menu"));
+
+var _actionButton = _interopRequireDefault(require("./action-button"));
+
+var _slogan = _interopRequireDefault(require("./slogan"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 styles = {
+  headerHeight: {
+    mobile: 74,
+    // px
+    tablet: 88 // px
+
+  },
+  headerPadding: {
+    mobile: [24],
+    // px
+    tablet: [24, 30, 24, 50] //px
+
+  },
+  logoHeight: {
+    mobile: 26,
+    // px
+    tablet: 40 // px
+
+  },
+  logoWidth: {
+    mobile: 142,
+    // px
+    tablet: 190 // px
+
+  },
+  actionMarginLeft: {
+    mobile: 30,
+    // px
+    tablet: 22 // px
+
+  },
+  sloganMarginLeft: {
+    tablet: 14 // px
+
+  }
+};
+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 TabletOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__TabletOnly",
+  componentId: "sc-1vxvz2u-0"
+})(["display:none;", ""], _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n  "]))));
+
+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) {
+  return props.isHide ? "".concat(-styles.headerHeight.mobile, "px") : 0;
+}, function (props) {
+  return props.bgColor;
+}, (0, _css.arrayToCssShorthand)(styles.headerPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateY(", ");\n    padding: ", ";\n  "])), function (props) {
+  return props.isHide ? "".concat(-styles.headerHeight.tablet, "px") : 0;
+}, (0, _css.arrayToCssShorthand)(styles.headerPadding.tablet)));
+
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__FlexGroup",
+  componentId: "sc-1vxvz2u-2"
+})(["display:flex;"]);
+
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__LogoContainer",
+  componentId: "sc-1vxvz2u-3"
+})(["a{display:flex;}svg{height:", "px;width:", "px;", "}"], styles.logoHeight.mobile, styles.logoWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      height: ", "px;\n      width: ", "px;\n    "])), styles.logoHeight.tablet, styles.logoWidth.tablet));
+
+var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__ActionContainer",
+  componentId: "sc-1vxvz2u-4"
+})(["display:flex;align-items:center;margin-left:", "px;", ""], styles.actionMarginLeft.mobile, _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-left: ", "px;\n  "])), styles.actionMarginLeft.tablet));
+
+var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__SloganContainer",
+  componentId: "sc-1vxvz2u-5"
+})(["display:flex;align-items:center;margin-left:", "px;", ""], styles.sloganMarginLeft.tablet, SloganEffect);
+
+var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__HamburgerContainer",
+  componentId: "sc-1vxvz2u-6"
+})(["display:block;"]);
+
+var Hamburger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-header__Hamburger",
+  componentId: "sc-1vxvz2u-7"
+})(["display:flex;cursor:pointer;"]);
+
+var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MobileHeader, _React$PureComponent);
+
+  var _super = _createSuper(MobileHeader);
+
+  function MobileHeader(props) {
+    var _this;
+
+    _classCallCheck(this, MobileHeader);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      isMenuOpen: false
+    };
+    _this.handleOnHamburgerClick = _this._handleOnHamburgerClick.bind(_assertThisInitialized(_this));
+    _this.closeMenu = _this._closeMenu.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(MobileHeader, [{
+    key: "_handleOnHamburgerClick",
+    value: function _handleOnHamburgerClick() {
+      this.setState({
+        isMenuOpen: !this.state.isMenuOpen
+      });
+    }
+  }, {
+    key: "_closeMenu",
+    value: function _closeMenu() {
+      this.setState({
+        isMenuOpen: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          actions = _this$props.actions,
+          narrowActions = _this$props.narrowActions,
+          menuChannels = _this$props.menuChannels,
+          menuServices = _this$props.menuServices,
+          menuActions = _this$props.menuActions;
+      var isMenuOpen = this.state.isMenuOpen;
+
+      var hamburgerJSX = /*#__PURE__*/_react["default"].createElement(_hamburgerMenu["default"], {
+        channels: menuChannels,
+        services: menuServices,
+        actions: menuActions,
+        handleClose: this.closeMenu
+      });
+
+      var hamburgerMenu = isMenuOpen ? hamburgerJSX : '';
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HamburgerContainer, null, hamburgerMenu), /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref) {
+        var releaseBranch = _ref.releaseBranch,
+            isLinkExternal = _ref.isLinkExternal,
+            theme = _ref.theme,
+            toUseNarrow = _ref.toUseNarrow,
+            hideHeader = _ref.hideHeader;
+
+        var Logo = _theme["default"].selectLogoComponent(theme);
+
+        var bgColor = _theme["default"].selectBgColor(theme);
+
+        var MenuIcon = _theme["default"].selectIcons(theme).menu;
+
+        return /*#__PURE__*/_react["default"].createElement(FlexBox, {
+          bgColor: bgColor,
+          isHide: hideHeader
+        }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, _links["default"].getLogoLink(isLinkExternal, releaseBranch), {
+          onClick: _this2.closeMenu
+        }), /*#__PURE__*/_react["default"].createElement(Logo, null))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
+          actions: toUseNarrow ? narrowActions : actions
+        })), /*#__PURE__*/_react["default"].createElement(TabletOnly, null, /*#__PURE__*/_react["default"].createElement(SloganContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+          "in": !toUseNarrow,
+          classNames: "slogan-effect",
+          timeout: {
+            appear: 0,
+            enter: 700,
+            exit: 700
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))))), /*#__PURE__*/_react["default"].createElement(Hamburger, {
+          onClick: _this2.handleOnHamburgerClick
+        }, /*#__PURE__*/_react["default"].createElement(MenuIcon, null)));
+      }));
+    }
+  }]);
+
+  return MobileHeader;
+}(_react["default"].PureComponent);
+
+exports["default"] = MobileHeader;
+
+_defineProperty(MobileHeader, "propTypes", {
+  actions: _propTypes["default"].array,
+  menuChannels: _propTypes["default"].array,
+  menuServices: _propTypes["default"].array,
+  menuActions: _propTypes["default"].array
+});
+
+_defineProperty(MobileHeader, "defaultProps", {
+  actions: [],
+  menuChannels: [],
+  menuServices: [],
+  menuActions: []
+});