Start working on button component

src/App.tsx

@@ -1,4 +1,6 @@
 import { Route, Switch } from 'react-router-dom';
+import { Button } from './components';
+// import { Add } from './assets';
 import GlobalStyles from './GlobalStyles';
 
 const App = () => {
@@ -7,7 +9,17 @@ const App = () => {
       <GlobalStyles />
       <Switch>
         <Route path='/' exact>
-          <h2>TEST</h2>
+          <div style={{ margin: '2rem', width: '95vw' }}>
+            <Button
+              color='client'
+              // size='big'
+              variant='outlined'
+              text='Button'
+              // fullWidth
+              // iconLeft={<Add />}
+              onClick={() => {}}
+            />
+          </div>
         </Route>
       </Switch>
     </>

src/components/Button/index.tsx

@@ -1,7 +1,41 @@
 import { Wrapper } from './styles';
 
-const Button = () => {
+type ButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'size'> & {
-  return <Wrapper></Wrapper>;
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  size?: 'small' | 'big';
+  variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+  iconRight?: React.SVGProps<SVGSVGElement>;
+  fullWidth?: boolean;
+  text: string;
+  onClick: () => void;
+};
+
+const Button = ({
+  color,
+  size = 'small',
+  variant = 'text',
+  iconLeft,
+  iconRight,
+  fullWidth = false,
+  text,
+  onClick,
+}: ButtonProps) => {
+  return (
+    <Wrapper
+      color={color}
+      size={size}
+      variant={variant}
+      iconLeft={iconLeft || undefined}
+      iconRight={iconRight || undefined}
+      fullWidth={fullWidth}
+      onClick={onClick}
+    >
+      {iconLeft && iconLeft}
+      {text}
+      {iconRight && iconRight}
+    </Wrapper>
+  );
 };
 
 export default Button;

src/components/Button/styles.ts

@@ -1,3 +1,92 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  size?: 'small' | 'big';
+  variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+  iconRight?: React.SVGProps<SVGSVGElement>;
+  fullWidth?: boolean;
+};
+
+export const Wrapper = styled.button<WrapperProps>`
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  font-weight: bold;
+
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return css`
+          padding: 0.625rem 1.875rem;
+          font-size: 1rem;
+        `;
+      case 'big':
+        return css`
+          padding: 0.625rem 1.875rem;
+          font-size: 1.25rem;
+        `;
+      default:
+        return css`
+          padding: 0.625rem 1.875rem;
+          font-size: 1rem;
+        `;
+    }
+  }}
+
+  ${({ fullWidth }) =>
+    fullWidth &&
+    css`
+      width: 100%;
+      font-size: 1.25rem;
+    `};
+
+  ${({ variant, color, theme }) => {
+    switch (variant) {
+      case 'primary-action':
+        return css`
+          background: ${theme.colors[color].main};
+          color: ${theme.colors.white.main};
+
+          &:hover {
+            background: ${theme.colors[color].dark};
+          }
+        `;
+      case 'secondary-action':
+        return css`
+          background: ${theme.colors[color].light};
+          color: #262628;
+
+          &:hover {
+            color: ${theme.colors.white.main};
+          }
+        `;
+      case 'outlined':
+        return css`
+          background: none;
+          color: ${theme.colors[color].main};
+          border: 2px solid ${theme.colors[color].main};
+
+          &:hover {
+            background: ${theme.colors[color].main};
+            color: ${theme.colors.white.main};
+          }
+        `;
+      case 'text':
+        return css`
+          background: none;
+          color: ${theme.colors[color].main};
+          padding: 0;
+        `;
+      default:
+        return css`
+          background: none;
+          color: ${theme.colors[color].main};
+          padding: 0;
+        `;
+    }
+  }}
+`;

src/components/index.tsx

@@ -1 +1,3 @@
-export {};
+import Button from './Button';
+
+export { Button };