From e03b0c19807c2ed85619db818adc959c77b5ae2c Mon Sep 17 00:00:00 2001
From: Jeremiah <42397676+jlsnow301@users.noreply.github.com>
Date: Wed, 25 Dec 2024 21:12:34 -0800
Subject: [PATCH] Adjusts the spacing on button icons (#46)

---
 lib/components/Button.tsx  |  4 ++--
 stories/Button.stories.tsx | 30 +++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/lib/components/Button.tsx b/lib/components/Button.tsx
index 3ad0c2d..e25eafb 100644
--- a/lib/components/Button.tsx
+++ b/lib/components/Button.tsx
@@ -155,7 +155,7 @@ export function Button(props: Props) {
       <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
-            mr={toDisplay ? 1 : 0}
+            mr={toDisplay ? 0.5 : 0}
             name={icon}
             color={iconColor}
             rotation={iconRotation}
@@ -177,7 +177,7 @@ export function Button(props: Props) {
         )}
         {icon && iconPosition === 'right' && (
           <Icon
-            ml={toDisplay ? 1 : 0}
+            ml={toDisplay ? 0.5 : 0}
             name={icon}
             color={iconColor}
             rotation={iconRotation}
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
index ea6f426..b08accf 100644
--- a/stories/Button.stories.tsx
+++ b/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
+import { type ComponentProps, useState } from 'react';
 import { Button } from '../lib/components/Button';
 
 type StoryProps = ComponentProps<typeof Button>;
@@ -19,12 +19,36 @@ export const Default: Story = {
 
 type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
 
+export const WithIcon: Story = {
+  args: {
+    children: 'Submit',
+    icon: 'envelope',
+  },
+};
+
 export const Checkbox: CheckboxStory = {
   args: {
     children: 'Click me',
     checked: false,
+    color: 'default',
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <>
+        ** Note that checkbox is transparent by default, so this is set to blue
+        via params **
+        <br />
+        <br />
+        <Button.Checkbox
+          {...args}
+          checked={checked}
+          onClick={() => setChecked(!checked)}
+        />
+      </>
+    );
   },
-  render: (args) => <Button.Checkbox {...args} />,
 };
 
 type ConfirmStory = StoryObj<ComponentProps<typeof Button.Confirm>>;
@@ -34,7 +58,7 @@ export const Confirm: ConfirmStory = {
     children: 'Click me',
     confirmColor: 'bad',
     confirmContent: 'Confirm?',
-    confirmIcon: 'question',
+    confirmIcon: '',
   },
   render: (args) => <Button.Confirm {...args} />,
 };