[EC-855] feat: add ability to switch between inline and block

libs/components/src/radio-button/radio-button.component.html

@@ -1,4 +1,4 @@
-<bit-form-control inline>
+<bit-form-control [inline]="inline">
   <input
     type="radio"
     bitRadio

libs/components/src/radio-button/radio-button.component.ts

@@ -30,6 +30,10 @@ export class RadioButtonComponent {
     return this.groupComponent.disabled;
   }
 
+  get inline() {
+    return this.groupComponent.inline;
+  }
+
   protected onInputChange() {
     this.groupComponent.onInputChange(this.value);
   }

libs/components/src/radio-button/radio-button.stories.ts

@@ -10,7 +10,7 @@ import { RadioButtonModule } from "./radio-button.module";
 
 const template = `
   <form [formGroup]="formObj">
-    <bit-radio-group formControlName="radio" aria-label="Example radio group">
+    <bit-radio-group [inline]="inline" formControlName="radio" aria-label="Example radio group">
       <bit-label *ngIf="label">Group of radio buttons</bit-label>
       <bit-radio-button [value]="TestValue.First" id="radio-first">First</bit-radio-button>
       <bit-radio-button [value]="TestValue.Second" id="radio-second">Second</bit-radio-button>
@@ -35,6 +35,8 @@ class ExampleComponent {
     radio: TestValue.First,
   });
 
+  @Input() inline: boolean;
+
   @Input() label: boolean;
 
   @Input() set selected(value: TestValue) {
@@ -83,6 +85,7 @@ export default {
     selected: TestValue.First,
     disabled: false,
     label: true,
+    inline: false,
   },
   argTypes: {
     selected: {
@@ -101,7 +104,12 @@ export default {
 
 const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
   props: args,
-  template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label"></app-example>`,
+  template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label" [inline]="inline"></app-example>`,
 });
 
 export const Default = DefaultTemplate.bind({});
+
+export const Inline = DefaultTemplate.bind({});
+Inline.args = {
+  inline: true,
+};

libs/components/src/radio-button/radio-group.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
 import { ControlValueAccessor, NgControl } from "@angular/forms";
 
@@ -13,6 +14,14 @@ export class RadioGroupComponent implements ControlValueAccessor {
   selected: unknown;
   disabled = false;
 
+  private _inline = false;
+  @Input() get inline() {
+    return this._inline;
+  }
+  set inline(value: boolean | "") {
+    this._inline = coerceBooleanProperty(value);
+  }
+
   private _name?: string;
   @Input() get name() {
     return this._name ?? this.ngControl?.name?.toString();