From 0783a080e8b7975573ed89781bbe90839a0a289d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 3 Mar 2024 15:08:02 +0100
Subject: [PATCH] feat: allow for linking between stories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In order to link between stories in Storybook I need to add some
attribute to elements, so that the events are prevented and navigation
can be handled by Storybook.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 .prettierignore                               |  1 +
 src/lib/components/organisms/LoginForm.svelte |  7 ++++++-
 src/lib/components/templates/Login.svelte     | 12 +++++++++++-
 src/lib/components/templates/Profile.svelte   |  7 ++++++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 3897265..4c899c6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+/storybook-static
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
diff --git a/src/lib/components/organisms/LoginForm.svelte b/src/lib/components/organisms/LoginForm.svelte
index cfb5257..a6e8a58 100644
--- a/src/lib/components/organisms/LoginForm.svelte
+++ b/src/lib/components/organisms/LoginForm.svelte
@@ -15,6 +15,11 @@
 	 * Available servers for signin
 	 */
 	export let servers: Array = [];
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
 </script>
 
 <form class="space-y-4" name="login" method="POST" action="?/login">
@@ -50,7 +55,7 @@
 			{$_(i18n.reset)}
 		</a>
 	</div>
-	<button type="submit" class="w-full btn variant-filled-primary">
+	<button type="submit" class="w-full btn variant-filled-primary" data-sb-kind={sb}>
 		{$_(i18n.submit)}
 	</button>
 </form>
diff --git a/src/lib/components/templates/Login.svelte b/src/lib/components/templates/Login.svelte
index d19f1a4..533c97c 100644
--- a/src/lib/components/templates/Login.svelte
+++ b/src/lib/components/templates/Login.svelte
@@ -7,6 +7,10 @@
 	 * Form handling by SvelteKit
 	 */
 	export let form: unknown = null;
+
+	/**
+	 * Translation keys to enable reuse
+	 */
 	const i18n = {
 		fields: {
 			account: {
@@ -27,6 +31,12 @@
 			missing: 'page.login.form.validation.missing'
 		}
 	};
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
+
 	const servers = {
 		'1': 'fig.fr33domlover.site',
 		'2': 'grape.fr33domlover.site',
@@ -38,6 +48,6 @@
 	<div class="space-y-10">
 		<h1 class="h1 font-bold">{$_('page.login.heading')}</h1>
 		<p>{$_('page.login.intro')}</p>
-		<LoginForm {form} {i18n} {servers} />
+		<LoginForm {form} {i18n} {sb} {servers} />
 	</div>
 </div>
diff --git a/src/lib/components/templates/Profile.svelte b/src/lib/components/templates/Profile.svelte
index 912416d..883bea6 100644
--- a/src/lib/components/templates/Profile.svelte
+++ b/src/lib/components/templates/Profile.svelte
@@ -13,6 +13,11 @@
 	 * Required context for populating the template.
 	 */
 	export let data: ProfileData = null;
+
+	/**
+	 * Allow for linking stories in Storybook.
+	 */
+	export let sb = '';
 </script>
 
 <section class="w-full mx-auto flex px-8 pt-8">
@@ -60,7 +65,7 @@
 					values: {
 						addElementOpen: '<a class="anchor" href="#">',
 						addElementClose: '</a>',
-						importElementOpen: '<a class="anchor" href="/projects/import/">',
+						importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
 						importElementClose: '</a>'
 					}
 				})}