@mailstep/design-system 0.2.0-beta.0 → 0.2.0-beta.2

package/Elements/Alert/stories/Alert.stories.js

@@ -0,0 +1,73 @@
+import { Alert } from '../';
+var meta = {
+    title: 'Elements/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Success = {
+    args: {
+        intent: 'success',
+        title: 'alert',
+        text: 'text',
+    },
+};
+export var Warning = {
+    args: {
+        intent: 'warning',
+        title: 'alert',
+        text: 'warning',
+    },
+};
+export var Info = {
+    args: {
+        intent: 'info',
+        title: 'alert',
+        text: 'info',
+    },
+};
+export var Danger = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'danger',
+    },
+};
+export var DangerInline = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'danger',
+        inline: true,
+    },
+};
+export var DangerWithMessage = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        onClick: console.log,
+        inline: true,
+    },
+};
+export var WithDescription = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        onClick: console.log,
+        inline: true,
+        desc: "This is an extra description."
+    },
+};
+export var WithCloseAnywhere = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        closeAnywhere: true,
+        onClose: function () { return console.log('Close'); },
+        inline: true,
+    },
+};

package/Elements/Alert/styles.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+    $inline?: boolean | undefined;
+    $colorFill: React.ReactText;
+    $bgColor: React.ReactText;
+}, "color">;
+export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+    $colorFill?: import("react").ReactText | undefined;
+}, "color">;
+export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<{
+    (props: {
+        as?: any;
+        children?: import("react").ReactNode;
+        to?: string | Function | {
+            pathname?: string | undefined;
+            search?: string | undefined;
+            hash?: string | undefined;
+            state?: object | undefined;
+        } | undefined;
+        target?: string | undefined;
+        color?: string | undefined;
+        size: number | "inherit";
+        disabled?: boolean | undefined;
+        onClick?: Function | undefined;
+    }): JSX.Element;
+    defaultProps: {
+        to: string;
+        color: string;
+        disabled: boolean;
+        size: number;
+        padding: string;
+        replace: boolean;
+    };
+}, any, {
+    $colorFill: string;
+}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {
+    $colorFill: React.ReactText;
+}, never>;
+export declare const CloseBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/system").Theme>, never>;

package/Elements/Alert/styles.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Link } from '../Link';
+import { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import styled from 'styled-components';
+export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"], ["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"])), function (_a) {
+    var $inline = _a.$inline, $colorFill = _a.$colorFill;
+    return ($inline ? "solid 1px ".concat($colorFill) : 'none');
+}, function (_a) {
+    var $bgColor = _a.$bgColor;
+    return $bgColor;
+}, th('colors.textPrimary'), th('fonts.primary'));
+export var VerticalSeparator = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"], ["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"])), function (_a) {
+    var $colorFill = _a.$colorFill;
+    return $colorFill;
+});
+export var IconWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 13px 0 9px;\n"], ["\n  margin: 0 13px 0 9px;\n"])));
+export var Title = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"])));
+export var Text = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+export var LinkWrapper = styled(Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"])), function (_a) {
+    var $colorFill = _a.$colorFill;
+    return $colorFill;
+});
+export var ActionButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"], ["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"])), function (_a) {
+    var $colorFill = _a.$colorFill;
+    return $colorFill;
+});
+export var CloseBtn = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"], ["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"])));
+export var Description = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"], ["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"])), th('colors.gray'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/Elements/Alert/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type AlertProps = {
+    intent?: 'success' | 'info' | 'warning' | 'danger';
+    inline?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+    title?: string;
+    text?: string;
+    closeAnywhere?: boolean;
+    href?: string;
+    actionLabel?: React.ReactElement | string;
+    actionType?: 'link' | 'button';
+    desc?: string;
+    [key: string]: any;
+};
+export interface IAlert {
+    (props: AlertProps): JSX.Element;
+}

package/Elements/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/Elements/Avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './types';
+export declare const Avatar: ({ src, size, colorFront, colorBack, className, hoverColorBack, ...rest }: Props) => JSX.Element;

package/Elements/Avatar/Avatar.js

@@ -0,0 +1,37 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { Profile } from '../Icon';
+var defaultDimension = 100;
+var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
+export var Avatar = function (_a) {
+    var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultDimension : _b, colorFront = _a.colorFront, colorBack = _a.colorBack, className = _a.className, hoverColorBack = _a.hoverColorBack, rest = __rest(_a, ["src", "size", "colorFront", "colorBack", "className", "hoverColorBack"]);
+    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, {}) })) }));
+};
+var templateObject_1;

package/Elements/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+import { Avatar } from './Avatar';
+export { Avatar } from './Avatar';
+export default Avatar;

package/Elements/Avatar/index.js

@@ -0,0 +1,3 @@
+import { Avatar } from './Avatar';
+export { Avatar } from './Avatar';
+export default Avatar;

package/Elements/Avatar/stories/Avatar.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ src, size, colorFront, colorBack, className, hoverColorBack, ...rest }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithImage: Story;

package/Elements/Avatar/stories/Avatar.stories.js

@@ -0,0 +1,20 @@
+import { Avatar } from '../Avatar';
+var image = 'data:image/png;base64,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';
+var meta = {
+    title: 'Elements/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        size: 100,
+    },
+};
+export var WithImage = {
+    args: {
+        size: 100,
+        src: image,
+    },
+};

package/Elements/Avatar/types.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    src?: string;
+    size?: number;
+    className?: string;
+    colorFront?: string;
+    colorBack?: string;
+    hoverColorBack?: string;
+};

package/Elements/Avatar/types.js

@@ -0,0 +1 @@
+export {};

package/Elements/Badge/Badge.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type Props = {
+    children?: React.ReactNode;
+    label?: string | number | JSX.Element;
+    color?: string;
+    size?: string | number;
+    childWidth?: string | number;
+    topPosition?: boolean;
+    fontSize?: number;
+};
+declare const Badge: ({ children, color, size, fontSize, label, childWidth, topPosition }: Props) => JSX.Element;
+export default Badge;

package/Elements/Badge/Badge.js

@@ -0,0 +1,40 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    var size = _a.size;
+    return size;
+}, th('fonts.primary'), function (_a) {
+    var fontSize = _a.fontSize;
+    return "".concat(fontSize, "px");
+}, function (_a) {
+    var topPosition = _a.topPosition;
+    return (topPosition ? '75%, -75%' : '50%, -50%');
+});
+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;
+    return width
+        ? 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 theme = useTheme();
+    var themeColor = th.color(color)({ theme: theme });
+    var themeSize = th.fontSize(size)({ theme: theme });
+    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] }));
+};
+export default Badge;
+var templateObject_1, templateObject_2, templateObject_3;

package/Elements/Badge/index.d.ts

@@ -0,0 +1,3 @@
+import Badge from './Badge';
+export { Badge };
+export default Badge;

package/Elements/Badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './Badge';
+export { Badge };
+export default Badge;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, color, size, fontSize, 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;

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

@@ -0,0 +1,24 @@
+import Badge from '../Badge';
+var meta = {
+    title: 'Elements/Badge',
+    component: Badge,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        children: '😀',
+        size: 1,
+        childWidth: '30px',
+    },
+};
+export var Colored = {
+    args: {
+        children: '😃',
+        label: '10',
+        size: 4,
+        color: 'darkGreen',
+        childWidth: '50px',
+    },
+};

package/Elements/BorderedBox/BorderedBox.d.ts

@@ -0,0 +1,3 @@
+import { BorderedBoxProps } from './types';
+declare const BorderedBox: ({ children, className, id, ...rest }: BorderedBoxProps) => JSX.Element;
+export default BorderedBox;

package/Elements/BorderedBox/BorderedBox.js

@@ -0,0 +1,35 @@
+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/Elements/BorderedBox/index.d.ts

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

package/Elements/BorderedBox/index.js

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, className, id, ...rest }: import("../types").BorderedBoxProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/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/Elements/BorderedBox/types.d.ts

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

package/Elements/BorderedBox/types.js

@@ -0,0 +1 @@
+export {};

package/Elements/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { Props } from './types';
+declare const Button: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: Props) => JSX.Element;
+export default Button;

package/Elements/Button/Button.js

@@ -0,0 +1,30 @@
+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 { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
+import { Spinner } from '../Spinner';
+var Button = function (_a) {
+    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
+    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? _jsx(StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
+};
+export default Button;

package/Elements/Button/index.d.ts

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

package/Elements/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+export { Button };
+export default Button;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const PrimaryLight: Story;
+export declare const Secondary: Story;
+export declare const Success: Story;
+export declare const Large: Story;
+export declare const Small: Story;
+export declare const DisabledPrimary: Story;
+export declare const DisabledSecondary: Story;
+export declare const Loading: Story;
+export declare const WithIcon: Story;

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

@@ -0,0 +1,70 @@
+import { Button } from '../';
+var meta = {
+    title: 'Elements/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        children: 'Primary',
+    },
+};
+export var PrimaryLight = {
+    args: {
+        children: 'Primary Light',
+        appearance: 'primaryLight',
+    },
+};
+export var Secondary = {
+    args: {
+        children: 'Secondary',
+        appearance: 'secondary',
+    },
+};
+export var Success = {
+    args: {
+        children: 'Success',
+        appearance: 'success',
+    },
+};
+export var Large = {
+    args: {
+        children: 'Large',
+        sizing: 'large',
+    },
+};
+export var Small = {
+    args: {
+        children: 'Small',
+        sizing: 'normal',
+    },
+};
+export var DisabledPrimary = {
+    args: {
+        children: 'Disabled',
+        disabled: true,
+    },
+};
+export var DisabledSecondary = {
+    args: {
+        children: 'Disabled',
+        disabled: true,
+        appearance: 'secondary',
+    },
+};
+export var Loading = {
+    args: {
+        appearance: 'secondary',
+        loadingText: 'Loading...',
+        isLoading: true,
+    },
+};
+export var WithIcon = {
+    args: {
+        label: 'Button',
+        children: 'Small',
+        icon: 'coffee',
+    },
+};

package/Elements/Button/styles.d.ts

@@ -0,0 +1,19 @@
+/// <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, {
+    $addMargin: boolean;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    $addMargin: boolean;
+}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+    disabled: boolean;
+    columnAlign?: boolean | undefined;
+    children?: any;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    fullWidth: boolean;
+    mt?: string | number | undefined;
+    mr?: string | number | undefined;
+    mb?: string | number | undefined;
+    ml?: string | number | undefined;
+}, never>;