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

package/Elements/Link/stories/Link.stories.js

@@ -0,0 +1,63 @@
+import { Link } from '../';
+var meta = {
+    title: 'Elements/Link',
+    component: Link,
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [],
+};
+export default meta;
+export var External = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 1,
+        target: '_blank',
+        children: "This is a link",
+    },
+};
+export var Success = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 1,
+        color: 'success',
+        children: "This is a link",
+    },
+};
+export var Warning = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 1,
+        color: 'success',
+        children: "This is a link",
+    },
+};
+export var Disabled = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 1,
+        target: '_blank',
+        disabled: true,
+        children: "This is a link",
+    },
+};
+export var Size3 = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 3,
+        children: "This is a link",
+    },
+};
+export var Size5 = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 5,
+        children: "This is a link",
+    },
+};
+export var Size7 = {
+    args: {
+        to: { pathname: 'https://www.inventi.cz/' },
+        size: 7,
+        children: "This is a link",
+    },
+};

package/Elements/Logo/Logo.d.ts

@@ -0,0 +1,3 @@
+import { LogoProps } from './types';
+declare const Logo: ({ brand, variant, size, width, height, ...rest }: LogoProps) => JSX.Element | null;
+export default Logo;

package/Elements/Logo/Logo.js

@@ -0,0 +1,84 @@
+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 from '@xstyled/styled-components';
+import logoWhiteImage from './assets/mailship/logo_white.png';
+import logoBlackImage from './assets/mailship/logo_black.png';
+import logoMImage from './assets/mailship/logo_m.png';
+import logoSvg from './assets/mailship/mailship-logo.svg';
+import logoMailstepBlack from './assets/mailstep/mailstep_black.svg';
+import logoMailstepWhite from './assets/mailstep/mailstep_white.svg';
+import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
+import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
+import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
+import logoMailstock from './assets/mailstock/mailstock.svg';
+var defaultSizes = {
+    small: '30px',
+    medium: '46px',
+    big: '61px', // cca 200px width on full logo
+};
+var variantMap = {
+    mailship: {
+        white: logoWhiteImage,
+        black: logoBlackImage,
+        m: logoMImage,
+        s: logoSvg,
+    },
+    mailwise: {
+        black: logoMailwise,
+        s: logoMailwiseSmall,
+    },
+    mailstock: {
+        black: logoMailstock,
+    },
+    mailstep: {
+        black: logoMailstepBlack,
+        white: logoMailstepWhite,
+    },
+    mailwrap: {
+        black: logoMailwrap,
+    },
+};
+var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+    var width = _a.width;
+    return width || 'auto';
+}, function (_a) {
+    var height = _a.height, width = _a.width, size = _a.size;
+    return height || (width ? 'auto' : size ? defaultSizes[size] : defaultSizes['medium']);
+});
+var Logo = function (_a) {
+    var _b = _a.brand, brand = _b === void 0 ? 'mailship' : _b, variant = _a.variant, size = _a.size, width = _a.width, height = _a.height, rest = __rest(_a, ["brand", "variant", "size", "width", "height"]);
+    var variants = variantMap[brand];
+    var logo = variants[variant];
+    if (!logo) {
+        console.warn('No variant for this logo exists.');
+        return null;
+    }
+    return _jsx(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
+};
+export default Logo;
+var templateObject_1;

package/Elements/Logo/index.d.ts

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

package/Elements/Logo/index.js

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

package/Elements/Logo/stories/Logo.stories.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ brand, variant, size, width, height, ...rest }: import("../types").LogoProps) => JSX.Element | null;
+    parameters: {
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
+    };
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const MailshipBlack: Story;
+export declare const MailshipWhite: Story;
+export declare const MailshipM: Story;
+export declare const MailshipS: Story;
+export declare const MailwiseBlack: Story;
+export declare const MailwiseS: Story;
+export declare const MailstockBlack: Story;
+export declare const MailwrapBlack: Story;
+export declare const MailstepBlack: Story;
+export declare const MailstepWhite: Story;
+export declare const SizeSmall: Story;
+export declare const SizeMedium: Story;
+export declare const SizeBig: Story;
+export declare const SizeCustomWidth: Story;
+export declare const SizeCustomHeight: Story;

package/Elements/Logo/stories/Logo.stories.js

@@ -0,0 +1,112 @@
+import Logo from '../Logo';
+var meta = {
+    title: 'Elements/Logo',
+    component: Logo,
+    parameters: {
+        backgrounds: {
+            default: 'darkGray',
+            values: [
+                { name: 'darkGray', value: '#333' },
+                { name: 'lightGray', value: '#eee' },
+            ],
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var MailshipBlack = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+    },
+};
+export var MailshipWhite = {
+    args: {
+        brand: 'mailship',
+        variant: 'white',
+    },
+};
+export var MailshipM = {
+    args: {
+        brand: 'mailship',
+        variant: 'm',
+    },
+};
+export var MailshipS = {
+    args: {
+        brand: 'mailship',
+        variant: 's',
+    },
+};
+export var MailwiseBlack = {
+    args: {
+        brand: 'mailwise',
+        variant: 'black',
+    },
+};
+export var MailwiseS = {
+    args: {
+        brand: 'mailwise',
+        variant: 's',
+    },
+};
+export var MailstockBlack = {
+    args: {
+        brand: 'mailstock',
+        variant: 'black',
+    },
+};
+export var MailwrapBlack = {
+    args: {
+        brand: 'mailwrap',
+        variant: 'black',
+    },
+};
+export var MailstepBlack = {
+    args: {
+        brand: 'mailstep',
+        variant: 'black',
+    },
+};
+export var MailstepWhite = {
+    args: {
+        brand: 'mailstep',
+        variant: 'white',
+    },
+};
+export var SizeSmall = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'small',
+    },
+};
+export var SizeMedium = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'medium',
+    },
+};
+export var SizeBig = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'big',
+    },
+};
+export var SizeCustomWidth = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        width: '400px',
+    },
+};
+export var SizeCustomHeight = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        height: '200px',
+    },
+};

package/Elements/Logo/types.d.ts

@@ -0,0 +1,10 @@
+export type Brand = 'mailship' | 'mailwise' | 'mailstock' | 'mailstep' | 'mailwrap';
+export type Variant = 'white' | 'black' | 'm' | 's';
+export type Size = 'small' | 'medium' | 'big' | undefined;
+export type LogoProps = {
+    variant?: Variant;
+    size?: Size;
+    brand?: Brand;
+    width?: string;
+    height?: string;
+};

package/Elements/Logo/types.js

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

package/Elements/Pagination/Pagination.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    page?: number;
+    itemCount?: number;
+    itemPerPage?: number;
+    onPageChange?: (number: number) => void;
+};
+declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page }: Props) => JSX.Element;
+export default Pagination;

package/Elements/Pagination/Pagination.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
+var Pagination = function (_a) {
+    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page;
+    var setPage = useCallback(function (number) { return function () {
+        if (onPageChange) {
+            onPageChange(number);
+        }
+    }; }, [onPageChange]);
+    var pageX = page !== null && page !== void 0 ? page : 1;
+    var pageCount = Math.max(Math.ceil((itemCount !== null && itemCount !== void 0 ? itemCount : 0) / (itemPerPage !== null && itemPerPage !== void 0 ? itemPerPage : 3)), 1);
+    var arrayOfPages = useMemo(function () {
+        var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
+        // first and last page are still visible
+        // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
+        if (pageCount < 6) {
+            return pageNumbers.slice(1, pageCount - 1);
+            // if current page is less than 5 (display first 5 pages)
+        }
+        else if (pageX < 5) {
+            return pageNumbers.slice(1, 5);
+            // display last 5 pages
+        }
+        else if (pageX > pageCount - 4) {
+            return pageNumbers.slice(pageCount - 5, pageCount - 1);
+        }
+        else {
+            // display dispersion of 2 chars from current page (part between dots)
+            return pageNumbers.slice(pageX - 3, pageX + 2);
+        }
+    }, [pageCount, pageX]);
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+};
+export default Pagination;

package/Elements/Pagination/index.d.ts

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

package/Elements/Pagination/index.js

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

package/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ onPageChange, itemPerPage, itemCount, page }: import("../Pagination").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManyPages: Story;

package/Elements/Pagination/stories/Pagination.stories.js

@@ -0,0 +1,22 @@
+import { Pagination } from '../';
+var meta = {
+    title: 'Elements/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        itemCount: 100,
+        itemPerPage: 8,
+        page: 1,
+    },
+};
+export var ManyPages = {
+    args: {
+        itemCount: 1000,
+        itemPerPage: 8,
+        page: 1,
+    },
+};

package/Elements/Pagination/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+    disabled: boolean;
+}, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    isActive: boolean;
+}, never>;
+export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    isActive: boolean;
+}, never>;
+export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+    isCurrent: boolean;
+}, never>;

package/Elements/Pagination/styled.js

@@ -0,0 +1,26 @@
+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, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { Icon } from '../Icon';
+export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"])));
+export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0 : 1);
+});
+export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
+export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"])));
+export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
+export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
+    var isCurrent = _a.isCurrent;
+    return (isCurrent ? th.color('red1') : th.color('gray1'));
+}, function (_a) {
+    var isCurrent = _a.isCurrent;
+    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('medium'));
+}, th('fonts.primary'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Elements/Paragraph/Paragraph.d.ts

@@ -0,0 +1,2 @@
+declare const Paragraph: () => import("react/jsx-runtime").JSX.Element;
+export default Paragraph;

package/Elements/Paragraph/Paragraph.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Paragraph = function () { return _jsx("p", { children: "paragraph" }); };
+export default Paragraph;

package/Elements/Paragraph/index.d.ts

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

package/Elements/Paragraph/index.js

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

package/Elements/Paragraph/stories/Paragraph.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/Elements/Paragraph/stories/Paragraph.stories.js

@@ -0,0 +1,34 @@
+import { Paragraph } from '../';
+var meta = {
+    title: 'Elements/Paragraph',
+    component: Paragraph,
+    tags: ['autodocs'],
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export var Primary = {
+    args: {
+        primary: true,
+        label: 'Paragraph',
+    },
+};
+export var Secondary = {
+    args: {
+        label: 'Paragraph',
+    },
+};
+export var Large = {
+    args: {
+        size: 'large',
+        label: 'Paragraph',
+    },
+};
+export var Small = {
+    args: {
+        size: 'small',
+        label: 'Paragraph',
+    },
+};

package/Elements/Portal/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Portal: ({ children }: {
+    children: JSX.Element;
+}) => import("react").ReactPortal;
+export default Portal;

package/Elements/Portal/index.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+export var Portal = function (_a) {
+    var children = _a.children;
+    var container = useState(function () { return document.createElement('div'); })[0];
+    useEffect(function () {
+        document.body.appendChild(container);
+        return function () {
+            document.body.removeChild(container);
+        };
+    }, []);
+    return ReactDom.createPortal(children, container);
+};
+export default Portal;

package/Elements/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    progress?: number;
+    status?: 'loading' | 'finished' | 'error';
+    errorMessage?: string;
+    noText?: boolean;
+    variant?: 'normal' | 'thin';
+};
+declare const ProgressBar: ({ progress, status, errorMessage, noText, variant }: Props) => JSX.Element;
+export default ProgressBar;

package/Elements/ProgressBar/ProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledProgressBar, Progress, ProgressDescription } from './styles';
+var ProgressBar = function (_a) {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
+    if (progress > 100 || progress < 0)
+        console.warn('Progress value should be number between 0 and 100.');
+    return (_jsxs(StyledProgressBar, { status: status, variant: variant, children: [_jsx(Progress, { progress: progress, status: status }), !noText && _jsx(ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
+};
+export default ProgressBar;

package/Elements/ProgressBar/index.d.ts

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

package/Elements/ProgressBar/index.js

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

package/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ progress, status, errorMessage, noText, variant }: {
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
+    }) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loading: Story;
+export declare const Finished: Story;
+export declare const Error: Story;

package/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -0,0 +1,27 @@
+import ProgressBar from '../ProgressBar';
+var meta = {
+    title: 'Elements/ProgressBar',
+    component: ProgressBar,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Loading = {
+    args: {
+        progress: 10,
+        status: "loading"
+    },
+};
+export var Finished = {
+    args: {
+        progress: 100,
+        status: "finished"
+    },
+};
+export var Error = {
+    args: {
+        progress: 30,
+        status: "error",
+        errorMessage: "There has been some issues on the way."
+    },
+};

package/Elements/ProgressBar/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    status: string | null | undefined;
+    variant?: "normal" | "thin" | undefined;
+}, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    progress: number;
+    status: string | null | undefined;
+}, never>;
+export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;