@mailstep/design-system 0.7.34 → 0.7.35-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/package.json +1 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts +1 -1
- package/ui/Elements/Button/Button.d.ts +2 -2
- package/ui/Elements/Button/Button.js +3 -3
- package/ui/Elements/Button/stories/Button.stories.d.ts +1 -1
- package/ui/Elements/Button/styles.d.ts +1 -0
- package/ui/Elements/Button/styles.js +5 -2
- package/ui/Elements/Button/types.d.ts +1 -0
- package/ui/index.es.js +4579 -4576
- package/ui/index.umd.js +256 -256
package/package.json
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
3
3
|
export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
4
4
|
export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
5
|
-
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../../../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
5
|
+
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: import("../../../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { Props } from './types';
|
|
2
|
-
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: Props) => JSX.Element;
|
|
1
|
+
import type { Props } from './types';
|
|
2
|
+
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: Props) => JSX.Element;
|
|
3
3
|
export default Button;
|
|
@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
|
|
25
24
|
import { Spinner } from '../Spinner';
|
|
25
|
+
import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
|
|
26
26
|
var Button = function (_a) {
|
|
27
|
-
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "buttonRef", "onClick"]);
|
|
28
|
-
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
|
|
27
|
+
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
|
|
28
|
+
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
|
|
29
29
|
};
|
|
30
30
|
export default Button;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
|
|
5
|
+
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
parameters: {
|
|
@@ -13,4 +13,5 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
|
|
|
13
13
|
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
14
14
|
iconPadding?: boolean | undefined;
|
|
15
15
|
fullWidth?: boolean | undefined;
|
|
16
|
+
height?: string | undefined;
|
|
16
17
|
}, never>;
|
|
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
6
5
|
import { Icon } from '../Icon';
|
|
6
|
+
import styled, { th } from '@xstyled/styled-components';
|
|
7
7
|
export var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
8
8
|
export var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & svg {\n margin-right: ", ";\n }\n"], ["\n & svg {\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
9
9
|
var $addMarginRight = _a.$addMarginRight;
|
|
@@ -16,10 +16,13 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height:
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
23
|
+
var height = _a.height;
|
|
24
|
+
return height || '38px';
|
|
25
|
+
}, function (_a) {
|
|
23
26
|
var iconPadding = _a.iconPadding;
|
|
24
27
|
return (iconPadding ? '9px' : '7px 18px');
|
|
25
28
|
}, function (_a) {
|