@mailstep/design-system 0.4.0-beta.1 → 0.4.0-beta.3

package/README.md

@@ -14,6 +14,12 @@ yarn install
 yarn dev
 ```
 
+### How to use
+```
+yarn add @mailstep/design-system
+```
+and add `import 'swiper/css'` somewhere to the root app.
+
 
 #### How to publish
 In root folder run 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.3",
   "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 {};

package/ui/Elements/Icon/icons/Cancel.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Cancel = function (props) { return (_jsx("svg", __assign({ width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { id: "cancel", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.61873 0.375917C1.26726 0.0244455 0.697412 0.0244455 0.34594 0.375917C-0.00553197 0.727389 -0.00553197 1.29724 0.34594 1.64871L4.21225 5.51502L0.34594 9.38133C-0.00553159 9.7328 -0.00553156 10.3026 0.34594 10.6541C0.697412 11.0056 1.26726 11.0056 1.61873 10.6541L5.48504 6.78781L9.35135 10.6541C9.70282 11.0056 10.2727 11.0056 10.6241 10.6541C10.9756 10.3026 10.9756 9.7328 10.6241 9.38133L6.75783 5.51502L10.6241 1.64871C10.9756 1.29724 10.9756 0.727391 10.6241 0.375919C10.2727 0.024447 9.70282 0.024447 9.35135 0.375919L5.48504 4.24223L1.61873 0.375917Z", fill: "#22394E" }) }))); };
+export var Cancel = function (props) { return (_jsx("svg", __assign({ width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { id: "cancel", fillRule: "evenodd", clipRule: "evenodd", d: "M1.61873 0.375917C1.26726 0.0244455 0.697412 0.0244455 0.34594 0.375917C-0.00553197 0.727389 -0.00553197 1.29724 0.34594 1.64871L4.21225 5.51502L0.34594 9.38133C-0.00553159 9.7328 -0.00553156 10.3026 0.34594 10.6541C0.697412 11.0056 1.26726 11.0056 1.61873 10.6541L5.48504 6.78781L9.35135 10.6541C9.70282 11.0056 10.2727 11.0056 10.6241 10.6541C10.9756 10.3026 10.9756 9.7328 10.6241 9.38133L6.75783 5.51502L10.6241 1.64871C10.9756 1.29724 10.9756 0.727391 10.6241 0.375919C10.2727 0.024447 9.70282 0.024447 9.35135 0.375919L5.48504 4.24223L1.61873 0.375917Z", fill: "#22394E" }) }))); };