radiobutton: стилизация, сторисы, обёртки

src/lib/components/radiobutton/radiobutton.component.ts

@@ -0,0 +1,92 @@
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { RadioButton, RadioButtonClickEvent } from 'primeng/radiobutton';
+
+export type RadiobuttonVariant = 'outlined' | 'filled';
+export type RadiobuttonSize = 'small' | 'base' | 'large';
+
+@Component({
+  selector: 'radiobutton',
+  standalone: true,
+  imports: [RadioButton, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RadiobuttonComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <p-radiobutton
+      [value]="value"
+      [name]="name"
+      [disabled]="disabled"
+      [invalid]="invalid"
+      [(ngModel)]="modelValue"
+      [variant]="primeVariant"
+      [size]="primeSize"
+      [inputId]="inputId"
+      [tabindex]="tabindex"
+      [ariaLabel]="ariaLabel"
+      [ariaLabelledBy]="ariaLabelledBy"
+      [autofocus]="autofocus"
+      (onClick)="onClickHandler($event)"
+      (onFocus)="onFocus.emit($event)"
+      (onBlur)="onBlur.emit($event)"
+    ></p-radiobutton>
+  `,
+})
+export class RadiobuttonComponent implements ControlValueAccessor {
+  @Input() value: any = null;
+  @Input() name: string | undefined = undefined;
+  @Input() disabled = false;
+  @Input() invalid = false;
+  @Input() variant: RadiobuttonVariant = 'outlined';
+  @Input() size: RadiobuttonSize = 'base';
+  @Input() inputId: string | undefined = undefined;
+  @Input() tabindex: number | undefined = undefined;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() ariaLabelledBy: string | undefined = undefined;
+  @Input() autofocus = false;
+
+  @Output() onClick = new EventEmitter<RadioButtonClickEvent>();
+  @Output() onFocus = new EventEmitter<Event>();
+  @Output() onBlur = new EventEmitter<Event>();
+
+  modelValue: any = null;
+
+  private _onChange: (value: any) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get primeVariant(): 'filled' | undefined {
+    return this.variant === 'filled' ? 'filled' : undefined;
+  }
+
+  onClickHandler(event: RadioButtonClickEvent): void {
+    this._onChange(event.value);
+    this._onTouched();
+    this.onClick.emit(event);
+  }
+
+  writeValue(value: any): void {
+    this.modelValue = value;
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

src/prime-preset/map-tokens.ts

@@ -4,6 +4,7 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
 import { buttonCss } from './tokens/components/button';
+import { radiobuttonCss } from './tokens/components/radiobutton';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -14,6 +15,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    radiobutton: {
+      ...(tokens.components.radiobutton as unknown as ComponentsDesignTokens['radiobutton']),
+      css: radiobuttonCss,
+    },
   } as ComponentsDesignTokens,
 };
 

src/prime-preset/tokens/components/radiobutton.ts

@@ -0,0 +1,16 @@
+export const radiobuttonCss = ({ dt }: { dt: (token: string) => string }): string => `
+/* Focus ring с зеленым цветом для валидных состояний */
+.p-radiobutton:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
+.p-radiobutton-checked:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+  outline: none;
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.success')};
+}
+
+/* Focus ring с красным цветом для состояний с ошибкой */
+.p-radiobutton.p-invalid .p-radiobutton-box,
+.p-radiobutton.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
+.p-radiobutton-checked.p-invalid .p-radiobutton-box,
+.p-radiobutton-checked.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.invalid')};
+}
+`;

src/prime-preset/tokens/tokens.json

@@ -4071,7 +4071,7 @@
         "height": "{form.size.350}"
       },
       "icon": {
-        "size": "{form.icon.200}",
+        "size": "0.7rem",
         "checkedColor": "{text.extend.colorInverted}",
         "checkedHoverColor": "{text.extend.colorInverted}",
         "disabledColor": "{text.mutedColor}",

src/stories/components/radiobutton/examples/radiobutton-disabled.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { RadiobuttonComponent } from '../../../../lib/components/radiobutton/radiobutton.component';
+
+const template = `
+<div class="bg-surface-ground flex flex-col gap-3">
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="rd1" name="dis" value="1" [disabled]="true" [(ngModel)]="selected"></radiobutton>
+    <label for="rd1">Опция 1</label>
+  </div>
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="rd2" name="dis" value="2" [disabled]="true" [(ngModel)]="selected"></radiobutton>
+    <label for="rd2">Опция 2</label>
+  </div>
+</div>
+`;
+
+@Component({
+  selector: 'app-radiobutton-disabled',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template,
+})
+export class RadiobuttonDisabledComponent {
+  selected = '2';
+}
+
+export const Disabled: StoryObj = {
+  render: () => ({
+    template: `<app-radiobutton-disabled></app-radiobutton-disabled>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Заблокированное состояние радиокнопки.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { RadiobuttonComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-radiobutton-disabled',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template: \`
+    <radiobutton name="dis" value="1" [disabled]="true" [(ngModel)]="selected"></radiobutton>
+    <radiobutton name="dis" value="2" [disabled]="true" [(ngModel)]="selected"></radiobutton>
+  \`,
+})
+export class RadiobuttonDisabledComponent {
+  selected = '2';
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/radiobutton/examples/radiobutton-group.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { RadiobuttonComponent } from '../../../../lib/components/radiobutton/radiobutton.component';
+
+const template = `
+<div class="bg-surface-ground flex flex-col gap-3">
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="rb1" name="group" value="1" [(ngModel)]="selected"></radiobutton>
+    <label for="rb1">Опция 1</label>
+  </div>
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="rb2" name="group" value="2" [(ngModel)]="selected"></radiobutton>
+    <label for="rb2">Опция 2</label>
+  </div>
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="rb3" name="group" value="3" [(ngModel)]="selected"></radiobutton>
+    <label for="rb3">Опция 3</label>
+  </div>
+</div>
+`;
+
+@Component({
+  selector: 'app-radiobutton-group',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template,
+})
+export class RadiobuttonGroupComponent {
+  selected = '1';
+}
+
+export const Group: StoryObj = {
+  render: () => ({
+    template: `<app-radiobutton-group></app-radiobutton-group>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Группа радиокнопок для выбора одного варианта из нескольких.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { RadiobuttonComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-radiobutton-group',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template: \`
+    <radiobutton inputId="rb1" name="group" value="1" [(ngModel)]="selected"></radiobutton>
+    <label for="rb1">Опция 1</label>
+    <radiobutton inputId="rb2" name="group" value="2" [(ngModel)]="selected"></radiobutton>
+    <label for="rb2">Опция 2</label>
+    <radiobutton inputId="rb3" name="group" value="3" [(ngModel)]="selected"></radiobutton>
+    <label for="rb3">Опция 3</label>
+  \`,
+})
+export class RadiobuttonGroupComponent {
+  selected = '1';
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/radiobutton/examples/radiobutton-invalid.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { RadiobuttonComponent } from '../../../../lib/components/radiobutton/radiobutton.component';
+
+const template = `
+<div class="bg-surface-ground flex flex-col gap-3">
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="ri1" name="inv" value="1" [invalid]="true" [(ngModel)]="selected"></radiobutton>
+    <label for="ri1">Вариант 1</label>
+  </div>
+  <div class="flex items-center gap-2">
+    <radiobutton inputId="ri2" name="inv" value="2" [invalid]="true" [(ngModel)]="selected"></radiobutton>
+    <label for="ri2">Вариант 2</label>
+  </div>
+</div>
+`;
+
+@Component({
+  selector: 'app-radiobutton-invalid',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template,
+})
+export class RadiobuttonInvalidComponent {
+  selected = '2';
+}
+
+export const Invalid: StoryObj = {
+  render: () => ({
+    template: `<app-radiobutton-invalid></app-radiobutton-invalid>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Невалидное состояние радиокнопки.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { RadiobuttonComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-radiobutton-invalid',
+  standalone: true,
+  imports: [RadiobuttonComponent, FormsModule],
+  template: \`
+    <radiobutton name="inv" value="1" [invalid]="true" [(ngModel)]="selected"></radiobutton>
+    <radiobutton name="inv" value="2" [invalid]="true" [(ngModel)]="selected"></radiobutton>
+  \`,
+})
+export class RadiobuttonInvalidComponent {
+  selected = '2';
+}
+        `,
+      },
+    },
+  },
+};