@spothero/ui 22.3.2 → 22.3.9-beta.0
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/index.cjs.js +54151 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.esm.js +53999 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +39 -40
- package/dist/components/Accordion/Accordion.stories.js +0 -91
- package/dist/components/Accordion/AccordionActionButton.js +0 -29
- package/dist/components/Accordion/index.js +0 -44
- package/dist/components/Accordion/styles/index.js +0 -76
- package/dist/components/Alert/Alert.js +0 -83
- package/dist/components/Alert/Alert.stories.js +0 -49
- package/dist/components/Alert/index.js +0 -13
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -148
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -19
- package/dist/components/AutoSuggestSelect/index.js +0 -13
- package/dist/components/Badge/Badge.js +0 -12
- package/dist/components/Badge/Badge.stories.js +0 -28
- package/dist/components/Badge/styles/index.js +0 -32
- package/dist/components/Button/Button.js +0 -36
- package/dist/components/Button/Button.spec.js +0 -25
- package/dist/components/Button/Button.styles.js +0 -164
- package/dist/components/Button/button-props.js +0 -71
- package/dist/components/Button/index.js +0 -20
- package/dist/components/Button/stories/button.js +0 -45
- package/dist/components/Button/stories/index.stories.js +0 -94
- package/dist/components/Button/stories/overview.js +0 -63
- package/dist/components/Card/Card.js +0 -22
- package/dist/components/Card/Card.stories.js +0 -29
- package/dist/components/Checkbox/Checkbox.js +0 -38
- package/dist/components/Checkbox/Checkbox.stories.js +0 -65
- package/dist/components/Checkbox/index.js +0 -13
- package/dist/components/Checkbox/styles/index.js +0 -89
- package/dist/components/Container/Container.js +0 -17
- package/dist/components/Container/Container.stories.js +0 -43
- package/dist/components/Container/Container.styles.js +0 -16
- package/dist/components/CreatableSelect/CreatableSelect.js +0 -124
- package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -55
- package/dist/components/CreatableSelect/index.js +0 -13
- package/dist/components/Divider/Divider.js +0 -29
- package/dist/components/Divider/Divider.stories.js +0 -35
- package/dist/components/Divider/Divider.styles.js +0 -20
- package/dist/components/Drawer/Drawer.js +0 -24
- package/dist/components/Drawer/Drawer.stories.js +0 -39
- package/dist/components/Drawer/index.js +0 -56
- package/dist/components/Drawer/styles/index.js +0 -104
- package/dist/components/FormControl/FormControl.js +0 -67
- package/dist/components/Grid/Grid.js +0 -28
- package/dist/components/Grid/Grid.stories.js +0 -100
- package/dist/components/Grid/Grid.styles.js +0 -17
- package/dist/components/Grid/GridItem.js +0 -17
- package/dist/components/Grid/GridItem.styles.js +0 -13
- package/dist/components/Grid/index.js +0 -20
- package/dist/components/Heading/Heading.js +0 -27
- package/dist/components/Heading/Heading.stories.js +0 -41
- package/dist/components/Heading/Heading.styles.js +0 -63
- package/dist/components/Icon/Icon.js +0 -12
- package/dist/components/Icon/Icon.stories.js +0 -36
- package/dist/components/Image/Image.js +0 -73
- package/dist/components/Image/Image.spec.js +0 -77
- package/dist/components/Image/Image.stories.js +0 -74
- package/dist/components/Input/Input.js +0 -44
- package/dist/components/Input/Input.stories.js +0 -59
- package/dist/components/Input/index.js +0 -13
- package/dist/components/Input/styles/index.js +0 -64
- package/dist/components/Link/Link.js +0 -12
- package/dist/components/Link/Link.stories.js +0 -49
- package/dist/components/Link/Link.styles.js +0 -44
- package/dist/components/List/List.js +0 -61
- package/dist/components/List/List.stories.js +0 -75
- package/dist/components/List/index.js +0 -20
- package/dist/components/List/styles/index.js +0 -16
- package/dist/components/List/styles/item.styles.js +0 -10
- package/dist/components/Loader/Loader.js +0 -44
- package/dist/components/Loader/Loader.stories.js +0 -116
- package/dist/components/Menu/Menu.js +0 -16
- package/dist/components/Menu/Menu.stories.js +0 -159
- package/dist/components/Menu/Menu.styles.js +0 -173
- package/dist/components/Menu/index.js +0 -56
- package/dist/components/Modal/Modal.js +0 -42
- package/dist/components/Modal/Modal.stories.js +0 -184
- package/dist/components/Modal/index.js +0 -32
- package/dist/components/Modal/styles/body.js +0 -30
- package/dist/components/Modal/styles/closeButton.js +0 -24
- package/dist/components/Modal/styles/dialog.js +0 -22
- package/dist/components/Modal/styles/dialogContainer.js +0 -19
- package/dist/components/Modal/styles/footer.js +0 -11
- package/dist/components/Modal/styles/header.js +0 -17
- package/dist/components/Modal/styles/index.js +0 -53
- package/dist/components/Modal/styles/overlay.js +0 -10
- package/dist/components/Popover/Popover.js +0 -26
- package/dist/components/Popover/Popover.stories.js +0 -80
- package/dist/components/Popover/PopoverArrow.js +0 -19
- package/dist/components/Popover/PopoverCloseButton.js +0 -19
- package/dist/components/Popover/PopoverContent.js +0 -38
- package/dist/components/Popover/index.js +0 -40
- package/dist/components/Popover/styles/index.js +0 -24
- package/dist/components/Popover/styles/popover-arrow.js +0 -12
- package/dist/components/Popover/styles/popover-body.js +0 -10
- package/dist/components/Popover/styles/popover-close-button.js +0 -26
- package/dist/components/Popover/styles/popover-content.js +0 -26
- package/dist/components/Popover/styles/popover-header.js +0 -11
- package/dist/components/Popover/styles/popper.js +0 -10
- package/dist/components/Progress/Progress.js +0 -37
- package/dist/components/Progress/Progress.stories.js +0 -79
- package/dist/components/Progress/Progress.styles.js +0 -122
- package/dist/components/Radio/Radio.js +0 -37
- package/dist/components/Radio/Radio.stories.js +0 -138
- package/dist/components/Radio/RadioGroup.js +0 -47
- package/dist/components/Radio/index.js +0 -20
- package/dist/components/Radio/styles/index.js +0 -118
- package/dist/components/RefreshedInput/Button/Button.js +0 -67
- package/dist/components/RefreshedInput/Button/Button.stories.js +0 -79
- package/dist/components/RefreshedInput/Button/index.js +0 -13
- package/dist/components/RefreshedInput/Button/styles/index.js +0 -25
- package/dist/components/RefreshedInput/FormControl/index.js +0 -167
- package/dist/components/RefreshedInput/Input/Input.js +0 -61
- package/dist/components/RefreshedInput/Input/Input.stories.js +0 -74
- package/dist/components/RefreshedInput/Input/index.js +0 -13
- package/dist/components/RefreshedInput/Input/styles/index.js +0 -23
- package/dist/components/RefreshedInput/Select/Select.js +0 -65
- package/dist/components/RefreshedInput/Select/Select.stories.js +0 -80
- package/dist/components/RefreshedInput/Select/index.js +0 -13
- package/dist/components/RefreshedInput/Select/styles/index.js +0 -26
- package/dist/components/RefreshedInput/index.js +0 -34
- package/dist/components/RefreshedInput/storyAid/index.js +0 -19
- package/dist/components/Select/Select.js +0 -50
- package/dist/components/Select/Select.stories.js +0 -63
- package/dist/components/Select/index.js +0 -13
- package/dist/components/Select/styles/index.js +0 -46
- package/dist/components/SelectionCard/SelectionCard.js +0 -61
- package/dist/components/SelectionCard/SelectionCard.stories.js +0 -90
- package/dist/components/SelectionCard/index.js +0 -13
- package/dist/components/Skeleton/Skeleton.stories.js +0 -23
- package/dist/components/Skeleton/Skeleton.styles.js +0 -9
- package/dist/components/Skeleton/index.js +0 -24
- package/dist/components/Spinner/Spinner.js +0 -29
- package/dist/components/Spinner/Spinner.stories.js +0 -98
- package/dist/components/Spinner/Spinner.styles.js +0 -85
- package/dist/components/Switch/Switch.js +0 -40
- package/dist/components/Switch/Switch.stories.js +0 -76
- package/dist/components/Switch/index.js +0 -13
- package/dist/components/Switch/styles/index.js +0 -32
- package/dist/components/Table/Table.js +0 -12
- package/dist/components/Table/Table.stories.js +0 -69
- package/dist/components/Table/Table.styles.js +0 -66
- package/dist/components/Table/index.js +0 -62
- package/dist/components/Tabs/Tabs.js +0 -35
- package/dist/components/Tabs/Tabs.stories.js +0 -39
- package/dist/components/Tabs/combineSizeWithVariant.js +0 -36
- package/dist/components/Tabs/index.js +0 -38
- package/dist/components/Tabs/styles/index.js +0 -70
- package/dist/components/Text/Text.js +0 -33
- package/dist/components/Text/Text.stories.js +0 -42
- package/dist/components/Text/Text.styles.js +0 -45
- package/dist/components/Text/combineAsWithVariant.js +0 -100
- package/dist/components/Text/options.js +0 -8
- package/dist/components/Textarea/Textarea.js +0 -44
- 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
- package/dist/components/ThemeProvider/ThemeProvider.js +0 -39
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -51
- package/dist/components/Toast/Toast.stories.js +0 -77
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -59
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -53
- package/dist/components/ToggleButtonGroup/index.js +0 -13
- package/dist/components/ToggleButtonGroup/styles/index.js +0 -47
- package/dist/components/index.js +0 -785
- package/dist/components/styles.js +0 -188
- package/dist/theme/base/breakpoints.js +0 -23
- package/dist/theme/base/colors.js +0 -138
- package/dist/theme/base/index.js +0 -79
- package/dist/theme/base/notifications.js +0 -198
- package/dist/theme/base/shadows.js +0 -15
- package/dist/theme/base/sizes.js +0 -88
- package/dist/theme/base/typography.js +0 -38
- package/dist/theme/base/zindices.js +0 -33
- package/dist/theme/global.js +0 -110
- package/dist/theme/index.js +0 -33
- package/dist/utils/Spaces.js +0 -16
|
@@ -1,167 +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 _react2 = require("@chakra-ui/react");
|
|
11
|
-
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); }
|
|
12
|
-
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; }
|
|
13
|
-
// No clue how to move these into the style file so just co-located to keep from slowing down
|
|
14
|
-
// Chakra V2 will heavily impact this component
|
|
15
|
-
const labelStyle = {
|
|
16
|
-
color: 'gray.600',
|
|
17
|
-
fontWeight: 'normal',
|
|
18
|
-
top: 2,
|
|
19
|
-
left: 0,
|
|
20
|
-
position: 'absolute',
|
|
21
|
-
pointerEvents: 'none',
|
|
22
|
-
padding: 'inherit',
|
|
23
|
-
paddingLeft: 3,
|
|
24
|
-
marginY: 2,
|
|
25
|
-
transformOrigin: 'left top',
|
|
26
|
-
// below is from chakra v2 that I'm pulling in
|
|
27
|
-
transitionProperty: 'scale translate',
|
|
28
|
-
transitionDuration: '200ms'
|
|
29
|
-
};
|
|
30
|
-
const activeLabelStyles = {
|
|
31
|
-
transform: 'scale(0.85) translateY(-.75rem) translateX(.2rem)',
|
|
32
|
-
_invalid: {
|
|
33
|
-
'& .chakra-form__required-indicator': {
|
|
34
|
-
display: 'none'
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const controlStyles = {
|
|
39
|
-
position: 'relative',
|
|
40
|
-
borderWidth: '0',
|
|
41
|
-
sx: {
|
|
42
|
-
label: labelStyle,
|
|
43
|
-
input: {
|
|
44
|
-
'&::placeholder': {
|
|
45
|
-
// below is from chakra v2 that I'm pulling in
|
|
46
|
-
transitionProperty: 'opacity',
|
|
47
|
-
transitionDuration: '200ms',
|
|
48
|
-
opacity: 0
|
|
49
|
-
},
|
|
50
|
-
_invalid: {
|
|
51
|
-
'&:focus': {
|
|
52
|
-
borderBottomRadius: 0,
|
|
53
|
-
borderColor: 'primary.default'
|
|
54
|
-
},
|
|
55
|
-
'&:focus + label': {
|
|
56
|
-
color: 'gray.600'
|
|
57
|
-
},
|
|
58
|
-
'& + label': {
|
|
59
|
-
color: 'error',
|
|
60
|
-
transform: 'scale(0.85) translateY(-16px)'
|
|
61
|
-
},
|
|
62
|
-
'& + label .chakra-form__required-indicator': {
|
|
63
|
-
//Styling for asterisk always to be red if invalid
|
|
64
|
-
color: 'error'
|
|
65
|
-
},
|
|
66
|
-
'&::placeholder': {
|
|
67
|
-
opacity: 1
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
// styles used for when we extend functionality - textarea:not(:placeholder-shown) ~ label
|
|
72
|
-
'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label': {
|
|
73
|
-
...activeLabelStyles
|
|
74
|
-
},
|
|
75
|
-
// should be a cleaner way of doing this
|
|
76
|
-
'.chakra-input__group > .chakra-input__left-element ~ span input': {
|
|
77
|
-
paddingLeft: 10,
|
|
78
|
-
paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
|
|
79
|
-
},
|
|
80
|
-
'.chakra-input__group > .chakra-input__left-element ~ span select': {
|
|
81
|
-
paddingLeft: 10,
|
|
82
|
-
paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
|
|
83
|
-
},
|
|
84
|
-
'.chakra-input__group > .chakra-input__left-element ~ span button': {
|
|
85
|
-
paddingLeft: 10,
|
|
86
|
-
paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
|
|
87
|
-
},
|
|
88
|
-
'.chakra-input__group > .chakra-input__left-element ~ span label': {
|
|
89
|
-
// transform: 'scale(0.85) translateY(-1rem) translateX(.5rem)',
|
|
90
|
-
paddingLeft: '2.75rem'
|
|
91
|
-
},
|
|
92
|
-
// Styling for select
|
|
93
|
-
'.chakra-select__wrapper + label': {
|
|
94
|
-
...activeLabelStyles,
|
|
95
|
-
transform: 'scale(0.85) translateY(-.75rem) translateX(.25rem)'
|
|
96
|
-
},
|
|
97
|
-
'button[data-value] + label': {
|
|
98
|
-
...activeLabelStyles
|
|
99
|
-
},
|
|
100
|
-
'.FormElement-contains-error': {
|
|
101
|
-
borderColor: 'error'
|
|
102
|
-
},
|
|
103
|
-
'.chakra-button + label': {
|
|
104
|
-
display: 'flex',
|
|
105
|
-
alignItems: 'center',
|
|
106
|
-
height: '100%',
|
|
107
|
-
top: 0,
|
|
108
|
-
margin: 0
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
_focusWithin: {
|
|
112
|
-
label: {
|
|
113
|
-
...activeLabelStyles
|
|
114
|
-
},
|
|
115
|
-
input: {
|
|
116
|
-
'&::placeholder': {
|
|
117
|
-
opacity: '1'
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* A component used in the homepage/midfunnel refresh of 2024
|
|
125
|
-
* This formControl allows us to standardize the label movement animation as well as the left/right icons
|
|
126
|
-
* Can be used solo but typically will be used by the Refreshed components themselves
|
|
127
|
-
*/
|
|
128
|
-
const FormControl = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
129
|
-
label,
|
|
130
|
-
helperText,
|
|
131
|
-
errorMessage,
|
|
132
|
-
id = '',
|
|
133
|
-
children,
|
|
134
|
-
rightElement,
|
|
135
|
-
leftElement,
|
|
136
|
-
rightElementStyles,
|
|
137
|
-
leftElementStyles,
|
|
138
|
-
...props
|
|
139
|
-
}, ref) => {
|
|
140
|
-
return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
|
|
141
|
-
ref: ref
|
|
142
|
-
}, controlStyles), /*#__PURE__*/_react.default.createElement(_react2.InputGroup, null, leftElement && /*#__PURE__*/_react.default.createElement(_react2.InputLeftElement, (0, _extends2.default)({
|
|
143
|
-
pointerEvents: "none",
|
|
144
|
-
top: "52%",
|
|
145
|
-
left: "1.3rem",
|
|
146
|
-
transform: "translate(-50%,-50%)"
|
|
147
|
-
}, leftElementStyles), leftElement), /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
148
|
-
as: "span",
|
|
149
|
-
width: "100%",
|
|
150
|
-
position: "relative"
|
|
151
|
-
}, children, label && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, {
|
|
152
|
-
htmlFor: id
|
|
153
|
-
}, label)), rightElement && /*#__PURE__*/_react.default.createElement(_react2.InputRightElement, (0, _extends2.default)({
|
|
154
|
-
top: "50%",
|
|
155
|
-
right: "-1rem",
|
|
156
|
-
transform: "translate(-50%,-50%)"
|
|
157
|
-
}, rightElementStyles), rightElement)), helperText && /*#__PURE__*/_react.default.createElement(_react2.FormHelperText, {
|
|
158
|
-
color: "gray.600",
|
|
159
|
-
marginTop: 1,
|
|
160
|
-
fontSize: "xs"
|
|
161
|
-
}, helperText), /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, {
|
|
162
|
-
color: "error",
|
|
163
|
-
marginTop: 1,
|
|
164
|
-
fontSize: "xs"
|
|
165
|
-
}, errorMessage));
|
|
166
|
-
});
|
|
167
|
-
var _default = exports.default = FormControl;
|
|
@@ -1,61 +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 _FormControl = _interopRequireDefault(require("../FormControl"));
|
|
12
|
-
var _react2 = require("@chakra-ui/react");
|
|
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
|
-
/**
|
|
16
|
-
* A component used in the homepage/midfunnel refresh of 2024
|
|
17
|
-
* Initially built as purpose built as possible with hopes of extending it to other systems
|
|
18
|
-
* using `<RefreshedInput/>` will bring in the core of this.
|
|
19
|
-
*/
|
|
20
|
-
const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
21
|
-
label,
|
|
22
|
-
helperText,
|
|
23
|
-
errorMessage,
|
|
24
|
-
isInvalid,
|
|
25
|
-
isDisabled,
|
|
26
|
-
isRequired,
|
|
27
|
-
rightElement,
|
|
28
|
-
leftElement,
|
|
29
|
-
rightElementStyles,
|
|
30
|
-
leftElementStyles,
|
|
31
|
-
placeholder = '',
|
|
32
|
-
...props
|
|
33
|
-
}, ref) => {
|
|
34
|
-
const classes = (0, _classnames.default)({
|
|
35
|
-
'FormElement-contains-error': isInvalid
|
|
36
|
-
}); //Historic carry over
|
|
37
|
-
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
39
|
-
isInvalid: isInvalid,
|
|
40
|
-
isDisabled: isDisabled,
|
|
41
|
-
isRequired: isRequired,
|
|
42
|
-
errorMessage: errorMessage,
|
|
43
|
-
helperText: helperText,
|
|
44
|
-
label: label,
|
|
45
|
-
id: props.id,
|
|
46
|
-
rightElement: rightElement,
|
|
47
|
-
leftElement: leftElement,
|
|
48
|
-
rightElementStyles: rightElementStyles,
|
|
49
|
-
leftElementStyles: leftElementStyles,
|
|
50
|
-
variant: "refreshed"
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
|
|
52
|
-
placeholder: placeholder,
|
|
53
|
-
ref: ref,
|
|
54
|
-
className: classes,
|
|
55
|
-
paddingTop: 'var(--chakra-sizes-5-5)' // Design requires 5.5
|
|
56
|
-
,
|
|
57
|
-
paddingBottom: "2",
|
|
58
|
-
variant: "refreshed"
|
|
59
|
-
}, props)));
|
|
60
|
-
});
|
|
61
|
-
var _default = exports.default = Input;
|
|
@@ -1,74 +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.InputRefreshed = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _Input = _interopRequireDefault(require("./Input"));
|
|
11
|
-
var _storyAid = require("../storyAid");
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'v2/RefreshedInputs',
|
|
14
|
-
component: _Input.default,
|
|
15
|
-
parameters: {
|
|
16
|
-
importBy: 'RefreshedInput',
|
|
17
|
-
removeBaseHtmlClass: true,
|
|
18
|
-
chakraLink: 'https://chakra-ui.com/docs/components/input'
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
const InputRefreshedTemplate = ({
|
|
22
|
-
showLeftElement,
|
|
23
|
-
showRightElement,
|
|
24
|
-
...props
|
|
25
|
-
}) => /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
|
|
26
|
-
leftElement: showLeftElement && /*#__PURE__*/_react.default.createElement(_storyAid.LeftElement, null),
|
|
27
|
-
rightElement: showRightElement && /*#__PURE__*/_react.default.createElement(_storyAid.RightElement, null)
|
|
28
|
-
}));
|
|
29
|
-
const InputRefreshed = exports.InputRefreshed = InputRefreshedTemplate.bind({});
|
|
30
|
-
InputRefreshed.argTypes = {
|
|
31
|
-
placeholder: {
|
|
32
|
-
control: {
|
|
33
|
-
type: 'text'
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
label: {
|
|
37
|
-
control: {
|
|
38
|
-
type: 'text'
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
helperText: {
|
|
42
|
-
control: {
|
|
43
|
-
type: 'text'
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
errorMessage: {
|
|
47
|
-
control: {
|
|
48
|
-
type: 'text'
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
showLeftElement: {
|
|
52
|
-
control: {
|
|
53
|
-
control: 'boolean'
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
showRightElement: {
|
|
57
|
-
control: {
|
|
58
|
-
control: 'boolean'
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
InputRefreshed.args = {
|
|
63
|
-
id: 'input_id',
|
|
64
|
-
placeholder: 'Placeholder text',
|
|
65
|
-
label: 'Label',
|
|
66
|
-
helperText: 'Helper text',
|
|
67
|
-
errorMessage: 'Error message',
|
|
68
|
-
isInvalid: false,
|
|
69
|
-
isDisabled: false,
|
|
70
|
-
isReadOnly: false,
|
|
71
|
-
isRequired: false,
|
|
72
|
-
showLeftElement: false,
|
|
73
|
-
showRightElement: false
|
|
74
|
-
};
|
|
@@ -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 _Input.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
var _Input = _interopRequireDefault(require("./Input"));
|
|
@@ -1,23 +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 _styles = _interopRequireDefault(require("../../../Input/styles"));
|
|
10
|
-
//Below isn't being used in build for some reason
|
|
11
|
-
const variants = {
|
|
12
|
-
refreshed: {
|
|
13
|
-
field: {
|
|
14
|
-
..._styles.default.variants.outline.field,
|
|
15
|
-
height: 'auto',
|
|
16
|
-
paddingTop: 8,
|
|
17
|
-
paddingBottom: 2
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
var _default = exports.default = (0, _merge.default)(_styles.default, {
|
|
22
|
-
variants
|
|
23
|
-
});
|
|
@@ -1,65 +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 _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _react2 = require("@chakra-ui/react");
|
|
12
|
-
var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
|
|
13
|
-
var _Icon = _interopRequireDefault(require("../../Icon/Icon"));
|
|
14
|
-
var _FormControl = _interopRequireDefault(require("../FormControl"));
|
|
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
|
-
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
|
-
//For select left is static arrow,
|
|
18
|
-
/**
|
|
19
|
-
* A component used in the homepage/midfunnel refresh of 2024
|
|
20
|
-
* Initially built as purpose built as possible with hopes of extending it to other systems
|
|
21
|
-
* using `<RefreshedSelect><option value="1"/>/<RefreshedSelect>` will bring in the core of this.
|
|
22
|
-
* Left arrow is static for this select. You can pass a second left element in but it will not over write the down arrow currently
|
|
23
|
-
*/
|
|
24
|
-
const Select = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
25
|
-
label,
|
|
26
|
-
helperText,
|
|
27
|
-
errorMessage,
|
|
28
|
-
isInvalid,
|
|
29
|
-
isDisabled,
|
|
30
|
-
isRequired,
|
|
31
|
-
isOptional,
|
|
32
|
-
rightElement,
|
|
33
|
-
leftElement,
|
|
34
|
-
rightElementStyles,
|
|
35
|
-
leftElementStyles,
|
|
36
|
-
...props
|
|
37
|
-
}, ref) => {
|
|
38
|
-
const classes = (0, _classnames.default)({
|
|
39
|
-
'FormElement-contains-error': isInvalid
|
|
40
|
-
});
|
|
41
|
-
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
42
|
-
isInvalid: isInvalid,
|
|
43
|
-
isDisabled: isDisabled,
|
|
44
|
-
isRequired: isRequired,
|
|
45
|
-
errorMessage: errorMessage,
|
|
46
|
-
helperText: helperText,
|
|
47
|
-
label: label,
|
|
48
|
-
inputId: props.id,
|
|
49
|
-
rightElement: rightElement,
|
|
50
|
-
leftElement: leftElement,
|
|
51
|
-
rightElementStyles: rightElementStyles,
|
|
52
|
-
leftElementStyles: leftElementStyles
|
|
53
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.Select, (0, _extends2.default)({
|
|
54
|
-
icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
55
|
-
as: _chevronDown.default
|
|
56
|
-
}),
|
|
57
|
-
iconSize: 20,
|
|
58
|
-
fontWeight: "medium",
|
|
59
|
-
fontSize: "sm",
|
|
60
|
-
ref: ref,
|
|
61
|
-
className: classes,
|
|
62
|
-
variant: "refreshed"
|
|
63
|
-
}, props)));
|
|
64
|
-
});
|
|
65
|
-
var _default = exports.default = Select;
|
|
@@ -1,80 +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.SelectRefreshed = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _storyAid = require("../storyAid");
|
|
11
|
-
var _Select = _interopRequireDefault(require("./Select"));
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'v2/RefreshedInputs',
|
|
14
|
-
component: _Select.default,
|
|
15
|
-
parameters: {
|
|
16
|
-
removeBaseHtmlClass: true
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
const SelectTemplate = ({
|
|
20
|
-
showLeftElement,
|
|
21
|
-
showRightElement,
|
|
22
|
-
...props
|
|
23
|
-
}) => /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({}, props, {
|
|
24
|
-
leftElement: showLeftElement && /*#__PURE__*/_react.default.createElement(_storyAid.LeftElement, null),
|
|
25
|
-
rightElement: showRightElement && /*#__PURE__*/_react.default.createElement(_storyAid.RightElement, null)
|
|
26
|
-
}), /*#__PURE__*/_react.default.createElement("option", {
|
|
27
|
-
value: "one"
|
|
28
|
-
}, "One"), /*#__PURE__*/_react.default.createElement("option", {
|
|
29
|
-
value: "two"
|
|
30
|
-
}, "Two"), /*#__PURE__*/_react.default.createElement("option", {
|
|
31
|
-
value: "three"
|
|
32
|
-
}, "Three"), /*#__PURE__*/_react.default.createElement("option", {
|
|
33
|
-
value: "four"
|
|
34
|
-
}, "Four"));
|
|
35
|
-
const SelectRefreshed = exports.SelectRefreshed = SelectTemplate.bind({});
|
|
36
|
-
SelectRefreshed.argTypes = {
|
|
37
|
-
placeholder: {
|
|
38
|
-
control: {
|
|
39
|
-
type: 'text'
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
label: {
|
|
43
|
-
control: {
|
|
44
|
-
type: 'text'
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
helperText: {
|
|
48
|
-
control: {
|
|
49
|
-
type: 'text'
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
errorMessage: {
|
|
53
|
-
control: {
|
|
54
|
-
type: 'text'
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
showLeftElement: {
|
|
58
|
-
control: {
|
|
59
|
-
control: 'boolean'
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
showRightElement: {
|
|
63
|
-
control: {
|
|
64
|
-
control: 'boolean'
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
SelectRefreshed.args = {
|
|
69
|
-
placeholder: 'Placeholder text',
|
|
70
|
-
label: 'Label',
|
|
71
|
-
helperText: 'Helper text',
|
|
72
|
-
errorMessage: 'Error message',
|
|
73
|
-
isInvalid: false,
|
|
74
|
-
isDisabled: false,
|
|
75
|
-
isReadOnly: false,
|
|
76
|
-
isRequired: false,
|
|
77
|
-
isOptional: false,
|
|
78
|
-
showLeftElement: false,
|
|
79
|
-
showRightElement: false
|
|
80
|
-
};
|
|
@@ -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 _Select.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
var _Select = _interopRequireDefault(require("./Select"));
|
|
@@ -1,26 +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
|
-
var _styles = _interopRequireDefault(require("../../../Select/styles"));
|
|
11
|
-
const variants = {
|
|
12
|
-
refreshed: {
|
|
13
|
-
field: {
|
|
14
|
-
..._styles.default.variants.outline.field,
|
|
15
|
-
height: 'auto',
|
|
16
|
-
paddingTop: 6,
|
|
17
|
-
paddingBottom: 3
|
|
18
|
-
},
|
|
19
|
-
addon: {
|
|
20
|
-
..._styles.default.variants.outline.field
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
var _default = exports.default = (0, _merge.default)(_theme.default.components.Select, {
|
|
25
|
-
variants
|
|
26
|
-
});
|
|
@@ -1,34 +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, "RefreshedButtonInput", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _Button.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(exports, "RefreshedFormControl", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () {
|
|
16
|
-
return _FormControl.default;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports, "RefreshedInput", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _Input.default;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(exports, "RefreshedSelectInput", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function () {
|
|
28
|
-
return _Select.default;
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
var _Input = _interopRequireDefault(require("./Input"));
|
|
32
|
-
var _Select = _interopRequireDefault(require("./Select"));
|
|
33
|
-
var _Button = _interopRequireDefault(require("./Button"));
|
|
34
|
-
var _FormControl = _interopRequireDefault(require("./FormControl"));
|
|
@@ -1,19 +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.RightElement = exports.LeftElement = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _react2 = require("@chakra-ui/react");
|
|
10
|
-
var _icons = require("@spothero/icons");
|
|
11
|
-
const LeftElement = () => /*#__PURE__*/_react.default.createElement(_react2.Icon, {
|
|
12
|
-
as: _icons.Search
|
|
13
|
-
});
|
|
14
|
-
exports.LeftElement = LeftElement;
|
|
15
|
-
const RightElement = () => /*#__PURE__*/_react.default.createElement(_react2.Icon, {
|
|
16
|
-
as: _icons.X,
|
|
17
|
-
height: "18px"
|
|
18
|
-
});
|
|
19
|
-
exports.RightElement = RightElement;
|
|
@@ -1,50 +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 _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _react2 = require("@chakra-ui/react");
|
|
12
|
-
var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
|
|
13
|
-
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
|
14
|
-
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
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
|
-
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
|
-
label,
|
|
19
|
-
helperText,
|
|
20
|
-
errorMessage,
|
|
21
|
-
isInvalid,
|
|
22
|
-
isDisabled,
|
|
23
|
-
isRequired,
|
|
24
|
-
isOptional,
|
|
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
|
-
errorMessage: errorMessage,
|
|
35
|
-
isOptional: isOptional,
|
|
36
|
-
helperText: helperText,
|
|
37
|
-
label: label,
|
|
38
|
-
inputId: props.id
|
|
39
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.Select, (0, _extends2.default)({
|
|
40
|
-
icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
41
|
-
as: _chevronDown.default
|
|
42
|
-
}),
|
|
43
|
-
iconSize: 12,
|
|
44
|
-
fontWeight: "regular",
|
|
45
|
-
fontSize: "sm",
|
|
46
|
-
ref: ref,
|
|
47
|
-
className: classes
|
|
48
|
-
}, props)));
|
|
49
|
-
});
|
|
50
|
-
var _default = exports.default = Select;
|