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

package/lib/components/header.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.header = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: 'Header/Desktop',
+  component: _header["default"],
+  argTypes: {
+    toUseNarrow: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+var defaultActions = [{
+  key: 'newsLetter'
+}, {
+  key: 'support'
+}];
+
+var header = function header(props) {
+  var theme = props.theme,
+      releaseBranch = props.releaseBranch,
+      toUseNarrow = props.toUseNarrow;
+  var context = {
+    theme: theme,
+    releaseBranch: releaseBranch,
+    toUseNarrow: toUseNarrow,
+    isLinkExternal: true
+  };
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
+    actions: defaultActions
+  }));
+};
+
+exports.header = header;
+header.parameters = {
+  controls: {
+    exclude: ['pathname', 'actions']
+  }
+};

package/lib/components/icons-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 _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 _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-old__IconsContainer",
+  componentId: "n1dgyi-0"
+})(["position:relative;display:table;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__IconContainer",
+  componentId: "n1dgyi-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-old__ShowOnHover",
+  componentId: "n1dgyi-2"
+})(["display:none;", ":hover &{display:block;}"], IconContainer);
+
+var HideOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "icons-old__HideOnHover",
+  componentId: "n1dgyi-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;