@mailstep/design-system 0.4.1-beta.2 → 0.4.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.1-beta.2",
+  "version": "0.4.1-beta.3",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -19,7 +19,8 @@ var meta = {
 export default meta;
 var images = [
     { 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' },
-    { 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' },
+    { 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' },
+    { 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' },
 ];
 export var ImageListDefault = {
     args: {

package/ui/Blocks/LightBox/LightBox.js

@@ -7,7 +7,7 @@ export var LightBox = function (_a) {
     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;
     if (!(images === null || images === void 0 ? void 0 : images.length))
         return null;
-    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) {
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", background: 'transparent', children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
                 var _a;
                 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));
             }) }) }));

package/ui/Blocks/Modal/Modal.js

@@ -9,7 +9,7 @@ import { Portal } from '../../Elements/Portal';
 import { useClickOutside } from './hooks/useClickOutside';
 import { widthMap } from './utils';
 export var Modal = memo(function (_a) {
-    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;
+    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;
     var closeDialog = useCallback(function () {
         if (onClose) {
             onClose();
@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    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' }))] }))] }) }) }));
+    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' }))] }))] }) }) }));
 });

package/ui/Blocks/Modal/stories/Modal.stories.d.ts

@@ -16,7 +16,7 @@ export declare const ModalWithCloseAndConfirmBtns: Story;
 export declare const ModalWithoutCloseButton: Story;
 export declare const ModalWithIconInTitle: Story;
 export declare const ModalLoading: Story;
-export declare const ModalWithWhiteBg: Story;
+export declare const ModalWithCustomBackground: Story;
 export declare const ModalWithoutHeader: Story;
 export declare const ModalWithoutFooter: Story;
 export declare const ModalWithoutHeaderAndFooter: Story;

package/ui/Blocks/Modal/stories/Modal.stories.js

@@ -68,13 +68,12 @@ export var ModalLoading = {
         isLoading: true,
     },
 };
-export var ModalWithWhiteBg = {
+export var ModalWithCustomBackground = {
     args: {
         children: _jsx(_Fragment, { children: "Modal with white background" }),
         title: 'Modal title',
         width: 'narrow',
-        // @TODO fix this for SOLID requirements
-        whiteBg: true,
+        background: 'blue',
     },
 };
 export var ModalWithoutHeader = {

package/ui/Blocks/Modal/styles.d.ts

@@ -3,7 +3,7 @@ export declare const DialogOverlay: import("styled-components").StyledComponent<
     backgroundColor?: string | undefined;
 }, never>;
 export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $whiteBg?: boolean | undefined;
+    $backgroundColor?: string | undefined;
     $minWidth?: string | undefined;
     $minHeight?: string | undefined;
     $maxWidth?: string | undefined;

package/ui/Blocks/Modal/styles.js

@@ -32,13 +32,13 @@ var variantStyles = function (component, variant) {
         title: {},
     }[component][variant]);
 };
-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) {
+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) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
     return createRgba(backgroundColor, 0.6);
 });
 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) {
-    var $whiteBg = _a.$whiteBg;
-    return ($whiteBg ? th.color('white') : '#fefefe');
+    var $backgroundColor = _a.$backgroundColor;
+    return $backgroundColor || '#fefefe';
 }, function (_a) {
     var $minWidth = _a.$minWidth;
     return $minWidth || '10%';

package/ui/Blocks/Modal/types.d.ts

@@ -16,7 +16,7 @@ export interface ModalProps {
     hasFooter?: boolean;
     hasHeader?: boolean;
     width?: Width;
-    whiteBg?: boolean;
+    background?: string;
     ignoreClickOutside?: boolean;
     closeEverywhere?: boolean;
     withCloseIcon?: boolean;

package/ui/index.es.js

@@ -11824,7 +11824,7 @@ const lM = /* @__PURE__ */ za(sM), Jt = (e, t) => {
   title: {}
 })[e][t], dM = V.div`
   position: fixed;
-  z-index: 5;
+  z-index: 9;
   left: 0;
   top: 0;
   width: 100%;
@@ -11848,7 +11848,7 @@ const lM = /* @__PURE__ */ za(sM), Jt = (e, t) => {
     padding: 16px 0;
   }
 `, fM = V.div`
-  background-color: ${({ $whiteBg: e }) => e ? T.color("white") : "#fefefe"};
+  background-color: ${({ $backgroundColor: e }) => e || "#fefefe"};
   margin: auto;
   box-shadow: dialogShadow;
   min-width: ${({ $minWidth: e }) => e || "10%"};
@@ -11975,7 +11975,7 @@ const lM = /* @__PURE__ */ za(sM), Jt = (e, t) => {
     onClose: u,
     hasFooter: h = !0,
     hasHeader: g = !0,
-    whiteBg: p = !1,
+    background: p,
     ignoreClickOutside: A = !1,
     closeEverywhere: b = !1,
     withCloseIcon: m = !0,
@@ -11999,7 +11999,7 @@ const lM = /* @__PURE__ */ za(sM), Jt = (e, t) => {
       {
         ref: J,
         style: z,
-        $whiteBg: p,
+        $backgroundColor: p,
         top: j,
         "data-cy": "dialogWindow",
         onClick: b ? N : void 0,
@@ -14843,7 +14843,7 @@ const XT = V.div`
   lightBoxActionTitle: n,
   images: i,
   initialSlide: a = 0
-}) => i != null && i.length ? /* @__PURE__ */ f.jsx(bM, { isShown: e, onClose: t, variant: "mobileFullscreen", top: "0", children: /* @__PURE__ */ f.jsx(Nd, { initialSlide: a, slidesPerView: 1, autoHeight: !0, children: i.map((o) => /* @__PURE__ */ f.jsx(Hd, { children: /* @__PURE__ */ f.jsxs(XT, { children: [
+}) => i != null && i.length ? /* @__PURE__ */ f.jsx(bM, { isShown: e, onClose: t, variant: "mobileFullscreen", top: "10px", background: "transparent", children: /* @__PURE__ */ f.jsx(Nd, { initialSlide: a, slidesPerView: 1, autoHeight: !0, children: i.map((o) => /* @__PURE__ */ f.jsx(Hd, { children: /* @__PURE__ */ f.jsxs(XT, { children: [
   /* @__PURE__ */ f.jsx(qT, { src: o.originalUrl ?? o.url, loading: "lazy", alt: "" }),
   (o.date || o.description) && /* @__PURE__ */ f.jsxs($T, { children: [
     o.date,