From 669628272034e0b10d9488c52a7e9fc08abb278c Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 21 Apr 2021 00:27:48 +0100
Subject: [PATCH] Add icon button component

---
 src/components/IconButton/index.tsx | 33 ++++++++++++++
 src/components/IconButton/styles.ts | 71 +++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/components/IconButton/index.tsx
 create mode 100644 src/components/IconButton/styles.ts

diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
new file mode 100644
index 0000000..c672b3f
--- /dev/null
+++ b/src/components/IconButton/index.tsx
@@ -0,0 +1,33 @@
+import { Wrapper } from './styles';
+
+type IconButtonProps = Omit<
+  React.AllHTMLAttributes<HTMLButtonElement>,
+  'size'
+> & {
+  color:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'small' | 'big';
+  icon?: React.SVGProps<SVGSVGElement>;
+  onClick: () => void;
+};
+
+const IconButton = ({
+  color,
+  size = 'small',
+  icon,
+  onClick,
+}: IconButtonProps) => {
+  return (
+    <Wrapper color={color} size={size} onClick={onClick}>
+      {icon}
+    </Wrapper>
+  );
+};
+
+export default IconButton;
diff --git a/src/components/IconButton/styles.ts b/src/components/IconButton/styles.ts
new file mode 100644
index 0000000..6607ad9
--- /dev/null
+++ b/src/components/IconButton/styles.ts
@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components';
+
+type WrapperProps = {
+  color:
+    | 'client'
+    | 'productOwner'
+    | 'developer'
+    | 'admin'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'small' | 'big';
+  icon?: React.SVGProps<SVGSVGElement>;
+};
+
+export const Wrapper = styled.button<WrapperProps>`
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  font-weight: bold;
+  background: ${({ theme, color }) => theme.colors[color].main};
+  display: grid;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    display: flex;
+    align-items: center;
+
+    path {
+      stroke: ${({ theme }) => theme.colors.white.main};
+    }
+  }
+
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return css`
+          width: 25px;
+          height: 25px;
+
+          svg {
+            width: 12.5px;
+            height: 12.5px;
+          }
+        `;
+      case 'big':
+        return css`
+          width: 50px;
+          height: 50px;
+
+          svg {
+            width: 24.5px;
+            height: 24.5px;
+          }
+        `;
+      default:
+        return css`
+          width: 25px;
+          height: 25px;
+
+          svg {
+            width: 12.5px;
+            height: 12.5px;
+          }
+        `;
+    }
+  }}
+`;