@mailstep/design-system 0.4.18 → 0.4.20
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/package.json +1 -1
- package/ui/Blocks/Modal/Modal.js +2 -2
- package/ui/Blocks/Modal/styles.d.ts +3 -1
- package/ui/Blocks/Modal/styles.js +4 -1
- package/ui/Blocks/Modal/types.d.ts +2 -0
- package/ui/Elements/Button/styles.js +1 -1
- package/ui/Elements/Button/types.d.ts +1 -1
- package/ui/Forms/Input/Input.d.ts +1 -1
- package/ui/Forms/Input/Input.js +2 -2
- package/ui/Forms/Input/stories/Input.stories.d.ts +1 -1
- package/ui/Forms/Input/styles.d.ts +2 -0
- package/ui/Forms/Input/styles.js +13 -9
- package/ui/Forms/Input/types.d.ts +1 -0
- package/ui/index.es.js +1936 -1877
- package/ui/index.umd.js +225 -183
package/package.json
CHANGED
package/ui/Blocks/Modal/Modal.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Portal } from '../../Elements/Portal';
|
|
|
9
9
|
import { useClickOutside } from './hooks/useClickOutside';
|
|
10
10
|
import { widthMap } from './utils';
|
|
11
11
|
export var Modal = memo(function (_a) {
|
|
12
|
-
var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top;
|
|
12
|
+
var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onExtraAction = _a.onExtraAction, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, extraActionLabel = _a.extraActionLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top;
|
|
13
13
|
var closeDialog = useCallback(function () {
|
|
14
14
|
if (onClose) {
|
|
15
15
|
onClose();
|
|
@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
|
|
|
32
32
|
if (!isShown) {
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
|
-
return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] }))] }) }) }));
|
|
35
|
+
return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(x.div, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
|
|
36
36
|
});
|
|
@@ -18,5 +18,7 @@ export declare const ContentContainer: import("styled-components").StyledCompone
|
|
|
18
18
|
variant: Variant;
|
|
19
19
|
}, never>;
|
|
20
20
|
export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
21
|
-
export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
21
|
+
export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
22
|
+
hasSpaceBetween: boolean;
|
|
23
|
+
}, never>;
|
|
22
24
|
export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
@@ -67,6 +67,9 @@ export var ContentContainer = styled.div(templateObject_13 || (templateObject_13
|
|
|
67
67
|
return variantStyles(Component.ContentContainer, variant);
|
|
68
68
|
});
|
|
69
69
|
export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n flex-flow: row;\n align-items: center;\n color: typoPrimary;\n padding-right: 34px;\n\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"], ["\n display: flex;\n flex-flow: row;\n align-items: center;\n color: typoPrimary;\n padding-right: 34px;\n\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"])));
|
|
70
|
-
export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"], ["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"])))
|
|
70
|
+
export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 1.5rem;\n border-top: 1px solid ", ";\n text-align: right;\n justify-content: ", ";\n > div > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 1.5rem;\n border-top: 1px solid ", ";\n text-align: right;\n justify-content: ", ";\n > div > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"])), th.color('lightGray6'), function (_a) {
|
|
71
|
+
var hasSpaceBetween = _a.hasSpaceBetween;
|
|
72
|
+
return (hasSpaceBetween ? 'space-between' : 'flex-end');
|
|
73
|
+
});
|
|
71
74
|
export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"], ["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"])));
|
|
72
75
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
@@ -8,9 +8,11 @@ export interface ModalProps {
|
|
|
8
8
|
titleIcon?: JSX.Element | string;
|
|
9
9
|
onConfirm?: (close: () => void) => void;
|
|
10
10
|
onCancel?: () => void;
|
|
11
|
+
onExtraAction?: () => void;
|
|
11
12
|
onClose?: () => void;
|
|
12
13
|
confirmLabel?: JSX.Element | string;
|
|
13
14
|
cancelLabel?: JSX.Element | string;
|
|
15
|
+
extraActionLabel?: JSX.Element | string;
|
|
14
16
|
isLoading?: boolean;
|
|
15
17
|
isConfirmDisabled?: boolean;
|
|
16
18
|
hasFooter?: boolean;
|
|
@@ -14,7 +14,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
14
14
|
var $addMargin = _a.$addMargin;
|
|
15
15
|
return ($addMargin ? '0.5em' : '0');
|
|
16
16
|
});
|
|
17
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"], ["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"])), function (_a) {
|
|
17
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n border-color: transparent;\n\n @media (hover: hover) {\n &:hover {\n background-color: neutral20;\n }\n }\n\n :disabled {\n opacity: 60%;\n }\n }\n\n &[data-appearance='ghostDanger'] {\n background-color: transparent;\n color: red1;\n border-color: transparent;\n\n @media (hover: hover) {\n &:hover {\n background-color: neutral20;\n }\n }\n\n :disabled {\n opacity: 60%;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"], ["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n border-color: transparent;\n\n @media (hover: hover) {\n &:hover {\n background-color: neutral20;\n }\n }\n\n :disabled {\n opacity: 60%;\n }\n }\n\n &[data-appearance='ghostDanger'] {\n background-color: transparent;\n color: red1;\n border-color: transparent;\n\n @media (hover: hover) {\n &:hover {\n background-color: neutral20;\n }\n }\n\n :disabled {\n opacity: 60%;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"])), function (_a) {
|
|
18
18
|
var fullWidth = _a.fullWidth;
|
|
19
19
|
return (fullWidth ? '100%' : 'initial');
|
|
20
20
|
}, function (_a) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export type SizingValue = 'icon' | 'iconLg' | 'normal' | 'large' | 'grid';
|
|
3
|
-
export type AppearanceValue = 'primary' | 'primaryLight' | 'secondary' | 'primaryLg' | 'secondaryLg' | 'minimal' | 'minimalRed' | 'success';
|
|
3
|
+
export type AppearanceValue = 'primary' | 'primaryLight' | 'secondary' | 'primaryLg' | 'secondaryLg' | 'minimal' | 'minimalRed' | 'success' | 'ghost' | 'ghostDanger';
|
|
4
4
|
export type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
disabled?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { InputProps } from './types';
|
|
2
|
-
export declare const Input: ({ appearance, type, name, label, value, icon, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, asTextArea, ...rest }: InputProps) => JSX.Element;
|
|
2
|
+
export declare const Input: ({ appearance, type, name, label, value, icon, variant, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, asTextArea, ...rest }: InputProps) => JSX.Element;
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -30,7 +30,7 @@ import { Icon } from '../../Elements/Icon';
|
|
|
30
30
|
import { Spinner } from '../../Elements/Spinner';
|
|
31
31
|
var allowedInputTypes = ['text', 'number', 'password'];
|
|
32
32
|
export var Input = function (_a) {
|
|
33
|
-
var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error,
|
|
33
|
+
var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
|
|
34
34
|
var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
|
|
35
35
|
var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
|
|
36
36
|
var $hasSuffix = !!suffix;
|
|
@@ -60,5 +60,5 @@ export var Input = function (_a) {
|
|
|
60
60
|
onEnter === null || onEnter === void 0 ? void 0 : onEnter();
|
|
61
61
|
}
|
|
62
62
|
}, [onEnter]);
|
|
63
|
-
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
|
|
63
|
+
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
|
|
64
64
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ appearance, type, name, label, value, icon, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, asTextArea, ...rest }: import("..").InputProps) => JSX.Element;
|
|
5
|
+
component: ({ appearance, type, name, label, value, icon, variant, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, asTextArea, ...rest }: import("..").InputProps) => JSX.Element;
|
|
6
6
|
argTypes: {};
|
|
7
7
|
};
|
|
8
8
|
export default meta;
|
|
@@ -7,6 +7,7 @@ type StyledInputProps = {
|
|
|
7
7
|
$iconPlacement?: 'left' | 'right';
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
big?: boolean;
|
|
10
|
+
variant?: string;
|
|
10
11
|
value?: string | number;
|
|
11
12
|
$asTextArea?: boolean;
|
|
12
13
|
};
|
|
@@ -29,6 +30,7 @@ export declare const InputRow: import("styled-components").StyledComponent<"div"
|
|
|
29
30
|
disabled: boolean;
|
|
30
31
|
$icon?: string | undefined;
|
|
31
32
|
$isInvalid?: boolean | undefined;
|
|
33
|
+
variant?: string | undefined;
|
|
32
34
|
}, never>;
|
|
33
35
|
export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
34
36
|
export {};
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -25,26 +25,30 @@ export var IconsController = styled.div(templateObject_2 || (templateObject_2 =
|
|
|
25
25
|
export var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
26
26
|
export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
27
27
|
as: props.$asTextArea ? 'textarea' : 'input',
|
|
28
|
-
}); })(
|
|
28
|
+
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
29
29
|
var $isInvalid = _a.$isInvalid;
|
|
30
30
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
31
31
|
}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
32
32
|
var big = _a.big;
|
|
33
33
|
return big
|
|
34
34
|
? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
|
|
35
|
+
}, function (_a) {
|
|
36
|
+
var variant = _a.variant;
|
|
37
|
+
return variant === 'gray'
|
|
38
|
+
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "], ["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "]))) : '';
|
|
35
39
|
});
|
|
36
|
-
export var InputWrap = styled.div(
|
|
37
|
-
export var Suffix = styled.div(
|
|
40
|
+
export var InputWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
41
|
+
export var Suffix = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"])), th('fonts.primary'), function (_a) {
|
|
38
42
|
var $isPointer = _a.$isPointer;
|
|
39
43
|
return $isPointer
|
|
40
|
-
? css(
|
|
44
|
+
? css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
|
|
41
45
|
});
|
|
42
|
-
export var InputRow = styled.div(
|
|
46
|
+
export var InputRow = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
|
|
43
47
|
var $isInvalid = _a.$isInvalid;
|
|
44
48
|
return ($isInvalid ? th.color('red1') : th.color('gray'));
|
|
45
49
|
}, function (_a) {
|
|
46
|
-
var $isInvalid = _a.$isInvalid;
|
|
47
|
-
return
|
|
50
|
+
var $isInvalid = _a.$isInvalid, variant = _a.variant;
|
|
51
|
+
return $isInvalid ? th.color('red1') : variant === 'gray' ? th.color('neutral20') : th.color('lightGray6');
|
|
48
52
|
}, function (_a) {
|
|
49
53
|
var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue;
|
|
50
54
|
return $isInvalid ? th.color('red1') : hasValue ? th.color('typoPrimary') : th.color('gray');
|
|
@@ -55,5 +59,5 @@ export var InputRow = styled.div(templateObject_9 || (templateObject_9 = __makeT
|
|
|
55
59
|
var $icon = _a.$icon;
|
|
56
60
|
return ($icon ? '3em' : '1em');
|
|
57
61
|
});
|
|
58
|
-
export var Tooltip = styled.div(
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
62
|
+
export var Tooltip = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
|
|
63
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -19,6 +19,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
readOnly?: boolean;
|
|
21
21
|
icon?: string;
|
|
22
|
+
variant?: 'default' | 'gray';
|
|
22
23
|
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
23
24
|
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
|
|
24
25
|
onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
|