From 0e9a3c37c5ec4308d2a51eedfca96951ab045fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Wed, 2 Mar 2022 10:56:05 +0100
Subject: [PATCH] Add icon to button

---
 .../src/components/button/Button.stories.tsx     | 14 ++++++++++++++
 libs/ui-toolkit/src/components/button/Button.tsx | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/libs/ui-toolkit/src/components/button/Button.stories.tsx b/libs/ui-toolkit/src/components/button/Button.stories.tsx
index 6a27fd8c3..e5c270cbd 100644
--- a/libs/ui-toolkit/src/components/button/Button.stories.tsx
+++ b/libs/ui-toolkit/src/components/button/Button.stories.tsx
@@ -37,3 +37,17 @@ Inline.args = {
   children: 'Inline',
   variant: 'inline',
 };
+
+export const IconPrepend = Template.bind({});
+IconPrepend.args = {
+  children: 'Icon prepend',
+  prependIconName: 'search',
+  variant: 'accent',
+};
+
+export const IconAppend = Template.bind({});
+IconAppend.args = {
+  children: 'Icon append',
+  appendIconName: 'search',
+  variant: 'accent',
+};
diff --git a/libs/ui-toolkit/src/components/button/Button.tsx b/libs/ui-toolkit/src/components/button/Button.tsx
index 8fc7b626d..94b0cd264 100644
--- a/libs/ui-toolkit/src/components/button/Button.tsx
+++ b/libs/ui-toolkit/src/components/button/Button.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { Icon, IconName } from '../icon';
 
 /* eslint-disable-next-line */
 export interface ButtonProps {
@@ -9,6 +10,8 @@ export interface ButtonProps {
   variant?: 'primary' | 'secondary' | 'accent' | 'inline';
   disabled?: boolean;
   className?: string;
+  prependIconName?: IconName;
+  appendIconName?: IconName;
 }
 
 export function Button({
@@ -18,6 +21,8 @@ export function Button({
   onClick,
   disabled,
   className,
+  prependIconName,
+  appendIconName,
 }: ButtonProps) {
   const ButtonTag: keyof JSX.IntrinsicElements = tag;
   const effectiveClassName = classNames(
@@ -75,13 +80,24 @@ export function Button({
     },
     className
   );
+  let icon;
+  const iconName = prependIconName || appendIconName;
+  if (iconName !== undefined) {
+    const iconClassName = classNames(['fill-current'], {
+      'mr-8': prependIconName,
+      'ml-8': appendIconName,
+    });
+    icon = <Icon name={iconName} className={iconClassName} size={16} />;
+  }
   return (
     <ButtonTag
       onClick={onClick}
       className={effectiveClassName}
       disabled={disabled}
     >
+      {prependIconName && icon}
       {children}
+      {appendIconName && icon}
     </ButtonTag>
   );
 }