@spothero/ui 21.6.4-beta.0 → 22.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/components/Accordion/Accordion.stories.js +7 -8
  2. package/dist/components/Accordion/AccordionActionButton.js +4 -5
  3. package/dist/components/Alert/Alert.js +22 -23
  4. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +35 -44
  5. package/dist/components/Button/Button.js +16 -22
  6. package/dist/components/Button/stories/button.js +5 -6
  7. package/dist/components/Button/stories/overview.js +23 -27
  8. package/dist/components/Checkbox/Checkbox.js +10 -11
  9. package/dist/components/CreatableSelect/CreatableSelect.js +13 -14
  10. package/dist/components/Divider/Divider.js +5 -6
  11. package/dist/components/Drawer/Drawer.js +5 -6
  12. package/dist/components/Drawer/styles/index.js +4 -5
  13. package/dist/components/FormControl/FormControl.js +42 -45
  14. package/dist/components/Grid/Grid.js +6 -9
  15. package/dist/components/Grid/Grid.stories.js +40 -52
  16. package/dist/components/Icon/Icon.stories.js +1 -1
  17. package/dist/components/Image/Image.js +19 -21
  18. package/dist/components/Input/Input.js +11 -12
  19. package/dist/components/Link/Link.stories.js +26 -29
  20. package/dist/components/List/List.js +6 -9
  21. package/dist/components/List/List.stories.js +5 -8
  22. package/dist/components/Loader/Loader.js +10 -11
  23. package/dist/components/Modal/styles/body.js +5 -6
  24. package/dist/components/Modal/styles/closeButton.js +17 -20
  25. package/dist/components/Modal/styles/dialog.js +15 -18
  26. package/dist/components/Modal/styles/header.js +10 -13
  27. package/dist/components/Popover/styles/popover-arrow.js +5 -8
  28. package/dist/components/Popover/styles/popover-close-button.js +16 -19
  29. package/dist/components/Popover/styles/popover-content.js +19 -22
  30. package/dist/components/Progress/Progress.js +4 -5
  31. package/dist/components/Radio/Radio.js +10 -11
  32. package/dist/components/Radio/RadioGroup.js +14 -15
  33. package/dist/components/Select/Select.js +10 -11
  34. package/dist/components/SelectionCard/SelectionCard.js +13 -14
  35. package/dist/components/SelectionCard/SelectionCard.stories.js +3 -4
  36. package/dist/components/Spinner/Spinner.js +5 -6
  37. package/dist/components/Spinner/Spinner.stories.js +1 -2
  38. package/dist/components/Switch/Switch.js +9 -10
  39. package/dist/components/Table/Table.stories.js +7 -8
  40. package/dist/components/Tabs/Tabs.js +4 -5
  41. package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
  42. package/dist/components/Text/Text.js +5 -6
  43. package/dist/components/Text/combineAsWithVariant.js +4 -5
  44. package/dist/components/ThemeProvider/ThemeProvider.js +12 -15
  45. package/dist/components/ThemeProvider/ThemeProvider.stories.js +3 -4
  46. package/dist/components/index.js +2 -10
  47. package/dist/theme/global.js +5 -8
  48. package/dist/theme/index.js +1 -4
  49. package/dist/utils/Spaces.js +7 -10
  50. package/package.json +7 -7
  51. package/dist/components/Textarea/Textarea.js +0 -45
  52. package/dist/components/Textarea/Textarea.stories.js +0 -59
  53. package/dist/components/Textarea/index.js +0 -13
  54. package/dist/components/Textarea/styles/index.js +0 -64
@@ -11,21 +11,20 @@ var _react2 = require("@chakra-ui/react");
11
11
  var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
12
12
  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); }
13
13
  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; }
14
- const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
15
- let {
16
- label,
17
- errorMessage,
18
- defaultValue,
19
- isDisabled,
20
- isInvalid,
21
- isRequired,
22
- name,
23
- onChange,
24
- value,
25
- children,
26
- direction,
27
- ...props
28
- } = _ref;
14
+ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
15
+ label,
16
+ errorMessage,
17
+ defaultValue,
18
+ isDisabled,
19
+ isInvalid,
20
+ isRequired,
21
+ name,
22
+ onChange,
23
+ value,
24
+ children,
25
+ direction,
26
+ ...props
27
+ }, ref) => {
29
28
  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
30
29
  isInvalid: isInvalid,
31
30
  isDisabled: isDisabled,
@@ -14,17 +14,16 @@ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
14
14
  var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
15
15
  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); }
16
16
  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; }
17
- const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
18
- let {
19
- label,
20
- helperText,
21
- errorMessage,
22
- isInvalid,
23
- isDisabled,
24
- isRequired,
25
- isOptional,
26
- ...props
27
- } = _ref;
17
+ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
18
+ label,
19
+ helperText,
20
+ errorMessage,
21
+ isInvalid,
22
+ isDisabled,
23
+ isRequired,
24
+ isOptional,
25
+ ...props
26
+ }, ref) => {
28
27
  const classes = (0, _classnames.default)({
29
28
  'FormElement-contains-error': isInvalid
30
29
  });
@@ -12,20 +12,19 @@ var _Radio = require("../Radio");
12
12
  var _Checkbox = _interopRequireDefault(require("../Checkbox"));
13
13
  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); }
14
14
  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; }
15
- const SelectionCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
16
- let {
17
- isChecked,
18
- isDisabled,
19
- value,
20
- helperText,
21
- expandableChildren,
22
- defaultChecked,
23
- isRadio,
24
- label,
25
- isExpandable,
26
- size = 'md',
27
- ...props
28
- } = _ref;
15
+ const SelectionCard = /*#__PURE__*/(0, _react.forwardRef)(({
16
+ isChecked,
17
+ isDisabled,
18
+ value,
19
+ helperText,
20
+ expandableChildren,
21
+ defaultChecked,
22
+ isRadio,
23
+ label,
24
+ isExpandable,
25
+ size = 'md',
26
+ ...props
27
+ }, ref) => {
29
28
  const Component = isRadio ? _Radio.Radio : _Checkbox.default;
30
29
  const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
31
30
  const hasExpandableContent = isExpandable && isChecked && expandableChildren;
@@ -16,10 +16,9 @@ var _default = exports.default = {
16
16
  removeBaseHtmlClass: true
17
17
  }
18
18
  };
19
- const SelectionCard = _ref => {
20
- let {
21
- ...props
22
- } = _ref;
19
+ const SelectionCard = ({
20
+ ...props
21
+ }) => {
23
22
  return /*#__PURE__*/_react.default.createElement(_SelectionCard.default, (0, _extends2.default)({
24
23
  value: "1"
25
24
  }, props));
@@ -11,12 +11,11 @@ var _react2 = require("@chakra-ui/react");
11
11
  var _Spinner = require("./Spinner.styles");
12
12
  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); }
13
13
  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; }
14
- const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
15
- let {
16
- size,
17
- thickness,
18
- ...props
19
- } = _ref;
14
+ const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
15
+ size,
16
+ thickness,
17
+ ...props
18
+ }, ref) => {
20
19
  const thicknessString = thickness ? `${thickness}px` : _Spinner.thicknesses[size] ? `${_Spinner.thicknesses[size]}px` : '2px';
21
20
  return /*#__PURE__*/_react.default.createElement(_react2.Spinner, (0, _extends2.default)({
22
21
  ref: ref,
@@ -19,8 +19,7 @@ var _default = exports.default = {
19
19
  importBy: 'Spinner'
20
20
  }
21
21
  };
22
- const allColors = Object.entries(_colors.default).reduce((acc, _ref) => {
23
- let [colorName, color] = _ref;
22
+ const allColors = Object.entries(_colors.default).reduce((acc, [colorName, color]) => {
24
23
  if (typeof color === 'string') {
25
24
  acc.push(colorName);
26
25
  } else {
@@ -12,16 +12,15 @@ var _react2 = require("@chakra-ui/react");
12
12
  var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
13
13
  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); }
14
14
  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; }
15
- const Switch = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
16
- let {
17
- label,
18
- helperText,
19
- errorMessage,
20
- isInvalid,
21
- isDisabled,
22
- isRequired,
23
- ...props
24
- } = _ref;
15
+ const Switch = /*#__PURE__*/(0, _react.forwardRef)(({
16
+ label,
17
+ helperText,
18
+ errorMessage,
19
+ isInvalid,
20
+ isDisabled,
21
+ isRequired,
22
+ ...props
23
+ }, ref) => {
25
24
  const classes = (0, _classnames.default)({
26
25
  'FormElement-contains-error': isInvalid
27
26
  });
@@ -43,14 +43,13 @@ var _default = exports.default = {
43
43
  }
44
44
  }
45
45
  };
46
- const TableTemplate = _ref => {
47
- let {
48
- numberOfColumns,
49
- numberOfRows,
50
- tableData,
51
- tableHeading,
52
- variant
53
- } = _ref;
46
+ const TableTemplate = ({
47
+ numberOfColumns,
48
+ numberOfRows,
49
+ tableData,
50
+ tableHeading,
51
+ variant
52
+ }) => {
54
53
  return /*#__PURE__*/_react.default.createElement(_Table.default, {
55
54
  variant: variant
56
55
  }, /*#__PURE__*/_react.default.createElement(_index.Thead, null, /*#__PURE__*/_react.default.createElement(_index.Tr, null, Array(numberOfColumns).fill(tableHeading).map((heading, index) => /*#__PURE__*/_react.default.createElement(_index.Th, {
@@ -17,11 +17,10 @@ const sizeMapping = {
17
17
  [SIZE_BODY]: 'md',
18
18
  [SIZE_HEADING]: 'lg'
19
19
  };
20
- const Tabs = (0, _react2.forwardRef)((_ref, ref) => {
21
- let {
22
- size,
23
- ...props
24
- } = _ref;
20
+ const Tabs = (0, _react2.forwardRef)(({
21
+ size,
22
+ ...props
23
+ }, ref) => {
25
24
  return /*#__PURE__*/_react.default.createElement(_react2.Tabs, (0, _extends2.default)({
26
25
  size: sizeMapping[size]
27
26
  }, props, (0, _combineSizeWithVariant.default)({
@@ -20,11 +20,10 @@ var _Tabs = require("./Tabs");
20
20
  * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
21
21
  */
22
22
 
23
- const combineSizeWithVariant = _ref => {
24
- let {
25
- size,
26
- variant = 'line'
27
- } = _ref;
23
+ const combineSizeWithVariant = ({
24
+ size,
25
+ variant = 'line'
26
+ }) => {
28
27
  const fontSizeMapping = {
29
28
  [_Tabs.SIZE_SMALL]: _typography.fontSizes.xs,
30
29
  [_Tabs.SIZE_BODY]: _typography.fontSizes.base,
@@ -11,12 +11,11 @@ var _react2 = require("@chakra-ui/react");
11
11
  var _options = _interopRequireDefault(require("./options"));
12
12
  var _Text = require("./Text.styles");
13
13
  var _combineAsWithVariant = _interopRequireDefault(require("./combineAsWithVariant"));
14
- const Text = (0, _react2.forwardRef)((_ref, ref) => {
15
- let {
16
- as,
17
- variant,
18
- ...props
19
- } = _ref;
14
+ const Text = (0, _react2.forwardRef)(({
15
+ as,
16
+ variant,
17
+ ...props
18
+ }, ref) => {
20
19
  return /*#__PURE__*/_react.default.createElement(_react2.Text, (0, _extends2.default)({
21
20
  variant: variant,
22
21
  as: as
@@ -36,11 +36,10 @@ const asOptions = Object.freeze({
36
36
  * @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
37
37
  */
38
38
 
39
- const combineAsWithVariant = _ref => {
40
- let {
41
- as,
42
- variant
43
- } = _ref;
39
+ const combineAsWithVariant = ({
40
+ as,
41
+ variant
42
+ }) => {
44
43
  const variantFontSizeBase = Number(_Text.variants[`${variant}`].fontSize.base.replace('rem', ''));
45
44
  const variantFontSizeDesktop = Number(_Text.variants[`${variant}`].fontSize.desktop.replace('rem', ''));
46
45
  let styleProps;
@@ -14,21 +14,18 @@ var _global = require("../../theme/global");
14
14
  var _merge = _interopRequireDefault(require("lodash/merge"));
15
15
  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); }
16
16
  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; }
17
- const ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
18
- let {
19
- theme,
20
- useLegacyOverrides,
21
- disableExternalFonts = false,
22
- children,
23
- ...props
24
- } = _ref;
25
- return /*#__PURE__*/_react.default.createElement(_react2.ChakraProvider, (0, _extends2.default)({}, props, {
26
- ref: ref,
27
- theme: (0, _merge.default)(_theme.default, theme)
28
- }), disableExternalFonts ? null : /*#__PURE__*/_react.default.createElement(_global.Fonts, null), /*#__PURE__*/_react.default.createElement(_global.LegacyOverrides, {
29
- useLegacyOverrides: useLegacyOverrides
30
- }), children);
31
- });
17
+ const ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(({
18
+ theme,
19
+ useLegacyOverrides,
20
+ disableExternalFonts = false,
21
+ children,
22
+ ...props
23
+ }, ref) => /*#__PURE__*/_react.default.createElement(_react2.ChakraProvider, (0, _extends2.default)({}, props, {
24
+ ref: ref,
25
+ theme: (0, _merge.default)(_theme.default, theme)
26
+ }), disableExternalFonts ? null : /*#__PURE__*/_react.default.createElement(_global.Fonts, null), /*#__PURE__*/_react.default.createElement(_global.LegacyOverrides, {
27
+ useLegacyOverrides: useLegacyOverrides
28
+ }), children));
32
29
  ThemeProvider.propTypes = {
33
30
  /** If true, this will use the old `spothero-html` base styles */
34
31
  useLegacyOverrides: _propTypes.default.bool,
@@ -26,10 +26,9 @@ var _default = exports.default = {
26
26
  })]
27
27
  }
28
28
  };
29
- const Template = (props, _ref) => {
30
- let {
31
- hasDarkBackground
32
- } = _ref;
29
+ const Template = (props, {
30
+ hasDarkBackground
31
+ }) => {
33
32
  const contentTextColor = hasDarkBackground ? 'text.primary.dark' : 'text.primary.light';
34
33
  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
35
34
  mb: 8,
@@ -32,7 +32,6 @@ var _exportNames = {
32
32
  Input: true,
33
33
  SelectionCard: true,
34
34
  Divider: true,
35
- Textarea: true,
36
35
  Popover: true,
37
36
  PopoverAnchor: true,
38
37
  PopoverArrow: true,
@@ -95,7 +94,7 @@ var _exportNames = {
95
94
  usePrefersReducedMotion: true,
96
95
  keyframes: true,
97
96
  BoxProps: true,
98
- BasicTextarea: true
97
+ Textarea: true
99
98
  };
100
99
  Object.defineProperty(exports, "Alert", {
101
100
  enumerable: true,
@@ -127,12 +126,6 @@ Object.defineProperty(exports, "BasicInput", {
127
126
  return _react.Input;
128
127
  }
129
128
  });
130
- Object.defineProperty(exports, "BasicTextarea", {
131
- enumerable: true,
132
- get: function () {
133
- return _react.Textarea;
134
- }
135
- });
136
129
  Object.defineProperty(exports, "Box", {
137
130
  enumerable: true,
138
131
  get: function () {
@@ -544,7 +537,7 @@ Object.defineProperty(exports, "Text", {
544
537
  Object.defineProperty(exports, "Textarea", {
545
538
  enumerable: true,
546
539
  get: function () {
547
- return _Textarea.default;
540
+ return _react.Textarea;
548
541
  }
549
542
  });
550
543
  Object.defineProperty(exports, "ThemeProvider", {
@@ -736,7 +729,6 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
736
729
  var _Input = _interopRequireDefault(require("./Input"));
737
730
  var _SelectionCard = require("./SelectionCard");
738
731
  var _Divider = _interopRequireDefault(require("./Divider/Divider"));
739
- var _Textarea = _interopRequireDefault(require("./Textarea"));
740
732
  var _Popover = require("./Popover");
741
733
  var _Radio = require("./Radio");
742
734
  var _AutoSuggestSelect = require("./AutoSuggestSelect");
@@ -62,12 +62,10 @@ const Fonts = () => /*#__PURE__*/_react.default.createElement(_react2.Global, {
62
62
  `
63
63
  });
64
64
  exports.Fonts = Fonts;
65
- const LegacyOverrides = _ref => {
66
- let {
67
- useLegacyOverrides
68
- } = _ref;
69
- return useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
70
- styles: `
65
+ const LegacyOverrides = ({
66
+ useLegacyOverrides
67
+ }) => useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
68
+ styles: `
71
69
  h1,
72
70
  h2,
73
71
  h3,
@@ -113,6 +111,5 @@ const LegacyOverrides = _ref => {
113
111
  }
114
112
 
115
113
  `
116
- }) : null;
117
- };
114
+ }) : null;
118
115
  exports.LegacyOverrides = LegacyOverrides;
@@ -21,10 +21,7 @@ const extendedTheme = {
21
21
  styles: {
22
22
  global: _global.default
23
23
  },
24
- remToPixels: function (rem) {
25
- let baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
26
- return !rem ? 0 : `${baseSize * Number(rem.replace('rem', ''))}`;
27
- }
24
+ remToPixels: (rem, baseSize = 16) => !rem ? 0 : `${baseSize * Number(rem.replace('rem', ''))}`
28
25
  };
29
26
 
30
27
  // use this to override base themes from Chakra
@@ -6,14 +6,11 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- const Spaces = _ref => {
10
- let {
11
- spaces = 3
12
- } = _ref;
13
- return /*#__PURE__*/_react.default.createElement("span", {
14
- dangerouslySetInnerHTML: {
15
- __html: Array(spaces).fill(' ').join('')
16
- }
17
- });
18
- };
9
+ const Spaces = ({
10
+ spaces = 3
11
+ }) => /*#__PURE__*/_react.default.createElement("span", {
12
+ dangerouslySetInnerHTML: {
13
+ __html: Array(spaces).fill(' ').join('')
14
+ }
15
+ });
19
16
  var _default = exports.default = Spaces;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spothero/ui",
3
- "version": "21.6.4-beta.0",
3
+ "version": "22.0.0-beta.3",
4
4
  "description": "SpotHero's React component UI library.",
5
5
  "main": "./dist/components/index.js",
6
6
  "exports": "./dist/components/index.js",
@@ -94,14 +94,14 @@
94
94
  "webpack-merge": "5.1.4",
95
95
  "css-loader": "5.1.3",
96
96
  "sass-loader": "10.2.1",
97
- "@spothero/browserslist-config": "4.0.0",
98
97
  "@spothero/babel-preset-spothero": "5.1.0",
99
- "@spothero/eslint-config": "6.1.0",
100
- "@spothero/icons": "8.1.0",
101
98
  "@spothero/core": "7.0.0",
102
- "@spothero/npm-publisher": "7.0.0",
99
+ "@spothero/eslint-config": "6.1.0",
100
+ "@spothero/browserslist-config": "4.0.0",
101
+ "@spothero/icons": "9.0.0-beta.3",
102
+ "@spothero/prettier-config": "4.0.0",
103
103
  "@spothero/stylelint-config": "6.0.0",
104
- "@spothero/prettier-config": "4.0.0"
104
+ "@spothero/npm-publisher": "7.0.0"
105
105
  },
106
106
  "dependencies": {
107
107
  "@chakra-ui/react": "1.8.8",
@@ -117,7 +117,7 @@
117
117
  "regenerator-runtime": "0.13.7",
118
118
  "ssr-window": "1.0.1",
119
119
  "transitionEnd": "1.0.2",
120
- "@spothero/utils": "14.1.2"
120
+ "@spothero/utils": "15.0.0-beta.3"
121
121
  },
122
122
  "peerDependencies": {
123
123
  "classnames": "^2.2.6",
@@ -1,45 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _classnames = _interopRequireDefault(require("classnames"));
11
- var _react2 = require("@chakra-ui/react");
12
- var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
13
- 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); }
14
- 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; }
15
- const Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
16
- let {
17
- label,
18
- helperText,
19
- errorMessage,
20
- isInvalid,
21
- isDisabled,
22
- isRequired,
23
- isOptional,
24
- customRequiredText,
25
- ...props
26
- } = _ref;
27
- const classes = (0, _classnames.default)({
28
- 'FormElement-contains-error': isInvalid
29
- });
30
- return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
31
- isInvalid: isInvalid,
32
- isDisabled: isDisabled,
33
- isRequired: isRequired,
34
- isOptional: isOptional,
35
- errorMessage: errorMessage,
36
- helperText: helperText,
37
- label: label,
38
- inputId: props.id,
39
- customRequiredText: customRequiredText
40
- }, /*#__PURE__*/_react.default.createElement(_react2.Textarea, (0, _extends2.default)({
41
- ref: ref,
42
- className: classes
43
- }, props)));
44
- });
45
- var _default = exports.default = Textarea;
@@ -1,59 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.Textarea = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _Textarea = _interopRequireDefault(require("./Textarea.stories"));
11
- var _react2 = require("@chakra-ui/react");
12
- var _default = exports.default = {
13
- title: 'v2/Textarea',
14
- component: _Textarea.default,
15
- parameters: {
16
- importBy: 'Textarea',
17
- removeBaseHtmlClass: true,
18
- chakraLink: 'https://chakra-ui.com/docs/components/textarea'
19
- }
20
- };
21
- const TextareaTemplate = props => /*#__PURE__*/_react.default.createElement(_Textarea.default, (0, _extends2.default)({
22
- variant: "outline",
23
- maxWidth: "200px"
24
- }, props));
25
- const Textarea = exports.Textarea = TextareaTemplate.bind({});
26
- Textarea.argTypes = {
27
- placeholder: {
28
- control: {
29
- type: 'text'
30
- }
31
- },
32
- label: {
33
- control: {
34
- type: 'text'
35
- }
36
- },
37
- helperText: {
38
- control: {
39
- type: 'text'
40
- }
41
- },
42
- errorMessage: {
43
- control: {
44
- type: 'text'
45
- }
46
- }
47
- };
48
- Textarea.args = {
49
- id: 'textarea_id',
50
- placeholder: 'Placeholder text',
51
- label: 'Label',
52
- helperText: 'Helper text',
53
- errorMessage: 'Error message',
54
- isInvalid: false,
55
- isDisabled: false,
56
- isReadOnly: false,
57
- isRequired: false,
58
- isOptional: false
59
- };
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _Textarea.default;
11
- }
12
- });
13
- var _Textarea = _interopRequireDefault(require("./Textarea"));
@@ -1,64 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _merge = _interopRequireDefault(require("lodash/merge"));
9
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
10
- const baseStyle = {
11
- field: {
12
- _placeholder: {
13
- color: 'text.secondary.light',
14
- fontWeight: 'normal',
15
- _disabled: {
16
- color: 'text.secondary.light',
17
- opacity: 1
18
- }
19
- }
20
- }
21
- };
22
- const variants = {
23
- outline: {
24
- field: {
25
- border: '1px solid',
26
- borderColor: 'gray.200',
27
- fontSize: 'base',
28
- paddingLeft: 3,
29
- paddingRight: 3,
30
- bg: 'inherit',
31
- fontWeight: 'normal',
32
- boxShadow: 'none !important',
33
- _placeholder: {
34
- color: 'text.secondary.light',
35
- fontWeight: 'normal'
36
- },
37
- _focus: {
38
- borderColor: 'primary.default'
39
- },
40
- _hover: {
41
- borderColor: 'gray.300'
42
- },
43
- _readOnly: {
44
- boxShadow: 'none !important',
45
- userSelect: 'all'
46
- },
47
- _disabled: {
48
- backgroundColor: 'gray.50',
49
- opacity: 1,
50
- cursor: 'not-allowed'
51
- },
52
- _invalid: {
53
- borderColor: 'error',
54
- _focus: {
55
- borderColor: 'error'
56
- }
57
- }
58
- }
59
- }
60
- };
61
- var _default = exports.default = (0, _merge.default)(_theme.default.components.Textarea, {
62
- baseStyle,
63
- variants
64
- });