@mailstep/design-system 0.6.35 → 0.6.37

package/package.json

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

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/ArrowForward.d.ts

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

package/ui/Elements/Icon/icons/ArrowForward.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 } from "react/jsx-runtime";
+export var ArrowForward = function (props) { return (_jsx("svg", __assign({ width: "7", height: "11", viewBox: "0 0 7 11", fill: "#A3B3C1" }, props, { children: _jsx("path", { d: "M0.244995 9.565L1.13 10.45L6.08 5.5L1.13 0.550003L0.244995 1.435L4.31 5.5L0.244995 9.565Z" }) }))); };

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

@@ -59,3 +59,4 @@ export { Desktop } from './Desktop';
 export { Message } from './Message';
 export { ToastSuccess } from './ToastSuccess';
 export { ToastError } from './ToastError';
+export { ArrowForward } from './ArrowForward';

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

@@ -59,3 +59,4 @@ export { Desktop } from './Desktop';
 export { Message } from './Message';
 export { ToastSuccess } from './ToastSuccess';
 export { ToastError } from './ToastError';
+export { ArrowForward } from './ArrowForward';