From 390c54a2bfb845848f683fa7603333177a8a6f05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Fri, 23 Feb 2024 13:58:34 +0100
Subject: [PATCH] docs: create stories for Login page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is the second form I have touched. Here, I even have a light
validation implemented on the server.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 stories/pages/Login.stories.ts     | 45 ++++++++++++++++++++++++++++++
 stories/templates/Login.stories.ts | 45 ++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 stories/pages/Login.stories.ts
 create mode 100644 stories/templates/Login.stories.ts

diff --git a/stories/pages/Login.stories.ts b/stories/pages/Login.stories.ts
new file mode 100644
index 0000000..887faef
--- /dev/null
+++ b/stories/pages/Login.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Login from '$lib/components/pages/Login.svelte';
+
+const meta = {
+	title: 'Pages/Login',
+	component: Login,
+	tags: ['autodocs'],
+	argTypes: {
+		form: { controls: 'object' }
+	}
+} satisfies Meta<Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: false,
+			missing: false,
+		}
+	}
+};
+
+export const MissingInput: Story = {
+	args: {
+		form: {
+			account: '',
+			incorrect: false,
+			missing: true,
+		}
+	}
+};
+
+export const InvalidFormData: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: true,
+			missing: false,
+		}
+	}
+};
diff --git a/stories/templates/Login.stories.ts b/stories/templates/Login.stories.ts
new file mode 100644
index 0000000..04e5ba9
--- /dev/null
+++ b/stories/templates/Login.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Login from '$lib/components/templates/Login.svelte';
+
+const meta = {
+	title: 'Templates/Login',
+	component: Login,
+	tags: ['autodocs'],
+	argTypes: {
+		form: { controls: 'object' }
+	}
+} satisfies Meta<Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: false,
+			missing: false,
+		}
+	}
+};
+
+export const MissingInput: Story = {
+	args: {
+		form: {
+			account: '',
+			incorrect: false,
+			missing: true,
+		}
+	}
+};
+
+export const InvalidFormData: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: true,
+			missing: false,
+		}
+	}
+};