@mailstep/design-system 0.6.27 → 0.6.28

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.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/ui/Elements/Toast/Toast.d.ts +2 -2
  3. package/ui/Elements/Toast/Toast.js +4 -4
  4. package/ui/Elements/Toast/styles.d.ts +1 -1
  5. package/ui/Elements/Toast/styles.js +5 -5
  6. package/ui/index.es.js +6739 -6732
  7. package/ui/index.umd.js +323 -323
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.6.27",
3
+ "version": "0.6.28",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Elements/Toast/Toast.d.ts CHANGED
@@ -4,7 +4,7 @@ export type CustomToastProps = {
4
4
  title?: string;
5
5
  text?: string;
6
6
  type: ToastType;
7
- withProgressBar?: boolean;
7
+ autoClose?: number;
8
8
  };
9
- declare const Toast: ({ closeToast, title, text, type, withProgressBar }: CustomToastProps) => JSX.Element;
9
+ declare const Toast: ({ closeToast, title, text, type, autoClose }: CustomToastProps) => JSX.Element;
10
10
  export default Toast;
package/ui/Elements/Toast/Toast.js CHANGED
@@ -5,15 +5,15 @@ import { Title, Text, ContentWrapper, CloseWrapper, Container } from './styles';
5
5
  import { x } from '@xstyled/styled-components';
6
6
  import { toastTitleMap, toastIconMap, toastIconFill } from './constants';
7
7
  var Toast = function (_a) {
8
- var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, _b = _a.withProgressBar, withProgressBar = _b === void 0 ? false : _b;
8
+ var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, autoClose = _a.autoClose;
9
9
  var icon = toastIconMap[type];
10
10
  var fill = toastIconFill[type];
11
11
  useEffect(function () {
12
- if (!withProgressBar)
12
+ if (!autoClose)
13
13
  return;
14
- var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, 5000);
14
+ var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, autoClose);
15
15
  return function () { return clearTimeout(timer); };
16
16
  }, []);
17
- 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" }) }) })] })] }));
17
+ return (_jsxs(Container, { autoClose: autoClose, 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" }) }) })] })] }));
18
18
  };
19
19
  export default Toast;
package/ui/Elements/Toast/styles.d.ts CHANGED
@@ -3,6 +3,6 @@ export declare const Text: import("styled-components").StyledComponent<"span", i
3
3
  export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
4
4
  export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
5
5
  export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
6
- withProgressBar: boolean;
6
+ autoClose?: number | undefined;
7
7
  fill: string;
8
8
  }, never>;
package/ui/Elements/Toast/styles.js CHANGED
@@ -8,15 +8,15 @@ export var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemp
8
8
  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"])));
9
9
  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"])));
10
10
  var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n to {\n transform: scaleX(0)\n }\n"], ["\n to {\n transform: scaleX(0)\n }\n"])));
11
- 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'));
11
+ var after = function (autoClose) { return 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: ", " ", "ms 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: ", " ", "ms linear;\n border-radius: ", ";\n background-color: ", ";\n }\n"])), timerAnimation, autoClose, th.radius('lg'), th.color('lightGray5')); };
12
12
  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) {
13
- var withProgressBar = _a.withProgressBar;
14
- return withProgressBar && 'bottom: 8px';
13
+ var autoClose = _a.autoClose;
14
+ return autoClose && 'bottom: 8px';
15
15
  }, th.radius('lg'), function (_a) {
16
16
  var fill = _a.fill;
17
17
  return th.color(fill);
18
18
  }, function (_a) {
19
- var withProgressBar = _a.withProgressBar;
20
- return withProgressBar && after;
19
+ var autoClose = _a.autoClose;
20
+ return autoClose && after(autoClose);
21
21
  });
22
22
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;