fix(radio, toggle): multiline support (#DS-3538) (#657)

Author: artembelik

packages/components-dev/radio/module.ts

@@ -4,6 +4,7 @@ import { ThemePalette } from '@koobiq/components/core';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
 import { KbqRadioChange, KbqRadioModule } from '@koobiq/components/radio';
 import { RadioExamplesModule } from 'packages/docs-examples/components/radio';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     standalone: true,
@@ -17,6 +18,8 @@ import { RadioExamplesModule } from 'packages/docs-examples/components/radio';
         <radio-content-example />
         <hr />
         <radio-group-example />
+        <hr />
+        <radio-multiline-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -28,7 +31,8 @@ export class DevRadioExamples {}
         FormsModule,
         KbqFormFieldModule,
         KbqRadioModule,
-        DevRadioExamples
+        DevRadioExamples,
+        DevThemeToggle
     ],
     selector: 'app',
     templateUrl: './template.html',

packages/components-dev/radio/template.html

@@ -1,3 +1,11 @@
+<dev-theme-toggle />
+
+<hr />
+
+<dev-radio-examples />
+
+<hr />
+
 <div class="layout-row">
     <div class="dev-container layout-padding-right-xl">
         <kbq-radio-group [(ngModel)]="favoriteFruit" (change)="onChange($event)">
@@ -83,7 +91,3 @@
         </kbq-radio-group>
     </div>
 </div>
-
-<hr />
-
-<dev-radio-examples />

packages/components-dev/toggle/main.ts

@@ -1,6 +1,9 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DemoModule } from './module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ToggleDev } from './module';
 
-platformBrowserDynamic()
-    .bootstrapModule(DemoModule)
-    .catch((error) => console.error(error));
+bootstrapApplication(ToggleDev, {
+    providers: [
+        provideAnimations()
+    ]
+}).catch((error) => console.error(error));

packages/components-dev/toggle/module.ts

@@ -1,19 +1,43 @@
-import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { KbqButtonModule } from '@koobiq/components/button';
 import { ThemePalette } from '@koobiq/components/core';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
-import { KbqButtonModule } from '../../components/button/';
-import { KbqToggleModule } from '../../components/toggle/';
+import { KbqToggleModule } from '@koobiq/components/toggle';
+import { ToggleExamplesModule } from 'packages/docs-examples/components/toggle';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
+    standalone: true,
+    imports: [ToggleExamplesModule],
+    selector: 'dev-toggle-examples',
+    template: `
+        <toggle-multiline-example />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevToggleExamples {}
+
+@Component({
+    standalone: true,
     selector: 'app',
+    imports: [
+        FormsModule,
+        KbqToggleModule,
+        KbqButtonModule,
+        KbqFormFieldModule,
+        ReactiveFormsModule,
+        JsonPipe,
+        DevToggleExamples,
+        DevThemeToggle
+    ],
     templateUrl: './template.html',
-    styleUrls: ['./styles.scss'],
-    encapsulation: ViewEncapsulation.None
+    styleUrl: './styles.scss',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DemoComponent {
+export class ToggleDev {
     themePalette = ThemePalette;
 
     valueSmallOff: boolean = false;
@@ -30,22 +54,3 @@ export class DemoComponent {
         this.toggleControl.valueChanges.subscribe(console.log);
     }
 }
-
-@NgModule({
-    declarations: [
-        DemoComponent
-    ],
-    imports: [
-        BrowserModule,
-        BrowserAnimationsModule,
-        FormsModule,
-        KbqToggleModule,
-        KbqButtonModule,
-        KbqFormFieldModule,
-        ReactiveFormsModule
-    ],
-    bootstrap: [
-        DemoComponent
-    ]
-})
-export class DemoModule {}

packages/components-dev/toggle/template.html

@@ -1,3 +1,11 @@
+<dev-theme-toggle />
+
+<hr />
+
+<dev-toggle-examples />
+
+<hr />
+
 <div class="container">
     <h1>Toggles</h1>
     <kbq-toggle [formControl]="toggleControl" />

packages/components/radio/radio.en.md

@@ -1,22 +1,5 @@
-`<kbq-radio>` provides the same functionality as a native `<input type="radio">`.
+🚧 **Documentation in progress** 🚧
 
-<!-- example(radio-overview) -->
+Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
 
-### Radio groups
-
-Radio-buttons should typically be placed inside of an `<kbq-radio-group>` unless the DOM structure
-would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a
-`value` property that reflects the currently selected radio-button inside of the group.
-
-Individual radio-buttons inside of a radio-group will inherit the `name` of the group.
-
-### Use with @angular/forms
-
-`<kbq-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule`
-and `ReactiveFormsModule`.
-
-### Accessibility
-
-The `<kbq-radio-button>` uses an internal `<input type="radio">` to provide an accessible experience.
-This internal radio button receives focus and is automatically labelled by the text content of the
-`<kbq-radio-button>` element.
+If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.

packages/components/radio/radio.ru.md

@@ -20,6 +20,10 @@
 
 <!-- example(radio-group) -->
 
+#### Многострочный
+
+<!-- example(radio-multiline) -->
+
 ### Рекомендации
 
 -   По умолчанию рекомендуется использовать до 7 вариантов в Radio Group.

packages/components/radio/radio.scss

@@ -27,7 +27,6 @@
 
     cursor: pointer;
 
-    white-space: nowrap;
     // for maximum clickable area.
     width: 100%;
 }

packages/components/toggle/toggle.ru.md

@@ -1 +1,5 @@
 <!-- example(toggle-overview) -->
+
+### Многострочный
+
+<!-- example(toggle-multiline) -->

packages/docs-examples/components/radio/index.ts

@@ -1,16 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RadioContentExample } from './radio-content/radio-content-example';
 import { RadioGroupExample } from './radio-group/radio-group-example';
+import { RadioMultilineExample } from './radio-multiline/radio-multiline-example';
 import { RadioSizeExample } from './radio-size/radio-size-example';
 import { RadioStyleExample } from './radio-style/radio-style-example';
 
-export { RadioContentExample, RadioGroupExample, RadioSizeExample, RadioStyleExample };
+export { RadioContentExample, RadioGroupExample, RadioMultilineExample, RadioSizeExample, RadioStyleExample };
 
 const EXAMPLES = [
     RadioSizeExample,
     RadioStyleExample,
     RadioContentExample,
-    RadioGroupExample
+    RadioGroupExample,
+    RadioMultilineExample
 ];
 
 @NgModule({

packages/docs-examples/components/radio/radio-group/radio-group-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
 /**
@@ -23,6 +23,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
 
             <kbq-radio-button [disabled]="true" [value]="'option_5'">Item 5 (Disabled)</kbq-radio-button>
         </kbq-radio-group>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioGroupExample {}

packages/docs-examples/components/radio/radio-multiline/radio-multiline-example.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqRadioModule } from '@koobiq/components/radio';
+
+type ExampleOption = { label: string; hint: string };
+
+/**
+ * @title Radio multiline example
+ */
+@Component({
+    standalone: true,
+    selector: 'radio-multiline-example',
+    imports: [KbqRadioModule, KbqFormFieldModule],
+    template: `
+        <kbq-radio-group>
+            @for (option of options; track option) {
+                <kbq-radio-button [checked]="$first" [value]="$index">
+                    {{ option.label }}
+                    <kbq-hint>{{ option.hint }}</kbq-hint>
+                </kbq-radio-button>
+            }
+        </kbq-radio-group>
+    `,
+    styles: `
+        :host {
+            display: flex;
+            justify-content: center;
+        }
+
+        .kbq-radio-group {
+            max-width: 255px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RadioMultilineExample {
+    readonly options: ExampleOption[] = [
+        {
+            label: 'Regular software and operating system updates',
+            hint: 'Updating software and operating systems regularly helps to patch vulnerabilities and enhance security measures against potential threats'
+        },
+        {
+            label: 'Using strong and unique passwords',
+            hint: 'Creating strong and unique passwords for each online account can enhance cybersecurity, as cyber attacks often exploit weak or stolen passwords'
+        },
+        {
+            label: 'Implementing multi-factor authentication (MFA)',
+            hint: 'Multi-factor authentication involves multiple identification forms before account access, reducing the risk of unauthorized access'
+        }
+    ];
+}

packages/docs-examples/components/radio/radio-size/radio-size-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
 /**
@@ -43,6 +43,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
                 </div>
             </div>
         </div>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioSizeExample {}

packages/docs-examples/components/radio/radio-style/radio-style-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ThemePalette } from '@koobiq/components/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
@@ -54,7 +54,8 @@ import { KbqRadioModule } from '@koobiq/components/radio';
                 </div>
             </div>
         </div>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioStyleExample {
     protected readonly themePalette = ThemePalette;

packages/docs-examples/components/toggle/index.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
+import { ToggleMultilineExample } from './toggle-multiline/toggle-multiline-example';
 import { ToggleOverviewExample } from './toggle-overview/toggle-overview-example';
 
-export { ToggleOverviewExample };
+export { ToggleMultilineExample, ToggleOverviewExample };
 
 const EXAMPLES = [
-    ToggleOverviewExample
+    ToggleOverviewExample,
+    ToggleMultilineExample
 ];
 
 @NgModule({

packages/docs-examples/components/toggle/toggle-multiline/toggle-multiline-example.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqToggleModule } from '@koobiq/components/toggle';
+
+/**
+ * @title Toggle multiline example
+ */
+@Component({
+    standalone: true,
+    selector: 'toggle-multiline-example',
+    imports: [KbqToggleModule, KbqFormFieldModule],
+    template: `
+        <kbq-toggle>
+            I accept the security policy terms and acknowledge the responsibility to safeguard sensitive information
+            <kbq-hint>
+                Please review our security policy for detailed information about data protection and privacy standards.
+                By checking this box, you confirm that you understand and agree to comply with all security
+                requirements.
+            </kbq-hint>
+        </kbq-toggle>
+    `,
+    styles: `
+        :host {
+            display: flex;
+            justify-content: center;
+        }
+
+        .kbq-toggle {
+            max-width: 400px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ToggleMultilineExample {}