From 611876481be725e4a44f0dc171324c82fbce0877 Mon Sep 17 00:00:00 2001
From: pbardy2000 <146740183+pbardy2000@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:01:57 +0000
Subject: [PATCH] feat(CB2-14451): add radio component

---
 .../govuk-form-group-radio.component.html     | 14 +++++---
 .../govuk-form-group-radio.component.ts       |  4 +--
 .../vehicle-section-edit.component.html       | 35 ++-----------------
 src/app/forms/dynamic-forms.module.ts         |  2 +-
 src/app/models/options.model.ts               |  1 +
 5 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
index 5e20cf13b..f1b663a5f 100644
--- a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
+++ b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.html
@@ -13,16 +13,20 @@ <h1 tag>
     <div data-module="govuk-radios">
       <div *ngFor="let option of options">
         <input
-          govukRadio
+          id="{{ id }}-{{ option.value }}-radio"
+          class="govuk-radios__input"
           type="radio"
-          id="{{ controlName }}-{{ option.value }}-radio"
-          formControlName="{{ controlName }}"
+          name="{{ id }}"
           [value]="option.value"
           [checked]="option.value === value"
-          [name]="id"
+          [attr.aria-describedby]="hintId"
+          [attr.aria-labelledby]="labelId"
+          [attr.data-testid]="id"
+          [class.govuk-radios__input--error]="hasError"
         />
         <label
-          for="{{ controlName }}-{{ option.value }}-radio'"
+          id="{{ labelId }}"
+          for="{{ id }}-{{ option.value }}-radio"
         >
           {{ option.label }}
         </label>
diff --git a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts
index 9837c1b11..48ac0b79e 100644
--- a/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts
+++ b/src/app/forms/components/govuk-form-group-radio/govuk-form-group-radio.component.ts
@@ -14,7 +14,7 @@ import { SharedModule } from '@shared/shared.module';
 @Component({
 	selector: 'govuk-form-group-radio',
 	standalone: true,
-	imports: [CommonModule, FormsModule, SharedModule, ReactiveFormsModule],
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule],
 	templateUrl: './govuk-form-group-radio.component.html',
 	styleUrls: ['./govuk-form-group-radio.component.scss'],
 	providers: [
@@ -30,7 +30,7 @@ export class GovukFormGroupRadioComponent implements ControlValueAccessor {
 	@Output() focus = new EventEmitter<FocusEvent>();
 
 	@Input()
-	value: string | boolean | number = '';
+	value: string | number | boolean | null = null;
 
 	@Input()
 	disabled = false;
diff --git a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
index e34688db6..9fa0258bd 100644
--- a/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
+++ b/src/app/forms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html
@@ -128,42 +128,13 @@ <h1>
   </ng-container>
 
   <div class="flex-row">
-    <!-- Speed limiter exempt -->
     <govuk-form-group-radio
       *ngIf="shouldDisplayFormControl('techRecord_speedLimiterMrk')"
-      [options]="ExemptOrNotOptions"
       label="Speed limiter exempt"
-      formControlName="techRecord_speedLimiterMrk"
-      [tags]="[{ label: TagTypeLabels.REQUIRED, colour: TagType.RED }]"
+      formControlName="techRecord_speedLimiterMrk" 
+      [options]="ExemptOrNotOptions"
+      [tags]="[{ colour: TagType.PURPLE, label: TagTypeLabels.PLATES }]"
     ></govuk-form-group-radio>
-<!--    <div *ngIf="shouldDisplayFormControl('techRecord_speedLimiterMrk')" class="govuk-form-group-radio">-->
-<!--      <fieldset>-->
-<!--        <legend>-->
-<!--          <h1 tag>-->
-<!--            Speed limiter exempt-->
-<!--            <div>-->
-<!--              <app-tag [type]="TagType.PURPLE">{{ TagTypeLabels.PLATES }}</app-tag>-->
-<!--            </div>-->
-<!--          </h1>-->
-<!--        </legend>-->
-<!--        <div data-module="govuk-radios">-->
-<!--          <div *ngFor="let option of ExemptOrNotOptions">-->
-<!--            <input-->
-<!--              id="techRecord_speedLimiterMrk-{{ option.value }}-radio"-->
-<!--              govukRadio-->
-<!--              type="radio"-->
-<!--              formControlName="techRecord_speedLimiterMrk"-->
-<!--              [value]="option.value"-->
-<!--            />-->
-<!--            <label-->
-<!--             for="techRecord_speedLimiterMrk-{{ option.value }}-radio"-->
-<!--            >-->
-<!--              {{ option.label }}-->
-<!--            </label>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </fieldset>-->
-<!--    </div>-->
 
     <!-- Tacho exempt -->
     <div *ngIf="shouldDisplayFormControl('techRecord_tachoExemptMrk')" class="govuk-form-group-radio">
diff --git a/src/app/forms/dynamic-forms.module.ts b/src/app/forms/dynamic-forms.module.ts
index feef5cd7b..b9cfdfd9c 100644
--- a/src/app/forms/dynamic-forms.module.ts
+++ b/src/app/forms/dynamic-forms.module.ts
@@ -12,7 +12,6 @@ import { DateFocusNextDirective } from '@directives/date-focus-next/date-focus-n
 import { PrefixDirective } from '@directives/prefix/prefix.directive';
 import { SuffixDirective } from '@directives/suffix/suffix.directive';
 import { ApprovalTypeInputComponent } from '@forms/components/approval-type/approval-type.component';
-import { GovukFormGroupRadioComponent } from '@forms/components/govuk-form-group-radio/govuk-form-group-radio.component';
 import { AdrCertificateHistoryComponent } from '@forms/custom-sections/adr-certificate-history/adr-certificate-history.component';
 import { AdrExaminerNotesHistoryEditComponent } from '@forms/custom-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit';
 import { AdrPermittedDangerousGoodsComponent } from '@forms/custom-sections/adr-permitted-dangerous-goods/adr-permitted-dangerous-goods.component';
@@ -38,6 +37,7 @@ import { DynamicFormGroupComponent } from './components/dynamic-form-group/dynam
 import { FieldErrorMessageComponent } from './components/field-error-message/field-error-message.component';
 import { FieldWarningMessageComponent } from './components/field-warning-message/field-warning-message.component';
 import { GovukCheckboxGroupComponent } from './components/govuk-checkbox-group/govuk-checkbox-group.component';
+import { GovukFormGroupRadioComponent } from './components/govuk-form-group-radio/govuk-form-group-radio.component';
 import { NumberInputComponent } from './components/number-input/number-input.component';
 import { RadioGroupComponent } from './components/radio-group/radio-group.component';
 import { ReadOnlyComponent } from './components/read-only/read-only.component';
diff --git a/src/app/models/options.model.ts b/src/app/models/options.model.ts
index 055ef6ada..15920965e 100644
--- a/src/app/models/options.model.ts
+++ b/src/app/models/options.model.ts
@@ -1,5 +1,6 @@
 export interface MultiOption {
 	label: string;
 	value: string | number | boolean;
+	hint?: string;
 }
 export type MultiOptions = Array<MultiOption>;