@mailstep/design-system 0.4.1-beta.3 → 0.4.1
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 -3
- 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 -2
- package/ui/Blocks/Modal/stories/Modal.stories.js +3 -10
- package/ui/Blocks/Modal/styles.d.ts +1 -2
- package/ui/Blocks/Modal/styles.js +7 -10
- package/ui/Blocks/Modal/types.d.ts +1 -2
- package/ui/index.es.js +3427 -3439
- package/ui/index.umd.js +233 -236
package/package.json
CHANGED
|
@@ -18,9 +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: '
|
|
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' },
|
|
21
|
+
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
|
|
22
|
+
{ id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
|
|
24
23
|
];
|
|
25
24
|
export var ImageListDefault = {
|
|
26
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",
|
|
10
|
+
return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", 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
|
|
9
|
+
export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 10px;\n"], ["\n padding: 10px;\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,
|
|
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;
|
|
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, "$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' }))] }))] }) }) }));
|
|
36
36
|
});
|
|
@@ -11,12 +11,11 @@ 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;
|
|
15
14
|
export declare const ModalWithCloseAndConfirmBtns: Story;
|
|
16
15
|
export declare const ModalWithoutCloseButton: Story;
|
|
17
16
|
export declare const ModalWithIconInTitle: Story;
|
|
18
17
|
export declare const ModalLoading: Story;
|
|
19
|
-
export declare const
|
|
18
|
+
export declare const ModalWithWhiteBg: Story;
|
|
20
19
|
export declare const ModalWithoutHeader: Story;
|
|
21
20
|
export declare const ModalWithoutFooter: Story;
|
|
22
21
|
export declare const ModalWithoutHeaderAndFooter: Story;
|
|
@@ -27,14 +27,6 @@ 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
|
-
};
|
|
38
30
|
export var ModalWithCloseAndConfirmBtns = {
|
|
39
31
|
args: {
|
|
40
32
|
children: _jsx(_Fragment, { children: "Modal with narrow width" }),
|
|
@@ -68,12 +60,13 @@ export var ModalLoading = {
|
|
|
68
60
|
isLoading: true,
|
|
69
61
|
},
|
|
70
62
|
};
|
|
71
|
-
export var
|
|
63
|
+
export var ModalWithWhiteBg = {
|
|
72
64
|
args: {
|
|
73
65
|
children: _jsx(_Fragment, { children: "Modal with white background" }),
|
|
74
66
|
title: 'Modal title',
|
|
75
67
|
width: 'narrow',
|
|
76
|
-
|
|
68
|
+
// @TODO fix this for SOLID requirements
|
|
69
|
+
whiteBg: true,
|
|
77
70
|
},
|
|
78
71
|
};
|
|
79
72
|
export var ModalWithoutHeader = {
|
|
@@ -3,13 +3,12 @@ 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
|
+
$whiteBg?: boolean | undefined;
|
|
7
7
|
$minWidth?: string | undefined;
|
|
8
8
|
$minHeight?: string | undefined;
|
|
9
9
|
$maxWidth?: string | undefined;
|
|
10
10
|
$maxHeight?: string | undefined;
|
|
11
11
|
variant: Variant;
|
|
12
|
-
top?: string | undefined;
|
|
13
12
|
}, never>;
|
|
14
13
|
export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
15
14
|
variant: Variant;
|
|
@@ -29,16 +29,16 @@ 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
|
-
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: 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:
|
|
40
|
-
var $
|
|
41
|
-
return $
|
|
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: 100px 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: 100px auto 0 auto;\n }\n"])), function (_a) {
|
|
40
|
+
var $whiteBg = _a.$whiteBg;
|
|
41
|
+
return ($whiteBg ? th.color('white') : '#fefefe');
|
|
42
42
|
}, function (_a) {
|
|
43
43
|
var $minWidth = _a.$minWidth;
|
|
44
44
|
return $minWidth || '10%';
|
|
@@ -54,9 +54,6 @@ 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;
|
|
60
57
|
});
|
|
61
58
|
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) {
|
|
62
59
|
var variant = _a.variant;
|
|
@@ -66,7 +63,7 @@ export var ContentContainer = styled.div(templateObject_13 || (templateObject_13
|
|
|
66
63
|
var variant = _a.variant;
|
|
67
64
|
return variantStyles(Component.ContentContainer, variant);
|
|
68
65
|
});
|
|
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"])));
|
|
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 \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
67
|
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"])));
|
|
71
|
-
export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n z-index:
|
|
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"])));
|
|
72
69
|
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;
|
|
@@ -16,7 +16,7 @@ export interface ModalProps {
|
|
|
16
16
|
hasFooter?: boolean;
|
|
17
17
|
hasHeader?: boolean;
|
|
18
18
|
width?: Width;
|
|
19
|
-
|
|
19
|
+
whiteBg?: boolean;
|
|
20
20
|
ignoreClickOutside?: boolean;
|
|
21
21
|
closeEverywhere?: boolean;
|
|
22
22
|
withCloseIcon?: boolean;
|
|
@@ -26,7 +26,6 @@ export interface ModalProps {
|
|
|
26
26
|
maxWidth?: string;
|
|
27
27
|
maxHeight?: string;
|
|
28
28
|
variant?: Variant;
|
|
29
|
-
top?: string;
|
|
30
29
|
}
|
|
31
30
|
export type ModalData = Record<string, any>;
|
|
32
31
|
export type ControlProps<T = ModalData> = {
|