inlcude name in the id of RadioButotnSolid (fix #665)

.changeset/multiple-radiobuttongroupsolid.md

@@ -0,0 +1,6 @@
+---
+'@ldn-viz/ui': patch
+---
+
+FIXED: include `name` in the `id` of `RadioButtonSolid`, preventing interference with different
+`RadioButtonGroupSolid`s that include options with the same `id`.

packages/ui/src/lib/radioButtonSolid/RadioButtonSolid.stories.svelte

@@ -16,6 +16,7 @@
 	import { Story } from '@storybook/addon-svelte-csf';
 
 	let selectedId = 'bus';
+	let selectedId2 = 'train';
 
 	let optionsForGroup = [
 		{ id: 'bus', label: 'Bus stops' },
@@ -30,6 +31,28 @@
 	<p class="mt-8 text-color-text-secondary">Selected id: {selectedId}</p>
 </Story>
 
+<!--
+You can create two or more independent instances of the `Two RadioButtonGroupSolid` -  just ensure that you provide
+different values as the `name` prop.
+-->
+<Story name="Using multiple instances">
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1">
+			<RadioButtonGroupSolid options={optionsForGroup} name="station-type-1" bind:selectedId />
+			<p class="text-color-text-secondary">Selected id: {selectedId}</p>
+		</div>
+
+		<div class="flex flex-col gap-1">
+			<RadioButtonGroupSolid
+				options={optionsForGroup}
+				name="station-type-2"
+				bind:selectedId={selectedId2}
+			/>
+			<p class="text-color-text-secondary">Selected id: {selectedId2}</p>
+		</div>
+	</div>
+</Story>
+
 <Story name="RadioGroup with Icons above">
 	<RadioButtonGroupSolid name="station-type" bind:selectedId>
 		<RadioButtonSolid id="bus" name="station-type-bus">

packages/ui/src/lib/radioButtonSolid/RadioButtonSolid.svelte

@@ -30,7 +30,7 @@
 	 */
 	export let disabled = false;
 
-	let inputID = `input-${id}`;
+	let inputID = `input-${name || ''}-${id}`;
 
 	const { selectedId } = getContext<{ selectedId: Writable<string> }>('selectedId');
 </script>