button group component

src/lib/components/ButtonGroup.svelte

@@ -1,17 +1,36 @@
 <script lang="ts">
-    export let leftLabel: string;
+	import Button from '$lib/components/Button.svelte';
-    export let leftAction: function;
+
-    export let wide = false;
+	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>
+{#if !middleLabel}
-		<slot name="left" />
+	<div class="flex gap-3">
-		<slot name="middle" />
+		<Button label={leftLabel} on:click={leftAction} {wide} />
-		<slot name="right" />
+		<Button label={rightLabel} on:click={rightAction} primary={true} filled={true} {wide} />
 	</div>
 {:else}
-	<div>
+	<div class="flex">
-		<slot name="left" />
+		<button class="joined-base border-l border-t border-b rounded-l-lg" on:click={leftAction}>
-		<slot name="right" />
+			<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>

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';

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,
+	}
+};