feat: required prop for FormField

ADOFAI-gg · Mar 21, 2024 · 379aeef · 379aeef
1 parent e043b03
commit 379aeef
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/src/lib/components/form/FormField.svelte b/src/lib/components/form/FormField.svelte
@@ -5,13 +5,17 @@
 
 	export let label: TranslationKey | null = null
 	export let error: TranslationKey | null = null
+	export let required: boolean = false
 </script>
 
 <div class="form-field">
 	<label class="form-field-content">
 		{#if label}
 			<p class="label">
 				<Translation key={label} />
+				{#if required}
+					<span class="required-sign">*</span>
+				{/if}
 			</p>
 		{/if}
 		<slot />
@@ -30,6 +34,10 @@
 		line-height: 16px;
 	}
 
+	.required-sign {
+		color: rgba(var(--color-red), 1);
+	}
+
 	.form-field {
 		display: flex;
 		flex-direction: column;

diff --git a/src/lib/components/form/HorizontalFormField.svelte b/src/lib/components/form/HorizontalFormField.svelte
@@ -5,13 +5,18 @@
 
 	export let label: TranslationKey | null = null
 	export let error: TranslationKey | null = null
+	export let required: boolean = false
 </script>
 
 <div class="form-field">
 	<label class="form-field-content">
 		{#if label}
 			<p class="label">
 				<Translation key={label} />
+
+				{#if required}
+					<span class="required-sign">*</span>
+				{/if}
 			</p>
 		{/if}
 		<slot />
@@ -31,6 +36,10 @@
 		flex-grow: 1;
 	}
 
+	.required-sign {
+		color: rgba(var(--color-red), 1);
+	}
+
 	.form-field {
 		display: flex;
 		flex-direction: column;

diff --git a/src/stories/form/FormField.stories.svelte b/src/stories/form/FormField.stories.svelte
@@ -19,4 +19,6 @@
 
 <Story name="Labeled" args={{ label: 'custom:Label' }} />
 
+<Story name="Required" args={{ label: 'custom:Label', required: true }} />
+
 <Story name="With Error" args={{ label: 'custom:Label', error: 'custom:Wow this is error' }} />
diff --git a/src/stories/form/HorizontalFormField.stories.svelte b/src/stories/form/HorizontalFormField.stories.svelte
@@ -19,4 +19,6 @@
 
 <Story name="Labeled" args={{ label: 'custom:Label' }} />
 
+<Story name="Required" args={{ label: 'custom:Label', required: true }} />
+
 <Story name="With Error" args={{ label: 'custom:Label', error: 'custom:Wow this is error' }} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,4 +19,6 @@

		<Story name="Labeled" args={{ label: 'custom:Label' }} />

		<Story name="Required" args={{ label: 'custom:Label', required: true }} />

		<Story name="With Error" args={{ label: 'custom:Label', error: 'custom:Wow this is error' }} />