From 0812f6efd8484e86a4f09631b28c71d17cd69627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Fri, 30 Dec 2022 12:40:57 +0100
Subject: [PATCH] feat(frontend): Add customization props to radio (#1056)

---
 frontend/src/lib/components/RadioButton.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
index 646e163443..8fd6cbe9a5 100644
--- a/frontend/src/lib/components/RadioButton.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -3,6 +3,8 @@
 	export let options: [string | { title: string; desc: string }, any][]
 	export let value: any
 	export let disabled = false
+	export let labelClass = ''
+	export let inputClass = ''
 
 	import { createEventDispatcher } from 'svelte'
 	import Tooltip from './Tooltip.svelte'
@@ -11,13 +13,13 @@
 </script>
 
 <fieldset class="w-full">
-	<legend class="sr-only">{label}</legend>
+	<legend class="sr-only {labelClass}">{label}</legend>
 	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
 			<label
 				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
-				grow whitespace-nowrap hover:border-gray-600 hover:bg-gray-100
-				{val === value ? '!bg-blue-50 !border-blue-500' : ''}"
+				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-gray-100
+				{val === value ? '!bg-blue-50 !border-blue-500' : ''} {inputClass}"
 			>
 				<input
 					{disabled}