From cb3432292dabb7652b60e4bcb4bdbc00ed3cb394 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Tue, 28 Mar 2023 15:35:18 +0200
Subject: [PATCH] button component can be wide

---
 src/lib/components/Button.svelte |  7 ++++++-
 src/stories/Button.stories.ts    | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index bf0096aed..fda94af51 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -2,6 +2,7 @@
 	export let primary = false;
 	export let filled = true;
 	export let small = false;
+	export let wide = false;
 	export let label: string;
 </script>
 
@@ -34,7 +35,8 @@ And the following optional props:
 		: filled
 		? 'default-filled'
 		: 'default-nofill'}
-    {small ? 'size-small' : 'size-normal'}
+    {small ? 'short' : ''}
+	{wide ? 'wide' : ''}
         "
 	type="button"
 	on:click
@@ -98,4 +100,7 @@ And the following optional props:
 	.size-small {
 		@apply px-2 py-1;
 	}
+	.wide {
+		width: 119.5px;
+	}
 </style>
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index 41fb49446..afabfc784 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -40,6 +40,24 @@ export const PrimarySmall: Story = {
 	}
 };
 
+export const PrimaryWide: Story = {
+	args: {
+		primary: true,
+		wide: true,
+		label: 'Button'
+	}
+};
+
+export const PrimarySmallWide: Story = {
+	args: {
+		primary: true,
+		wide: true,
+		small: true,
+		label: 'Button'
+	}
+};
+
+
 export const PrimaryFilledSmall: Story = {
 	args: {
 		primary: true,