From 92ff6937fbffd2baeb477835d11596981074cf36 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Mon, 12 Apr 2021 22:01:42 +0100
Subject: [PATCH] Complete button component

---
 src/App.tsx                     | 14 +------
 src/assets/icons/add.svg        |  4 +-
 src/components/Button/index.tsx |  4 +-
 src/components/Button/styles.ts | 72 +++++++++++++++++++++++++++++++++
 4 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 711bd8a..91939c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,4 @@
 import { Route, Switch } from 'react-router-dom';
-import { Button } from './components';
-// import { Add } from './assets';
 import GlobalStyles from './GlobalStyles';
 
 const App = () => {
@@ -9,17 +7,7 @@ const App = () => {
       <GlobalStyles />
       <Switch>
         <Route path='/' exact>
-          <div style={{ margin: '2rem', width: '95vw' }}>
-            <Button
-              color='client'
-              // size='big'
-              variant='outlined'
-              text='Button'
-              // fullWidth
-              // iconLeft={<Add />}
-              onClick={() => {}}
-            />
-          </div>
+          <div style={{ margin: '2rem', width: '95vw' }}></div>
         </Route>
       </Switch>
     </>
diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg
index a2a86a1..bf4bfa9 100644
--- a/src/assets/icons/add.svg
+++ b/src/assets/icons/add.svg
@@ -1,4 +1,4 @@
 <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.95215 1V14.8568" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1 7.92871H16.9048" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.95215 1V14.8568" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 7.92871H16.9048" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 78d7e40..87fcf03 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -31,9 +31,9 @@ const Button = ({
       fullWidth={fullWidth}
       onClick={onClick}
     >
-      {iconLeft && iconLeft}
+      {iconLeft && <span className='icon left'>{iconLeft}</span>}
       {text}
-      {iconRight && iconRight}
+      {iconRight && <span className='icon right'>{iconRight}</span>}
     </Wrapper>
   );
 };
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index cf9aeee..c6578e9 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -17,22 +17,61 @@ export const Wrapper = styled.button<WrapperProps>`
   background: none;
   font-weight: bold;
 
+  .icon svg {
+    display: flex;
+    align-items: center;
+  }
+
+  ${({ iconLeft, iconRight }) => {
+    if (iconLeft || iconRight)
+      return css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      `;
+    return '';
+  }}
+
+  .icon.left {
+    margin-right: 0.5rem;
+  }
+
+  .icon.right {
+    margin-left: 0.5rem;
+  }
+
   ${({ size }) => {
     switch (size) {
       case 'small':
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1rem;
+
+          .icon svg {
+            width: 1rem;
+            height: 1rem;
+          }
         `;
       case 'big':
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1.25rem;
+
+          .icon svg {
+            width: 1.25rem;
+            height: 1.25rem;
+          }
         `;
       default:
         return css`
           padding: 0.625rem 1.875rem;
           font-size: 1rem;
+
+          .icon svg {
+            width: 1rem;
+            height: 1rem;
+          }
         `;
     }
   }}
@@ -42,6 +81,11 @@ export const Wrapper = styled.button<WrapperProps>`
     css`
       width: 100%;
       font-size: 1.25rem;
+
+      .icon svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
     `};
 
   ${({ variant, color, theme }) => {
@@ -51,6 +95,10 @@ export const Wrapper = styled.button<WrapperProps>`
           background: ${theme.colors[color].main};
           color: ${theme.colors.white.main};
 
+          .icon svg path {
+            stroke: ${theme.colors.white.main};
+          }
+
           &:hover {
             background: ${theme.colors[color].dark};
           }
@@ -60,8 +108,16 @@ export const Wrapper = styled.button<WrapperProps>`
           background: ${theme.colors[color].light};
           color: #262628;
 
+          .icon svg path {
+            stroke: #262628;
+          }
+
           &:hover {
             color: ${theme.colors.white.main};
+
+            .icon svg path {
+              stroke: ${theme.colors.white.main};
+            }
           }
         `;
       case 'outlined':
@@ -70,9 +126,17 @@ export const Wrapper = styled.button<WrapperProps>`
           color: ${theme.colors[color].main};
           border: 2px solid ${theme.colors[color].main};
 
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
+
           &:hover {
             background: ${theme.colors[color].main};
             color: ${theme.colors.white.main};
+
+            .icon svg path {
+              stroke: ${theme.colors.white.main};
+            }
           }
         `;
       case 'text':
@@ -80,12 +144,20 @@ export const Wrapper = styled.button<WrapperProps>`
           background: none;
           color: ${theme.colors[color].main};
           padding: 0;
+
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
         `;
       default:
         return css`
           background: none;
           color: ${theme.colors[color].main};
           padding: 0;
+
+          .icon svg path {
+            stroke: ${theme.colors[color].main};
+          }
         `;
     }
   }}