@pedidopago/ui 1.0.6

package/dist/components/ImageItem/input.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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 imageMock = /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+}, /*#__PURE__*/React.createElement("img", {
+  src: "/img.png",
+  alt: "sdsadas"
+}));
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  var ImageWrapper = utils.getByTestId('ImageItem-ImageWrapper');
+  var DescriptionWrapper = utils.getByTestId('ImageItem-DescriptionWrapper');
+  return _objectSpread({
+    ImageWrapper: ImageWrapper,
+    DescriptionWrapper: DescriptionWrapper
+  }, utils);
+};
+
+describe('ItemItem', function () {
+  it('Should be Rendered', function () {
+    var _setup = setup(),
+        ImageWrapper = _setup.ImageWrapper,
+        DescriptionWrapper = _setup.DescriptionWrapper;
+
+    expect(ImageWrapper).toBeInTheDocument();
+    expect(DescriptionWrapper).toBeInTheDocument();
+  });
+  it('Should Render Image', function () {
+    var _setup2 = setup({
+      children: imageMock
+    }),
+        ImageWrapper = _setup2.ImageWrapper;
+
+    var image = ImageWrapper.querySelector('img');
+    expect(image).toBeInTheDocument();
+  });
+  it('Should Render Title, Subtitle and Description', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var title, subtitle, _setup3, findByText, testingTitle, testingSubtitle;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            title = 'Testing Title';
+            subtitle = 'Testing subtitle';
+            _setup3 = setup({
+              title: title,
+              subtitle: subtitle
+            }), findByText = _setup3.findByText;
+            _context.next = 5;
+            return findByText(title);
+
+          case 5:
+            testingTitle = _context.sent;
+            _context.next = 8;
+            return findByText(subtitle);
+
+          case 8:
+            testingSubtitle = _context.sent;
+            expect(testingTitle.innerHTML).toEqual(title);
+            expect(testingSubtitle.innerHTML).toEqual(subtitle);
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { IStyleProps } from './types';
+export declare const ImageItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Subtitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ImageItem/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,gBAAgB;;;uHAO5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;uHAaxB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;uHAK9B,CAAC;AAEF,eAAO,MAAM,KAAK;;;uHAIjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;uHAA4B,CAAC;AAElD,eAAO,MAAM,WAAW;;;uHAA4B,CAAC"}

package/dist/components/ImageItem/styles.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.Subtitle = exports.ImageWrapper = exports.ImageItemWrapper = exports.DescriptionWrapper = exports.Description = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _brightnessColorChange = require("../../utils/brightnessColorChange");
+
+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 ImageItemWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 8px;\n  box-sizing: border-box;\n  outline: 0;\n\n  ", "\n"])), effectsControl);
+
+exports.ImageItemWrapper = ImageItemWrapper;
+
+var ImageWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n\n  justify-content: center;\n  align-items: center;\n\n  min-width: ", ";\n  min-height: ", ";\n\n  width: ", ";\n  height: ", ";\n"])), function (_ref) {
+  var size = _ref.size;
+  return size === 'large' ? '118px' : '72px';
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size === 'large' ? '118px' : '72px';
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size === 'large' ? '118px' : '72px';
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size === 'large' ? '118px' : '72px';
+});
+
+exports.ImageWrapper = ImageWrapper;
+
+var DescriptionWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n\n  text-align: ", ";\n"])), function (_ref5) {
+  var imageSide = _ref5.imageSide;
+  return imageSide;
+});
+
+exports.DescriptionWrapper = DescriptionWrapper;
+
+var Title = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.white;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.fontWeight['500'];
+});
+
+exports.Title = Title;
+
+var Subtitle = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+
+exports.Subtitle = Subtitle;
+
+var Description = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
+
+exports.Description = Description;
+
+function effectsControl(_ref8) {
+  var disabled = _ref8.disabled,
+      theme = _ref8.theme,
+      color = _ref8.color;
+  if (!theme) return;
+  var neutral5 = theme.colors.neutral.neutral5;
+  var neutral3 = theme.colors.neutral.neutral3;
+  var neutral2 = theme.colors.neutral.neutral2;
+  var neutral1 = theme.colors.neutral.neutral1;
+  var hover = color || theme.colors.primary.hover;
+  var focus = color ? (0, _brightnessColorChange.brightnessColorChange)(color, -0.2) : theme.colors.primary.focus;
+
+  if (disabled) {
+    return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      #ImageItem-Title {\n        color: ", ";\n      }\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n\n      #ImageItem-ImageWrapper {\n        filter: grayscale(80%);\n      }\n    "])), theme.colorMode === 'light' ? neutral3 : neutral2, theme.colorMode === 'light' ? neutral2 : neutral1, neutral2);
+  } else {
+    return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      &:hover {\n        #ImageItem-Title {\n          color: ", ";\n        }\n      }\n\n      &:focus {\n        #ImageItem-Title {\n          color: ", ";\n        }\n        #ImageItem-ImageWrapper {\n          border: 1px solid;\n          border-color: ", ";\n          border-radius: ", ";\n        }\n      }\n\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n    "])), hover, focus, focus, theme.borderRadius.default, theme.colorMode === 'light' ? neutral5 : theme.colors.neutral.neutral1, neutral5);
+  }
+}

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

@@ -0,0 +1,26 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { Theme } from '@emotion/react';
+export declare type IStyleProps = {
+    theme?: Theme;
+    imageSide?: 'left' | 'right';
+    disabled?: boolean;
+    color?: string;
+    size?: 'normal' | 'large';
+};
+export declare type ImageItemStyles = {
+    imageItemStyle?: CSSProperties;
+    imageStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    subtitleStyle?: CSSProperties;
+};
+export interface IInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    title?: string;
+    subtitle?: string;
+    size?: 'normal' | 'large';
+    imageSide?: 'left' | 'right';
+    styles?: ImageItemStyles;
+    color?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ImageItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/ImageItem/types.js

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

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

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

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

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

package/dist/components/Input/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _excluded = ["placeholder", "type", "disabled", "isLoading", "label", "labelBackground", "withIcon", "hiddenContent", "helperText", "alert", "withAddon", "addonContent"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 Input = function Input(_ref) {
+  var placeholder = _ref.placeholder,
+      type = _ref.type,
+      disabled = _ref.disabled,
+      isLoading = _ref.isLoading,
+      label = _ref.label,
+      labelBackground = _ref.labelBackground,
+      Icon = _ref.withIcon,
+      hiddenContent = _ref.hiddenContent,
+      helperText = _ref.helperText,
+      alert = _ref.alert,
+      withAddon = _ref.withAddon,
+      addonContent = _ref.addonContent,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasValueOnInput = _useState2[0],
+      setHasValueOnInput = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(hiddenContent || false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hiddenInfo = _useState4[0],
+      setHiddenInfo = _useState4[1];
+
+  function handleInputChange(value) {
+    setHasValueOnInput(value.length > 0);
+  }
+
+  function handleHiddenChange() {
+    setHiddenInfo(!hiddenInfo);
+  }
+
+  return /*#__PURE__*/React.createElement(_styles.InputGroupElement, {
+    hasValueOnInput: Icon || placeholder || rest.value ? true : hasValueOnInput,
+    alert: alert,
+    withAddon: withAddon,
+    hasDisabled: disabled,
+    labelBackground: labelBackground
+  }, isLoading ? /*#__PURE__*/React.createElement(_Skeleton.default, {
+    variant: "rectangle",
+    height: 50,
+    animation: "wave"
+  }) : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_styles.InputColumn, null, withAddon && /*#__PURE__*/React.createElement(_styles.AddonElement, {
+    alert: alert,
+    hasDisabled: disabled
+  }, /*#__PURE__*/React.createElement(_styles.AddonContent, null, addonContent)), /*#__PURE__*/React.createElement(_styles.InputContent, {
+    withAddon: withAddon
+  }, /*#__PURE__*/React.createElement(_styles.InputLabel, {
+    hasDisabled: disabled
+  }, label), /*#__PURE__*/React.createElement(_styles.InputContentRow, null, Icon && /*#__PURE__*/React.createElement(_styles.InputIcon, null, Icon), /*#__PURE__*/React.createElement(_styles.Input, _extends({
+    type: hiddenInfo ? 'password' : type,
+    "aria-label": label,
+    withIcon: Icon,
+    hiddenContent: hiddenContent,
+    disabled: disabled,
+    alert: alert,
+    onChange: function onChange(e) {
+      return handleInputChange(e.target.value);
+    },
+    placeholder: placeholder
+  }, rest)), hiddenContent && /*#__PURE__*/React.createElement(_styles.InputIcon, {
+    clickable: true,
+    onClick: handleHiddenChange
+  }, hiddenInfo ? /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "eye"
+  }) : /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "eye-off"
+  })), /*#__PURE__*/React.createElement(_styles.Fieldset, {
+    "aria-hidden": true,
+    hasDisabled: disabled,
+    withAddon: withAddon,
+    alert: alert
+  }, /*#__PURE__*/React.createElement(_styles.Legend, null, /*#__PURE__*/React.createElement(_styles.LegendText, null, label)))))), helperText && /*#__PURE__*/React.createElement(_styles.HelperText, {
+    alert: alert
+  }, helperText)));
+};
+
+var _default = Input;
+exports.default = _default;

package/dist/components/Input/input.test.d.ts

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

package/dist/components/Input/input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.test.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yCAAyC,CAAC"}

package/dist/components/Input/input.test.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, _extends({
+    "data-testid": "input-component"
+  }, props)));
+  var input = utils.getByLabelText(props.label);
+  return _objectSpread({
+    input: input
+  }, utils);
+};
+
+describe('Input', function () {
+  it('should render the input', function () {
+    var _setup = setup({
+      label: 'E-mail'
+    }),
+        input = _setup.input;
+
+    expect(input.getAttribute('aria-label')).toEqual('E-mail');
+  });
+  it('should render the input and receives a value', function () {
+    var _setup2 = setup({
+      label: 'E-mail'
+    }),
+        input = _setup2.input;
+
+    _react.fireEvent.change(input, {
+      target: {
+        value: 'teste@teste.com'
+      }
+    });
+
+    expect(input.value).toEqual('teste@teste.com');
+  });
+  it('should render the input with an icon', function () {
+    var _input$parentElement;
+
+    var _setup3 = setup({
+      label: 'E-mail',
+      withIcon: /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "search",
+        color: "neutral.neutral4"
+      })
+    }),
+        input = _setup3.input;
+
+    expect((_input$parentElement = input.parentElement) === null || _input$parentElement === void 0 ? void 0 : _input$parentElement.querySelectorAll('svg').length).not.toBe(0);
+  });
+  it('should render input with placeholder', function () {
+    var _setup4 = setup({
+      label: 'E-mail',
+      placeholder: 'Digite seu e-mail'
+    }),
+        input = _setup4.input;
+
+    expect(input.getAttribute('placeholder')).toEqual('Digite seu e-mail');
+  });
+  it('should render the input with an addon', function () {
+    var _input$parentElement2, _input$parentElement3, _input$parentElement4, _input$parentElement5;
+
+    var _setup5 = setup({
+      label: 'E-mail',
+      withAddon: true,
+      addonContent: 'R$'
+    }),
+        input = _setup5.input;
+
+    expect((_input$parentElement2 = input.parentElement) === null || _input$parentElement2 === void 0 ? void 0 : (_input$parentElement3 = _input$parentElement2.parentElement) === null || _input$parentElement3 === void 0 ? void 0 : (_input$parentElement4 = _input$parentElement3.parentElement) === null || _input$parentElement4 === void 0 ? void 0 : (_input$parentElement5 = _input$parentElement4.querySelectorAll('div')[0].firstChild) === null || _input$parentElement5 === void 0 ? void 0 : _input$parentElement5.textContent).toBe('R$');
+  });
+  it('should render the input and hide your value', function () {
+    var _setup6 = setup({
+      label: 'Senha',
+      hiddenContent: true
+    }),
+        input = _setup6.input;
+
+    expect(input.getAttribute('type')).toEqual('password');
+  });
+  it('should focus the input', function () {
+    var focusCallback = jest.fn();
+
+    var _setup7 = setup({
+      label: 'E-mail',
+      onFocus: function onFocus() {
+        return focusCallback();
+      }
+    }),
+        input = _setup7.input;
+
+    input.focus();
+    expect(focusCallback).toHaveBeenCalled();
+  });
+  it('should focus the input with addon', function () {
+    var focusCallback = jest.fn();
+
+    var _setup8 = setup({
+      label: 'E-mail',
+      withAddon: true,
+      onFocus: function onFocus() {
+        return focusCallback();
+      }
+    }),
+        input = _setup8.input;
+
+    input.focus();
+    expect(focusCallback).toHaveBeenCalled();
+  });
+  it('should hover the input', function () {
+    var hoverCallback = jest.fn();
+
+    var _setup9 = setup({
+      label: 'E-mail',
+      onMouseMove: function onMouseMove() {
+        return hoverCallback();
+      }
+    }),
+        input = _setup9.input;
+
+    _react.fireEvent.mouseMove(input);
+
+    expect(hoverCallback).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+import { IInputProps } from './types';
+import { GenericStyledProps } from '../../@types';
+export declare const InputGroupElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IInputProps & {
+    hasValueOnInput: boolean;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    } | undefined;
+} & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputColumn: 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 InputContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    withAddon?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContentRow: 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 InputIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    clickable?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IInputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const InputLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Fieldset: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IInputProps & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
+export declare const Legend: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
+export declare const LegendText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IInputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const AddonElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IInputProps & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddonContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAyB,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;yGA+F7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGASvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;gIA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HA6CpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAkBxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAGxB,CAAC"}