Merge pull request #420 from funidata/DS-270-Radio-button-group-impro…

…vement

[RadioButtonGroup, RadioButton]: New refactored components with tests

ngx-fudis/projects/dev/src/app/components/formExamples.component.html

@@ -47,12 +47,17 @@
                   [message]="'Backend threw an error, it is not totally fault of this component'"
                 />
               </fudis-text-input>
-              <!-- <fudis-radio-button-group
+              <fudis-radio-button-group
                 [label]="t('chooseTruth')"
                 [helpText]="t('chooseTruthHelp')"
                 [control]="testFormGroup.controls['truth']"
-                [options]="radioButtonOptions"
-              /> -->
+              >
+                <fudis-radio-button
+                  *ngFor="let option of radioButtonOptions"
+                  [label]="option.label"
+                  [value]="option.value"
+                />
+              </fudis-radio-button-group>
               <!-- <fudis-dropdown
                 [id]="'dropdown-id-123'"
                 [label]="'Some dropdown'"

ngx-fudis/projects/dev/src/app/components/formExamples.component.ts

@@ -145,7 +145,7 @@ export class AppFormExampleComponent implements OnInit {
     { value: 'english', label: 'EN' },
   ];
 
-  radioButtonOptions: FudisRadioButtonOption[] = [];
+  radioButtonOptions: FudisRadioButtonOption<object>[] = [];
 
   checkboxOptions: FudisCheckboxOption<object>[] = [];
 
@@ -157,8 +157,8 @@ export class AppFormExampleComponent implements OnInit {
       .pipe(takeUntilDestroyed(this._destroyRef))
       .subscribe((value) => {
         this.radioButtonOptions = [
-          { value: true, label: value.chooseTruthTrue, id: 'boolean-2' },
-          { value: false, label: value.chooseTruthFalse, id: 'boolean-1' },
+          { value: true, label: value.chooseTruthTrue },
+          { value: false, label: value.chooseTruthFalse },
         ];
         this.checkboxOptions = [
           { controlName: 'blueberry', label: value.blueberry },

ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-form.component.ts

@@ -1,7 +1,15 @@
+import { DOCUMENT } from '@angular/common';
 import { Component, Inject } from '@angular/core';
+import { TranslocoService } from '@ngneat/transloco';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FudisDialogService, FudisGroupValidators, FudisValidators } from 'ngx-fudis';
+import {
+  FudisDialogService,
+  FudisGroupValidators,
+  FudisTranslationService,
+  FudisValidators,
+} from 'ngx-fudis';
+import { FudisRadioButtonOption } from 'projects/ngx-fudis/src/lib/types/forms';
 
 type MyCheckboxType = {
   controlName: string;
@@ -11,7 +19,7 @@ type MyCheckboxType = {
 type MyForm = {
   textInput: FormControl<string | null | number>;
   checkboxFormGroup: FormGroup;
-  // truth: FormControl<boolean | null>;
+  truth: FormControl<boolean | null>;
 };
 
 @Component({
@@ -43,11 +51,16 @@ type MyForm = {
                   [helpText]="'I hope everything is OK'"
                   [control]="testFormGroup.controls['textInput']"
                 />
-                <!-- <fudis-radio-button-group
-                [title]="'Choose the truth'"
-                [control]="testFormGroup.controls['truth']"
-                [options]="radioButtonOptions"
-              /> -->
+                <fudis-radio-button-group
+                  [label]="'Choose the truth'"
+                  [control]="testFormGroup.controls['truth']"
+                >
+                  <fudis-radio-button
+                    *ngFor="let option of radioButtonOptions"
+                    [label]="option.label"
+                    [value]="option.value"
+                  />
+                </fudis-radio-button-group>
               </ng-template>
             </fudis-fieldset>
           </ng-template>
@@ -69,7 +82,10 @@ type MyForm = {
 export class DialogTestFormComponent {
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: { greeting: string },
+    @Inject(DOCUMENT) private _document: Document,
     private _dialogService: FudisDialogService,
+    private _translocoService: TranslocoService,
+    private _fudisLanguage: FudisTranslationService,
   ) {
     this._greetingFromOpener = this.data.greeting;
   }
@@ -83,10 +99,10 @@ export class DialogTestFormComponent {
     { controlName: 'strawberry', label: 'strawberry' },
   ];
 
-  // radioButtonOptions: FudisRadioButtonOption[] = [
-  //   { value: true, label: 'True', id: 'boolean-2' },
-  //   { value: false, label: 'False', id: 'boolean-1' },
-  // ];
+  radioButtonOptions: FudisRadioButtonOption<object>[] = [
+    { value: true, label: 'True' },
+    { value: false, label: 'False' },
+  ];
 
   testFormGroup = new FormGroup<MyForm>({
     textInput: new FormControl<string | null | number>(null, [
@@ -110,11 +126,12 @@ export class DialogTestFormComponent {
         }),
       ],
     ),
-    //   truth: new FormControl<boolean | null>(
-    //     null,
-    //     FudisValidators.required(
-    //       this._translocoService.selectTranslateObject('form_errors.required'),
-    //    ),
+    truth: new FormControl<boolean | null>(
+      null,
+      FudisValidators.required(
+        this._translocoService.selectTranslateObject('form_errors.required'),
+      ),
+    ),
   });
 
   submitDialogForm(): void {

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.ts

@@ -21,7 +21,6 @@ import { FormComponent } from '../form/form.component';
 import { FudisIdService } from '../../../services/id/id.service';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject } from 'rxjs';
 
 @Component({
   selector: 'fudis-checkbox-group',
@@ -53,11 +52,6 @@ export class CheckboxGroupComponent extends FieldSetBaseDirective implements OnI
    */
   @Input() size: FudisInputSize = 'lg';
 
-  /**
-   * If component is a child of Form component, Form's Error Summary is visible,this component's control has errors and when this component is loaded for the first time, it will by default call Error Summary to reload itself again and mark control as touched. This is because if component is lazy loaded to the DOM after the initial reload errors call was made, errors of this component might not appear on the list. To disable this feature, set this to false.
-   */
-  @Input() errorSummaryReloadOnInit: boolean = true;
-
   /**
    * Emit changed control's name and whole FormGroup when one Checkbox is clicked.
    */
@@ -78,11 +72,6 @@ export class CheckboxGroupComponent extends FieldSetBaseDirective implements OnI
    */
   protected _internalFormGroup: boolean = false;
 
-  /**
-   * Trigger update when control validator is changed
-   */
-  protected _updateValueAndValidityTrigger = new Subject<void>();
-
   /**
    * Getter for _groupBlurredOut boolean.
    */

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.html

@@ -22,27 +22,29 @@
       (blur)="_onBlur($event)"
       (focus)="_onFocus()"
     />
-    <span class="fudis-checkbox__content">
-      <span
-        class="fudis-checkbox__content__box"
-        [class.fudis-checkbox__content__box--focused]="_focused"
-        [class.fudis-checkbox__content__box--invalid]="
-          _checkboxGroup.formGroup &&
-          _checkboxGroup.formGroup.touched &&
-          _checkboxGroup.formGroup.invalid &&
-          _checkboxGroup.groupBlurredOut
-        "
-        [class.fudis-checkbox__content__box--disabled]="control.disabled"
-      >
-        <fudis-icon
-          *ngIf="control.value"
-          [icon]="'check'"
-          class="fudis-checkbox__content__box__icon"
-        />
-      </span>
+    <div class="fudis-checkbox__content">
+      <div class="fudis-checkbox__content-wrapper">
+        <span
+          class="fudis-checkbox__content__box"
+          [class.fudis-checkbox__content__box--focused]="_focused"
+          [class.fudis-checkbox__content__box--invalid]="
+            _checkboxGroup.formGroup &&
+            _checkboxGroup.formGroup.touched &&
+            _checkboxGroup.formGroup.invalid &&
+            _checkboxGroup.groupBlurredOut
+          "
+          [class.fudis-checkbox__content__box--disabled]="control.disabled"
+        >
+          <fudis-icon
+            *ngIf="control.value"
+            [icon]="'check'"
+            class="fudis-checkbox__content__box__icon"
+          />
+        </span>
+      </div>
       <span class="fudis-checkbox__content__label">
         {{ label }}
       </span>
-    </span>
+    </div>
   </label>
 </ng-container>

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.scss

@@ -21,14 +21,21 @@
     display: inline-flex;
     align-items: center;
 
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: spacing.$spacing-lg;
+      height: spacing.$spacing-lg;
+    }
+
     &__box {
       @include borders.border("1px", "solid", "gray-middle");
 
       display: flex;
       position: absolute;
       align-items: center;
       justify-content: center;
-      margin-right: spacing.$spacing-xs;
       border-radius: 0;
       width: spacing.$spacing-input-checkbox;
       height: spacing.$spacing-input-checkbox;
@@ -57,7 +64,8 @@
 
     &__label {
       position: relative;
-      margin-left: spacing.$spacing-xl;
+      padding-right: spacing.$spacing-xs;
+      padding-left: spacing.$spacing-xs;
     }
   }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.ts

@@ -125,7 +125,7 @@ export class CheckboxComponent implements OnInit, OnDestroy {
     this.handleChange.emit({ checkbox: optionToEmit, control: this.control });
 
     /**
-     * Call parent's function, which trigger's Checkbox Group's emit
+     * Call parent's function, which triggers Checkbox Group's emit
      */
     this._checkboxGroup.triggerEmit(this.controlName);
   }

ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.stories.ts

@@ -59,12 +59,16 @@ import { excludeAllRegex } from '../../../utilities/storybook';
                 />
               </fudis-grid>
               <fudis-grid [columns]="{ xs: 1, sm: 2 }">
-                <!-- <fudis-radio-button-group
-              [label]="'Course type'"
-              [id]="'radio-button-group-1'"
-              [options]="courseTypeOptions"
-              [control]="formExample.controls['courseType']"
-            /> -->
+                <fudis-radio-button-group
+                  [label]="'Course type'"
+                  [control]="formExample.controls['courseType']"
+                >
+                  <fudis-radio-button
+                    *ngFor="let option of courseTypeOptions"
+                    [label]="option.label"
+                    [value]="option.value"
+                  />
+                </fudis-radio-button-group>
                 <fudis-checkbox-group
                   [formGroup]="formExample.controls.courseBooks"
                   [label]="'Course books'"
@@ -118,12 +122,12 @@ class ErrorSummaryExampleComponent {
       FudisValidators.email('Input must be an email address.'),
     ]),
     importantDate: new FormControl(null, FudisValidators.required('Start date is missing.')),
-    // courseType: new FormControl(null, FudisValidators.required('Course type must be selected.')),
+    courseType: new FormControl(null, FudisValidators.required('Course type must be selected.')),
   });
 
-  courseTypeOptions: FudisRadioButtonOption[] = [
-    { value: 'basic', label: 'Basic', id: 'courseType-1' },
-    { value: 'advanced', label: 'Advanced', id: 'courseType-2' },
+  courseTypeOptions: FudisRadioButtonOption<object>[] = [
+    { value: 'basic', label: 'Basic' },
+    { value: 'advanced', label: 'Advanced' },
   ];
 
   toggleLiveRemove(): void {

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html

@@ -9,16 +9,17 @@
 >
   <fieldset
     [attr.id]="id"
+    [tabIndex]="-1"
     [ngClass]="_classes"
     [attr.aria-describedby]="describedbyId ? describedbyId : null"
+    (focus)="_handleFocus($event)"
   >
     <legend
       #fieldsetLegend
       class="fudis-fieldset__legend"
       [class.fudis-fieldset__legend--focused]="_legendFocusVisible"
       [attr.id]="id + '-legend'"
       [tabIndex]="-1"
-      (focus)="_handleLegendFocus($event)"
       (blur)="_handleLegendBlur()"
     >
       <div

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts

@@ -177,22 +177,23 @@ export class FieldSetComponent
     this._removeFromErrorSummary();
   }
 
-  protected _handleLegendFocus(event: FocusEvent): void {
+  protected _handleLegendBlur(): void {
+    this._legendFocusVisible = false;
+  }
+
+  protected _handleFocus(event: FocusEvent): void {
     if (event.relatedTarget) {
       const elementHasLinkClass = (event.relatedTarget as HTMLElement).classList.contains(
         'fudis-link',
       );
 
       if (elementHasLinkClass) {
         this._legendFocusVisible = true;
+        this._fieldsetLegend.nativeElement.focus();
       }
     }
   }
 
-  protected _handleLegendBlur(): void {
-    this._legendFocusVisible = false;
-  }
-
   /**
    * Add Field Set label to Error Summary
    */

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.stories.ts

@@ -58,11 +58,16 @@ import readme from './readme.mdx';
             [label]="'Contact email'"
             [helpText]="'So that students can ask for more time on their homework.'"
           />
-          <!-- <fudis-radio-button-group
+          <fudis-radio-button-group
             [label]="'Course type'"
-            [options]="courseTypeOptions"
             [control]="fieldsetExample.controls['courseType']"
-          /> -->
+          >
+            <fudis-radio-button
+              *ngFor="let option of courseTypeOptions"
+              [label]="option.label"
+              [value]="option.value"
+            />
+          </fudis-radio-button-group>
           <!-- <fudis-date-range [startDate]="startDate" [endDate]="endDate" /> -->
         </fudis-grid>
       </ng-template>
@@ -128,9 +133,9 @@ class FieldsetExampleComponent {
     { value: 'english', label: 'EN' },
   ];
 
-  courseTypeOptions: FudisRadioButtonOption[] = [
-    { value: 'basic', label: 'Basic', id: 'courseType-1' },
-    { value: 'advanced', label: 'Advanced', id: 'courseType-2' },
+  courseTypeOptions: FudisRadioButtonOption<object>[] = [
+    { value: 'basic', label: 'Basic' },
+    { value: 'advanced', label: 'Advanced' },
   ];
 }