@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.
- package/dist/components/Accordion/Accordion.stories.js +7 -8
- package/dist/components/Accordion/AccordionActionButton.js +4 -5
- package/dist/components/Alert/Alert.js +22 -23
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +35 -44
- package/dist/components/Button/Button.js +16 -22
- package/dist/components/Button/stories/button.js +5 -6
- package/dist/components/Button/stories/overview.js +23 -27
- package/dist/components/Checkbox/Checkbox.js +10 -11
- package/dist/components/CreatableSelect/CreatableSelect.js +13 -14
- package/dist/components/Divider/Divider.js +5 -6
- package/dist/components/Drawer/Drawer.js +5 -6
- package/dist/components/Drawer/styles/index.js +4 -5
- package/dist/components/FormControl/FormControl.js +42 -45
- package/dist/components/Grid/Grid.js +6 -9
- package/dist/components/Grid/Grid.stories.js +40 -52
- package/dist/components/Icon/Icon.stories.js +1 -1
- package/dist/components/Image/Image.js +19 -21
- package/dist/components/Input/Input.js +11 -12
- package/dist/components/Link/Link.stories.js +26 -29
- package/dist/components/List/List.js +6 -9
- package/dist/components/List/List.stories.js +5 -8
- package/dist/components/Loader/Loader.js +10 -11
- package/dist/components/Modal/styles/body.js +5 -6
- package/dist/components/Modal/styles/closeButton.js +17 -20
- package/dist/components/Modal/styles/dialog.js +15 -18
- package/dist/components/Modal/styles/header.js +10 -13
- package/dist/components/Popover/styles/popover-arrow.js +5 -8
- package/dist/components/Popover/styles/popover-close-button.js +16 -19
- package/dist/components/Popover/styles/popover-content.js +19 -22
- package/dist/components/Progress/Progress.js +4 -5
- package/dist/components/Radio/Radio.js +10 -11
- package/dist/components/Radio/RadioGroup.js +14 -15
- package/dist/components/Select/Select.js +10 -11
- package/dist/components/SelectionCard/SelectionCard.js +13 -14
- package/dist/components/SelectionCard/SelectionCard.stories.js +3 -4
- package/dist/components/Spinner/Spinner.js +5 -6
- package/dist/components/Spinner/Spinner.stories.js +1 -2
- package/dist/components/Switch/Switch.js +9 -10
- package/dist/components/Table/Table.stories.js +7 -8
- package/dist/components/Tabs/Tabs.js +4 -5
- package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
- package/dist/components/Text/Text.js +5 -6
- package/dist/components/Text/combineAsWithVariant.js +4 -5
- package/dist/components/ThemeProvider/ThemeProvider.js +12 -15
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +3 -4
- package/dist/components/index.js +2 -10
- package/dist/theme/global.js +5 -8
- package/dist/theme/index.js +1 -4
- package/dist/utils/Spaces.js +7 -10
- package/package.json +7 -7
- package/dist/components/Textarea/Textarea.js +0 -45
- package/dist/components/Textarea/Textarea.stories.js +0 -59
- package/dist/components/Textarea/index.js +0 -13
- 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)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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)((
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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 =
|
|
20
|
-
|
|
21
|
-
|
|
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)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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,
|
|
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)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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 =
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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)((
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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 =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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 =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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)((
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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,
|
|
30
|
-
|
|
31
|
-
|
|
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,
|
package/dist/components/index.js
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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");
|
package/dist/theme/global.js
CHANGED
|
@@ -62,12 +62,10 @@ const Fonts = () => /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
|
62
62
|
`
|
|
63
63
|
});
|
|
64
64
|
exports.Fonts = Fonts;
|
|
65
|
-
const LegacyOverrides =
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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
|
-
|
|
117
|
-
};
|
|
114
|
+
}) : null;
|
|
118
115
|
exports.LegacyOverrides = LegacyOverrides;
|
package/dist/theme/index.js
CHANGED
|
@@ -21,10 +21,7 @@ const extendedTheme = {
|
|
|
21
21
|
styles: {
|
|
22
22
|
global: _global.default
|
|
23
23
|
},
|
|
24
|
-
remToPixels:
|
|
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
|
package/dist/utils/Spaces.js
CHANGED
|
@@ -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 =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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": "
|
|
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/
|
|
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/
|
|
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": "
|
|
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
|
-
});
|