From ed8c23f9fed4377c6e0cd608e8be2ca0b245c2c2 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 11:21:14 +0200
Subject: [PATCH] Introduce a reusable button

---
 src/lib/components/Button.svelte | 75 ++++++++++++++++++++++++++++++++
 src/lib/components/index.ts      |  1 +
 src/stories/Button.stories.ts    | 60 +++++++++++++++++++------
 3 files changed, 123 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/Button.svelte

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
new file mode 100644
index 000000000..ed059aab5
--- /dev/null
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	export let primary = false;
+	export let filled = false;
+	export let small = false;
+	export let label: string;
+</script>
+
+<!--
+@component
+This is the only button we should be using in the app. 
+It emits a click event like any self respecting button should.
+
+It takes the following required props:
+- `label` - string - the text to display on the button
+
+And the following optional props:
+- `primary` - boolean - whether the button should be primary or not
+- `filled` - boolean - whether the button should be filled or not
+- `small` - boolean - whether the button should be small or not
+
+- Usage:
+  ```tsx
+<Button label="OK" on:click={yourFunction}/>
+  ```
+-->
+
+<button
+	class="
+    base
+    {primary
+		? filled
+			? 'primary-filled'
+			: 'primary-nofill'
+		: filled
+		? 'default-filled'
+		: 'default-nofill'}
+    {small ? 'size-small' : 'size-normal'}
+        "
+	type="button"
+	on:click
+>
+	<span class="overflow-hidden text-ellipsis">{label}</span>
+</button>
+
+<style>
+	.base {
+		@apply flex items-center justify-center rounded text-base text-white;
+	}
+	.base:hover {
+		/* @apply bg-gray-100; */
+	}
+	.base:disabled {
+		@apply opacity-40;
+	}
+	.primary-nofill {
+		border: 1px solid #3662e3;
+	}
+	.primary-filled {
+		background: #3662e3;
+	}
+	.default-nofill {
+		background: #71717a;
+	}
+	.default-filled {
+		border: 1px solid #71717a;
+	}
+	.size-normal {
+		width: 66px;
+		height: 36px;
+	}
+	.size-small {
+		width: 66px;
+		height: 24px;
+	}
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 8474d9f73..ad5d06a08 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -4,3 +4,4 @@ export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as CodeViewer } from './CodeViewer';
 export { default as CommandPalette } from './CommandPalette';
 export { default as Modal } from './Modal.svelte';
+export { default as Button } from './Button.svelte';
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index 9abf4d88d..41fb49446 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -1,18 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import Button from './Button.svelte';
+import Button from '$lib/components/Button.svelte';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 const meta: Meta<Button> = {
-	title: 'Example/Button',
+	title: 'GitButler/Button',
 	component: Button,
 	tags: ['autodocs'],
 	argTypes: {
-		backgroundColor: { control: 'color' },
-		size: {
-			control: { type: 'select' },
-			options: ['small', 'medium', 'large']
-		}
+		primary: { control: 'boolean' },
+		filled: { control: 'boolean' },
+		small: { control: 'boolean' },
+		label: { control: 'text' }
 	}
 };
 
@@ -26,23 +25,58 @@ export const Primary: Story = {
 		label: 'Button'
 	}
 };
-
-export const Secondary: Story = {
+export const PrimaryFilled: Story = {
 	args: {
+		primary: true,
+		filled: true,
+		label: 'Button'
+	}
+};
+export const PrimarySmall: Story = {
+	args: {
+		primary: true,
+		small: true,
 		label: 'Button'
 	}
 };
 
-export const Large: Story = {
+export const PrimaryFilledSmall: Story = {
 	args: {
-		size: 'large',
+		primary: true,
+		filled: true,
+		small: true,
 		label: 'Button'
 	}
 };
 
-export const Small: Story = {
+export const Default: Story = {
 	args: {
-		size: 'small',
+		primary: false,
+		label: 'Button'
+	}
+};
+
+export const DefaultFilled: Story = {
+	args: {
+		primary: false,
+		filled: true,
+		label: 'Button'
+	}
+};
+
+export const DefaultSmall: Story = {
+	args: {
+		primary: false,
+		small: true,
+		label: 'Button'
+	}
+};
+
+export const DefaultFilledSmall: Story = {
+	args: {
+		primary: false,
+		filled: true,
+		small: true,
 		label: 'Button'
 	}
 };