From e8a3e6f1d956d4c3347b5143dfd5d95c8357a7d0 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Mon, 3 Oct 2022 21:15:12 +0200
Subject: [PATCH] Add icon capability to the button

---
 src/components/button/Button.module.scss | 16 ++++++++++++++++
 src/components/button/Button.tsx         |  5 +++--
 src/helpers/combineClasses.ts            | 11 +++++++++++
 src/stories/Button.stories.tsx           |  1 +
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/helpers/combineClasses.ts

diff --git a/src/components/button/Button.module.scss b/src/components/button/Button.module.scss
index 67980bf..2c976cb 100644
--- a/src/components/button/Button.module.scss
+++ b/src/components/button/Button.module.scss
@@ -25,6 +25,22 @@
   }
 }
 
+.icon {
+  width: 3.2rem;
+  height: 3.2rem;
+
+  padding: 0;
+
+  .children {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .background {
+    border-radius: 100%;
+  }
+}
+
 .background {
   border-radius: 1rem;
   background: $accent;
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 7c241c6..eda4709 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -3,16 +3,17 @@ import styles from "./Button.module.scss";
 import { ReactComponent } from "../../assets/svgr-custom";
 // @ts-ignore
 import { ReactComponent as LoadingCircles } from "../../assets/loading-circles.svg";
+import { combineConditionalClasses } from "../../helpers/combineClasses";
 
 interface ButtonProps {
   loading?: boolean;
-  icon?: typeof ReactComponent;
+  icon?: boolean;
   children: any;
 }
 
 const Button: React.FC<ButtonProps> = ({ children, loading, icon }) => {
   return (
-    <button className={styles.button}>
+    <button className={combineConditionalClasses({ [styles.button]: true, [styles.icon]: !!icon })}>
       <div className={styles.background}></div>
       <div style={{ opacity: loading ? 0 : 1 }} className={styles.children}>
         {children}
diff --git a/src/helpers/combineClasses.ts b/src/helpers/combineClasses.ts
new file mode 100644
index 0000000..d0ba6e9
--- /dev/null
+++ b/src/helpers/combineClasses.ts
@@ -0,0 +1,11 @@
+export function combineClasses(...classes: string[]): string {
+  return classes.join(" ");
+}
+
+export function combineConditionalClasses(classes: { [k: string]: boolean }): string {
+  return combineClasses(
+    ...Object.entries(classes)
+      .filter(([_, v]) => v)
+      .map(([k]) => k)
+  );
+}
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 232461e..c48ab56 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -13,4 +13,5 @@ export const defaultButton = Template.bind({});
 defaultButton.args = {
   children: "Test",
   loading: false,
+  icon: false,
 };