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(``, {
+ 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(``, {
hostProps: {
diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts
index 1bfcc3fd5..a2d2488b0 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: `
-
+
+ {{ option.description }}
`
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;
}