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

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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)
 
 

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", "handleBlur", "autofocus"];
+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      ") : '';
 }));
@@ -110,6 +116,8 @@ var SearchBar = function SearchBar(_ref) {
       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)(''),
@@ -174,7 +182,8 @@ var SearchBar = function SearchBar(_ref) {
     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, {
@@ -205,7 +214,8 @@ SearchBar.propTypes = {
   onSearch: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
   handleBlur: _propTypes["default"].func,
-  autofocus: _propTypes["default"].bool
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.15.0-rc.5",
+  "version": "8.15.0-rc.6",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "bf226b81aae93197d4cad8519a574ef6f85acc9b"
+  "gitHead": "a1da0ea82fa6ec21f620b76bcb6cebac5ca8c519"
 }