feat(Input): add input label (#16)

* fix: add placeholder to input * feat(Input): add input label
pure-js · Oct 13, 2023 · ed8a624 · ed8a624
1 parent 9a138b5
commit ed8a624
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts
@@ -25,15 +25,16 @@ type Story = StoryObj<typeof meta>;
 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
@@ -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) => (
-  <input
-    id={id}
-    autoFocus={autoFocus}
-    minLength={minLength}
-    placeholder={placeholder}
-    className={classes.input}
-    type={type}
-  />
+}: InputProps) => (
+  <>
+    <label htmlFor={id} className={classes.label}>
+      {label}
+    </label>
+    <input
+      id={id}
+      autoFocus={autoFocus}
+      minLength={minLength}
+      placeholder={placeholder}
+      className={classes.input}
+      type={type}
+    />
+  </>
 );
diff --git 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;
 }