@mailstep/design-system 0.7.5 → 0.7.6-beta.1

package/package.json

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

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

@@ -3,6 +3,7 @@ export type BarChartSymbolProps = {
     selected?: number;
     total?: number;
     height?: number;
+    minHeight?: number;
     width?: number;
     gap?: number;
     color?: string;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -2,6 +2,6 @@ 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)); }) }));
+    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)); }) }));
 };

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

@@ -1,5 +1,6 @@
 export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     height: number;
+    minHeight: number;
     index: number;
     total: number;
     selected: number;

package/ui/Elements/BarChartSymbol/styles.js

@@ -3,12 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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;
+    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;

package/ui/Elements/Table/Table.d.ts

@@ -0,0 +1,6 @@
+export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, {}, never>;
+export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/system").Theme, {}, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/system").Theme, {}, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/system").Theme, {}, never>;
+export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/system").Theme, {}, never>;
+export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/Table/Table.js

@@ -0,0 +1,12 @@
+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 from '@xstyled/styled-components';
+export var Table = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"], ["\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"])));
+export var Tr = styled.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"], ["\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"])));
+export var Td = styled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var Th = styled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"], ["\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"])));
+export var Tbody = styled.tbody(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  td {\n    padding: 9px 4px;\n  }\n"], ["\n  td {\n    padding: 9px 4px;\n  }\n"])));
+export var Thead = styled.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"], ["\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1 @@
+export { Table, Thead, Tr, Th, Td, Tbody } from './Table';

package/ui/Elements/Table/index.js

@@ -0,0 +1 @@
+export { Table, Thead, Tr, Th, Td, Tbody } from './Table';

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

@@ -0,0 +1,8 @@
+declare const meta: {
+    title: string;
+    component: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, {}, never>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/ui/Elements/Table/stories/Table.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, Thead, Tr, Th, Td, Tbody } from '../';
+var meta = {
+    title: 'Elements/Table',
+    component: Table,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = function () { return (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Name" }), _jsx(Th, { children: "Address" }), _jsx(Th, { children: "City" })] }) }), _jsxs(Tbody, { children: [_jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] })] })] })); };