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; }