@pedidopago/ui 1.5.21 → 1.5.24

package/dist/components/Button/Button.test.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+describe('Button', function () {
+  var setup = function setup(props) {
+    var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Button test"
+    })));
+
+    var getSkeleton = function getSkeleton() {
+      return utils.getAllByTestId('skeleton')[0];
+    };
+
+    var getLeftIcon = function getLeftIcon() {
+      return utils.getAllByTestId('leftIconId')[0];
+    };
+
+    var getRightIcon = function getRightIcon() {
+      return utils.getAllByTestId('rightIconId')[0];
+    };
+
+    return _objectSpread({
+      getSkeleton: getSkeleton,
+      getLeftIcon: getLeftIcon,
+      getRightIcon: getRightIcon
+    }, utils);
+  };
+
+  it('should be rendered', function () {
+    var _setup = setup({
+      bgColor: '#fff',
+      variant: 'solid'
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should call onClick function when clicked', function () {
+    var handleClick = jest.fn();
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "solid",
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
+
+    _react.fireEvent.click(_react.screen.getByRole('button'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  it('should render a disabled button', function () {
+    var handleClick = jest.fn();
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      disabled: true,
+      variant: "solid",
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toBeDisabled();
+    expect(_react.screen.getByRole('button')).not.toHaveStyle('cursor: pointer');
+  });
+  it('should render a ghost variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "ghost",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+  });
+  it('should render a link variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "link",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+    expect(_react.screen.getByRole('button')).toHaveStyle('text-decoration: underline');
+  });
+  it('should render an outline variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "outline",
+      textColor: "#ff00ff",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+    expect(_react.screen.getByRole('button')).toHaveStyle('color: #ff00ff');
+  });
+  it('should render a button that takes full width (boolean)', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: true,
+      variant: "solid",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('width: 100%');
+  });
+  it('should render a button that takes full width (Responsive Object)', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: {
+        base: true
+      },
+      variant: "solid",
+      bgColor: "#fff",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('width: 100%');
+  });
+  it('should not render a button that takes full width (Responsive Object)', function () {
+    var handleClick = jest.fn();
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: {
+        base: false,
+        sm: true
+      },
+      variant: "solid",
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).not.toHaveStyle('width: 100%');
+  });
+  it('should render a button with a leftIcon', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      leftIcon: "airplay",
+      variant: "solid",
+      children: "Click Me"
+    }));
+
+    var _setup2 = setup({
+      leftIcon: 'airplay'
+    }),
+        getLeftIcon = _setup2.getLeftIcon;
+
+    expect(getLeftIcon()).toBeInTheDocument();
+  });
+  it('should render a button with a rightIcon', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      rightIcon: "airplay",
+      variant: "solid",
+      children: "Click Me"
+    }));
+
+    var _setup3 = setup({
+      rightIcon: 'airplay'
+    }),
+        getRightIcon = _setup3.getRightIcon;
+
+    expect(getRightIcon()).toBeInTheDocument();
+  });
+  it('should render a button with a grey textColor', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      textColor: "#8b7e8b",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('color: #8b7e8b');
+  });
+});

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

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
-import { ButtonProps } from './types';
-export default function Button({ children, leftIcon, rightIcon, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from './types';
+export default function Button({ children, leftIcon, rightIcon, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { ButtonProps } from './types';
-export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const IconContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: 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 { ButtonProps } from './types';
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: 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/Button/types.d.ts

@@ -1,93 +1,93 @@
-import { IconName } from '../Icon/types';
-import { GlobalColorsProps } from '../../shared/theme';
-declare type buttonVariant = 'outline' | 'solid' | 'ghost' | 'link';
-declare type buttonColor = GlobalColorsProps | (string & {});
-declare type responsivePattern<T = any> = {
-    base?: T;
-    sm?: T;
-    md?: T;
-    lg?: T;
-    xl?: T;
-    xxl?: T;
-};
-declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface ButtonProps {
-    /**
-     * The button's properties change making it not clickable and changing it's color.
-     *
-     * @default 'solid'
-     * @example 'solid' | 'outline' | 'ghost' | 'link'
-     * @type buttonVariant
-     * @memberof ButtonProps
-     */
-    disabled?: boolean;
-    /**
-     * The icon to be displayed on the left side of the button.
-     * This property takes priority when rightIcon is passed too.
-     *
-     * @default ''
-     * @type IconName
-     * @memberof ButtonProps
-     */
-    leftIcon?: IconName;
-    /**
-     * The icon to be displayed on the right side of the button.
-     * This property has no priority and will **not** be rendered
-     * when leftIcon is passed.
-     *
-     * @default ''
-     * @type IconName
-     * @memberof ButtonProps
-     */
-    rightIcon?: IconName;
-    /**
-     * The button height changes based on the string passed to this prop
-     *
-     * @default 'md'
-     * @type sizeOptions
-     * @memberof ButtonProps
-     * @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-     */
-    size?: sizeOptions;
-    /**
-     * The button's type, it can be ghost, solid, outline or link.
-     *
-     * @default 'solid'
-     * @example 'solid' | 'outline' | 'ghost' | 'link'
-     * @type buttonVariant
-     * @memberof ButtonProps
-     */
-    variant?: buttonVariant;
-    /**
-     * The button's color, should be passed as a string.
-     *
-     * @default 'primary'
-     * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
-     * @type buttonColor
-     * @memberof ButtonProps
-     */
-    bgColor?: buttonColor;
-    iconColor?: GlobalColorsProps | string;
-    /**
-     * Property that makes the button take 100% of the width of the parent component.
-     *
-     * @default false
-     * @example true
-     * @example { base: true, sm: false', md: false }
-     * @example { base: 'md', md: 'xl' }
-     * @type boolean | responsivePattern<boolean>
-     * @memberof ButtonProps
-     */
-    fullWidth?: boolean | responsivePattern<boolean>;
-    /**
-     * The color text of the button.
-     *
-     * @default 'white'
-     * @example 'white' | 'black'
-     * @type string
-     * @memberof ButtonProps
-     */
-    textColor?: buttonColor;
-}
-export {};
+import { IconName } from '../Icon/types';
+import { GlobalColorsProps } from '../../shared/theme';
+declare type buttonVariant = 'outline' | 'solid' | 'ghost' | 'link';
+declare type buttonColor = GlobalColorsProps | (string & {});
+declare type responsivePattern<T = any> = {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    xxl?: T;
+};
+declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps {
+    /**
+     * The button's properties change making it not clickable and changing it's color.
+     *
+     * @default 'solid'
+     * @example 'solid' | 'outline' | 'ghost' | 'link'
+     * @type buttonVariant
+     * @memberof ButtonProps
+     */
+    disabled?: boolean;
+    /**
+     * The icon to be displayed on the left side of the button.
+     * This property takes priority when rightIcon is passed too.
+     *
+     * @default ''
+     * @type IconName
+     * @memberof ButtonProps
+     */
+    leftIcon?: IconName;
+    /**
+     * The icon to be displayed on the right side of the button.
+     * This property has no priority and will **not** be rendered
+     * when leftIcon is passed.
+     *
+     * @default ''
+     * @type IconName
+     * @memberof ButtonProps
+     */
+    rightIcon?: IconName;
+    /**
+     * The button height changes based on the string passed to this prop
+     *
+     * @default 'md'
+     * @type sizeOptions
+     * @memberof ButtonProps
+     * @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+     */
+    size?: sizeOptions;
+    /**
+     * The button's type, it can be ghost, solid, outline or link.
+     *
+     * @default 'solid'
+     * @example 'solid' | 'outline' | 'ghost' | 'link'
+     * @type buttonVariant
+     * @memberof ButtonProps
+     */
+    variant?: buttonVariant;
+    /**
+     * The button's color, should be passed as a string.
+     *
+     * @default 'primary'
+     * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
+     * @type buttonColor
+     * @memberof ButtonProps
+     */
+    bgColor?: buttonColor;
+    iconColor?: GlobalColorsProps | string;
+    /**
+     * Property that makes the button take 100% of the width of the parent component.
+     *
+     * @default false
+     * @example true
+     * @example { base: true, sm: false', md: false }
+     * @example { base: 'md', md: 'xl' }
+     * @type boolean | responsivePattern<boolean>
+     * @memberof ButtonProps
+     */
+    fullWidth?: boolean | responsivePattern<boolean>;
+    /**
+     * The color text of the button.
+     *
+     * @default 'white'
+     * @example 'white' | 'black'
+     * @type string
+     * @memberof ButtonProps
+     */
+    textColor?: buttonColor;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Card/card.test.d.ts

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

package/dist/components/Card/card.test.d.ts.map

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

package/dist/components/Card/card.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+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)(_.Card, _objectSpread({}, props)));
+  return utils;
+};
+
+describe('Card', function () {
+  it('Should render a empty card', function () {
+    var _setup = setup({}),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('Should render a card with padding', function () {
+    var _setup2 = setup({
+      cardPadding: '32px'
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { CardProps } from './types';
-export declare function Card({ cardPadding, borderRadius, variant, boxShadow, bgColor, children, ...rest }: CardProps): JSX.Element;
+/// <reference types="react" />
+import { CardProps } from './types';
+export declare function Card({ cardPadding, borderRadius, variant, boxShadow, bgColor, children, ...rest }: CardProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,18 +1,18 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { GlobalColorsProps } from '../../shared/theme';
-export declare type BodyCardProps = {
-    cardPadding?: string;
-    borderRadius?: string;
-    variant?: string;
-    boxShadow?: string;
-    bgColor?: string;
-};
-export declare type CardProps = HTMLAttributes<HTMLDivElement> & {
-    cardPadding?: string;
-    children?: ReactNode;
-    borderRadius?: string;
-    variant?: 'solid' | 'outlined';
-    boxShadow?: 'shadow.level1' | 'shadow.level2' | 'shadow.level3' | 'none' | (string & {});
-    bgColor?: GlobalColorsProps | (string & {});
-};
+import { HTMLAttributes, ReactNode } from 'react';
+import { GlobalColorsProps } from '../../shared/theme';
+export declare type BodyCardProps = {
+    cardPadding?: string;
+    borderRadius?: string;
+    variant?: string;
+    boxShadow?: string;
+    bgColor?: string;
+};
+export declare type CardProps = HTMLAttributes<HTMLDivElement> & {
+    cardPadding?: string;
+    children?: ReactNode;
+    borderRadius?: string;
+    variant?: 'solid' | 'outlined';
+    boxShadow?: 'shadow.level1' | 'shadow.level2' | 'shadow.level3' | 'none' | (string & {});
+    bgColor?: GlobalColorsProps | (string & {});
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/CheckboxInput/checkbox-input.test.d.ts

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

package/dist/components/CheckboxInput/checkbox-input.test.d.ts.map

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