feat(CB2-14451): add radio component

dvsa · Nov 28, 2024 · 6118764 · 6118764
1 parent 422f760
commit 6118764
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 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
@@ -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
@@ -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/.../custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.html b/.../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
@@ -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
@@ -1,5 +1,6 @@
 export interface MultiOption {
 	label: string;
 	value: string | number | boolean;
+	hint?: string;
 }
 export type MultiOptions = Array<MultiOption>;