@mailstep/design-system 0.4.0-beta.2 → 0.4.0

package/package.json

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

package/ui/Blocks/LightBox/LightBox.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Elements/Button';
-import Modal, { Variant } from '../Modal';
+import Modal from '../Modal';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Container, Image, ButtonContainer } from './styles';
 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: Variant.MobileFullscreen, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", 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.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
             }) }) }));

package/ui/Blocks/Modal/Modal.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useEffect } from 'react';
-import { Variant } from './types';
 import { Icon, Cancel } from '../../Elements/Icon';
 import { H2, H5 } from '../../Elements/Typography';
 import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, } from './styles';
@@ -10,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 ? Variant.Compact : _k;
+    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;
     var closeDialog = useCallback(function () {
         if (onClose) {
             onClose();
@@ -33,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, "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 == Variant.Default ? (_jsx(H2, { mt: 0, mb: 0, children: title })) : (_jsx(H5, { mt: 0, mb: 0, children: title }))] }) })), hasHeader && !closeEverywhere && 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, "$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 }))] }) })), hasHeader && !closeEverywhere && 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/index.d.ts

@@ -1,6 +1,5 @@
 import { Modal } from './Modal';
 export { useModal } from './hooks/useModal';
 export { useClickOutside } from './hooks/useClickOutside';
-export { Variant } from './types';
 export type { ControlProps, ModalProps, ModalData } from './types';
 export default Modal;

package/ui/Blocks/Modal/index.js

@@ -1,5 +1,4 @@
 import { Modal } from './Modal';
 export { useModal } from './hooks/useModal';
 export { useClickOutside } from './hooks/useClickOutside';
-export { Variant } from './types';
 export default Modal;

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal, { Variant } from '../';
+import Modal from '../';
 var meta = {
     title: 'Blocks/Modal',
     component: Modal,
@@ -11,19 +11,20 @@ export var Default = {
     args: {
         title: 'Modal default version',
         children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+        variant: 'default',
     },
 };
 export var Compact = {
     args: {
         title: 'Modal title',
         children: _jsx(_Fragment, { children: "Modal compact version" }),
-        variant: Variant.Compact,
+        variant: 'compact',
     },
 };
 export var MobileFullscreen = {
     args: {
         children: _jsx(_Fragment, { children: "Mobile full screen version without title" }),
-        variant: Variant.MobileFullscreen,
+        variant: 'mobileFullscreen',
     },
 };
 export var ModalWithCloseAndConfirmBtns = {

package/ui/Blocks/Modal/styles.js

@@ -4,7 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { css, th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
-import { Variant } from './types';
 var Component;
 (function (Component) {
     Component["Header"] = "header";
@@ -13,7 +12,7 @@ var Component;
     Component["Title"] = "title";
 })(Component || (Component = {}));
 var variantStyles = function (component, variant) {
-    if (variant === void 0) { variant = Variant.Default; }
+    if (variant === void 0) { variant = 'default'; }
     return ({
         header: {
             default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),

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

@@ -1,9 +1,5 @@
 import { MutableRefObject } from 'react';
-export declare enum Variant {
-    Default = "default",
-    Compact = "compact",
-    MobileFullscreen = "mobileFullscreen"
-}
+export type Variant = 'default' | 'compact' | 'mobileFullscreen';
 export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
 export interface ModalProps {
     isShown?: boolean;

package/ui/Blocks/Modal/types.js

@@ -1,6 +1 @@
-export var Variant;
-(function (Variant) {
-    Variant["Default"] = "default";
-    Variant["Compact"] = "compact";
-    Variant["MobileFullscreen"] = "mobileFullscreen";
-})(Variant || (Variant = {}));
+export {};