@twreporter/universal-header 2.2.0-rc.9 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.12...@twreporter/universal-header@2.2.0) (2021-10-12)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+# [2.2.0-rc.12](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.11...@twreporter/universal-header@2.2.0-rc.12) (2021-10-12)
+
+
+### Bug Fixes
+
+* **universal-header:** remove channel underline active UI ([87dfdb8](https://github.com/twreporter/twreporter-npm-packages/commit/87dfdb80f02807ac24b7781a6b9459127d31817e))
+
+
+
+
+
+# [2.2.0-rc.11](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.10...@twreporter/universal-header@2.2.0-rc.11) (2021-10-08)
+
+
+### Bug Fixes
+
+* **universal-header:** fix ui defect ([a1592da](https://github.com/twreporter/twreporter-npm-packages/commit/a1592da85a0f3f9e38fe86b0f5ef86a8a1c83ba6))
+
+
+
+
+
+# [2.2.0-rc.10](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.9...@twreporter/universal-header@2.2.0-rc.10) (2021-10-07)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
 # [2.2.0-rc.9](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.8...@twreporter/universal-header@2.2.0-rc.9) (2021-10-06)
 
 

package/lib/components/action-button.js

@@ -105,15 +105,17 @@ var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button__ActionContainer",
   componentId: "sc-4wc24t-1"
-})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
+})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";pointer-events:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
   return props.isActive ? 1 : 0;
+}, function (props) {
+  return props.isActive ? 'auto' : 'none';
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
 }, function (props) {
   return props.color || _colors["default"].white;
-}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+}, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
   return styles.fontSize.tablet[props.direction];
-}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-size: ", ";\n    "])), function (props) {
+}), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
   return styles.fontSize.mobile[props.direction];
 }));
 

package/lib/components/channels.js

@@ -19,8 +19,6 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _theme = _interopRequireDefault(require("../utils/theme"));
 
-var _animations = _interopRequireDefault(require("../utils/animations"));
-
 var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
 var _channels = _interopRequireDefault(require("../constants/channels"));
@@ -33,12 +31,16 @@ var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
 
 var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _css = require("@twreporter/core/lib/utils/css");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _templateObject;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -81,6 +83,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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 _ = {
   get: _get["default"],
   map: _map["default"]
@@ -117,7 +121,6 @@ var styles = {
   }
 };
 var dropDownMenuEffectCSS = /*#__PURE__*/(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 400ms ease-in 100ms;}"]);
-var linkUnderline = /*#__PURE__*/(0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:-1px;display:block;content:'';width:100%;height:4px;background-color:#a67a44;"], _animations["default"].changeOpacity('0', '1'));
 
 var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__DropDownMenuWrapper",
@@ -149,7 +152,7 @@ var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "channels__ListItem",
   componentId: "nu2llv-3"
-})(["display:flex;flex-direction:", ";position:relative;width:", ";height:100%;font-size:", ";letter-spacing:0.5px;cursor:pointer;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}&::after{", "}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}}"], function (props) {
+})(["display:flex;flex-direction:", ";position:relative;width:", ";height:100%;font-size:", ";letter-spacing:0.5px;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}", "}"], function (props) {
   return props.direction;
 }, function (props) {
   return styles.itemWidth[props.direction];
@@ -159,8 +162,6 @@ var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   return (0, _css.arrayToCssShorthand)(styles.itemBorderWidth[props.direction]);
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemBorderWidthFirstChild[props.direction]);
-}, function (props) {
-  return props.isActive && props.direction === 'row' ? linkUnderline : '';
 }, _fonts["default"].size.base, _fonts["default"].weight.bold, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemPadding[props.direction]);
 }, function (props) {
@@ -169,7 +170,7 @@ var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   return props.hoverBgColor;
 }, function (props) {
   return props.hoverFontColor;
-});
+}, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n    "]))));
 
 var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__ShowOnHover",
@@ -346,10 +347,8 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
           direction = _this$props2.direction,
           borderWidth = _this$props2.borderWidth,
           themeFunction = _this$props2.themeFunction;
-      var activeDataIndex = this.state.activeDataIndex;
 
       var channelsJSX = _.map(data, function (channelItem, dataIndex) {
-        var isActive = activeDataIndex === dataIndex;
         return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, {
           key: channelItem.key
         }, function (_ref) {
@@ -364,7 +363,6 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
 
           return /*#__PURE__*/_react["default"].createElement(ListItem, {
             direction: direction,
-            isActive: isActive,
             onClick: _this3.handleClickChannel,
             fontColor: fontColor,
             hoverFontColor: hoverFontColor,

package/lib/components/hamburger-icons.js

@@ -66,7 +66,7 @@ var styles = {
 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));
+})(["height:", "px;width:", "px;display:flex;justify-content:center;align-items:center;margin-right:17px;a{display:flex;cursor:default;}", ""], 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",

package/lib/components/header.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -39,23 +39,11 @@ var _css = require("@twreporter/core/lib/utils/css");
 
 var _templateObject;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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 _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 _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) } })); }
 
@@ -172,12 +160,6 @@ var Header = function Header(_ref) {
       services = _ref.services,
       actions = _ref.actions,
       narrowActions = _ref.narrowActions;
-
-  var _useState = (0, _react.useState)(pathname),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentPathname = _useState2[0],
-      setPathname = _useState2[1];
-
   return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
     var releaseBranch = _ref2.releaseBranch,
         isLinkExternal = _ref2.isLinkExternal,
@@ -238,10 +220,9 @@ var Header = function Header(_ref) {
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
-      currentPathname: currentPathname,
+      currentPathname: pathname,
       data: channels,
-      borderWidth: styles.channelTopBorderWidth,
-      callback: setPathname
+      borderWidth: styles.channelTopBorderWidth
     }))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
       headerType: toUseNarrow ? 'narrow' : 'wide',
       borderColor: borderColor
@@ -257,10 +238,9 @@ var Header = function Header(_ref) {
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
-      currentPathname: currentPathname,
+      currentPathname: pathname,
       data: channels,
-      borderWidth: styles.channelBottomBorderWidth,
-      callback: setPathname
+      borderWidth: styles.channelBottomBorderWidth
     }))));
   });
 };

package/lib/components/mobile-header.js

@@ -35,7 +35,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _css = require("@twreporter/core/lib/utils/css");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -81,6 +81,12 @@ var styles = {
     // px
     tablet: [24, 30, 24, 50] // px
 
+  },
+  hamburgerPadding: {
+    mobile: [24],
+    // px
+    tablet: [24, 30] // px
+
   },
   logoHeight: {
     mobile: 26,
@@ -151,7 +157,7 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
 var Hamburger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-header__Hamburger",
   componentId: "sc-1vxvz2u-7"
-})(["display:flex;cursor:pointer;"]);
+})(["display:flex;position:absolute;right:0;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.hamburgerPadding.mobile), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.hamburgerPadding.tablet)));
 
 var MobileHeader = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(MobileHeader, _React$PureComponent);

package/lib/components/slogan.js

@@ -32,7 +32,7 @@ var style = {
 var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
-})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;"], function (props) {
+})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;cursor:default;"], function (props) {
   return props.color || _colors["default"].grayDark;
 }, style.fontSize.desktop, _fonts["default"].family.serif);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.2.0-rc.9",
+  "version": "2.2.0",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@twreporter/core": "^1.2.1",
-    "@twreporter/react-components": "^8.5.0-rc.1",
+    "@twreporter/react-components": "^8.5.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "81aa803c1e1cb4cfa5a858e5d2ba6bb502c4fef3"
+  "gitHead": "b482beff13f1826cc6698022aff715194d6a4b4f"
 }