@mailstep/design-system 0.6.34 → 0.6.36

package/package.json

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

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.js

@@ -4,19 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import styled, { useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
+import styled from '@xstyled/styled-components';
 import get from 'lodash/fp/get';
-import Icon from '../../../../Elements/Icon/Icon';
+import { ToastError, ToastSuccess } from '../../../../Elements/Icon';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
 var BoolIcon = function (_a) {
     var rowData = _a.rowData, column = _a.column;
-    var theme = useTheme();
     var value = get(column.name, rowData);
-    var icon = value ? 'check' : 'false';
-    var colorName = value ? 'green' : 'lightGray3';
-    var themeColor = th.color(colorName)({ theme: theme });
-    return (_jsx(Center, { children: _jsx(Icon, { icon: icon, fill: themeColor, size: "14px" }) }));
+    var icon = value ? _jsx(ToastSuccess, {}) : _jsx(ToastError, {});
+    return _jsx(Center, { children: icon });
 };
 export var BoolIconCell = React.memo(BoolIcon);
 var templateObject_1;

package/ui/Elements/Badge/Badge.d.ts

@@ -3,10 +3,9 @@ export type Props = {
     children?: React.ReactNode;
     label?: string | number | JSX.Element;
     color?: string;
-    size?: string | number;
+    size?: 'small' | 'default';
     childWidth?: string | number;
     topPosition?: boolean;
-    fontSize?: number;
 };
-declare const Badge: ({ children, color, size, fontSize, label, childWidth, topPosition }: Props) => JSX.Element;
+declare const Badge: ({ children, color, size, label, childWidth, topPosition }: Props) => JSX.Element;
 export default Badge;

package/ui/Elements/Badge/Badge.js

@@ -5,21 +5,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css, useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"])), function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
+import { useMemo } from 'react';
+var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"], ["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"])), function (_a) {
     var size = _a.size;
-    return size;
+    return (size === 'small' ? '16px' : '24px');
 }, function (_a) {
     var size = _a.size;
-    return size;
+    return (size === 'small' ? '0 5px' : '3px 8px');
+}, function (_a) {
+    var color = _a.color;
+    return color;
 }, th('fonts.primary'), function (_a) {
-    var fontSize = _a.fontSize;
-    return "".concat(fontSize, "px");
+    var size = _a.size;
+    return (size === 'small' ? '12px' : '14px');
+}, function (_a) {
+    var topPosition = _a.topPosition;
+    return topPosition && '-15%';
 }, function (_a) {
     var topPosition = _a.topPosition;
-    return (topPosition ? '75%, -75%' : '50%, -50%');
+    return (topPosition ? '50%' : '100%');
 });
 var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
     var width = _a.width;
@@ -27,14 +31,16 @@ var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemp
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
 });
 var Badge = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red2' : _b, _c = _a.size, size = _c === void 0 ? 6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 10 : _d, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
     var theme = useTheme();
     var themeColor = th.color(color)({ theme: theme });
-    var themeSize = th.fontSize(size)({ theme: theme });
+    var badgeLabel = useMemo(function () {
+        return typeof label === 'number' ? (label >= 100 ? '99+' : label) : label;
+    }, [label]);
     if (!label || (typeof label === 'number' && label <= 0)) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx("div", { className: "label", children: label }) }), children] }));
+    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
 };
 export default Badge;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Badge/stories/Badge.stories.d.ts

@@ -2,11 +2,12 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, color, size, fontSize, label, childWidth, topPosition }: import("../Badge").Props) => JSX.Element;
+    component: ({ children, color, size, label, childWidth, topPosition }: import("../Badge").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Colored: Story;
+export declare const Default: Story;
+export declare const DefaultWithLabel: Story;
+export declare const SmallWithLabel: Story;

package/ui/Elements/Badge/stories/Badge.stories.js

@@ -6,19 +6,28 @@ var meta = {
     argTypes: {},
 };
 export default meta;
-export var Primary = {
+export var Default = {
     args: {
         children: '😀',
-        size: 1,
+        size: 'default',
         childWidth: '30px',
     },
 };
-export var Colored = {
+export var DefaultWithLabel = {
+    args: {
+        children: '😀',
+        label: '10',
+        size: 'default',
+        childWidth: '30px',
+    },
+};
+export var SmallWithLabel = {
     args: {
         children: '😃',
         label: '10',
-        size: 4,
+        size: 'small',
         color: 'darkGreen',
+        topPosition: true,
         childWidth: '50px',
     },
 };

package/ui/Elements/Icon/icons/ToastError.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const ToastError: FC<SvgProps>;

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

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ToastError = function (props) { return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "#A3B3C1" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_1818_912)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM5.19458 5.19477C5.48748 4.90187 5.96235 4.90187 6.25524 5.19477L8.16626 7.10578L10.0773 5.19477C10.3702 4.90187 10.845 4.90187 11.1379 5.19477C11.4308 5.48766 11.4308 5.96253 11.1379 6.25543L9.22692 8.16644L11.1379 10.0774C11.4308 10.3703 11.4308 10.8452 11.1379 11.1381C10.845 11.431 10.3702 11.431 10.0773 11.1381L8.16626 9.2271L6.25525 11.1381C5.96236 11.431 5.48749 11.431 5.19459 11.1381C4.9017 10.8452 4.9017 10.3703 5.19459 10.0774L7.1056 8.16644L5.19458 6.25543C4.90169 5.96253 4.90169 5.48766 5.19458 5.19477Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1818_912", children: _jsx("rect", { width: "15", height: "15", fill: "white", transform: "translate(0.5 0.5)" }) }) })] }))); };

package/ui/Elements/Icon/icons/ToastSuccess.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const ToastSuccess: FC<SvgProps>;

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

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ToastSuccess = function (props) { return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "#00A445" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_1818_895)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM11.6081 6.3074C11.916 5.97153 11.8933 5.44966 11.5575 5.14178C11.2216 4.8339 10.6997 4.85659 10.3918 5.19246L6.87498 9.02902L5.60813 7.647C5.30025 7.31113 4.77838 7.28844 4.4425 7.59633C4.10663 7.90421 4.08394 8.42608 4.39183 8.76195L6.26683 10.8074C6.42309 10.9779 6.64372 11.0749 6.87498 11.0749C7.10623 11.0749 7.32687 10.9779 7.48313 10.8074L11.6081 6.3074Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1818_895", children: _jsx("rect", { width: "15", height: "15", fill: "white", transform: "translate(0.5 0.5)" }) }) })] }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -57,3 +57,5 @@ export { ArrowDown } from './ArrowDown';
 export { ArrowUp } from './ArrowUp';
 export { Desktop } from './Desktop';
 export { Message } from './Message';
+export { ToastSuccess } from './ToastSuccess';
+export { ToastError } from './ToastError';

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

@@ -57,3 +57,5 @@ export { ArrowDown } from './ArrowDown';
 export { ArrowUp } from './ArrowUp';
 export { Desktop } from './Desktop';
 export { Message } from './Message';
+export { ToastSuccess } from './ToastSuccess';
+export { ToastError } from './ToastError';