@twreporter/react-components 8.14.0-rc.2 → 8.15.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.14.0...@twreporter/react-components@8.15.0-rc.0) (2022-10-27)
+
+
+### Bug Fixes
+
+* add comment for event handler notice ([eb872aa](https://github.com/twreporter/twreporter-npm-packages/commit/eb872aa9de69408e4bad58ba7d9c52bfa2f80d1a))
+* fix feature toggle & style ([9d615b1](https://github.com/twreporter/twreporter-npm-packages/commit/9d615b1091bf5762329f878f13c114cf1dce9912))
+* fix style & bug & naming ([7d824ab](https://github.com/twreporter/twreporter-npm-packages/commit/7d824abc5429b3505555aa174c038c67056abccb))
+
+
+### Features
+
+* add LogoSymbol component & story ([3a1d773](https://github.com/twreporter/twreporter-npm-packages/commit/3a1d773972c576fd48e37e538687e9f6756f5e79))
+* add SocialMedia component & fic category-set constants ([617c87c](https://github.com/twreporter/twreporter-npm-packages/commit/617c87c4d67f16e3e9ca2cd778b526a563708277))
+
+
+
+
+
+# [8.14.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.14.0-rc.2...@twreporter/react-components@8.14.0) (2022-10-26)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.14.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.14.0-rc.1...@twreporter/react-components@8.14.0-rc.2) (2022-10-25)
 
 

package/lib/divider.js

@@ -15,8 +15,16 @@ var _color = require("@twreporter/core/lib/constants/color");
 
 var _css = require("@twreporter/core/lib/utils/css");
 
+var _excluded = ["direction"];
+
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 borderWidth = {
   vertical: [0, '1px', 0, 0],
   horizontal: ['1px', 0, 0, 0]
@@ -43,10 +51,12 @@ var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 
 var Divider = function Divider(_ref) {
   var _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
-  return /*#__PURE__*/_react["default"].createElement(DividerBox, {
+      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(DividerBox, _extends({
     direction: direction
-  });
+  }, props));
 };
 
 Divider.propTypes = {

package/lib/hook/use-outside-click.js

@@ -18,11 +18,13 @@ var useOutsideClick = function useOutsideClick(callback) {
       if (ref.current && !ref.current.contains(event.target)) {
         callback(event);
       }
-    };
+    }; // to work with react synthetic events, we need to add event handler on window instead of document
+    // ref: https://dev.to/dvnrsn/why-isn-t-event-stoppropagation-working-1bnm
+
 
-    document.addEventListener('click', handleClick);
+    window.addEventListener('click', handleClick);
     return function () {
-      document.removeEventListener('click', handleClick);
+      window.removeEventListener('click', handleClick);
     };
   }, [ref, callback]);
   return ref;

package/lib/icon/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Printer = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
+exports["default"] = exports.SocialMedia = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Printer = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,7 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
-var _excluded = ["filename", "releaseBranch"];
+var _excluded = ["filename", "releaseBranch"],
+    _excluded2 = ["mediaType"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -294,6 +295,21 @@ exports.Line = Line;
 Line.propTypes = {
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
 };
+
+var SocialMedia = function SocialMedia(_ref4) {
+  var mediaType = _ref4.mediaType,
+      args = _objectWithoutProperties(_ref4, _excluded2);
+
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: mediaType
+  }, args));
+};
+
+exports.SocialMedia = SocialMedia;
+SocialMedia.propTypes = {
+  mediaType: _propTypes["default"].oneOf(['facebook', 'instagram', 'medium', 'twitter', 'youtube', 'line']),
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+};
 var _default = {
   Arrow: Arrow,
   Article: Article,
@@ -315,6 +331,7 @@ var _default = {
   Text: Text,
   Topic: Topic,
   Twitter: Twitter,
-  Youtube: Youtube
+  Youtube: Youtube,
+  SocialMedia: SocialMedia
 };
 exports["default"] = _default;

package/lib/input/components/search-bar.js

@@ -64,7 +64,7 @@ var _ = {
 var InputContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "search-bar__InputContainer",
   componentId: "sc-1mjh7mz-0"
-})(["display:flex;align-items:center;padding:8px 16px;border:none;border-radius:40px;margin:8px;background-color:", ";"], function (props) {
+})(["display:flex;align-items:center;padding:8px 16px;border:none;border-radius:40px;background-color:", ";"], function (props) {
   return props.bgColor;
 });
 
@@ -91,7 +91,7 @@ var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
 var DesktopOnlyIconButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.IconButton).withConfig({
   displayName: "search-bar__DesktopOnlyIconButton",
   componentId: "sc-1mjh7mz-3"
-})(["", ""], _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["margin-left:8px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var defaultFunc = function defaultFunc() {};
 

package/lib/logo/components/logo-header.js

@@ -17,42 +17,22 @@ var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 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; }
-
+// utils
+// @twreporter
 var LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "logo-header__LogoContainer",
   componentId: "rlga04-0"
-})(["", ""], function (props) {
-  return props.isHide ? 'display: none;' : '';
-});
+})([""]);
 
 var LogoHeader = function LogoHeader(_ref) {
   var type = _ref.type,
       releaseBranch = _ref.releaseBranch;
 
-  var _pathUtil$selectLogoP = _path["default"].selectLogoPath('header', releaseBranch),
-      _pathUtil$selectLogoP2 = _slicedToArray(_pathUtil$selectLogoP, 2),
-      logoDefaultSrc = _pathUtil$selectLogoP2[0],
-      logoWhiteSrc = _pathUtil$selectLogoP2[1];
+  var logoSrc = _path["default"].selectLogoPath('header', releaseBranch, type);
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, {
     alt: "The Reporter Logo",
-    src: logoDefaultSrc,
-    isHide: type !== 'default'
-  }), /*#__PURE__*/_react["default"].createElement(LogoContainer, {
-    alt: "The Reporter Logo",
-    src: logoWhiteSrc,
-    isHide: type !== 'white'
+    src: logoSrc
   }));
 };
 

package/lib/logo/components/logo-symbol.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _path = _interopRequireDefault(require("../utils/path"));
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _excluded = ["type", "releaseBranch"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 LogoContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
+  displayName: "logo-symbol__LogoContainer",
+  componentId: "dea8w0-0"
+})([""]);
+
+var LogoSymbol = function LogoSymbol(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var logoSrc = _path["default"].selectLogoPath('symbol', releaseBranch, type);
+
+  return /*#__PURE__*/_react["default"].createElement(LogoContainer, _extends({
+    src: logoSrc,
+    alt: "The Reporter Logo"
+  }, props));
+};
+
+LogoSymbol.propTypes = {
+  type: _propTypes["default"].oneOf(['default', 'black', 'white']),
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+};
+var _default = LogoSymbol;
+exports["default"] = _default;

package/lib/logo/index.js

@@ -15,16 +15,25 @@ Object.defineProperty(exports, "LogoFooter", {
     return _logoFooter["default"];
   }
 });
+Object.defineProperty(exports, "LogoSymbol", {
+  enumerable: true,
+  get: function get() {
+    return _logoSymbol["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _logoHeader = _interopRequireDefault(require("./components/logo-header"));
 
 var _logoFooter = _interopRequireDefault(require("./components/logo-footer"));
 
+var _logoSymbol = _interopRequireDefault(require("./components/logo-symbol"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   LogoHeader: _logoHeader["default"],
-  LogoFooter: _logoFooter["default"]
+  LogoFooter: _logoFooter["default"],
+  LogoSymbol: _logoSymbol["default"]
 };
 exports["default"] = _default;

package/lib/logo/stories/logoSymbol.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.symbol = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _logoSymbol = _interopRequireDefault(require("../components/logo-symbol"));
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Logo/Symbol',
+  component: _logoSymbol["default"],
+  argTypes: {
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var symbol = function symbol(args) {
+  return /*#__PURE__*/_react["default"].createElement(_logoSymbol["default"], args);
+};
+
+exports.symbol = symbol;
+symbol.args = {
+  type: 'default'
+};

package/lib/logo/utils/path.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var baseGCSDir = 'https://www.twreporter.org/images/logo/';
 
-function selectLogoPath(logoType, branch) {
+function selectLogoPath(logoType, branch, type) {
   switch (logoType) {
     case 'header':
       {
         var defaultPath = "".concat(baseGCSDir, "logo-header.").concat(branch, ".svg");
         var whitePath = "".concat(baseGCSDir, "logo-header-white.").concat(branch, ".svg");
-        return [defaultPath, whitePath];
+        return type === 'white' ? whitePath : defaultPath;
       }
 
     case 'footer':
@@ -20,6 +20,16 @@ function selectLogoPath(logoType, branch) {
         return "".concat(baseGCSDir, "logo-footer.").concat(branch, ".svg");
       }
 
+    case 'symbol':
+      {
+        var path = {
+          "default": "".concat(baseGCSDir, "logo-symbol-default.").concat(branch, ".svg"),
+          black: "".concat(baseGCSDir, "logo-symbol-black.").concat(branch, ".svg"),
+          white: "".concat(baseGCSDir, "logo-symbol-white.").concat(branch, ".svg")
+        };
+        return path[type];
+      }
+
     default:
       {
         return '';

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

@@ -160,6 +160,9 @@ var MobileTab = function MobileTab(_ref2) {
       onClick: handleClick
     });
   });
+  (0, _react.useEffect)(function () {
+    setActiveIndex(activeTabIndex);
+  }, [activeTabIndex]);
   return /*#__PURE__*/_react["default"].createElement(MobileTabContainer, {
     ref: ref,
     showGradientMask: showGradientMask

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.14.0-rc.2",
+  "version": "8.15.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.7.0-rc.3",
-    "@twreporter/redux": "^7.4.0-rc.3",
+    "@twreporter/core": "^1.8.0-rc.0",
+    "@twreporter/redux": "^7.4.1-rc.0",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "b21fabf303948f309fe4d1cce92fd0af3371ff91"
+  "gitHead": "18f6387366e10e692e08e5356f69409d3535c1b6"
 }