Merge pull request #100 from EETagent/tooltips

frontend/package.json

@@ -42,7 +42,9 @@
 		"isomorphic-dompurify": "^0.24.0",
 		"just-debounce-it": "^3.1.1",
 		"svelte-forms-lib": "^2.0.1",
+		"svelte-tippy": "^1.3.2",
 		"swiper": "^8.4.5",
+		"tippy.js": "^6.3.7",
 		"yup": "^0.32.11"
 	}
 }

frontend/pnpm-lock.yaml

@@ -22,8 +22,10 @@ specifiers:
   svelte-check: ^2.10.2
   svelte-forms-lib: ^2.0.1
   svelte-preprocess: ^5.0.0
+  svelte-tippy: ^1.3.2
   svelte-windicss-preprocess: ^4.2.8
   swiper: ^8.4.5
+  tippy.js: ^6.3.7
   tslib: ^2.4.1
   typescript: ^4.9.4
   vite: ^4.0.1
@@ -38,7 +40,9 @@ dependencies:
   isomorphic-dompurify: 0.24.0
   just-debounce-it: 3.1.1
   svelte-forms-lib: 2.0.1
+  svelte-tippy: 1.3.2
   swiper: 8.4.5
+  tippy.js: 6.3.7
   yup: 0.32.11
 
 devDependencies:
@@ -366,6 +370,10 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@popperjs/core/2.11.6:
+    resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
+    dev: false
+
   /@rollup/plugin-commonjs/23.0.4_rollup@3.7.4:
     resolution: {integrity: sha512-bOPJeTZg56D2MCm+TT4psP8e8Jmf1Jsi7pFUMl8BN5kOADNzofNHe47+84WVCt7D095xPghC235/YKuNDEhczg==}
     engines: {node: '>=14.0.0'}
@@ -2287,6 +2295,12 @@ packages:
       typescript: 4.9.4
     dev: true
 
+  /svelte-tippy/1.3.2:
+    resolution: {integrity: sha512-41f+85hwhKBRqX0UNYrgFsi34Kk/KDvUkIZXYANxkWoA2NTVTCZbUC2J8hRNZ4TRVxObTshoZRjK2co5+i6LMw==}
+    dependencies:
+      tippy.js: 6.3.7
+    dev: false
+
   /svelte-windicss-preprocess/4.2.8:
     resolution: {integrity: sha512-Z6pmFbHqJ19SgCiXiVRC/hlRBgZ/5LksMjPF3ilF/1HESP2L+secuaPjr3xOjJW67iZQpT2YdXzGe+MvdsJ6OQ==}
     dependencies:
@@ -2326,6 +2340,12 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /tippy.js/6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+    dependencies:
+      '@popperjs/core': 2.11.6
+    dev: false
+
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}

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">

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>

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>

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} />

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

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>

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 : () => {};
+	$: tooltipDelay = error != "" ? 0 : 1000;
 </script>
 
-<div>
+<div
+	use:isTooltip={{
+		content: helperText,
+		placement: 'top',
+		showOnCreate: false,
+		delay: tooltipDelay
+	}}
+>
 	<input
 		class:error
 		bind:value

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