@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Elements/BarChartSymbol/BarChartSymbol.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+
 export type BarChartSymbolProps = {
     selected?: number;
     total?: number;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,22 +1,7 @@
-import { Bar } from "./styles.js";
-import { x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/BarChartSymbol/BarChartSymbol.tsx
-const BarChartSymbol = ({ total = 3, height = 14, minHeight = 7, selected = 3, gap = 2, width = 3, color }) => {
-	return /* @__PURE__ */ jsx(x.div, {
-		display: "flex",
-		alignItems: "flex-end",
-		gap: `${gap}px`,
-		children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(Bar, {
-			total,
-			index: index + 1,
-			height,
-			minHeight,
-			selected,
-			color,
-			width
-		}, index))
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+import { Bar } from './styles';
+export var BarChartSymbol = function (_a) {
+    var _b = _a.total, total = _b === void 0 ? 3 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.minHeight, minHeight = _d === void 0 ? 7 : _d, _e = _a.selected, selected = _e === void 0 ? 3 : _e, _f = _a.gap, gap = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 3 : _g, color = _a.color;
+    return (_jsx(x.div, { display: "flex", alignItems: "flex-end", gap: "".concat(gap, "px"), children: Array.from({ length: total }).map(function (_, index) { return (_jsx(Bar, { total: total, index: index + 1, height: height, minHeight: minHeight, selected: selected, color: color, width: width }, index)); }) }));
 };
-//#endregion
-export { BarChartSymbol };

package/ui/Elements/BarChartSymbol/index.js

@@ -1,2 +1 @@
-import { BarChartSymbol } from "./BarChartSymbol.js";
-export { BarChartSymbol };
+export { BarChartSymbol } from './BarChartSymbol';

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../BarChartSymbol").BarChartSymbolProps>;
+    component: import('react').FC<import('../BarChartSymbol').BarChartSymbolProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.js

@@ -0,0 +1,26 @@
+import { BarChartSymbol } from '../';
+var meta = {
+    title: 'Elements/BarChartSymbol',
+    component: BarChartSymbol,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {
+        selected: 3,
+        color: 'green'
+    }
+};
+export var MediumBarchChart = {
+    args: {
+        selected: 2,
+        color: 'orange',
+    }
+};
+export var LowBarChart = {
+    args: {
+        selected: 1,
+        color: 'red1',
+    }
+};

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

@@ -1,9 +1,9 @@
-export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const Bar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     height: number;
     minHeight: number;
     index: number;
     total: number;
     selected: number;
-    color?: string;
-    width?: number;
+    color?: string | undefined;
+    width?: number | undefined;
 }, never>;

package/ui/Elements/BarChartSymbol/styles.js

@@ -1,10 +1,16 @@
-import { styled, th } from "@xstyled/styled-components";
-//#region packages/ui/Elements/BarChartSymbol/styles.ts
-const Bar = styled.div`
-  width: ${({ width }) => width}px;
-  height: ${({ index, height, total, minHeight }) => minHeight + (index - 1) * ((height - minHeight) / (total - 1))}px;
-  background-color: ${({ selected, index, color }) => selected >= index ? th.color(color || "red1") : th.color("lightGray6")};
-  border-radius: 7px;
-`;
-//#endregion
-export { Bar };
+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, th } from '@xstyled/styled-components';
+export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"])), function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var index = _a.index, height = _a.height, total = _a.total, minHeight = _a.minHeight;
+    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
+}, function (_a) {
+    var selected = _a.selected, index = _a.index, color = _a.color;
+    return (selected >= index ? th.color(color || 'red1') : th.color('lightGray6'));
+});
+var templateObject_1;

package/ui/Elements/BorderedBox/BorderedBox.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
-import { type BorderedBoxProps } from './types';
+import { default as React } from 'react';
+import { BorderedBoxProps } from './types';
+
 declare const BorderedBox: React.FC<BorderedBoxProps>;
 export default BorderedBox;

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,21 +1,35 @@
-import "react";
-import styled$1, { x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/BorderedBox/BorderedBox.tsx
-const StyledBox = styled$1(x.div)`
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  padding: 3;
-  border: slim;
-  border-color: lightGray3;
-  border-radius: md;
-`;
-const BorderedBox = ({ children, className, id, ...rest }) => /* @__PURE__ */ jsx(StyledBox, {
-	id,
-	className,
-	...rest,
-	children
-});
-//#endregion
-export { BorderedBox as default };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+var StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"])));
+var BorderedBox = function (_a) {
+    var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
+    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
+};
+export default BorderedBox;
+var templateObject_1;

package/ui/Elements/BorderedBox/index.d.ts

@@ -1,3 +1,4 @@
-import BorderedBox from './BorderedBox';
+import { default as BorderedBox } from './BorderedBox';
+
 export { BorderedBox };
 export default BorderedBox;

package/ui/Elements/BorderedBox/index.js

@@ -1,5 +1,3 @@
-import BorderedBox from "./BorderedBox.js";
-//#region packages/ui/Elements/BorderedBox/index.ts
-var BorderedBox_default = BorderedBox;
-//#endregion
-export { BorderedBox, BorderedBox_default as default };
+import BorderedBox from './BorderedBox';
+export { BorderedBox };
+export default BorderedBox;

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").BorderedBoxProps>;
+    component: import('react').FC<import('../types').BorderedBoxProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/BorderedBox/stories/BorderedBox.stories.js

@@ -0,0 +1,13 @@
+import { BorderedBox } from '../';
+var meta = {
+    title: 'Elements/BorderedBox',
+    component: BorderedBox,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: 'content of inner box with border <br /> and new line',
+    },
+};

package/ui/Elements/BorderedBox/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type BorderedBoxProps = {
     children: React.ReactNode;
     className?: string;

package/ui/Elements/Button/Button.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
-import type { Props } from './types';
+import { FC } from 'react';
+import { Props } from './types';
+
 declare const Button: FC<Props>;
 export default Button;

package/ui/Elements/Button/Button.js

@@ -1,44 +1,30 @@
-import { Spinner } from "../Spinner/Spinner.js";
-import "../Spinner/index.js";
-import { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper } from "./styles.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/Button/Button.tsx
-const Button = ({ isLoading, loadingText, icon, iconLeft, iconRight, iconFillColor, iconStrokeColor, variant = "default", appearance = "primary", disabled = false, fullWidth = false, height, buttonRef, onClick, ...props }) => /* @__PURE__ */ jsx(StyledButton, {
-	...props,
-	onClick: !disabled && !isLoading ? onClick : void 0,
-	"data-variant": variant,
-	"data-appearance": appearance,
-	disabled,
-	iconPadding: !!icon && !props.children,
-	ref: buttonRef,
-	fullWidth,
-	height,
-	children: /* @__PURE__ */ jsxs(StyledWrapper, { children: [
-		iconLeft && (typeof iconLeft === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-			$addMarginRight: !!iconLeft,
-			icon: iconLeft,
-			fill: iconFillColor,
-			stroke: iconStrokeColor
-		}) : iconLeft),
-		isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingIconWrapper, {
-			$addMarginRight: !!loadingText || !!props.children,
-			children: /* @__PURE__ */ jsx(Spinner, {
-				variant: "sm",
-				appearance: "processing"
-			})
-		}), loadingText] }),
-		props.children || icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-			icon,
-			fill: iconFillColor,
-			stroke: iconStrokeColor
-		}) : icon),
-		iconRight && (typeof iconRight === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-			$addMarginLeft: !!iconRight,
-			icon: iconRight,
-			fill: iconFillColor,
-			stroke: iconStrokeColor
-		}) : iconRight)
-	] })
-});
-//#endregion
-export { Button as default };
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from '../Spinner';
+import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
+var Button = function (_a) {
+    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconFillColor = _a.iconFillColor, iconStrokeColor = _a.iconStrokeColor, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "iconFillColor", "iconStrokeColor", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
+    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft, fill: iconFillColor, stroke: iconStrokeColor }) : iconLeft), isLoading && (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm", appearance: "processing" }) }), loadingText] })), props.children || (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon, fill: iconFillColor, stroke: iconStrokeColor }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight, fill: iconFillColor, stroke: iconStrokeColor }) : iconRight)] }) })));
+};
+export default Button;

package/ui/Elements/Button/index.d.ts

@@ -1,5 +1,6 @@
-import Button from './Button';
+import { default as Button } from './Button';
 import { AppearanceValue } from './types';
+
 export { Button };
 export type { AppearanceValue };
 export default Button;

package/ui/Elements/Button/index.js

@@ -1,5 +1,3 @@
-import Button from "./Button.js";
-//#region packages/ui/Elements/Button/index.ts
-var Button_default = Button;
-//#endregion
-export { Button, Button_default as default };
+import Button from './Button';
+export { Button };
+export default Button;

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").Props>;
+    component: import('react').FC<import('../types').Props>;
     tags: string[];
     argTypes: {};
     parameters: {

package/ui/Elements/Button/stories/Button.stories.js

@@ -0,0 +1,120 @@
+import { Button } from '../';
+var meta = {
+    title: 'Elements/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2Fwdpl2dchqnNHAsbuoRDXjb%2FElements%3Fnode-id%3D979%253A2939%26t%3DNHB5soSntRqtsFN0-1',
+        },
+    },
+};
+export default meta;
+export var DefaultPrimary = {
+    args: {
+        children: 'Default primary ',
+        variant: 'default',
+        appearance: 'primary',
+        disabled: false,
+    },
+};
+export var DefaultSecondary = {
+    args: {
+        children: 'Default secondary',
+        variant: 'default',
+        appearance: 'secondary',
+        disabled: false,
+    },
+};
+export var DefaultTertiary = {
+    args: {
+        children: 'Default tertiary',
+        variant: 'default',
+        appearance: 'tertiary',
+        disabled: false,
+    },
+};
+export var Success = {
+    args: {
+        children: 'Success',
+        variant: 'success',
+        appearance: 'primary',
+        disabled: false,
+    },
+};
+export var OutlinePrimary = {
+    args: {
+        children: 'Outline primary',
+        variant: 'outline',
+        appearance: 'primary',
+        disabled: false,
+    },
+};
+export var OutlineSecondary = {
+    args: {
+        children: 'Outline secondary',
+        variant: 'outline',
+        appearance: 'secondary',
+        disabled: false,
+    },
+};
+export var GhostPrimary = {
+    args: {
+        children: 'Ghost primary',
+        variant: 'ghost',
+        appearance: 'primary',
+        disabled: false,
+    },
+};
+export var GhostSecondary = {
+    args: {
+        children: 'Ghost secondary',
+        variant: 'ghost',
+        appearance: 'secondary',
+        disabled: false,
+    },
+};
+export var LinkPrimary = {
+    args: {
+        children: 'Link primary',
+        variant: 'link',
+        appearance: 'primary',
+        disabled: false,
+    },
+};
+export var LinkSecondary = {
+    args: {
+        children: 'Link secondary',
+        variant: 'link',
+        appearance: 'secondary',
+        disabled: false,
+    },
+};
+export var Icon = {
+    args: {
+        variant: 'icon',
+        appearance: 'primary',
+        icon: 'coffee',
+        disabled: false,
+    },
+};
+export var IconCustom = {
+    args: {
+        variant: 'icon',
+        appearance: 'primary',
+        icon: 'Print',
+        iconFillColor: 'none',
+        iconStrokeColor: 'white',
+        disabled: false,
+    },
+};
+export var Floating = {
+    args: {
+        variant: 'floating',
+        appearance: 'primary',
+        icon: 'coffee',
+        disabled: false,
+    },
+};

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

@@ -1,16 +1,17 @@
-export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+/// <reference types="react" />
+export declare const StyledWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const LoadingIconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
-    $addMarginRight?: boolean;
-    $addMarginLeft?: boolean;
+export declare const StyledIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
+    $addMarginRight?: boolean | undefined;
+    $addMarginLeft?: boolean | undefined;
 }, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+export declare const StyledButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
     disabled: boolean;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-    iconPadding?: boolean;
-    fullWidth?: boolean;
-    height?: string;
+    iconPadding?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    height?: string | undefined;
 }, never>;