From 2c5e805554a4eaec4a3ddfe8d2d056f068e24de2 Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Thu, 13 Feb 2025 23:06:16 +0000 Subject: [PATCH 01/17] This simplifies the radio selection logic by leveraging Svelte's built-in binding functionality Replaced selectedValue with value state variable where selectedValue is a prop assigned to the value as the state Removed isChecked derived state and toggleRadio function Added bind:group={value} to the radio inputs Updated conditional visibility check to use value !== option.value Updated aria-checked attribute to use the new value variable --- src/lib/components/ui/Radios.svelte | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/lib/components/ui/Radios.svelte b/src/lib/components/ui/Radios.svelte index cb7deec3..5cf72028 100644 --- a/src/lib/components/ui/Radios.svelte +++ b/src/lib/components/ui/Radios.svelte @@ -25,6 +25,7 @@ inline = false, options = [], validate = undefined, + selectedValue = null, } = $props<{ legend: string; hint?: string; @@ -36,10 +37,11 @@ inline?: boolean; options?: RadioOption[]; validate?: (value: string) => string | undefined; + selectedValue?: string | null; }>(); - // Component state for single selection - let selectedValue = $state(null); + // Create state variable initialised with prop value + let value = $state(selectedValue); // Add support detection let isSupported = $state(false); @@ -48,16 +50,9 @@ document.body?.classList.contains("govuk-frontend-supported") ?? false; }); - // Derived state to check if a value is selected and handle validation - let isChecked = $derived((value: string) => selectedValue === value); let validationError = $derived( - isSupported && validate ? validate(selectedValue ?? "") : undefined, + isSupported && validate ? validate(value ?? "") : undefined, ); - - function toggleRadio(option: RadioOption) { - if (!isSupported) return; - selectedValue = selectedValue === option.value ? null : option.value; - }
toggleRadio(option)} data-behaviour={option.exclusive ? "exclusive" : undefined} />
\ No newline at end of file + From a0be61b01ee27b7743fead249fd0117da3b1c5de Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Thu, 13 Feb 2025 23:16:10 +0000 Subject: [PATCH 02/17] Add new input property for selected value --- src/routes/components/ui/radios/+page.svelte | 28 +++++++++++++++----- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/routes/components/ui/radios/+page.svelte b/src/routes/components/ui/radios/+page.svelte index d3b08d53..552e9e72 100644 --- a/src/routes/components/ui/radios/+page.svelte +++ b/src/routes/components/ui/radios/+page.svelte @@ -172,6 +172,13 @@ inputType: "checkbox", value: false, }, + { + name: "selectedValue", + category: "Form", + isProp: true, + inputType: "input", + value: "", + }, ]); let parametersValuesArray = $state( @@ -434,7 +441,7 @@ { value: "none", label: "I do not wish to receive updates", - exclusive: true + exclusive: true, }, ]} /> @@ -566,7 +573,9 @@ -

Using Snippets and Nested Components for Conditional Content

+

+ Using Snippets and Nested Components for Conditional Content +

import Radios from "$lib/components/ui/Radios.svelte"; @@ -641,7 +650,9 @@ />
-
+
We'll use this for important notifications
- +
{/snippet} @@ -664,7 +680,7 @@
Include country code if international
- +
{/snippet} @@ -675,7 +691,7 @@ name="contact-timing" small={true} legendSize="s" - validate={(value) => !value ? "Please select a time slot" : undefined} + validate={(value) => (!value ? "Please select a time slot" : undefined)} options={[ { value: "morning", label: "Morning (9am - 12pm)" }, { value: "afternoon", label: "Afternoon (12pm - 5pm)" }, From 6a5efe8af265a72c6c79180f64d824fc2f8f06d3 Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Fri, 14 Feb 2025 00:12:04 +0000 Subject: [PATCH 03/17] Make selectedValue prop bindable --- src/lib/components/ui/Radios.svelte | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/lib/components/ui/Radios.svelte b/src/lib/components/ui/Radios.svelte index 5cf72028..f74079fd 100644 --- a/src/lib/components/ui/Radios.svelte +++ b/src/lib/components/ui/Radios.svelte @@ -14,7 +14,8 @@ }; // Component props - const { + let { + selectedValue = $bindable(null), legend, hint, error, @@ -25,7 +26,6 @@ inline = false, options = [], validate = undefined, - selectedValue = null, } = $props<{ legend: string; hint?: string; @@ -40,9 +40,6 @@ selectedValue?: string | null; }>(); - // Create state variable initialised with prop value - let value = $state(selectedValue); - // Add support detection let isSupported = $state(false); onMount(() => { @@ -51,7 +48,7 @@ }); let validationError = $derived( - isSupported && validate ? validate(value ?? "") : undefined, + isSupported && validate ? validate(selectedValue ?? "") : undefined, ); @@ -117,7 +114,7 @@
+ + +

Bindable Value

+ + import Radios from "$lib/components/ui/Radios.svelte"; + + let selectedOption = $state("option2"); + + const options = [ + { value: "option1", label: "Option 1" }, + { value: "option2", label: "Option 2" }, + { value: "option3", label: "Option 3" } + ]; + + +
+ + +
+ + + +

Currently selected: {selectedOption}

`} + language="svelte" + /> + +
+
+
+ + +
+ +
+ +
+ +

Currently selected: {demoSelectedOption}

+
+
{/if} From cd71a9b9b729b0b55947c78dd6573f2db2950851 Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Fri, 14 Feb 2025 16:37:10 +0000 Subject: [PATCH 05/17] made checkbox selectectedValues a bindable prop and added example to show the functionality --- src/lib/components/ui/CheckBox.svelte | 7 +- .../components/ui/checkbox/+page.svelte | 124 ++++++++++++++---- 2 files changed, 101 insertions(+), 30 deletions(-) diff --git a/src/lib/components/ui/CheckBox.svelte b/src/lib/components/ui/CheckBox.svelte index 9f1ad5af..f440ed9e 100644 --- a/src/lib/components/ui/CheckBox.svelte +++ b/src/lib/components/ui/CheckBox.svelte @@ -14,7 +14,7 @@ }; // Component props - const { + let { legend, hint, error, @@ -24,6 +24,7 @@ small = false, options = [], validate = undefined, + selectedValues = $bindable([]), } = $props<{ legend: string; hint?: string; @@ -34,11 +35,9 @@ small?: boolean; options?: CheckboxOption[]; validate?: (values: string[]) => string | undefined; + selectedValues?: string[]; }>(); - // Component state - let selectedValues = $state([]); - // Add support detection let isSupported = $state(false); // Check for browser support on mount diff --git a/src/routes/components/ui/checkbox/+page.svelte b/src/routes/components/ui/checkbox/+page.svelte index c968c063..b2c7ff9a 100644 --- a/src/routes/components/ui/checkbox/+page.svelte +++ b/src/routes/components/ui/checkbox/+page.svelte @@ -209,6 +209,16 @@ ), ); + // Demo state for bindable example + let demoSelected = $state([]); + + const demoOptions = [ + { value: "option1", label: "Option 1" }, + { value: "option2", label: "Option 2" }, + { value: "option3", label: "Option 3" }, + { value: "none", label: "None of the above", exclusive: true }, + ]; + let snippetSections = [ { value: "email", @@ -853,36 +863,98 @@ + +

Bindable Values

+ + import CheckBox from "$lib/components/ui/CheckBox.svelte"; + + let selected = $state([]); // Initialise empty array for selections + + const options = [ + { value: "option1", label: "Option 1" }, + { value: "option2", label: "Option 2" }, + { value: "option3", label: "Option 3" }, + { value: "none", label: "None of the above", exclusive: true } + ]; + + + +
+ + +
+ +
+ +
+ +

Currently selected: {selected.join(', ')}

`} + language="svelte" + /> + +
+
+
+ + +
+ +
+ +
+ +

+ Currently selected: {demoSelected.join(", ")} +

+
+
+ {/if} From c5bfa8ec1a03450ff093272fcfde98334aabc2c0 Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Mon, 17 Feb 2025 11:51:11 +0000 Subject: [PATCH 06/17] Add selectedValue and selectedValues prop to Radios and Checkbox component documentaiton respectively --- src/routes/components/ui/checkbox/+page.svelte | 7 +++++++ src/routes/components/ui/radios/+page.svelte | 14 +++++++------- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/routes/components/ui/checkbox/+page.svelte b/src/routes/components/ui/checkbox/+page.svelte index b2c7ff9a..15d2b40f 100644 --- a/src/routes/components/ui/checkbox/+page.svelte +++ b/src/routes/components/ui/checkbox/+page.svelte @@ -90,6 +90,13 @@ inputType: "input", value: "Select all that apply", }, + { + name: "selectedValues", + category: "Content", + isProp: true, + inputType: "javascript", + value: "[]", + }, { name: "name", category: "Form", diff --git a/src/routes/components/ui/radios/+page.svelte b/src/routes/components/ui/radios/+page.svelte index 9bb632d8..b75d9f24 100644 --- a/src/routes/components/ui/radios/+page.svelte +++ b/src/routes/components/ui/radios/+page.svelte @@ -83,6 +83,13 @@ inputType: "input", value: "", }, + { + name: "selectedValue", + category: "Content", + isProp: true, + inputType: "input", + value: "", + }, { name: "name", category: "Form", @@ -172,13 +179,6 @@ inputType: "checkbox", value: false, }, - { - name: "selectedValue", - category: "Form", - isProp: true, - inputType: "input", - value: "", - }, ]); let parametersValuesArray = $state( From 9116d2228916d6fb7941c88baa0488d95546e3db Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Fri, 7 Mar 2025 14:45:58 +0000 Subject: [PATCH 07/17] added initial breadcrumbs component --- src/lib/components/ui/Breadcrumbs.svelte | 58 ++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/lib/components/ui/Breadcrumbs.svelte diff --git a/src/lib/components/ui/Breadcrumbs.svelte b/src/lib/components/ui/Breadcrumbs.svelte new file mode 100644 index 00000000..4e004c91 --- /dev/null +++ b/src/lib/components/ui/Breadcrumbs.svelte @@ -0,0 +1,58 @@ + + + From 333652162748dee44b348d3c32c3e7d814ff37b1 Mon Sep 17 00:00:00 2001 From: Ibrahim Haizel Date: Fri, 7 Mar 2025 15:25:13 +0000 Subject: [PATCH 08/17] Add BreadcrumbsWrapper to layout for site navigation to test breadcrumbs components works as expected --- .../layout/BreadcrumbsWrapper.svelte | 78 +++++++++++++++++++ src/routes/+layout.svelte | 9 ++- 2 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 src/lib/components/layout/BreadcrumbsWrapper.svelte diff --git a/src/lib/components/layout/BreadcrumbsWrapper.svelte b/src/lib/components/layout/BreadcrumbsWrapper.svelte new file mode 100644 index 00000000..1771e986 --- /dev/null +++ b/src/lib/components/layout/BreadcrumbsWrapper.svelte @@ -0,0 +1,78 @@ + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 19ab1bcc..5f3947a3 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,7 @@ - - diff --git a/src/lib/components/ui/Breadcrumbs.svelte b/src/lib/components/ui/Breadcrumbs.svelte index 4e004c91..5e934965 100644 --- a/src/lib/components/ui/Breadcrumbs.svelte +++ b/src/lib/components/ui/Breadcrumbs.svelte @@ -1,5 +1,6 @@