From 34db56af928ab0355f49074b2d1699fbd562ee5a Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Fri, 25 Jun 2021 22:25:15 +0530
Subject: [PATCH 1/2] feat: add support for description in radio button

---
 .../src/radio/radio-group.component.scss      | 32 +++++++++++++++++--
 .../src/radio/radio-group.component.test.ts   | 22 +++++++++++++
 .../src/radio/radio-group.component.ts        | 10 ++++--
 projects/components/src/radio/radio-option.ts |  1 +
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/radio/radio-group.component.scss b/projects/components/src/radio/radio-group.component.scss
index 1539e9887..a2fde23b5 100644
--- a/projects/components/src/radio/radio-group.component.scss
+++ b/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;
   }
 }
diff --git a/projects/components/src/radio/radio-group.component.test.ts b/projects/components/src/radio/radio-group.component.test.ts
index 9cd5cafb1..3426e48db 100644
--- a/projects/components/src/radio/radio-group.component.test.ts
+++ b/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: {
diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts
index 1bfcc3fd5..571b8c99d 100644
--- a/projects/components/src/radio/radio-group.component.ts
+++ b/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"
@@ -16,14 +16,18 @@ import { RadioOption } from './radio-option';
       (change)="this.onRadioChange($event)"
       [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>
   `
 })
diff --git a/projects/components/src/radio/radio-option.ts b/projects/components/src/radio/radio-option.ts
index 6d397503b..d7c3b10cb 100644
--- a/projects/components/src/radio/radio-option.ts
+++ b/projects/components/src/radio/radio-option.ts
@@ -1,4 +1,5 @@
 export interface RadioOption {
   value: string;
   label: string;
+  description?: string;
 }

From 89de9d22a836171ea60eb1ce8c86a72bfb418e2b Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Fri, 25 Jun 2021 23:28:53 +0530
Subject: [PATCH 2/2] fix: fix lint issue

---
 projects/components/src/radio/radio-group.component.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts
index 571b8c99d..a2d2488b0 100644
--- a/projects/components/src/radio/radio-group.component.ts
+++ b/projects/components/src/radio/radio-group.component.ts
@@ -16,7 +16,6 @@ import { RadioOption } from './radio-option';
       (change)="this.onRadioChange($event)"
       [disabled]="this.disabled"
     >
-
       <mat-radio-button
         class="radio-button"
         *ngFor="let option of options"
@@ -24,10 +23,8 @@ import { RadioOption } from './radio-option';
         [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>
+        <span *ngIf="option.description" class="radio-button-description">{{ option.description }}</span>
       </mat-radio-button>
-
-
     </mat-radio-group>
   `
 })