Merge pull request #20 from nickovchinnikov/input

Input refactoring
nickovchinnikov · Mar 31, 2022 · 3087040 · 3087040
2 parents c00c643 + 0a5d56e
commit 3087040
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,10 @@
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/18)
 
-### IconButton component
+### Input component
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/19)
+
+### Input component refactoring
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/20)
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
@@ -3,19 +3,14 @@ import styled from "@emotion/styled";
 
 import { Icon, AvailableIcons } from "@/components/Icon";
 import { boxShadow } from "@/components/styles";
-import { useId } from "@/components/hooks/useId";
 
-type StyledInputProps = {
-  withIcon: boolean;
-};
-
-const StyledInput = styled.input<StyledInputProps>`
+const StyledInput = styled.input`
   all: unset;
-  width: 20rem;
-  height: 4rem;
+  width: ${({ width }) => width}rem;
+  height: ${({ height }) => height}rem;
   border-radius: 1rem;
   font-size: 1.4rem;
-  padding-left: ${({ withIcon }) => (withIcon ? 2.8 : 1.4)}rem;
+  padding: 0 2.6rem 0 1.4rem;
   color: ${({ theme }) => theme.font.regular};
   ${({ theme }) =>
     boxShadow(theme.components.shadow1, theme.components.shadow2, true)}
@@ -33,44 +28,59 @@ const StyledInput = styled.input<StyledInputProps>`
 `;
 
 const Label = styled.label`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
   color: ${({ theme }) => theme.font.regular};
   font-size: 1rem;
-  padding-left: 1.4rem;
 `;
 
 const StyledIcon = styled(Icon)`
-  display: block;
-  margin-top: -3rem;
-  padding-left: 0.5rem;
+  margin-left: -2.5rem;
   color: ${({ theme }) => theme.font.placeholder};
   opacity: 0.7;
 `;
 
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Text = styled.span`
+  padding-left: 1.4rem;
+`;
+
 export type Props = {
-  /** Input label */
-  label: string;
   /** Placeholder  */
   placeholder: string;
   /** onChange handler */
   onChange: ChangeEventHandler<HTMLInputElement>;
+  /** Input label */
+  label?: string;
   /** Icon */
   icon?: AvailableIcons;
   /** Feedback for input */
   feedback?: ReactChild;
+  /** Input height */
+  height?: number;
+  /** Input width */
+  width?: number;
 };
 
 export const Input: FC<Props & InputHTMLAttributes<HTMLInputElement>> = ({
   label,
+  height = 4,
+  width = 20,
   icon,
   feedback,
   ...props
 }) => (
   <Label>
-    {label}
-    <br />
-    <StyledInput withIcon={Boolean(icon)} {...props} />
-    {icon && <StyledIcon name={icon} />}
-    <br />
-    <Label>{feedback}</Label>
+    {label && <Text>{label}</Text>}
+    <InputWrapper>
+      <StyledInput height={height} width={width} {...props} />
+      {icon && <StyledIcon name={icon} />}
+    </InputWrapper>
+    {feedback && <Text>{feedback}</Text>}
   </Label>
 );
diff --git a/components/Input/__snapshots__/Input.test.tsx.snap b/components/Input/__snapshots__/Input.test.tsx.snap
@@ -3,53 +3,63 @@
 exports[`Input test cases Render check 1`] = `
 <DocumentFragment>
   <label
-    class="css-ao2vw1"
+    class="css-1js5ur7"
   >
-    Label
-    <br />
-    <input
-      class="css-14s0hei"
-      placeholder="Plaiceholder"
-    />
-    <br />
-    <label
-      class="css-ao2vw1"
-    />
+    <span
+      class="css-1g58nbn"
+    >
+      Label
+    </span>
+    <div
+      class="css-1sg2lsz"
+    >
+      <input
+        class="css-1mfcv0a"
+        height="4"
+        placeholder="Plaiceholder"
+        width="20"
+      />
+    </div>
   </label>
 </DocumentFragment>
 `;
 
 exports[`Input test cases Render check with icon 1`] = `
 <DocumentFragment>
   <label
-    class="css-ao2vw1"
+    class="css-1js5ur7"
   >
-    Label
-    <br />
-    <input
-      class="css-mbjn30"
-      placeholder="Plaiceholder"
-    />
-    <svg
-      aria-hidden="true"
-      aria-label="Search"
-      class="css-1vvhauz"
-      data-icon="search"
-      fill="currentColor"
-      focusable="false"
-      height="2rem"
-      role="img"
-      viewBox="64 64 896 896"
-      width="2rem"
+    <span
+      class="css-1g58nbn"
+    >
+      Label
+    </span>
+    <div
+      class="css-1sg2lsz"
     >
-      <path
-        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+      <input
+        class="css-1mfcv0a"
+        height="4"
+        placeholder="Plaiceholder"
+        width="20"
       />
-    </svg>
-    <br />
-    <label
-      class="css-ao2vw1"
-    />
+      <svg
+        aria-hidden="true"
+        aria-label="Search"
+        class="css-1q6otbu"
+        data-icon="search"
+        fill="currentColor"
+        focusable="false"
+        height="2rem"
+        role="img"
+        viewBox="64 64 896 896"
+        width="2rem"
+      >
+        <path
+          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+        />
+      </svg>
+    </div>
   </label>
 </DocumentFragment>
 `;