@twreporter/universal-header 2.4.3-rc.0 → 2.4.3-rc.10

package/lib/components/action-button-item.stories.js

@@ -15,6 +15,8 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _actionItemTypes = require("../constants/action-item-types");
 
+var _constants = require("../storybook/constants");
+
 var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -24,7 +26,7 @@ var _default = {
   title: 'Action Button',
   component: _actionButtonItem["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
     direction: _actionItemTypes.DIRECTION_STORYBOOK_ARG_TYPE,
     textType: _actionItemTypes.TEXT_STORYBOOK_ARG_TYPE,
     buttonWidth: _actionItemTypes.BUTTON_WIDTH_STORYBOOK_ARG_TYPE,

package/lib/components/channels.js

@@ -17,6 +17,8 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _links = require("../utils/links");
 
+var _channels = require("../constants/channels");
+
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _categorySet = require("@twreporter/core/lib/constants/category-set");
@@ -29,6 +31,10 @@ var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _reduce = _interopRequireDefault(require("lodash/reduce"));
+
+var _concat = _interopRequireDefault(require("lodash/concat"));
+
 var _excluded = ["onClickHambuger"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -42,7 +48,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var _ = {
-  map: _map["default"]
+  map: _map["default"],
+  reduce: _reduce["default"],
+  concat: _concat["default"]
 };
 
 var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -60,37 +68,75 @@ var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
   componentId: "nu2llv-2"
 })(["display:flex;flex-direction:column;align-items:center;"]);
 
-var Channel = function Channel(_ref) {
-  var onClickHambuger = _ref.onClickHambuger,
-      props = _objectWithoutProperties(_ref, _excluded);
+var ChannelItem = function ChannelItem(_ref) {
+  var _ref$link = _ref.link,
+      link = _ref$link === void 0 ? {} : _ref$link,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label;
 
   var _useContext = (0, _react.useContext)(_headerContext["default"]),
-      isLinkExternal = _useContext.isLinkExternal,
-      releaseBranch = _useContext.releaseBranch,
       theme = _useContext.theme;
 
-  var CategoryJsx = _.map(_categorySet.CATEGORY_ORDER, function (categoryKey) {
-    var label = _categorySet.CATEGORY_LABEL[categoryKey];
-    var path = "/categories/".concat(categoryKey);
-    var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, path);
-    return /*#__PURE__*/_react["default"].createElement(Item, {
-      key: categoryKey
-    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
-      text: label,
-      size: "L",
-      theme: theme
-    })));
-  });
+  return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+    text: label,
+    size: "L",
+    theme: theme
+  })));
+};
+
+ChannelItem.propTypes = {
+  link: _propTypes["default"].object,
+  label: _propTypes["default"].string
+};
+
+var Channel = function Channel(_ref2) {
+  var onClickHambuger = _ref2.onClickHambuger,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
+      isLinkExternal = _useContext2.isLinkExternal,
+      releaseBranch = _useContext2.releaseBranch,
+      theme = _useContext2.theme;
 
   var hamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
     releaseBranch: releaseBranch
   });
 
+  var ItemJSX = _.reduce(_channels.DESKTOP_CHANNEL_ORDER, function (res, channelKey) {
+    if (channelKey === _channels.CHANNEL_KEY.category) {
+      var categoryJSX = _.map(_categorySet.CATEGORY_ORDER, function (categoryKey) {
+        var label = _categorySet.CATEGORY_LABEL[categoryKey];
+        var path = "/categories/".concat(categoryKey);
+        var link = (0, _links.getLink)(isLinkExternal, releaseBranch, path);
+        return /*#__PURE__*/_react["default"].createElement(ChannelItem, {
+          key: categoryKey,
+          label: label,
+          link: link
+        });
+      });
+
+      res = _.concat(res, categoryJSX);
+    } else {
+      var label = _channels.CHANNEL_LABEL[channelKey];
+      var link = (0, _links.getLink)(isLinkExternal, releaseBranch, _channels.CHANNEL_PATH[channelKey]);
+
+      if (label && link) {
+        res.push( /*#__PURE__*/_react["default"].createElement(ChannelItem, {
+          key: channelKey,
+          label: label,
+          link: link
+        }));
+      }
+    }
+
+    return res;
+  }, []);
+
   return /*#__PURE__*/_react["default"].createElement(ChannelContainer, props, /*#__PURE__*/_react["default"].createElement(CategoryContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: hamburgerIcon,
     theme: theme,
     onClick: onClickHambuger
-  }), CategoryJsx), /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
+  }), ItemJSX), /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
 };
 
 Channel.propTypes = {

package/lib/components/channels.stories.js

@@ -11,9 +11,7 @@ var _channels = _interopRequireDefault(require("./channels"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
-
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -22,8 +20,8 @@ var _default = {
   title: 'Channel',
   component: _channels["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/hamburger-footer.stories.js

@@ -15,7 +15,7 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _theme = require("@twreporter/core/lib/constants/theme");
 
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,8 +24,8 @@ var _default = {
   title: 'Hamburger/Footer',
   component: _hamburgerFooter["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/hamburger-menu-item.stories.js

@@ -15,9 +15,9 @@ var _hamburgerMenuItem = require("./hamburger-menu-item");
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../storybook/constants");
 
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -37,8 +37,8 @@ var _default = {
   title: 'Hamburger/Item',
   component: _hamburgerMenuItem.MenuLinkItem,
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/hamburger-menu.js

@@ -177,7 +177,7 @@ var DropdownContent = function DropdownContent(_ref) {
     subItemJSX = _.map(_categorySet.CATEGORY_ORDER, function (catKey) {
       var label = _categorySet.CATEGORY_LABEL[catKey];
       var path = "/categories/".concat(catKey);
-      var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, path);
+      var link = (0, _links.getLink)(isLinkExternal, releaseBranch, path);
 
       if (!label || !link) {
         return;
@@ -209,7 +209,7 @@ var DropdownContent = function DropdownContent(_ref) {
         path = subItem.path;
       }
 
-      var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, path);
+      var link = (0, _links.getLink)(isLinkExternal, releaseBranch, path);
 
       if (!label || !link) {
         return;

package/lib/components/hamburger-menu.stories.js

@@ -11,9 +11,7 @@ var _hamburgerMenu = _interopRequireDefault(require("./hamburger-menu"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
-
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -22,8 +20,8 @@ var _default = {
   title: 'Hamburger/Menu',
   component: _hamburgerMenu["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/header.js

@@ -123,7 +123,7 @@ var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var MobileLogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__MobileLogoContainer",
   componentId: "sc-1krza7i-3"
-})(["display:flex;align-items:center;img{height:21px;}"]);
+})(["display:flex;align-items:center;img{height:21px;}a{display:flex;}"]);
 
 var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideWhenNarrow",

package/lib/components/header.stories.js

@@ -11,14 +11,11 @@ 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");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /* eslint-disable react/prop-types */
-// @twerporter
 var _default = {
   title: 'Header/Universal',
   component: _header["default"],
@@ -41,8 +38,8 @@ var _default = {
         type: 'boolean'
       }
     },
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/icons.stories.js

@@ -13,9 +13,7 @@ var _icons = _interopRequireDefault(require("./icons"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
-
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -30,8 +28,8 @@ var _default = {
         type: 'boolean'
       }
     },
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/slogan.stories.js

@@ -11,7 +11,7 @@ var _slogan = _interopRequireDefault(require("./slogan"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -20,7 +20,7 @@ var _default = {
   title: 'Slogan',
   component: _slogan["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/components/tab-bar.stories.js

@@ -13,9 +13,7 @@ var _tabBar = _interopRequireDefault(require("./tab-bar"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = require("@twreporter/core/lib/constants/theme");
-
-var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+var _constants = require("../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,8 +22,8 @@ var _default = {
   title: 'Tab Bar',
   component: _tabBar["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

package/lib/constants/channels.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CHANNEL_ORDER = exports.CHANNEL_DROPDOWN = exports.CHANNEL_TYPE = exports.CHANNEL_DROPDOWN_TYPE = exports.CHANNEL_LINK_TYPE = exports.CHANNEL_LABEL = exports.CHANNEL_PATH = exports.CHANNEL_KEY = void 0;
+exports["default"] = exports.DESKTOP_CHANNEL_ORDER = exports.CHANNEL_ORDER = exports.CHANNEL_DROPDOWN = exports.CHANNEL_TYPE = exports.CHANNEL_DROPDOWN_TYPE = exports.CHANNEL_LINK_TYPE = exports.CHANNEL_LABEL = exports.CHANNEL_PATH = exports.CHANNEL_KEY = void 0;
 
 var _infogram = require("@twreporter/core/lib/constants/infogram");
 
@@ -63,12 +63,15 @@ var CHANNEL_DROPDOWN = (_CHANNEL_DROPDOWN = {}, _defineProperty(_CHANNEL_DROPDOW
 exports.CHANNEL_DROPDOWN = CHANNEL_DROPDOWN;
 var CHANNEL_ORDER = [channelKey.latest, 'divider', channelKey.topic, channelKey.category, channelKey.opinion, channelKey.humanStory, 'divider', channelKey.photography, channelKey.podcast, channelKey.kidsReporter, channelKey.infographic, 'divider'];
 exports.CHANNEL_ORDER = CHANNEL_ORDER;
+var DESKTOP_CHANNEL_ORDER = [channelKey.latest, channelKey.topic, channelKey.category];
+exports.DESKTOP_CHANNEL_ORDER = DESKTOP_CHANNEL_ORDER;
 var _default = {
   CHANNEL_LINK_TYPE: CHANNEL_LINK_TYPE,
   CHANNEL_DROPDOWN_TYPE: CHANNEL_DROPDOWN_TYPE,
   CHANNEL_PATH: CHANNEL_PATH,
   CHANNEL_LABEL: CHANNEL_LABEL,
   CHANNEL_TYPE: CHANNEL_TYPE,
-  CHANNEL_ORDER: CHANNEL_ORDER
+  CHANNEL_ORDER: CHANNEL_ORDER,
+  DESKTOP_CHANNEL_ORDER: DESKTOP_CHANNEL_ORDER
 };
 exports["default"] = _default;

package/lib/storybook/constants/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.THEME_STORYBOOK_ARG_TYPE = exports.BRANCH_STORYBOOK_ARG_TYPE = void 0;
+
+var _getEnumArg = require("../utils/get-enum-arg");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var BRANCH_STORYBOOK_ARG_TYPE = {
+  defaultValue: _releaseBranch.BRANCH.master,
+  options: [_releaseBranch.BRANCH.master, _releaseBranch.BRANCH.staging, _releaseBranch.BRANCH.preview, _releaseBranch.BRANCH.release],
+  control: {
+    type: 'radio'
+  }
+};
+exports.BRANCH_STORYBOOK_ARG_TYPE = BRANCH_STORYBOOK_ARG_TYPE;
+var THEME_STORYBOOK_ARG_TYPE = (0, _getEnumArg.getRadioArg)(_theme.THEME, _theme.THEME.normal);
+exports.THEME_STORYBOOK_ARG_TYPE = THEME_STORYBOOK_ARG_TYPE;

package/lib/storybook/utils/get-enum-arg.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadioArg = void 0;
+
+var getRadioArg = function getRadioArg(enumObject, defaultValue) {
+  return {
+    defaultValue: defaultValue,
+    options: Object.values(enumObject),
+    control: {
+      type: 'radio'
+    }
+  };
+};
+
+exports.getRadioArg = getRadioArg;

package/lib/utils/links.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getLink = getLink;
 exports.getLogoutLink = getLogoutLink;
 exports.getLoginLink = getLoginLink;
 exports.getBookmarksLink = getBookmarksLink;
@@ -13,7 +14,7 @@ exports.getFooterLinks = getFooterLinks;
 exports.getSocialMediaLinks = getSocialMediaLinks;
 exports.getChannelLinks = getChannelLinks;
 exports.getTabBarLinks = getTabBarLinks;
-exports.getCategoryLink = exports.checkPathnameParent = exports.checkReferrer = void 0;
+exports.checkPathnameParent = exports.checkReferrer = void 0;
 
 var _services = require("../constants/services");
 
@@ -126,14 +127,12 @@ var checkPathnameParent = function checkPathnameParent() {
 
 exports.checkPathnameParent = checkPathnameParent;
 
-var getCategoryLink = function getCategoryLink() {
+function getLink() {
   var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
   var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return __getLink(isExternal, releaseBranch, mainBaseURL, path);
-};
-
-exports.getCategoryLink = getCategoryLink;
+}
 
 function getLogoutLink() {
   var releaseBranch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultReleaseBranch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.4.3-rc.0",
+  "version": "2.4.3-rc.10",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -20,8 +20,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@twreporter/core": "^1.8.3-rc.0",
-    "@twreporter/react-components": "^8.16.1-rc.0",
+    "@twreporter/core": "^1.9.0-rc.0",
+    "@twreporter/react-components": "^8.17.0-rc.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -48,5 +48,5 @@
     "@storybook/testing-library": "^0.0.13",
     "babel-loader": "^8.2.5"
   },
-  "gitHead": "eed87490bc83bfada4d624237e1a94c60eade5fb"
+  "gitHead": "06d73321c9a5faf2cb6aac855a6c9eca59d4d59d"
 }