feat: add support for description in radio button (#946)

* feat: add support for description in radio button

Author: arjunlalb

projects/components/src/radio/radio-group.component.scss

@@ -35,7 +35,7 @@
         }
 
         .mat-radio-outer-circle {
-          border-width: 0px;
+          border-width: 0;
         }
 
         .mat-radio-inner-circle {
@@ -69,6 +69,11 @@
       @include body-2-regular($gray-7);
     }
 
+    .radio-button-description {
+      margin-top: 4px;
+      @include body-1-regular($gray-5);
+    }
+
     &.disabled {
       &.mat-radio-checked .mat-radio-container .mat-radio-outer-circle {
         background: $gray-3;
@@ -82,9 +87,32 @@
         color: $gray-5;
       }
     }
+
+    &.column {
+      .mat-radio-label-content {
+        display: flex;
+        flex-direction: column;
+
+        .radio-button-description {
+          white-space: break-spaces;
+        }
+      }
+    }
+
+    &.row {
+      max-width: 50%;
+      .mat-radio-label-content {
+        display: flex;
+        flex-direction: column;
+
+        .radio-button-description {
+          white-space: break-spaces;
+        }
+      }
+    }
   }
 
   .radio-button:last-child {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }

projects/components/src/radio/radio-group.component.test.ts

@@ -34,6 +34,28 @@ describe('Radio component', () => {
     expect(logSpy).not.toHaveBeenCalled();
   });
 
+  test('should display description if provided', () => {
+    spectator = createHost(`<ht-radio-group [title]="title" [options]="options"></ht-radio-group>`, {
+      hostProps: {
+        title: 'test',
+        options: [
+          {
+            label: 'TEST1',
+            value: 'test1',
+            description: 'description-1'
+          },
+          {
+            label: 'TEST2',
+            value: 'test2'
+          }
+        ]
+      }
+    });
+
+    expect(spectator.queryAll('.radio-button-description').length).toBe(1);
+    expect(spectator.queryAll('.radio-button-description')[0]).toHaveText('description-1');
+  });
+
   test('should apply disabled attribute when disabled', () => {
     spectator = createHost(`<ht-radio-group [title]="title" [disabled]="disabled"></ht-radio-group>`, {
       hostProps: {

projects/components/src/radio/radio-group.component.ts

@@ -8,7 +8,7 @@ import { RadioOption } from './radio-option';
   styleUrls: ['./radio-group.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ht-label class="title" [label]="this.title"></ht-label>
+    <ht-label *ngIf="this.title" class="title" [label]="this.title"></ht-label>
     <mat-radio-group
       class="radio-group"
       [ngClass]="this.optionsDirection"
@@ -17,12 +17,13 @@ import { RadioOption } from './radio-option';
       [disabled]="this.disabled"
     >
       <mat-radio-button
-        *ngFor="let option of options"
         class="radio-button"
-        [ngClass]="{ disabled: this.disabled }"
+        *ngFor="let option of options"
+        [ngClass]="[this.optionsDirection, this.disabled ? 'disabled' : '']"
         [value]="option.value"
       >
         <ht-label class="radio-button-label" [label]="option.label"></ht-label>
+        <span *ngIf="option.description" class="radio-button-description">{{ option.description }}</span>
       </mat-radio-button>
     </mat-radio-group>
   `

projects/components/src/radio/radio-option.ts

@@ -1,4 +1,5 @@
 export interface RadioOption {
   value: string;
   label: string;
+  description?: string;
 }