@pedidopago/ui 1.5.21 → 1.5.24

package/dist/components/Pagination/pagination.test.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+describe('Pagination', function () {
+  it('Should render pagination', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages
+    }));
+    expect(_react.screen.getByText('10')).toBeInTheDocument();
+  });
+  it('Should call change function', function () {
+    var fn = jest.fn();
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      onChange: fn
+    }));
+
+    _react.fireEvent.click(_react.screen.getByText('2'));
+
+    expect(fn).toBeCalled();
+  });
+  it('Should disable previous button when current page to be 1', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var _screen$getAllByRole = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
+        previousButton = _screen$getAllByRole2[0];
+
+    expect(previousButton).toBeDisabled();
+  });
+  it('Should disable next button when current page to be last page', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var buttons = _react.screen.getAllByRole('button');
+
+    var _buttons$reverse = buttons.reverse(),
+        _buttons$reverse2 = _slicedToArray(_buttons$reverse, 1),
+        nextButton = _buttons$reverse2[0];
+
+    _react.fireEvent.click(_react.screen.getByText('10'));
+
+    expect(nextButton).toBeDisabled();
+  });
+  it('Should change current page on Click', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var pageButton = _react.screen.getByText('3');
+
+    _react.fireEvent.click(pageButton);
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
+  });
+  it('Should set hightlight color if color prop is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      color: "#f6ca3f"
+    }));
+
+    var pageButton = _react.screen.getByText('1');
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(246, 202, 63)');
+  });
+  it('Should set circular button if shape circular is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      shape: "circular"
+    }));
+
+    var _screen$getAllByRole3 = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole4 = _slicedToArray(_screen$getAllByRole3, 1),
+        navigationButton = _screen$getAllByRole4[0];
+
+    expect(window.getComputedStyle(navigationButton).borderRadius).toBe('50%');
+  });
+  it('Should set roundend button if shape rounded is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      shape: "rounded"
+    }));
+
+    var _screen$getAllByRole5 = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole6 = _slicedToArray(_screen$getAllByRole5, 1),
+        navigationButton = _screen$getAllByRole6[0];
+
+    expect(window.getComputedStyle(navigationButton).borderRadius).toBe('8px 0 0 8px');
+  });
+  it('Should render small pagination if size small is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      size: "small"
+    }));
+    expect(_react.screen.getAllByRole('button').length).toBe(2);
+  });
+  it('Should render default selected page if defaultPage is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      defaultPage: 5
+    }));
+
+    var pageButton = _react.screen.getByText('5');
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
+  });
+  it('Should disabled if isDisabledProp is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+      count: numberOfPages,
+      isDisabled: true
+    }));
+
+    var pageButton = _react.screen.getByText('10');
+
+    expect(pageButton).toBeDisabled();
+  });
+});

package/dist/components/Pagination/styles.d.ts

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-import { IStyledPagination } from './types';
-export declare const PaginationList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PageWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyledPagination } from './types';
+export declare const PaginationList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PageWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Pagination/types.d.ts

@@ -1,29 +1,29 @@
-import { ExtendThemeProps } from '../../shared/theme';
-import { IconName } from '../Icon/types';
-export interface IPaginationProps {
-    count: number;
-    defaultPage?: number;
-    variant?: 'outlined' | 'text';
-    shape?: 'circular' | 'rounded';
-    size?: 'small' | 'large';
-    previousButtonIcon?: IconName;
-    nextButtonIcon?: IconName;
-    color?: string;
-    isDisabled?: boolean;
-    onChange?: (value: number) => void;
-}
-export interface IPaginationHook {
-    count: number;
-    activePage: number;
-}
-export interface IStyledPagination {
-    theme?: ExtendThemeProps;
-    isActivePage?: boolean;
-    variant?: 'outlined' | 'text';
-    shape?: 'circular' | 'rounded';
-    size?: 'small' | 'large';
-    numberOfPageColor?: string;
-    grayColor?: string;
-    saturationColor?: string;
-}
+import { ExtendThemeProps } from 'src';
+import { IconName } from '../Icon/types';
+export interface IPaginationProps {
+    count: number;
+    defaultPage?: number;
+    variant?: 'outlined' | 'text';
+    shape?: 'circular' | 'rounded';
+    size?: 'small' | 'large';
+    previousButtonIcon?: IconName;
+    nextButtonIcon?: IconName;
+    color?: string;
+    isDisabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export interface IPaginationHook {
+    count: number;
+    activePage: number;
+}
+export interface IStyledPagination {
+    theme?: ExtendThemeProps;
+    isActivePage?: boolean;
+    variant?: 'outlined' | 'text';
+    shape?: 'circular' | 'rounded';
+    size?: 'small' | 'large';
+    numberOfPageColor?: string;
+    grayColor?: string;
+    saturationColor?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Pagination/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}

package/dist/components/Progress/Circle/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { CircleProps } from './types';
-export declare function CircleProgress({ percent, isAnimated, percentBarColor, size, stroke, circleBody, showValue, steps, }: CircleProps): JSX.Element;
+/// <reference types="react" />
+import { CircleProps } from './types';
+export declare function CircleProgress({ percent, isAnimated, percentBarColor, size, stroke, circleBody, showValue, steps, }: CircleProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Progress/Circle/styles.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { DisplayValueProps } from '../types';
-import { CircleStyleProps, CircleBodyProps } from './types';
-export declare const CircleArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    size?: number | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Value: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SVGArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    size?: number | undefined;
-}, import("react").SVGProps<SVGSVGElement>, {}>;
-export declare const SVGCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & CircleStyleProps, import("react").SVGProps<SVGCircleElement>, {}>;
-export declare const SVGSecondCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & CircleBodyProps, import("react").SVGProps<SVGCircleElement>, {}>;
+/// <reference types="react" />
+import { DisplayValueProps } from '../types';
+import { CircleStyleProps, CircleBodyProps } from './types';
+export declare const CircleArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Value: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SVGArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size?: number | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const SVGCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CircleStyleProps, import("react").SVGProps<SVGCircleElement>, {}>;
+export declare const SVGSecondCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CircleBodyProps, import("react").SVGProps<SVGCircleElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Progress/Circle/types.d.ts

@@ -1,19 +1,19 @@
-import { GlobalColorsProps } from '../../../shared/theme';
-import { LinearProps } from '../Linear/types';
-export declare type CircleProps = LinearProps & {
-    size?: number;
-    stroke?: number;
-    circleBody?: boolean;
-    showValue?: string;
-};
-export interface CircleStyleProps {
-    circumference?: number;
-    percent: number;
-    strokeWidth?: number;
-    color?: string | string[] | GlobalColorsProps | GlobalColorsProps[];
-    isAnimated?: boolean;
-}
-export interface CircleBodyProps {
-    strokeWidth?: number;
-}
+import { GlobalColorsProps } from '../../../shared/theme';
+import { LinearProps } from '../Linear/types';
+export declare type CircleProps = LinearProps & {
+    size?: number;
+    stroke?: number;
+    circleBody?: boolean;
+    showValue?: string;
+};
+export interface CircleStyleProps {
+    circumference?: number;
+    percent: number;
+    strokeWidth?: number;
+    color?: string | string[] | GlobalColorsProps | GlobalColorsProps[];
+    isAnimated?: boolean;
+}
+export interface CircleBodyProps {
+    strokeWidth?: number;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Progress/Linear/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { LinearProps } from './types';
-export declare function LinearProgress({ height, showValue, steps, ...props }: LinearProps): JSX.Element;
+/// <reference types="react" />
+import { LinearProps } from './types';
+export declare function LinearProgress({ height, showValue, steps, ...props }: LinearProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Progress/Linear/styles.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { DisplayValueProps } from '../types';
-import { ProgressBarProps, PercentBarProps } from './types';
-export declare const ProgressBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ProgressBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ValueLinear: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PercentBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & PercentBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { DisplayValueProps } from '../types';
+import { ProgressBarProps, PercentBarProps } from './types';
+export declare const ProgressBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ProgressBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ValueLinear: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PercentBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & PercentBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Progress/Linear/types.d.ts

@@ -1,14 +1,14 @@
-export declare type ProgressBarProps = {
-    height?: string;
-};
-export declare type PercentBarProps = {
-    percent: number;
-    isAnimated?: boolean;
-    percentBarColor?: string | string[];
-};
-export declare type LinearProps = PercentBarProps & {
-    height?: string;
-    steps?: number;
-    showValue?: string;
-};
+export declare type ProgressBarProps = {
+    height?: string;
+};
+export declare type PercentBarProps = {
+    percent: number;
+    isAnimated?: boolean;
+    percentBarColor?: string | string[];
+};
+export declare type LinearProps = PercentBarProps & {
+    height?: string;
+    steps?: number;
+    showValue?: string;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Progress/getSteps.d.ts

@@ -1,2 +1,2 @@
-export declare const getSteps: (v: number, percent: number) => number | undefined;
+export declare const getSteps: (v: number, percent: number) => number | undefined;
 //# sourceMappingURL=getSteps.d.ts.map

package/dist/components/Progress/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ProgressComponent } from './types';
-export declare function Progress({ height, size, stroke, circleBody, type, color, ...props }: ProgressComponent): JSX.Element;
-export default Progress;
+/// <reference types="react" />
+import { ProgressComponent } from './types';
+export declare function Progress({ height, size, stroke, circleBody, type, color, ...props }: ProgressComponent): JSX.Element;
+export default Progress;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Progress/progress.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=progress.test.d.ts.map

package/dist/components/Progress/progress.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.test.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/progress.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/dist/components/Progress/progress.test.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+var _getSteps = require("./getSteps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Progress, _objectSpread({}, props)));
+  return utils;
+};
+
+describe('Progress', function () {
+  it('Should render the Progress component', function () {
+    var _setup = setup({
+      percent: 50
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress with different color', function () {
+    var randomColor = function randomColor() {
+      var color = Math.floor(Math.random() * 16777215).toString(16);
+      return "#".concat(color);
+    };
+
+    var _setup2 = setup({
+      percent: 20,
+      color: randomColor()
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress with animated bar', function () {
+    var _setup3 = setup({
+      percent: 80,
+      isAnimated: true
+    }),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Bar', function () {
+    var _setup4 = setup({
+      percent: 20,
+      type: 'linear'
+    }),
+        container = _setup4.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Bar with different height', function () {
+    var _setup5 = setup({
+      percent: 10,
+      height: 'sm'
+    }),
+        container = _setup5.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Circle', function () {
+    var _setup6 = setup({
+      percent: 10,
+      type: 'circle'
+    }),
+        container = _setup6.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Circle with different size', function () {
+    var _setup7 = setup({
+      percent: 10,
+      type: 'circle',
+      size: 200
+    }),
+        container = _setup7.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Circle with different stroke', function () {
+    var _setup8 = setup({
+      percent: 10,
+      type: 'circle',
+      stroke: 5
+    }),
+        container = _setup8.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Circle with a circleBody', function () {
+    var _setup9 = setup({
+      percent: 10,
+      type: 'circle',
+      circleBody: true
+    }),
+        container = _setup9.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render the Progress as Progress Circle showing value', function () {
+    var _setup10 = setup({
+      percent: 10,
+      type: 'circle',
+      showValue: 'percent'
+    }),
+        container = _setup10.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Shoud return step by percent', function () {
+    expect((0, _getSteps.getSteps)(8, 50)).toEqual(4);
+  });
+});