From 089db67ec86120ef726614b2fe429fd1d5c77966 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 16:01:34 +0200
Subject: [PATCH] button group component

---
 src/lib/components/ButtonGroup.svelte | 41 ++++++++++++++++------
 src/lib/components/index.ts           |  1 +
 src/stories/ButtonGroup.stories.ts    | 50 +++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 src/stories/ButtonGroup.stories.ts

diff --git a/src/lib/components/ButtonGroup.svelte b/src/lib/components/ButtonGroup.svelte
index dc1076208..ab57ae9eb 100644
--- a/src/lib/components/ButtonGroup.svelte
+++ b/src/lib/components/ButtonGroup.svelte
@@ -1,17 +1,36 @@
 <script lang="ts">
-    export let leftLabel: string;
-    export let leftAction: function;
-    export let wide = false;
+	import Button from '$lib/components/Button.svelte';
+
+	export let leftLabel: string;
+	export let leftAction: () => void;
+	export let rightLabel: string;
+	export let rightAction: () => void;
+	export let middleLabel: string | undefined;
+	export let middleAction: () => void | undefined;
+	export let wide = false;
 </script>
-{#if $$slots.middle}
-	<div>
-		<slot name="left" />
-		<slot name="middle" />
-		<slot name="right" />
+
+{#if !middleLabel}
+	<div class="flex gap-3">
+		<Button label={leftLabel} on:click={leftAction} {wide} />
+		<Button label={rightLabel} on:click={rightAction} primary={true} filled={true} {wide} />
 	</div>
 {:else}
-	<div>
-		<slot name="left" />
-		<slot name="right" />
+	<div class="flex">
+		<button class="joined-base border-l border-t border-b rounded-l-lg" on:click={leftAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
+		</button>
+		<button class="joined-base border" on:click={middleAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{middleLabel}</span>
+		</button>
+		<button class="joined-base border-r border-t border-b rounded-r-lg" on:click={rightAction}>
+			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{rightLabel}</span>
+		</button>
 	</div>
 {/if}
+
+<style>
+	.joined-base {
+		@apply flex items-center justify-center border-[#71717a] text-base text-white;
+	}
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index ad5d06a08..15821aede 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -5,3 +5,4 @@ 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';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
diff --git a/src/stories/ButtonGroup.stories.ts b/src/stories/ButtonGroup.stories.ts
new file mode 100644
index 000000000..96e2930a6
--- /dev/null
+++ b/src/stories/ButtonGroup.stories.ts
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ButtonGroup from '$lib/components/ButtonGroup.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+const meta: Meta<ButtonGroup> = {
+	title: 'GitButler/ButtonGroup',
+	component: ButtonGroup,
+	tags: ['autodocs'],
+	argTypes: {
+        leftLabel: { control: 'text' },
+        rightLabel: { control: 'text' },
+        middleLabel: { control: 'text' },
+	}
+};
+
+export default meta;
+type Story = StoryObj<ButtonGroup>;
+
+export const TwoButtons: Story = {
+	args: {
+        leftLabel: 'Cancel',
+        rightLabel: 'Submit',
+	}
+};
+
+export const TwoButtonsWide: Story = {
+	args: {
+        leftLabel: 'Cancel',
+        rightLabel: 'Submit',
+        wide: true,
+	}
+};
+
+export const ThreeButtons: Story = {
+	args: {
+        leftLabel: 'Left',
+        middleLabel: 'Middle',
+        rightLabel: 'Right',
+	}
+};
+
+export const ThreeButtonsWide: Story = {
+	args: {
+        leftLabel: 'Left',
+        middleLabel: 'Middle',
+        rightLabel: 'Right',
+        wide: true,
+	}
+};