From 3217ce1c17f9eb9e6be1ece07de9df63da509222 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 16 Apr 2021 00:00:50 +0100
Subject: [PATCH] Update input component

---
 src/components/Input/index.tsx |  50 ++++++-
 src/components/Input/styles.ts | 240 ++++++++++++++++++++++++++++++---
 2 files changed, 265 insertions(+), 25 deletions(-)

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 277d675..120a550 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -1,24 +1,62 @@
+import { Text } from '..';
+import { Upload } from '../../assets';
 import { Wrapper } from './styles';
 
 type InputProps = {
   className?: string;
-  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  color?:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'black'
+    | 'white';
   error?: boolean;
   errorMessage?: string;
   value: string;
   label: string;
-  type: 'text' | 'email' | 'password' | 'file' | 'number';
+  type?: 'text' | 'email' | 'password' | 'file' | 'number';
   placeholder?: string;
   fullWidth?: boolean;
   multiline?: boolean;
-  iconLeft?: React.SVGProps<SVGSVGElement>;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-const Input = ({ type, value, ...props }: InputProps) => {
+const Input = ({
+  type = 'text',
+  color = 'client',
+  label,
+  value,
+  onChange,
+  error,
+  errorMessage,
+  ...props
+}: InputProps) => {
   return (
-    <Wrapper {...props}>
-      <input type={type} value={value} />
+    <Wrapper label={label} error={error} type={type} color={color} {...props}>
+      <div className='info'>
+        {label && (
+          <Text variant='body' weight='bold' className='label'>
+            {label}
+          </Text>
+        )}
+        {error && errorMessage && (
+          <Text variant='body' color='error' className='error-message'>
+            {errorMessage}
+          </Text>
+        )}
+      </div>
+      <div className='input'>
+        {type === 'file' && (
+          <span className='icon left'>
+            <Upload />
+          </span>
+        )}
+        <input type={type} value={value} onChange={onChange} accept='image/*' />
+      </div>
     </Wrapper>
   );
 };
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
index b29507f..b426523 100644
--- a/src/components/Input/styles.ts
+++ b/src/components/Input/styles.ts
@@ -1,74 +1,276 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  color?:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'black'
+    | 'gray'
+    | 'white';
   error?: boolean;
   errorMessage?: string;
+  type?: 'text' | 'email' | 'password' | 'file' | 'number';
+  label: string;
   fullWidth?: boolean;
-  multiline?: boolean;
-  iconLeft?: React.SVGProps<SVGSVGElement>;
 };
 
 export const Wrapper = styled.div<WrapperProps>`
-  display: inline;
-  border-radius: 5px;
-  color: ${({ theme }) => theme.colors.black.main};
+  .input {
+    width: inherit;
+    height: inherit;
+    border-radius: 5px;
+    padding: 1rem;
+    position: relative;
+    color: ${({ theme }) => theme.colors.black.main};
+    background: ${({ theme }) => theme.colors.white.main};
+    background-clip: padding-box;
+    border: 2px solid transparent;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: inherit;
+      height: inherit;
+      z-index: -1;
+      margin: -2px;
+      border-radius: inherit;
+    }
+  }
+
+  .info {
+    margin-bottom: 5px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+
+    p {
+      background: ${({ theme }) => theme.colors.gray.dark};
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .label {
+      justify-self: flex-start;
+    }
+
+    .error-message {
+      justify-self: flex-end;
+    }
+  }
 
   input {
+    width: 100%;
     background: none;
     border: none;
     color: ${({ theme }) => theme.colors.black.main};
   }
 
-  ${({ color, theme }) => {
-    if (!color)
+  input[type='file'] {
+    cursor: pointer;
+
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+  }
+
+  ${({ type }) => {
+    if (type === 'file')
       return css`
-        border: 2px solid ${theme.colors.client.light};
+        .input {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
       `;
+    return '';
+  }}
+
+  .icon {
+    ${({ type }) => type === 'file' && `cursor: pointer`};
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .icon.left {
+    margin-right: 0.5rem;
+  }
+
+  ${({ color, theme }) => {
     switch (color) {
       case 'client':
         return css`
-          border: 2px solid ${theme.colors.client.light};
+          .input:before {
+            background: ${theme.colors.client.light};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.client.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.client.main};
+          }
         `;
       case 'productOwner':
         return css`
-          border: 2px solid ${theme.colors.productOwner.light};
+          .input:before {
+            background: ${theme.colors.productOwner.light};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.productOwner.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.productOwner.main};
+          }
         `;
       case 'developer':
         return css`
-          border: 2px solid ${theme.colors.developer.light};
+          .input:before {
+            background: ${theme.colors.developer.light};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.developer.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.developer.main};
+          }
         `;
       case 'admin':
         return css`
-          border: 2px solid ${theme.colors.admin.light};
+          .input:before {
+            background: ${theme.colors.admin.light};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.admin.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.admin.main};
+          }
         `;
       case 'success':
         return css`
-          border: 2px solid ${theme.colors.success.main};
+          .input:before {
+            background: ${theme.colors.success.main};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.success.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.success.main};
+          }
         `;
       case 'warning':
         return css`
-          border: 2px solid ${theme.colors.warning.main};
+          .input:before {
+            background: ${theme.colors.warning.main};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.warning.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.warning.main};
+          }
         `;
       case 'error':
         return css`
-          border: 2px solid ${theme.colors.error.main};
+          .input:before {
+            background: ${theme.colors.error.main};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.error.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.error.main};
+          }
         `;
       case 'black':
         return css`
-          border: 2px solid ${theme.colors.black.main};
+          .input:before {
+            background: ${theme.colors.black.main};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.black.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.black.main};
+          }
         `;
       case 'white':
         return css`
-          border: 2px solid ${theme.colors.white.main};
+          .input:before {
+            background: ${theme.colors.white.main};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.white.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.white.main};
+          }
         `;
       default:
         return css`
-          border: 2px solid ${color};
+          .input:before {
+            background: ${theme.colors.client.light};
+          }
+
+          input[type='file'] {
+            color: ${theme.colors.client.main};
+          }
+
+          .icon svg path {
+            stroke: ${theme.colors.client.main};
+          }
         `;
     }
   }}
 
+  ${({ error, theme }) =>
+    error &&
+    css`
+      .info p {
+        background: ${theme.colors.error.main};
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .input:before {
+        background: ${theme.colors.error.main};
+      }
+
+      input[type='file'] {
+        color: ${theme.colors.error.main};
+      }
+
+      .icon svg path {
+        stroke: ${theme.colors.error.main};
+      }
+    `}
+
   ${({ fullWidth }) =>
     fullWidth &&
     css`