@mailstep/design-system 0.4.1-beta.0 → 0.4.1-beta.2
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/ImageList/stories/ImageList.stories.js +2 -2
- package/ui/Blocks/LightBox/LightBox.js +1 -1
- package/ui/Blocks/LightBox/styles.js +1 -1
- package/ui/Blocks/LightBox/types.d.ts +1 -1
- package/ui/Blocks/Modal/Modal.js +2 -2
- package/ui/Blocks/Modal/stories/Modal.stories.d.ts +1 -0
- package/ui/Blocks/Modal/stories/Modal.stories.js +8 -0
- package/ui/Blocks/Modal/styles.d.ts +1 -0
- package/ui/Blocks/Modal/styles.js +7 -4
- package/ui/Blocks/Modal/types.d.ts +1 -0
- package/ui/index.es.js +3435 -3423
- package/ui/index.umd.js +171 -168
package/package.json
CHANGED
|
@@ -18,8 +18,8 @@ var meta = {
|
|
|
18
18
|
};
|
|
19
19
|
export default meta;
|
|
20
20
|
var images = [
|
|
21
|
-
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://
|
|
22
|
-
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://
|
|
21
|
+
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/06a09ae0-557c-4808-86f7-f75ac43c6238.jpg' },
|
|
22
|
+
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/06a09ae0-557c-4808-86f7-f75ac43c6238.jpg' },
|
|
23
23
|
];
|
|
24
24
|
export var ImageListDefault = {
|
|
25
25
|
args: {
|
|
@@ -7,7 +7,7 @@ export var LightBox = function (_a) {
|
|
|
7
7
|
var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
|
|
8
8
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
9
9
|
return null;
|
|
10
|
-
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
10
|
+
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "0", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
11
11
|
var _a;
|
|
12
12
|
return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
|
|
13
13
|
}) }) }));
|
|
@@ -6,5 +6,5 @@ import styled from '@xstyled/styled-components';
|
|
|
6
6
|
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
|
|
7
7
|
export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
8
8
|
export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"], ["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"])));
|
|
9
|
-
export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 10px;\n"], ["\n padding: 10px;\n"])));
|
|
9
|
+
export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 10px;\n position: absolute;\n bottom: 0px;\n background: rgba(255, 255, 255, 0.5);\n"], ["\n padding: 10px;\n position: absolute;\n bottom: 0px;\n background: rgba(255, 255, 255, 0.5);\n"])));
|
|
10
10
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
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, _f = _a.whiteBg, whiteBg = _f === void 0 ? false : _f, _g = _a.ignoreClickOutside, ignoreClickOutside = _g === void 0 ? false : _g, _h = _a.closeEverywhere, closeEverywhere = _h === void 0 ? false : _h, _j = _a.withCloseIcon, withCloseIcon = _j === void 0 ? true : _j, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _k = _a.variant, variant = _k === void 0 ? 'compact' : _k;
|
|
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, _f = _a.whiteBg, whiteBg = _f === void 0 ? false : _f, _g = _a.ignoreClickOutside, ignoreClickOutside = _g === void 0 ? false : _g, _h = _a.closeEverywhere, closeEverywhere = _h === void 0 ? false : _h, _j = _a.withCloseIcon, withCloseIcon = _j === void 0 ? true : _j, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _k = _a.variant, variant = _k === void 0 ? 'compact' : _k, 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, "$whiteBg": whiteBg, "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, "$whiteBg": whiteBg, 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' }))] }))] }) }) }));
|
|
36
36
|
});
|
|
@@ -11,6 +11,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
11
11
|
export declare const Default: Story;
|
|
12
12
|
export declare const Compact: Story;
|
|
13
13
|
export declare const MobileFullscreen: Story;
|
|
14
|
+
export declare const ModalTopPosition: Story;
|
|
14
15
|
export declare const ModalWithCloseAndConfirmBtns: Story;
|
|
15
16
|
export declare const ModalWithoutCloseButton: Story;
|
|
16
17
|
export declare const ModalWithIconInTitle: Story;
|
|
@@ -27,6 +27,14 @@ export var MobileFullscreen = {
|
|
|
27
27
|
variant: 'mobileFullscreen',
|
|
28
28
|
},
|
|
29
29
|
};
|
|
30
|
+
export var ModalTopPosition = {
|
|
31
|
+
args: {
|
|
32
|
+
title: 'Modal default version',
|
|
33
|
+
children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
|
|
34
|
+
variant: 'default',
|
|
35
|
+
top: '0'
|
|
36
|
+
},
|
|
37
|
+
};
|
|
30
38
|
export var ModalWithCloseAndConfirmBtns = {
|
|
31
39
|
args: {
|
|
32
40
|
children: _jsx(_Fragment, { children: "Modal with narrow width" }),
|
|
@@ -9,6 +9,7 @@ export declare const DialogWindow: import("styled-components").StyledComponent<"
|
|
|
9
9
|
$maxWidth?: string | undefined;
|
|
10
10
|
$maxHeight?: string | undefined;
|
|
11
11
|
variant: Variant;
|
|
12
|
+
top?: string | undefined;
|
|
12
13
|
}, never>;
|
|
13
14
|
export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
14
15
|
variant: Variant;
|
|
@@ -29,14 +29,14 @@ var variantStyles = function (component, variant) {
|
|
|
29
29
|
compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n "], ["\n padding: 20px 20px 15px;\n "]))),
|
|
30
30
|
mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "]))),
|
|
31
31
|
},
|
|
32
|
-
title: {}
|
|
32
|
+
title: {},
|
|
33
33
|
}[component][variant]);
|
|
34
34
|
};
|
|
35
35
|
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"], ["\n position: fixed;\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"])), function (_a) {
|
|
36
36
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
|
|
37
37
|
return createRgba(backgroundColor, 0.6);
|
|
38
38
|
});
|
|
39
|
-
export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin:
|
|
39
|
+
export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"], ["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"])), function (_a) {
|
|
40
40
|
var $whiteBg = _a.$whiteBg;
|
|
41
41
|
return ($whiteBg ? th.color('white') : '#fefefe');
|
|
42
42
|
}, function (_a) {
|
|
@@ -54,6 +54,9 @@ export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = _
|
|
|
54
54
|
}, function (_a) {
|
|
55
55
|
var $maxWidth = _a.$maxWidth;
|
|
56
56
|
return $maxWidth && "max-width: ".concat($maxWidth);
|
|
57
|
+
}, function (_a) {
|
|
58
|
+
var _b = _a.top, top = _b === void 0 ? '100px' : _b;
|
|
59
|
+
return top;
|
|
57
60
|
});
|
|
58
61
|
export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n ", "\n"])), function (_a) {
|
|
59
62
|
var variant = _a.variant;
|
|
@@ -63,7 +66,7 @@ export var ContentContainer = styled.div(templateObject_13 || (templateObject_13
|
|
|
63
66
|
var variant = _a.variant;
|
|
64
67
|
return variantStyles(Component.ContentContainer, variant);
|
|
65
68
|
});
|
|
66
|
-
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
|
|
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"])));
|
|
67
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"])));
|
|
68
|
-
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"])));
|
|
71
|
+
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"])));
|
|
69
72
|
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;
|