diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts index 64a420e..f752f0b 100644 --- a/src/components/input/Input.stories.ts +++ b/src/components/input/Input.stories.ts @@ -25,15 +25,16 @@ type Story = StoryObj; export const Primary: Story = { args: { primary: true, - label: 'Button', - placeholder: 'placeholder', - id: 'button-label', + label: 'Input Label', + placeholder: 'Placeholder', + id: 'input-label-id', + type: 'text', }, }; export const Secondary: Story = { args: { - label: 'Button', + label: 'Input Label', placeholder: 'placeholder', id: 'button-label', }, diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index 850910d..9798c84 100644 --- a/src/components/input/Input.tsx +++ b/src/components/input/Input.tsx @@ -1,8 +1,10 @@ +import type { HTMLInputTypeAttribute } from 'react'; import classes from './input.module.scss'; -interface ButtonProps { - type?: string; +interface InputProps { + type?: HTMLInputTypeAttribute; minLength?: number; + label?: string; id?: string; autoFocus?: boolean; placeholder?: string; @@ -12,15 +14,21 @@ export const Input = ({ type, minLength, id, + label, autoFocus, placeholder, -}: ButtonProps) => ( - +}: InputProps) => ( + <> + + + ); diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss index 8e2069b..0046054 100644 --- a/src/components/input/input.module.scss +++ b/src/components/input/input.module.scss @@ -1,4 +1,24 @@ .input { width: 100%; box-sizing: border-box; + padding: 17px 24px; + border-radius: 30px; + border: 1px solid rgb(225, 231, 234); + font-size: 1rem; + + &:focus { + border: 1px solid rgb(155, 161, 165); + outline: none; + } +} + +.label { + width: 100%; + box-sizing: border-box; + color: rgb(178, 176, 183); + font-size: 0.9rem; + position: relative; + bottom: -0.4rem; + padding: 0 10px 0 (24+1px); + background: #fff; }