@mailstep/design-system 0.6.26 → 0.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.26",
+  "version": "0.6.27",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -79,7 +79,6 @@
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
     "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
@@ -122,7 +121,6 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",

package/ui/Elements/Toast/Toast.d.ts

@@ -1,11 +1,10 @@
-import { ToastOptions } from 'react-toastify';
 export type ToastType = 'info' | 'success' | 'error' | 'warning';
-export type CustomToastProps = ToastOptions & {
+export type CustomToastProps = {
     closeToast?: () => void;
-    toastProps?: ToastOptions;
     title?: string;
     text?: string;
     type: ToastType;
+    withProgressBar?: boolean;
 };
-declare const Toast: ({ closeToast, title, text, type }: CustomToastProps) => JSX.Element;
+declare const Toast: ({ closeToast, title, text, type, withProgressBar }: CustomToastProps) => JSX.Element;
 export default Toast;

package/ui/Elements/Toast/Toast.js

@@ -1,24 +1,19 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
+import { useEffect } from 'react';
 import { Icon } from '../Icon';
-var toastTitleMap = {
-    info: 'Info',
-    success: 'Success',
-    error: 'Error',
-    warning: 'Warning',
-};
-var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
-var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
-var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+import { Title, Text, ContentWrapper, CloseWrapper, Container } from './styles';
+import { x } from '@xstyled/styled-components';
+import { toastTitleMap, toastIconMap, toastIconFill } from './constants';
 var Toast = function (_a) {
-    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type;
-    return (_jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] }));
+    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, _b = _a.withProgressBar, withProgressBar = _b === void 0 ? false : _b;
+    var icon = toastIconMap[type];
+    var fill = toastIconFill[type];
+    useEffect(function () {
+        if (!withProgressBar)
+            return;
+        var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, 5000);
+        return function () { return clearTimeout(timer); };
+    }, []);
+    return (_jsxs(Container, { withProgressBar: withProgressBar, fill: fill, children: [_jsx(x.div, { mx: "12px", children: _jsx(Icon, { icon: icon, fill: fill, size: "20px" }) }), _jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] })] }));
 };
 export default Toast;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Toast/constants.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToastType } from './Toast';
+export declare const toastIconMap: Record<ToastType, string>;
+export declare const toastIconFill: Record<ToastType, string>;
+export declare const toastTitleMap: Record<ToastType, React.ReactElement | string>;

package/ui/Elements/Toast/constants.js

@@ -0,0 +1,18 @@
+export var toastIconMap = {
+    info: 'info',
+    success: 'circleCheck',
+    error: 'circleX',
+    warning: 'circleTriangle',
+};
+export var toastIconFill = {
+    info: 'blue2',
+    success: 'darkGreen',
+    error: 'red1',
+    warning: 'yellow1',
+};
+export var toastTitleMap = {
+    info: 'Info',
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+};

package/ui/Elements/Toast/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Title: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    withProgressBar: boolean;
+    fill: string;
+}, never>;

package/ui/Elements/Toast/styles.js

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css, keyframes, th } from '@xstyled/styled-components';
+export var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
+export var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
+export var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    to {\n       transform: scaleX(0)\n    }\n"], ["\n    to {\n       transform: scaleX(0)\n    }\n"])));
+var after = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " 5s linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " 5s linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"])), timerAnimation, th.radius('lg'), th.color('lightGray5'));
+export var Container = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"])), th.radius('lg'), th.shadow('cornerDialogShadow'), '(max-width: 576px)', function (_a) {
+    var withProgressBar = _a.withProgressBar;
+    return withProgressBar && 'bottom: 8px';
+}, th.radius('lg'), function (_a) {
+    var fill = _a.fill;
+    return th.color(fill);
+}, function (_a) {
+    var withProgressBar = _a.withProgressBar;
+    return withProgressBar && after;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;