Radio group component

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.html

@@ -1,6 +1,40 @@
 <div>
   <dxc-heading text="Light Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#FFFFFF">
+    <tbuilder-component-mode text="New radio group">
+      <dxc-radio-group
+        [value]="value"
+        (onChange)="handleOnChange($event)"
+        [options]="options"
+        label="Controlled radio"
+        helperText="example helper text"
+        [optional]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="Uncontrolled radio"
+        helperText="example helper text"
+        [optional]="true"
+        stacking="row"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="Disabled radio"
+        helperText="example helper text"
+        [disabled]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="readOnly radio"
+        helperText="example helper text"
+        [readOnly]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="readOnly radio"
+        error="error message"
+      ></dxc-radio-group>
+    </tbuilder-component-mode>
     <tbuilder-component-mode text="Default">
       <dxc-radio
         label="Option1"
@@ -59,7 +93,7 @@
       </dxc-radio>
     </tbuilder-component-mode>
   </background-provider>
-<!--
+  <!--
   <dxc-heading text="Dark Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#000000">
     <tbuilder-component-mode text="Default" mode="dark">

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.ts

@@ -15,6 +15,11 @@ export class RadioPreviewComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  value = "";
+  handleOnChange($event) {
+    //this.value = $event;
+  }
+
   onChange1(event) {
     this.changeChecked(event, !event, !event);
   }
@@ -25,6 +30,13 @@ export class RadioPreviewComponent implements OnInit {
     this.changeChecked(!event, !event, event);
   }
 
+  options = [
+    { value: "1", label: "1", disabled: false },
+    { value: "2", label: "2", disabled: true },
+    { value: "3", label: "3", disabled: true },
+    { value: "4", label: "4", disabled: false },
+  ];
+
   private changeChecked(checked1, checked2, checked3) {
     this.checked1 = checked1;
     this.checked2 = checked2;

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts

@@ -25,6 +25,7 @@ import {
   DxcPaginatorModule,
   DxcProgressbarModule,
   DxcRadioModule,
+  DxcRadioGroupModule,
   DxcSideNavModule,
   DxcSliderModule,
   DxcSpinnerModule,
@@ -146,6 +147,7 @@ import { TextInputPreviewComponent } from "./previews/text-input-preview/text-in
     DxcPaginatorModule,
     DxcProgressbarModule,
     DxcRadioModule,
+    DxcRadioGroupModule,
     DxcSideNavModule,
     DxcSliderModule,
     DxcSpinnerModule,

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.html

@@ -0,0 +1,20 @@
+<div class="groupLabel">
+  <span *ngIf="label" class="label" [id]="radioGroupId">{{ label }}</span>
+  <span *ngIf="optional" class="optionalLabel"> (Optional)</span>
+</div>
+<span *ngIf="helperText" class="helperText">{{ helperText }}</span>
+<div class="radio-list-container" role="radiogroup" [attr.aria-labelledby]="radioGroupId">
+  <ng-container *ngFor="let option of optionList; index as i">
+    <dxc-radio-group-item
+      [tabindex]="indexToFocus === i && !option.disabled ? tabIndex : '-1'"
+      [indexValue]="i"
+      [value]="option.value"
+      [label]="option.label"
+      [disabled]="(option.disabled && !readOnly) || disabled"
+      [errorState]="error ? true : false"
+      [readOnlyState]="readOnly"
+    ></dxc-radio-group-item>
+  </ng-container>
+</div>
+<input class="valueInput" [name]="name" [value]="value" readOnly aria-hidden="true" />
+<span *ngIf="error" class="errorMessage">{{ error }}</span>

projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.spec.ts

@@ -0,0 +1,7 @@
+import { render, fireEvent } from "@testing-library/angular";
+
+describe("DxcRadioGroup tests", () => {
+  test("should render dxc-radio-group", async () => {
+
+  });
+});