@spothero/ui 21.6.2 → 21.6.4-beta.0

package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js

@@ -25,7 +25,8 @@ const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     getOptions,
     onChange,
     iconSrc,
-    placeholder
+    placeholder,
+    defaultValue = null
   } = _ref;
   const {
     colors,
@@ -146,6 +147,7 @@ const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isDisabled: isDisabled,
     id: id,
     placeholder: placeholder,
+    defaultValue: defaultValue,
     styles: customStyles,
     ref: ref
   }));

package/dist/components/Popover/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "PopoverAnchor", {
     return _react.PopoverAnchor;
   }
 });
+Object.defineProperty(exports, "PopoverArrow", {
+  enumerable: true,
+  get: function () {
+    return _PopoverArrow.default;
+  }
+});
 Object.defineProperty(exports, "PopoverContent", {
   enumerable: true,
   get: function () {
@@ -30,4 +36,5 @@ Object.defineProperty(exports, "PopoverTrigger", {
 });
 var _react = require("@chakra-ui/react");
 var _Popover = _interopRequireDefault(require("./Popover"));
-var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
+var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
+var _PopoverArrow = _interopRequireDefault(require("./PopoverArrow"));

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@chakra-ui/react");
+var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    label,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isDisabled,
+    isRequired,
+    isOptional,
+    customRequiredText,
+    ...props
+  } = _ref;
+  const classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  });
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    isOptional: isOptional,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    inputId: props.id,
+    customRequiredText: customRequiredText
+  }, /*#__PURE__*/_react.default.createElement(_react2.Textarea, (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, props)));
+});
+var _default = exports.default = Textarea;

package/dist/components/Textarea/Textarea.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Textarea = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Textarea = _interopRequireDefault(require("./Textarea.stories"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports.default = {
+  title: 'v2/Textarea',
+  component: _Textarea.default,
+  parameters: {
+    importBy: 'Textarea',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/textarea'
+  }
+};
+const TextareaTemplate = props => /*#__PURE__*/_react.default.createElement(_Textarea.default, (0, _extends2.default)({
+  variant: "outline",
+  maxWidth: "200px"
+}, props));
+const Textarea = exports.Textarea = TextareaTemplate.bind({});
+Textarea.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  }
+};
+Textarea.args = {
+  id: 'textarea_id',
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isOptional: false
+};

package/dist/components/Textarea/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Textarea.default;
+  }
+});
+var _Textarea = _interopRequireDefault(require("./Textarea"));

package/dist/components/Textarea/styles/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+const baseStyle = {
+  field: {
+    _placeholder: {
+      color: 'text.secondary.light',
+      fontWeight: 'normal',
+      _disabled: {
+        color: 'text.secondary.light',
+        opacity: 1
+      }
+    }
+  }
+};
+const variants = {
+  outline: {
+    field: {
+      border: '1px solid',
+      borderColor: 'gray.200',
+      fontSize: 'base',
+      paddingLeft: 3,
+      paddingRight: 3,
+      bg: 'inherit',
+      fontWeight: 'normal',
+      boxShadow: 'none !important',
+      _placeholder: {
+        color: 'text.secondary.light',
+        fontWeight: 'normal'
+      },
+      _focus: {
+        borderColor: 'primary.default'
+      },
+      _hover: {
+        borderColor: 'gray.300'
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        backgroundColor: 'gray.50',
+        opacity: 1,
+        cursor: 'not-allowed'
+      },
+      _invalid: {
+        borderColor: 'error',
+        _focus: {
+          borderColor: 'error'
+        }
+      }
+    }
+  }
+};
+var _default = exports.default = (0, _merge.default)(_theme.default.components.Textarea, {
+  baseStyle,
+  variants
+});

package/dist/components/index.js

@@ -32,8 +32,10 @@ var _exportNames = {
   Input: true,
   SelectionCard: true,
   Divider: true,
+  Textarea: true,
   Popover: true,
   PopoverAnchor: true,
+  PopoverArrow: true,
   PopoverTrigger: true,
   PopoverContent: true,
   Radio: true,
@@ -93,7 +95,7 @@ var _exportNames = {
   usePrefersReducedMotion: true,
   keyframes: true,
   BoxProps: true,
-  Textarea: true
+  BasicTextarea: true
 };
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
@@ -125,6 +127,12 @@ Object.defineProperty(exports, "BasicInput", {
     return _react.Input;
   }
 });
+Object.defineProperty(exports, "BasicTextarea", {
+  enumerable: true,
+  get: function () {
+    return _react.Textarea;
+  }
+});
 Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
@@ -401,6 +409,12 @@ Object.defineProperty(exports, "PopoverAnchor", {
     return _Popover.PopoverAnchor;
   }
 });
+Object.defineProperty(exports, "PopoverArrow", {
+  enumerable: true,
+  get: function () {
+    return _Popover.PopoverArrow;
+  }
+});
 Object.defineProperty(exports, "PopoverContent", {
   enumerable: true,
   get: function () {
@@ -530,7 +544,7 @@ Object.defineProperty(exports, "Text", {
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function () {
-    return _react.Textarea;
+    return _Textarea.default;
   }
 });
 Object.defineProperty(exports, "ThemeProvider", {
@@ -722,6 +736,7 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _SelectionCard = require("./SelectionCard");
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _Popover = require("./Popover");
 var _Radio = require("./Radio");
 var _AutoSuggestSelect = require("./AutoSuggestSelect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.6.2",
+  "version": "21.6.4-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -94,11 +94,11 @@
     "webpack-merge": "5.1.4",
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
-    "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/browserslist-config": "4.0.0",
-    "@spothero/core": "7.0.0",
+    "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/eslint-config": "6.1.0",
     "@spothero/icons": "8.1.0",
+    "@spothero/core": "7.0.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/stylelint-config": "6.0.0",
     "@spothero/prettier-config": "4.0.0"