diff --git a/src/components/input/input.test.tsx b/src/components/input/input.test.tsx
index 18e7f66..d2571b4 100644
--- a/src/components/input/input.test.tsx
+++ b/src/components/input/input.test.tsx
@@ -1,19 +1,19 @@
-import { render, screen } from '@testing-library/react';
-import { InputProps, IonInput } from './input';
+import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { inputTypes } from '../../core/types/input';
-import React from 'react';
+import { renderWithTheme } from '../utils/test-utils';
+import { InputProps, IonInput } from './input';
-const defaultInput: InputProps = {
+const defaultInput = {
placeholder: 'Digite o seu nome',
};
const sut = (props: InputProps = defaultInput) => {
- return render();
+ return renderWithTheme();
};
const getInput = () => {
- return screen.queryByPlaceholderText(defaultInput.placeholder!);
+ return screen.getByPlaceholderText(defaultInput.placeholder);
};
describe('IonInput', () => {
@@ -36,7 +36,7 @@ describe('IonInput', () => {
it('should type value on input', async () => {
const textToType = 'Olá eu sou o Goku!';
- await userEvent.type(getInput()!, textToType);
+ await userEvent.type(getInput(), textToType);
expect(getInput()).toHaveValue(textToType);
});
});
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 71ee49b..cdf95ae 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -1,27 +1,25 @@
+import { InputHTMLAttributes, useRef } from 'react';
import { InputType } from '../../core/types/input';
-import { InputContainer, InputRow, InputStyles } from './styles';
-import React from 'react';
+import { Container, Input } from './styles';
export type InputProps = {
- placeholder?: string;
type?: InputType;
- disabled?: boolean;
-};
+} & InputHTMLAttributes;
export const IonInput = ({
- placeholder,
type = 'text',
disabled = false,
+ ...props
}: InputProps) => {
+ const ref = useRef(null);
+
+ const handleContainerClick = () => {
+ ref.current && ref.current.focus();
+ };
+
return (
-
-
-
-
-
+
+
+
);
};
diff --git a/src/components/input/styles.ts b/src/components/input/styles.ts
index f38d166..a651898 100644
--- a/src/components/input/styles.ts
+++ b/src/components/input/styles.ts
@@ -1,64 +1,51 @@
-import stitches from '../../stitches.config';
-const { styled } = stitches;
-
-export const InputContainer = styled('div', {
- display: 'flex',
- lineHeight: '0',
- width: '100%',
-});
-
-export const InputRow = styled('div', {
- display: 'flex',
- alignItems: 'center',
- gap: '8px',
- background: '$neutral1',
- border: '1px solid $neutral5',
- borderRadius: '8px',
- padding: '8px 12px',
- width: '100%',
-
- variants: {
- disabled: {
- true: {
- background: '$neutral2',
- border: '1px solid $neutral4',
- cursor: 'not-allowed',
- outline: 'none',
- color: '$neutral4',
-
- '&:hover': {
- borderColor: '$neutral4',
- },
-
- '::placeholder': {
- color: '$neutral5',
- },
- },
- },
- },
-
- '&:focus-within': {
- borderColor: '$primary5',
- outline: '2px solid',
- outlineColor: '$primary2',
- },
-
- '&:hover': {
- borderColor: '$primary4',
- },
-});
-
-export const InputStyles = styled('input', {
- border: 'none',
- width: '100%',
- outline: 'none',
- color: '$neutral7',
- background: '$neutral1',
- fontSize: '14px',
-
- '&[disabled]': {
- background: '$neutral2',
- cursor: 'not-allowed',
- outline: 'none',
- },
-});
+import { css, styled } from 'styled-components';
+
+export const Container = styled.div<{ disabled: boolean }>`
+ ${({ theme }) => css`
+ ${theme.utils.flex.start(8)};
+ width: 100%;
+ background: ${theme.colors.neutral[1]};
+ border: 1px solid ${theme.colors.neutral[5]};
+ border-radius: 8px;
+ padding: 0.8rem 1.2rem;
+ cursor: text;
+ ${theme.utils.focus};
+
+ &:hover {
+ border-color: ${theme.colors.primary[4]};
+ }
+
+ &:focus-within {
+ border-color: ${theme.colors.primary[5]};
+ }
+
+ &[disabled] {
+ cursor: not-allowed;
+ outline: none;
+ background: ${theme.colors.neutral[2]};
+ color: ${theme.colors.neutral[4]};
+ border-color: ${theme.colors.neutral[4]};
+
+ &::placeholder {
+ color: ${theme.colors.neutral[4]};
+ }
+ }
+ `}
+`;
+
+export const Input = styled.input`
+ ${({ theme }) => css`
+ ${theme.font.size[14]}
+ border: none;
+ width: 100%;
+ outline: none;
+ color: ${theme.colors.neutral[7]};
+ background: ${theme.colors.neutral[1]};
+
+ &:disabled {
+ background: ${theme.colors.neutral[2]};
+ cursor: not-allowed;
+ outline: none;
+ }
+ `}
+`;
diff --git a/src/stories/input/input.stories.tsx b/src/stories/input/input.stories.tsx
index d1b32c9..7c9fd90 100644
--- a/src/stories/input/input.stories.tsx
+++ b/src/stories/input/input.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
import { InputProps, IonInput } from '../../components/input/input';
@@ -20,6 +20,7 @@ export const Password = Template.bind({});
Password.args = {
placeholder: 'Digite sua senha',
type: 'password',
+ autoComplete: 'off',
};
export const Number = Template.bind({});
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 658629f..eebc70f 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -137,6 +137,12 @@ export default {
},
utils: {
flex: {
+ start: (gap = 0) => css`
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: ${gap}px;
+ `,
center: (gap = 0) => css`
display: flex;
align-items: center;