@mailstep/design-system 0.4.1-beta.2 → 0.4.1-beta.4
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 -1
- package/ui/Blocks/LightBox/LightBox.js +1 -1
- package/ui/Blocks/LightBox/styles.js +1 -1
- package/ui/Blocks/Modal/Modal.js +2 -2
- package/ui/Blocks/Modal/stories/Modal.stories.d.ts +1 -1
- package/ui/Blocks/Modal/stories/Modal.stories.js +2 -3
- package/ui/Blocks/Modal/styles.d.ts +1 -1
- package/ui/Blocks/Modal/styles.js +3 -3
- package/ui/Blocks/Modal/types.d.ts +1 -1
- package/ui/index.es.js +2981 -2987
- package/ui/index.umd.js +230 -229
package/package.json
CHANGED
|
@@ -19,7 +19,8 @@ var meta = {
|
|
|
19
19
|
export default meta;
|
|
20
20
|
var images = [
|
|
21
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: '
|
|
22
|
+
{ id: '2', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/d0d38623-a7db-40dc-b2d9-2dc851f6a702.jpg' },
|
|
23
|
+
{ id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/639e91d9-49b8-4106-a2b6-152d4d3d8f1e.jpg' },
|
|
23
24
|
];
|
|
24
25
|
export var ImageListDefault = {
|
|
25
26
|
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", top: "
|
|
10
|
+
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", 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
|
}) }) }));
|
|
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled from '@xstyled/styled-components';
|
|
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"])));
|
|
6
|
+
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\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
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"])));
|
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,
|
|
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;
|
|
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, "$
|
|
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' }))] }))] }) }) }));
|
|
36
36
|
});
|
|
@@ -16,7 +16,7 @@ export declare const ModalWithCloseAndConfirmBtns: Story;
|
|
|
16
16
|
export declare const ModalWithoutCloseButton: Story;
|
|
17
17
|
export declare const ModalWithIconInTitle: Story;
|
|
18
18
|
export declare const ModalLoading: Story;
|
|
19
|
-
export declare const
|
|
19
|
+
export declare const ModalWithCustomBackground: Story;
|
|
20
20
|
export declare const ModalWithoutHeader: Story;
|
|
21
21
|
export declare const ModalWithoutFooter: Story;
|
|
22
22
|
export declare const ModalWithoutHeaderAndFooter: Story;
|
|
@@ -68,13 +68,12 @@ export var ModalLoading = {
|
|
|
68
68
|
isLoading: true,
|
|
69
69
|
},
|
|
70
70
|
};
|
|
71
|
-
export var
|
|
71
|
+
export var ModalWithCustomBackground = {
|
|
72
72
|
args: {
|
|
73
73
|
children: _jsx(_Fragment, { children: "Modal with white background" }),
|
|
74
74
|
title: 'Modal title',
|
|
75
75
|
width: 'narrow',
|
|
76
|
-
|
|
77
|
-
whiteBg: true,
|
|
76
|
+
background: 'blue',
|
|
78
77
|
},
|
|
79
78
|
};
|
|
80
79
|
export var ModalWithoutHeader = {
|
|
@@ -3,7 +3,7 @@ export declare const DialogOverlay: import("styled-components").StyledComponent<
|
|
|
3
3
|
backgroundColor?: string | undefined;
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
6
|
-
$
|
|
6
|
+
$backgroundColor?: string | undefined;
|
|
7
7
|
$minWidth?: string | undefined;
|
|
8
8
|
$minHeight?: string | undefined;
|
|
9
9
|
$maxWidth?: string | undefined;
|
|
@@ -32,13 +32,13 @@ var variantStyles = function (component, variant) {
|
|
|
32
32
|
title: {},
|
|
33
33
|
}[component][variant]);
|
|
34
34
|
};
|
|
35
|
-
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index:
|
|
35
|
+
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index: 9;\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: 9;\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
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
|
-
var $
|
|
41
|
-
return
|
|
40
|
+
var $backgroundColor = _a.$backgroundColor;
|
|
41
|
+
return $backgroundColor || '#fefefe';
|
|
42
42
|
}, function (_a) {
|
|
43
43
|
var $minWidth = _a.$minWidth;
|
|
44
44
|
return $minWidth || '10%';
|