@twreporter/react-components 8.15.0-rc.4 → 8.15.0-rc.6

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.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.5...@twreporter/react-components@8.15.0-rc.6) (2022-11-25)
+
+
+### Bug Fixes
+
+* add constants file to manage prop types ([4841e86](https://github.com/twreporter/twreporter-npm-packages/commit/4841e868cad52cfd2168f0c146de30950e27c996))
+
+
+### Features
+
+* add mobile & tablet view for new info structure ([b0e158c](https://github.com/twreporter/twreporter-npm-packages/commit/b0e158c751230723626c9cb9de83641f0588c189))
+
+
+
+
+
+# [8.15.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.4...@twreporter/react-components@8.15.0-rc.5) (2022-11-07)
+
+
+### Bug Fixes
+
+* address defects ([a33aa3b](https://github.com/twreporter/twreporter-npm-packages/commit/a33aa3bf55fd9b1bf5472a4a13de942a9f8757ca))
+
+
+
+
+
 # [8.15.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.15.0-rc.3...@twreporter/react-components@8.15.0-rc.4) (2022-10-31)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/textButton.js

@@ -31,6 +31,8 @@ var _templateObject;
 
 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; }
@@ -94,11 +96,11 @@ var TextButton = function TextButton(_ref) {
     text: text,
     weight: "bold"
   });
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, textJSX, iconComponent);
+  }, props), textJSX, iconComponent);
 };
 
 TextButton.propTypes = {

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

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = require("../utils/theme");
 
+var _type = require("../constants/type");
+
 var _icon = require("../../icon");
 
 var _button = require("../../button");
@@ -27,7 +29,7 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose"];
+var _excluded = ["placeholder", "theme", "releaseBranch", "onSearch", "onClose", "handleBlur", "autofocus", "widthType"];
 
 var _templateObject, _templateObject2;
 
@@ -71,8 +73,12 @@ var InputContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
   displayName: "search-bar__Container",
   componentId: "sc-1mjh7mz-1"
-})(["display:flex;align-items:center;", "{", " ", "}"], InputContainer, function (props) {
+})(["display:flex;align-items:center;", " ", "{", " &,& > input{", "}", "}"], function (props) {
+  return props.widthType === 'stretch' ? 'width: 100%;' : '';
+}, InputContainer, function (props) {
   return props.focus ? "\n      background-color: ".concat(props.focusBgColor, ";\n      border: 1px solid ").concat(props.borderColor, ";\n    ") : '';
+}, function (props) {
+  return props.widthType === 'stretch' ? 'width: 100%;' : '';
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
   return props.focus ? "\n        background-color: ".concat(props.desktopBgColor, ";\n      ") : '';
 }));
@@ -80,7 +86,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "search-bar__Input",
   componentId: "sc-1mjh7mz-2"
-})(["color:", ";margin-right:8px;height:24px;&,&:focus,&:focus-visible{border:none;background-color:transparent;outline:none;}&:focus,&:focus-visible{&::placeholder{color:", ";}}&::placeholder{color:", ";}&::-webkit-search-cancel-button{display:none;}"], function (props) {
+})(["color:", ";margin-right:8px;height:24px;font-size:14px;&,&:focus,&:focus-visible{border:none;background-color:transparent;outline:none;}&:focus,&:focus-visible{&::placeholder{color:", ";}}&::placeholder{color:", ";}&::-webkit-search-cancel-button{display:none;}"], function (props) {
   return props.color;
 }, function (props) {
   return props.focusColor;
@@ -106,6 +112,12 @@ var SearchBar = function SearchBar(_ref) {
       onSearch = _ref$onSearch === void 0 ? defaultFunc : _ref$onSearch,
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? defaultFunc : _ref$onClose,
+      _ref$handleBlur = _ref.handleBlur,
+      handleBlur = _ref$handleBlur === void 0 ? defaultFunc : _ref$handleBlur,
+      _ref$autofocus = _ref.autofocus,
+      autofocus = _ref$autofocus === void 0 ? true : _ref$autofocus,
+      _ref$widthType = _ref.widthType,
+      widthType = _ref$widthType === void 0 ? _type.WIDTH_TYPE.fit : _ref$widthType,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -141,6 +153,7 @@ var SearchBar = function SearchBar(_ref) {
 
   var onBlur = function onBlur() {
     setFocus(false);
+    handleBlur();
   };
 
   var onSubmit = function onSubmit(e) {
@@ -166,11 +179,11 @@ var SearchBar = function SearchBar(_ref) {
     onSubmit: onSubmit,
     onReset: onReset,
     onFocus: onFocus,
-    onBlur: onBlur,
     focus: focus,
     focusBgColor: focusBgColor,
     desktopBgColor: desktopBgColor,
-    borderColor: borderColor
+    borderColor: borderColor,
+    widthType: widthType
   }, props), /*#__PURE__*/_react["default"].createElement(InputContainer, {
     bgColor: bgColor
   }, /*#__PURE__*/_react["default"].createElement(Input, {
@@ -181,7 +194,8 @@ var SearchBar = function SearchBar(_ref) {
     placeholderColor: placeholderColor,
     value: keywords,
     onChange: onChange,
-    autoFocus: true
+    onBlur: onBlur,
+    autoFocus: autofocus
   }), /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: SearchIcon,
     theme: "normal",
@@ -198,7 +212,10 @@ SearchBar.propTypes = {
   theme: _theme2.THEME_PROP_TYPES,
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
   onSearch: _propTypes["default"].func,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  handleBlur: _propTypes["default"].func,
+  autofocus: _propTypes["default"].bool,
+  widthType: _type.WIDTH_PROP_TYPE
 };
 var _default = SearchBar;
 exports["default"] = _default;

package/lib/input/constants/type.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIDTH_PROP_TYPE = exports.WIDTH_TYPE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var WIDTH_TYPE = {
+  fit: 'fit',
+  stretch: 'stretch'
+};
+exports.WIDTH_TYPE = WIDTH_TYPE;
+
+var WIDTH_PROP_TYPE = _propTypes["default"].oneOf([WIDTH_TYPE.fit, WIDTH_TYPE.stretch]);
+
+exports.WIDTH_PROP_TYPE = WIDTH_PROP_TYPE;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _searchBar = _interopRequireDefault(require("../components/search-bar"));
 
+var _type = require("../constants/type");
+
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 var _theme = require("@twreporter/core/lib/constants/theme");
@@ -48,5 +50,7 @@ searchBar.args = {
   theme: _theme.THEME.normal,
   releaseBranch: _releaseBranch.BRANCH.master,
   onSearch: onSearch,
-  onClose: onClose
+  onClose: onClose,
+  autofocus: false,
+  widthType: _type.WIDTH_TYPE.fit
 };

package/lib/rwd.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabletAndAbove = exports.TabletAndBelow = exports.DesktopAndAbove = exports.MobileOnly = exports.DesktopOnly = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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) } })); }
+
+var DesktopOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__DesktopOnly",
+  componentId: "gntj1s-0"
+})(["display:none;", ""], _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.DesktopOnly = DesktopOnly;
+
+var MobileOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__MobileOnly",
+  componentId: "gntj1s-1"
+})(["display:none;", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.MobileOnly = MobileOnly;
+
+var DesktopAndAbove = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__DesktopAndAbove",
+  componentId: "gntj1s-2"
+})(["display:none;", ""], _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.DesktopAndAbove = DesktopAndAbove;
+
+var TabletAndBelow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__TabletAndBelow",
+  componentId: "gntj1s-3"
+})(["display:none;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.TabletAndBelow = TabletAndBelow;
+
+var TabletAndAbove = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "rwd__TabletAndAbove",
+  componentId: "gntj1s-4"
+})(["display:none;", ""], _mediaQuery["default"].tabletAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: block;\n  "]))));
+
+exports.TabletAndAbove = TabletAndAbove;

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

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headline = require("../../text/headline");
 
-var _paragraph = require("../../text/paragraph");
+var _button = require("../../button");
 
 var _divider = _interopRequireDefault(require("../../divider"));
 
@@ -43,8 +43,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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; }
@@ -62,19 +60,22 @@ var tabPropType = _propTypes["default"].shape({
 var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__BarContainer",
   componentId: "ywb8e-0"
-})(["display:flex;width:100%;flex-direction:column;color:", ";& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"], _color.colorGrayscale.gray800);
+})(["display:flex;width:100%;flex-direction:column;color:", ";"], _color.colorGrayscale.gray800);
 
 var TabItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__TabItemContainer",
   componentId: "ywb8e-1"
-})(["display:flex;flex-shrink:0;color:", ";a{color:unset;text-decoration:none;}"], function (props) {
-  return props.isActive ? _color.colorBrand.heavy : 'inherit';
-});
+})(["display:flex;flex-shrink:0;margin-right:24px;&:last-child{margin-right:0;}a{text-decoration:none;}"]);
+
+var StyledTextButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.TextButton).withConfig({
+  displayName: "tab__StyledTextButton",
+  componentId: "ywb8e-2"
+})(["padding:16px 0;"]);
 
 var MobileTabContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__MobileTabContainer",
-  componentId: "ywb8e-2"
-})(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";& > div{margin-right:24px;}"], function (props) {
+  componentId: "ywb8e-3"
+})(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";"], function (props) {
   return props.showGradientMask ? gradientMask : 'none';
 });
 
@@ -87,14 +88,13 @@ var TabItem = function TabItem(_ref) {
       link = tab.link,
       isExternal = tab.isExternal,
       isActive = tab.isActive;
-  return /*#__PURE__*/_react["default"].createElement(TabItemContainer, _extends({
-    isActive: isActive
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
+  return /*#__PURE__*/_react["default"].createElement(TabItemContainer, restProps, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
     to: link,
     isExternal: isExternal
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledTextButton, {
     text: text,
-    weight: "bold"
+    active: isActive,
+    size: "L"
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.15.0-rc.4",
+  "version": "8.15.0-rc.6",
   "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.8.0-rc.4",
-    "@twreporter/redux": "^7.4.1-rc.4",
+    "@twreporter/core": "^1.8.0-rc.5",
+    "@twreporter/redux": "^7.4.1-rc.5",
     "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": "2d647f37f6f708d6314117ef49fab278a85cc0af"
+  "gitHead": "a1da0ea82fa6ec21f620b76bcb6cebac5ca8c519"
 }