@pedidopago/ui 1.0.6

package/README.md

@@ -0,0 +1,93 @@
+<h1 align="center">
+  <img src="https://user-images.githubusercontent.com/75874462/145101826-9244932f-7072-4727-9124-8c26620ad786.png" alt="Logo"/>
+  <br/>
+</h1>
+
+<div align="center">
+  <img src="https://img.shields.io/badge/React-v17.0.2-1DD195?style=for-the-badge&logo=react&link=http://google.com" />
+  <img src="https://img.shields.io/badge/Emotion-v11.3.0-1DD195?style=for-the-badge&logo=styled-components" />
+  <img src="https://img.shields.io/badge/Storybook-v6.3.7-1DD195?style=for-the-badge&logo=storybook" />
+  <img src="https://img.shields.io/badge/React Testing Library-v11.1.0-1DD195?style=for-the-badge&logo=testinglibrary" />
+  <img src="https://img.shields.io/badge/FrameMotion-v4.1.17-1DD195?style=for-the-badge&logo=framer" />
+  <img src="https://img.shields.io/badge/Typescript-v4.3.5-1DD195?style=for-the-badge&logo=typescript" />
+</div>
+
+<p align="center">
+  <a href="#iniciar-">Iniciar&nbsp;</a> | &nbsp;
+  <a href="#estrutura-de-codigo-">Estrutura de codigo&nbsp;</a> | &nbsp;
+  <a href="#roadmap-">Roadmap&nbsp;</a> | &nbsp;
+  <a href="#contribuir-">Contribuir&nbsp;</a> 
+</p>
+
+## Iniciar 🚀
+  
+  ### Requisitos:
+  - [Nodejs](https://github.com/nodejs/node)
+  - [Yarn](https://github.com/yarnpkg/yarn)
+
+  ### Instalação:
+
+  1. Clone o Repositorio
+  
+  ``` bash
+  git clone git@github.com:pedidopago/pedidopago-ui.git 
+  ```
+
+  2. Instalar as dependencias:
+  
+  ```bash 
+  yarn
+  ```
+
+  ### Executar o projeto localmente:
+  
+  Iniciar o projeto com o storybook:
+  
+  ```bash 
+  yarn storybook
+  ```
+
+  Para executar os testes use o script: 
+  
+  ```bash
+  yarn test
+  ```
+
+  > Para mais detalhes dos scripts considere consultar o package.json na raiz do projeto.
+
+  #### 📌 Ira precisar tambem das variaveis de ambiente `CHROMATIC_PROJECT_TOKEN` e `SKIP_PREFLIGHT_CHECK`.
+
+
+## Estrutura de codigo
+
+
+
+> Ao entrar no projeto sempre entre em `packages/pedidopago-ui` para trabalhar/executar os scripts
+
+## Roadmap 🌐
+
+- [ ] Mudar a estrutura de pastas
+
+- [ ] Sessão de novos componentes
+
+- [ ] Atualização de pacotes
+
+- [ ] Incrementação dos testes
+
+- [ ] Melhorias na documentação
+
+- [ ] Adicionar license
+
+## Contribuir 💡
+
+1. Crie uma branch apartir da **`dev`** com o prefixo **`lib`-[número da issue]-[nome da issue]**.
+exemplo:
+```bash
+ git checkout -b lib-99-buttom
+```
+2. Desenvolver
+
+3. Criar a pull request
+ - Número da issue no inicio da pr.
+ - Descritivo com pontos importantes do que foi feito.
+ - Print dos tests no terminal e video de apresentação que pode ser feito via [loom](https://www.loom.com/).

package/dist/@types/index.d.ts

@@ -0,0 +1,7 @@
+import { ExtendThemeProps } from '../shared/theme/theme.types';
+export declare type GenericStyledProps = {
+    theme?: ExtendThemeProps & {
+        colorMode: 'light' | 'dark';
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/@types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/@types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/D,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,gBAAgB,GAAG;QACzB,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;KAC7B,CAAC;CACH,CAAC"}

package/dist/@types/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Alert/alert.test.d.ts

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

package/dist/components/Alert/alert.test.d.ts.map

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

package/dist/components/Alert/alert.test.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var setup = function setup(props) {
+  return (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+};
+
+describe('Alert', function () {
+  it('should it render the alert component', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in outlined variant', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      variant: 'outlined'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in closable variant', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      variant: 'closable'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in success type', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      type: 'success'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in error type', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      type: 'error'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in warning type', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      type: 'warning'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it render the alert component in critical type', function () {
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      type: 'critical'
+    });
+    expect(container.getByText('test')).toBeInTheDocument();
+  });
+  it('should it call the callback provided in onClose prop', function () {
+    var _container$baseElemen;
+
+    var onClose = jest.fn();
+    var container = setup({
+      message: 'test',
+      title: 'Test Toast',
+      variant: 'closable',
+      onClose: onClose
+    });
+    (_container$baseElemen = container.baseElement.querySelectorAll('svg')[1].parentElement) === null || _container$baseElemen === void 0 ? void 0 : _container$baseElemen.click();
+    expect(onClose).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IAlertProps } from './types';
+declare const Alert: FC<IAlertProps>;
+export default Alert;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAe3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CA4C1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Alert = function Alert(_ref) {
+  var buttonTitle = _ref.buttonTitle,
+      onButtonClick = _ref.onButtonClick,
+      message = _ref.message,
+      onClose = _ref.onClose,
+      title = _ref.title,
+      fullWidth = _ref.fullWidth,
+      isLoading = _ref.isLoading,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
+  return /*#__PURE__*/React.createElement(_styles.StyledAlertContainer, null, isLoading ? /*#__PURE__*/React.createElement(_styles.StyledAlertSkeleton, {
+    fullWidth: fullWidth
+  }) : /*#__PURE__*/React.createElement(_styles.StyledAlertWrapper, {
+    variant: variant,
+    type: type,
+    fullWidth: fullWidth
+  }, /*#__PURE__*/React.createElement(_styles.StyledIconBox, {
+    type: type,
+    variant: variant,
+    havePadding: variant === 'outlined'
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "info",
+    size: variant === 'outlined' ? '1.375rem' : '2rem'
+  })), /*#__PURE__*/React.createElement(_styles.StyledColumn, {
+    variant: variant
+  }, /*#__PURE__*/React.createElement(_Typography.default, {
+    fontSize: "xs",
+    fontWeight: "bold"
+  }, title), /*#__PURE__*/React.createElement(_Typography.default, {
+    fontSize: "xs",
+    fontWeight: "400"
+  }, message), buttonTitle && /*#__PURE__*/React.createElement(_styles.StyledButtonRow, {
+    variant: variant,
+    type: type
+  }, /*#__PURE__*/React.createElement(_styles.StyledButton, {
+    onClick: function onClick() {
+      return onButtonClick && onButtonClick();
+    }
+  }, buttonTitle))), variant === 'closable' && /*#__PURE__*/React.createElement(_styles.StyledCloseIcon, {
+    onClick: function onClick() {
+      return onClose && onClose();
+    }
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "x"
+  }))));
+};
+
+var _default = Alert;
+exports.default = _default;

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { IStyledAlert } from './types';
+export declare const StyledAlertContainer: 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 StyledAlertWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert & {
+    havePadding: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCloseIcon: 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 StyledAlertSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButtonRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Alert/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;wHAqB7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGAyB3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;wHASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;wHA+B/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;wHA6B1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;qHAcxB,CAAC"}

package/dist/components/Alert/styles.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledIconBox = exports.StyledColumn = exports.StyledCloseIcon = exports.StyledButtonRow = exports.StyledButton = exports.StyledAlertWrapper = exports.StyledAlertSkeleton = exports.StyledAlertContainer = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _colorCheck = require("../../utils/colorCheck");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledAlertContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n"])));
+
+exports.StyledAlertContainer = StyledAlertContainer;
+
+var StyledAlertWrapper = _styled.default.div(function (props) {
+  var secondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.neutral1;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: flex-start;\n    padding: 1rem;\n    gap: 1rem;\n    border-radius: 8px;\n    max-width: ", ";\n    background-color: ", ";\n    border: ", ";\n    color: ", ";\n  "])), props.fullWidth ? '100%' : '459px', props.variant === 'outlined' ? 'transparent' : secondaryColor, props.variant === 'outlined' ? "2px solid ".concat(secondaryColor, ";") : '', props.variant === 'outlined' ? props.theme.colors.neutral.neutral4 : '');
+});
+
+exports.StyledAlertWrapper = StyledAlertWrapper;
+
+var StyledIconBox = _styled.default.div(function (props) {
+  var primaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral1;
+  var secondaryColor = props.type !== 'default' && props.type ? (0, _colorCheck.parseHexColorToRgba)(props.theme.colors[props.type].default, 0.2) : props.theme.colors.neutral.neutral1;
+  var iconColor = props.type !== 'default' ? primaryColor : props.theme.colors.neutral.neutral3;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border-radius: 9999999px;\n    background-color: ", ";\n\n    & svg {\n      color: ", ";\n    }\n  "])), props.havePadding ? '10px' : '0', props.variant === 'outlined' ? secondaryColor : '', iconColor);
+});
+
+exports.StyledIconBox = StyledIconBox;
+
+var StyledColumn = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n\n  & p {\n    margin: 0;\n  }\n"])));
+
+exports.StyledColumn = StyledColumn;
+
+var StyledCloseIcon = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: ", ";\n"])), function (props) {
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+});
+
+exports.StyledCloseIcon = StyledCloseIcon;
+
+var StyledAlertSkeleton = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 104px;\n  width: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (props) {
+  return props.fullWidth ? '100%' : '459px';
+}, function (props) {
+  return props.theme.colors.neutral.neutral1;
+}, function (props) {
+  return props.theme.colors.neutral.neutral2;
+});
+
+exports.StyledAlertSkeleton = StyledAlertSkeleton;
+
+var StyledButtonRow = _styled.default.div(function (props) {
+  var primaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral3;
+  var secondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colors.neutral.neutral1;
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    & > button {\n      background-color: ", ";\n      border: ", ";\n      color: ", ";\n    }\n  "])), props.variant === 'outlined' ? secondaryColor : '', props.variant !== 'outlined' ? "2px solid ".concat(primaryColor) : '', props.variant === 'outlined' ? primaryColor : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black);
+});
+
+exports.StyledButtonRow = StyledButtonRow;
+
+var StyledButton = _styled.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-weight: 600;\n\n  cursor: pointer;\n\n  background: transparent;\n  outline: 0;\n  border: 0;\n  border-radius: 8px;\n  padding: 8px 24px;\n"])));
+
+exports.StyledButton = StyledButton;

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

@@ -0,0 +1,49 @@
+import { ExtendThemeProps } from 'src';
+export declare type IAlertProps = {
+    /**
+     * The variantion of the alert component style
+     * @default 'filled'
+     */
+    variant?: 'outlined' | 'filled' | 'closable';
+    /**
+     * The type of the alert component
+     * @default 'default'
+     */
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+    /**
+     * The message of the alet
+     */
+    message: string;
+    /**
+     * The title of the alert
+     */
+    title: string;
+    /**
+     * The title of the alert button
+     */
+    buttonTitle?: string;
+    /**
+     * The action of the alert button
+     */
+    onButtonClick?: () => void;
+    /**
+     * Whether the alert is loading
+     */
+    isLoading?: boolean;
+    /**
+     * Sets a full width alert
+     */
+    fullWidth?: boolean;
+    /**
+     * Provides a callback that is called when the close button is clicked.
+     * @description This props are available when variant is set to 'closable'
+     */
+    onClose?: () => void;
+};
+export declare type IStyledAlert = {
+    fullWidth?: boolean;
+    variant?: 'outlined' | 'filled' | 'closable';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+    theme?: ExtendThemeProps;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC"}

package/dist/components/Alert/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Avatar/avatar.test.d.ts

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

package/dist/components/Avatar/avatar.test.d.ts.map

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

package/dist/components/Avatar/avatar.test.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  return utils;
+};
+
+describe('Avatar', function () {
+  it('should it render the avatar component', function () {
+    var avatar = setup({
+      name: 'John Doe',
+      src: 'https://avatars2.githubusercontent.com/u/1234?s=460&v=4'
+    });
+    expect(avatar.container).toBeInTheDocument();
+  });
+  it('should it render the avatar component with a image', function () {
+    var _avatar$container$que;
+
+    var avatar = setup({
+      name: 'John Doe',
+      src: 'https://avatars2.githubusercontent.com/u/1234?s=460&v=4'
+    });
+    expect((_avatar$container$que = avatar.container.querySelector('img')) === null || _avatar$container$que === void 0 ? void 0 : _avatar$container$que.getAttribute('src')).toEqual('https://avatars2.githubusercontent.com/u/1234?s=460&v=4');
+  });
+  it('should it render the avatar component with a name and an information', function () {
+    var avatar = setup({
+      name: 'John Doe',
+      information: 'The user information'
+    });
+    expect(avatar.getByText('John Doe')).toBeInTheDocument();
+    expect(avatar.getByText('The user information')).toBeInTheDocument();
+  });
+  it('should it render the avatar component with a name, information and image', function () {
+    var avatar = setup({
+      name: 'John Doe',
+      information: 'The user information',
+      src: 'https://avatars2.githubusercontent.com/u/1234?s=460&v=4'
+    });
+    expect(avatar.getByText('John Doe')).toBeInTheDocument();
+    expect(avatar.getByText('The user information')).toBeInTheDocument();
+    expect(avatar.container.querySelector('img')).toBeInTheDocument();
+  });
+  it('should it render the avatar component with avatar name initials', function () {
+    var avatar = setup({
+      name: 'John Doe'
+    });
+    expect(avatar.getByText('JD')).toBeInTheDocument();
+  });
+  it('should it render the avatar component with avatar name initials if the image source is broken', function () {
+    var avatar = setup({
+      name: 'John Doe',
+      src: 'https://broken.link/'
+    });
+    setTimeout(function () {
+      expect(avatar.getByText('JD')).toBeInTheDocument();
+    }, 1000);
+  });
+});

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { IAvatarComponent } from './types';
+declare const Avatar: FC<IAvatarComponent>;
+export default Avatar;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AASrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,gBAAgB,CA4DhC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _ = require("../../");
+
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _styles = require("./styles");
+
+var _excluded = ["src", "name", "information", "boxColor", "size", "isLoading"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+      name = _ref.name,
+      information = _ref.information,
+      boxColor = _ref.boxColor,
+      size = _ref.size,
+      isLoading = _ref.isLoading,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageBroken = _useState2[0],
+      setImageBroken = _useState2[1];
+
+  function getInitials(n) {
+    var _firstName$;
+
+    var nameArray = n.split(' ');
+    var firstName = nameArray[0];
+    var lastName = nameArray[nameArray.length - 1];
+    return "".concat((_firstName$ = firstName[0]) === null || _firstName$ === void 0 ? void 0 : _firstName$.charAt(0).toUpperCase()).concat(lastName === null || lastName === void 0 ? void 0 : lastName.charAt(0).toUpperCase());
+  }
+
+  function handleImageError() {
+    setImageBroken(true);
+  }
+
+  return /*#__PURE__*/React.createElement(_react2.ThemeProvider, {
+    theme: {
+      size: size || 'medium'
+    }
+  }, /*#__PURE__*/React.createElement(_styles.AvatarWrapper, rest, isLoading ? /*#__PURE__*/React.createElement(_Skeleton.default, {
+    variant: "circle",
+    animation: "wave",
+    height: 60,
+    width: 60
+  }) : src && !imageBroken ? /*#__PURE__*/React.createElement(_styles.AvatarImage, {
+    src: src,
+    alt: name,
+    onError: handleImageError
+  }) : /*#__PURE__*/React.createElement(_styles.AvatarInitials, {
+    boxColor: boxColor
+  }, getInitials(name)), information && /*#__PURE__*/React.createElement(_styles.AvatarInformation, null, isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Skeleton.default, {
+    variant: "text",
+    animation: "wave",
+    width: 50
+  }), /*#__PURE__*/React.createElement(_Skeleton.default, {
+    variant: "text",
+    animation: "wave",
+    width: 100
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Typography, {
+    fontSize: "xxs",
+    fontWeight: "600"
+  }, name), /*#__PURE__*/React.createElement(_.Typography, {
+    fontSize: "xxs"
+  }, information)))));
+};
+
+var _default = Avatar;
+exports.default = _default;