@mailstep/design-system 0.7.2 → 0.7.4

package/package.json

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

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type BarChartSymbolProps = {
+    selected?: number;
+    total?: number;
+    height?: number;
+    width?: number;
+    gap?: number;
+    color?: string;
+};
+export declare const BarChartSymbol: FC<BarChartSymbolProps>;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -0,0 +1,7 @@
+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.selected, selected = _d === void 0 ? 3 : _d, _e = _a.gap, gap = _e === void 0 ? 2 : _e, _f = _a.width, width = _f === void 0 ? 3 : _f, 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, selected: selected, color: color, width: width }, index)); }) }));
+};

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

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/index.js

@@ -0,0 +1 @@
+export { BarChartSymbol } from './BarChartSymbol';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../BarChartSymbol").BarChartSymbolProps>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const MediumBarchChart: Story;
+export declare const LowBarChart: Story;

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

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

package/ui/Elements/BarChartSymbol/styles.js

@@ -0,0 +1,17 @@
+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';
+var minHeight = 7;
+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;
+    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/Text/types.d.ts

@@ -12,5 +12,7 @@ export type TextProps = {
     mb?: string | number;
     ml?: string | number;
     color?: string;
+    textDecoration?: string;
+    onClick?: (e: React.MouseEvent<HTMLParagraphElement>) => void;
     as?: string | ComponentType<any>;
 };