From 62810b0395befbd7f6dd15c313da53d2044f573e Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Wed, 21 Dec 2022 17:01:32 +0100
Subject: [PATCH] feat: add tooltips

---
 .../lib/components/textfield/EmailField.svelte |  3 +++
 .../lib/components/textfield/IdField.svelte    |  4 +++-
 .../lib/components/textfield/NameField.svelte  | 15 +++++++++++++--
 .../components/textfield/NumberField.svelte    |  4 +++-
 .../components/textfield/PasswordField.svelte  |  3 +++
 .../components/textfield/TelephoneField.svelte | 14 +++++++++++++-
 .../lib/components/textfield/TextField.svelte  | 18 +++++++++++++++++-
 .../(authenticated)/register/+page.svelte      |  5 +++++
 8 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/textfield/EmailField.svelte b/frontend/src/lib/components/textfield/EmailField.svelte
index 84bdbbb..7ca7958 100644
--- a/frontend/src/lib/components/textfield/EmailField.svelte
+++ b/frontend/src/lib/components/textfield/EmailField.svelte
@@ -2,7 +2,9 @@
 	import Email from '../icons/Email.svelte';
 	import TextField from './TextField.svelte';
 
+	let helperText: string = 'Zadejte platný email. Například radko.sablik@ssps.cz';
 	export let placeholder: string = '';
+
 	export let value: string = '';
 	export let error: string = '';
 </script>
@@ -16,6 +18,7 @@
 	on:change
 	type="email"
 	{placeholder}
+	{helperText}
 	icon
 >
 	<div slot="icon" class="flex items-center justify-center">
diff --git a/frontend/src/lib/components/textfield/IdField.svelte b/frontend/src/lib/components/textfield/IdField.svelte
index e977ae8..e4bf087 100644
--- a/frontend/src/lib/components/textfield/IdField.svelte
+++ b/frontend/src/lib/components/textfield/IdField.svelte
@@ -2,7 +2,9 @@
 	import Person from '../icons/Person.svelte';
 	import TextField from './TextField.svelte';
 
+	export let helperText: string = '';
 	export let placeholder: string = '';
+	
 	export let value: string = '';
 	export let error: string = '';
 
@@ -13,7 +15,7 @@
 	}
 </script>
 
-<TextField bind:error bind:value on:keydown on:keyup on:change type="text" {placeholder} icon>
+<TextField bind:error bind:value on:keydown on:keyup on:change type="text" {placeholder} {helperText} icon>
 	<div slot="icon" class="flex items-center justify-center">
 		<Person />
 	</div>
diff --git a/frontend/src/lib/components/textfield/NameField.svelte b/frontend/src/lib/components/textfield/NameField.svelte
index 9aa2d2e..3953401 100644
--- a/frontend/src/lib/components/textfield/NameField.svelte
+++ b/frontend/src/lib/components/textfield/NameField.svelte
@@ -2,12 +2,13 @@
 	import { onMount } from 'svelte';
 	import TextField from './TextField.svelte';
 
+	let helperText: string = 'Zadejte jméno a příjmení. Například Radko Sáblík';
 	export let placeholder: string = '';
 
 	export let valueName: string = '';
 	export let valueSurname: string = '';
 
-	let value: string = "";
+	let value: string = '';
 
 	$: {
 		const parsed = value.trim().split(' ');
@@ -26,7 +27,17 @@
 	export let error: string = '';
 </script>
 
-<TextField bind:error bind:value on:click on:keydown on:keyup on:change type="text" {placeholder} />
+<TextField
+	bind:error
+	bind:value
+	on:click
+	on:keydown
+	on:keyup
+	on:change
+	type="text"
+	{placeholder}
+	{helperText}
+/>
 
 <style>
 </style>
diff --git a/frontend/src/lib/components/textfield/NumberField.svelte b/frontend/src/lib/components/textfield/NumberField.svelte
index d9a7c33..be2c8d5 100644
--- a/frontend/src/lib/components/textfield/NumberField.svelte
+++ b/frontend/src/lib/components/textfield/NumberField.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import TextField from './TextField.svelte';
 
+	export let helperText: string = '';
 	export let placeholder: string = '';
+	
 	export let value: string = '';
 	export let error: string = '';
 
@@ -11,4 +13,4 @@
 	}
 </script>
 
-<TextField bind:error bind:value on:keydown on:keyup on:change type="number" {placeholder} />
+<TextField bind:error bind:value on:keydown on:keyup on:change type="number" {placeholder} {helperText} />
diff --git a/frontend/src/lib/components/textfield/PasswordField.svelte b/frontend/src/lib/components/textfield/PasswordField.svelte
index b332cdc..da599b7 100644
--- a/frontend/src/lib/components/textfield/PasswordField.svelte
+++ b/frontend/src/lib/components/textfield/PasswordField.svelte
@@ -2,7 +2,9 @@
 	import Lock from '../icons/Lock.svelte';
 	import TextField from './TextField.svelte';
 
+	export let helperText: string = '';
 	export let placeholder: string = '';
+	
 	export let value: string = '';
 	export let error: string = '';
 </script>
@@ -14,6 +16,7 @@
 	on:keydown
 	on:keyup
 	{placeholder}
+	{helperText}
 	on:change
 	type="password"
 	icon
diff --git a/frontend/src/lib/components/textfield/TelephoneField.svelte b/frontend/src/lib/components/textfield/TelephoneField.svelte
index 7963f6f..fadf4a6 100644
--- a/frontend/src/lib/components/textfield/TelephoneField.svelte
+++ b/frontend/src/lib/components/textfield/TelephoneField.svelte
@@ -2,7 +2,9 @@
 	import Telephone from '../icons/Telephone.svelte';
 	import TextField from './TextField.svelte';
 
+	let helperText: string = 'Zadejte platný telefon s předvolbou. Například +420 123 456 789';
 	export let placeholder: string = '';
+
 	export let value: string = '';
 	export let error: string = '';
 
@@ -17,7 +19,17 @@
 	}
 </script>
 
-<TextField bind:error bind:value on:keydown on:keyup on:change type="tel" {placeholder} icon>
+<TextField
+	bind:error
+	bind:value
+	on:keydown
+	on:keyup
+	on:change
+	type="tel"
+	{placeholder}
+	{helperText}
+	icon
+>
 	<div slot="icon" class="flex items-center justify-center">
 		<Telephone />
 	</div>
diff --git a/frontend/src/lib/components/textfield/TextField.svelte b/frontend/src/lib/components/textfield/TextField.svelte
index 069a4e2..d33f6df 100644
--- a/frontend/src/lib/components/textfield/TextField.svelte
+++ b/frontend/src/lib/components/textfield/TextField.svelte
@@ -3,14 +3,30 @@
 	const typeAction = (node: HTMLInputElement) => {
 		node.type = type;
 	};
+
+	export let helperText: string = '';
 	export let placeholder: string = '';
+
 	export let value: string = '';
 
 	export let icon: boolean = false;
 	export let error: string = '';
+
+	import { tippy } from 'svelte-tippy';
+	import 'tippy.js/dist/tippy.css';
+
+	const isTooltip = helperText ? tippy : () => {};
+	const tooltipDelay = error != "" ? 0 : 1000;
 </script>
 
-<div>
+<div
+	use:isTooltip={{
+		content: helperText,
+		placement: 'top',
+		showOnCreate: false,
+		delay: tooltipDelay
+	}}
+>
 	<input
 		class:error
 		bind:value
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
index cb27763..ed05547 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
@@ -288,6 +288,7 @@
 						bind:value={$form.candidate.address}
 						type="text"
 						placeholder="Adresa trvalého bydliště"
+						helperText="Uveďte ulici, č.p., město, PSČ"
 					/>
 				</span>
 				<span class="mt-8 ml-2 w-full md:ml-0">
@@ -297,6 +298,7 @@
 						bind:value={$form.candidate.birthplace}
 						type="text"
 						placeholder="Místo narození"
+						helperText="Uveďte město"
 						icon
 					>
 						<div slot="icon" class="text-sspsBlue flex items-center justify-center">
@@ -313,6 +315,8 @@
 					bind:value={$form.candidate.birthdate}
 					type="text"
 					placeholder="Datum narození"
+					
+					helperText="TODO: (Uveďte ve formátu DD.MM.RRRR)"
 				/>
 				<div class="ml-2">
 					<SelectField
@@ -417,6 +421,7 @@
 					on:change={handleChange}
 					bind:value={$form.candidate.personalIdNumber}
 					placeholder="Rodné číslo"
+					helperText="Rodné číslo musí být ve formátu 123456/7890"
 				/>
 				<span class="ml-2">
 					<SelectField