[CL-50] Form controls (checkbox and radio) (#4066)

* [CL-50] feat: scaffold checkbox component

* [CL-50] feat: implement control value accessor for checbox

* [CL-50] feat: add form-field support to checkbox

* [CL-50] feat: implement non-selected checkbox styling

* [CL-50] feat: implement checkbox checked styles

* [CL-50] feat: improve checkbox form-field compat

* [CL-50] fix: checkbox border hover wrong color

* [CL-50] feat: use svg instead of bwi font

* [CL-50] feat: scaffold radio button

* [EC-50] feat: implement radio logic

* [CL-50] feat: add radio group tests

* [CL-50] feat: add radio-button tests

* [CL-50] feat: implement radio button styles

* [CL-50] fix: checkbox style tweaks

* [CL-50] feat: smooth radio button selection transition

* [CL-50] chore: various fixes and cleanups

* [CL-50] feat: add form field support

* [EC-50] feat-wip: simplify checkbox styling

* [EC-50] feat: extract checkbox into separate component

* [CL-50] feat: add standalone form control component

* [CL-50] feat: remove unnecessary checkbox-control
It wasn't really doing anything, might as well use form control directly

* [CL-50] chore: create separate folder with form examples

* [CL-50] feat: switch to common bit-label

* [CL-50] feat: let radio group act as form control

* [CL-50] chore: restore form-field component

* [CL-50] feat: add support for hint and error

* [CL-50] fix: storybook build issue

* [CL-50] fix: radio group label wrong text color

* [CL-50] fix: translation

* [CL-50] fix: put hint and errors outside label

* [CL-50] feat:

* [CL-50] feat: add custom checkbox example story

* [CL-50] chore: remove 1 from full example name

* [CL-50] chore: clean up unused icon

* [CL-50] chore: clean up unused tailwind plugin

* [CL-50] fix: ring offset color in custom example

* [CL-50] chore: clean up unused icon

* [CL-50] chore: add design link

* [CL-50] chore: remove unused import

* [CL-50] fix: pr review comments

* [CL-50] fix: improve id handling

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

@@ -0,0 +1,3 @@
+export * from "./radio-button.module";
+export * from "./radio-button.component";
+export * from "./radio-group.component";

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

@@ -0,0 +1,14 @@
+<bit-form-control inline>
+  <input
+    type="radio"
+    bitRadio
+    [id]="inputId"
+    [name]="name"
+    [disabled]="disabled"
+    [value]="value"
+    [checked]="selected"
+    (change)="onInputChange()"
+    (blur)="onBlur()"
+  />
+  <bit-label><ng-content></ng-content></bit-label>
+</bit-form-control>

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

@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonModule } from "./radio-button.module";
+import { RadioGroupComponent } from "./radio-group.component";
+
+describe("RadioButton", () => {
+  let mockGroupComponent: MockedButtonGroupComponent;
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let radioButton: HTMLInputElement;
+
+  beforeEach(waitForAsync(() => {
+    mockGroupComponent = new MockedButtonGroupComponent();
+
+    TestBed.configureTestingModule({
+      imports: [RadioButtonModule],
+      declarations: [TestApp],
+      providers: [
+        { provide: RadioGroupComponent, useValue: mockGroupComponent },
+        { provide: I18nService, useValue: new I18nMockService({}) },
+      ],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+    testAppComponent = fixture.debugElement.componentInstance;
+    radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement;
+  }));
+
+  it("should emit value when clicking on radio button", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    radioButton.click();
+    fixture.detectChanges();
+
+    expect(mockGroupComponent.onInputChange).toHaveBeenCalledWith("value");
+  });
+
+  it("should check radio button when selected matches value", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    mockGroupComponent.selected = "value";
+    fixture.detectChanges();
+
+    expect(radioButton.checked).toBe(true);
+  });
+
+  it("should not check radio button when selected does not match value", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    mockGroupComponent.selected = "nonMatchingValue";
+    fixture.detectChanges();
+
+    expect(radioButton.checked).toBe(false);
+  });
+});
+
+class MockedButtonGroupComponent implements Partial<RadioGroupComponent> {
+  onInputChange = jest.fn();
+  selected = null;
+}
+
+@Component({
+  selector: "test-app",
+  template: ` <bit-radio-button [value]="value">Element</bit-radio-button>`,
+})
+class TestApp {
+  value?: string;
+}

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

@@ -0,0 +1,40 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+import { RadioGroupComponent } from "./radio-group.component";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-radio-button",
+  templateUrl: "radio-button.component.html",
+})
+export class RadioButtonComponent {
+  @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
+  @Input() value: unknown;
+
+  constructor(private groupComponent: RadioGroupComponent) {}
+
+  get inputId() {
+    return `${this.id}-input`;
+  }
+
+  get name() {
+    return this.groupComponent.name;
+  }
+
+  get selected() {
+    return this.groupComponent.selected === this.value;
+  }
+
+  get disabled() {
+    return this.groupComponent.disabled;
+  }
+
+  protected onInputChange() {
+    this.groupComponent.onInputChange(this.value);
+  }
+
+  protected onBlur() {
+    this.groupComponent.onBlur();
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { FormControlModule } from "../form-control";
+
+import { RadioButtonComponent } from "./radio-button.component";
+import { RadioGroupComponent } from "./radio-group.component";
+import { RadioInputComponent } from "./radio-input.component";
+
+@NgModule({
+  imports: [CommonModule, FormControlModule],
+  declarations: [RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
+  exports: [FormControlModule, RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
+})
+export class RadioButtonModule {}

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

@@ -0,0 +1,107 @@
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonModule } from "./radio-button.module";
+
+const template = `
+  <form [formGroup]="formObj">
+    <bit-radio-group 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>
+      <bit-radio-button [value]="TestValue.Third" id="radio-third">Third</bit-radio-button>
+    </bit-radio-group>
+  </form>`;
+
+enum TestValue {
+  First,
+  Second,
+  Third,
+}
+
+@Component({
+  selector: "app-example",
+  template,
+})
+class ExampleComponent {
+  protected TestValue = TestValue;
+
+  protected formObj = this.formBuilder.group({
+    radio: TestValue.First,
+  });
+
+  @Input() label: boolean;
+
+  @Input() set selected(value: TestValue) {
+    this.formObj.patchValue({ radio: value });
+  }
+
+  @Input() set disabled(disable: boolean) {
+    if (disable) {
+      this.formObj.disable();
+    } else {
+      this.formObj.enable();
+    }
+  }
+
+  constructor(private formBuilder: FormBuilder) {}
+}
+
+export default {
+  title: "Component Library/Form/Radio Button",
+  component: ExampleComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ExampleComponent],
+      imports: [FormsModule, ReactiveFormsModule, RadioButtonModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              required: "required",
+              inputRequired: "Input is required.",
+              inputEmail: "Input is not an email-address.",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=3930%3A16850&t=xXPx6GJYsJfuMQPE-4",
+    },
+  },
+  args: {
+    selected: TestValue.First,
+    disabled: false,
+    label: true,
+  },
+  argTypes: {
+    selected: {
+      options: [TestValue.First, TestValue.Second, TestValue.Third],
+      control: {
+        type: "inline-radio",
+        labels: {
+          [TestValue.First]: "First",
+          [TestValue.Second]: "Second",
+          [TestValue.Third]: "Third",
+        },
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
+  props: args,
+  template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label"></app-example>`,
+});
+
+export const Default = DefaultTemplate.bind({});

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

@@ -0,0 +1,14 @@
+<ng-container *ngIf="label">
+  <fieldset>
+    <legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main">
+      <ng-content select="bit-label"></ng-content>
+    </legend>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </fieldset>
+</ng-container>
+
+<ng-container *ngIf="!label">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ng-container>
+
+<ng-template #content><ng-content></ng-content></ng-template>

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

@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonComponent } from "./radio-button.component";
+import { RadioButtonModule } from "./radio-button.module";
+
+describe("RadioGroupComponent", () => {
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let buttonElements: RadioButtonComponent[];
+  let radioButtons: HTMLInputElement[];
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, RadioButtonModule],
+      declarations: [TestApp],
+      providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+    testAppComponent = fixture.debugElement.componentInstance;
+    buttonElements = fixture.debugElement
+      .queryAll(By.css("bit-radio-button"))
+      .map((e) => e.componentInstance);
+    radioButtons = fixture.debugElement
+      .queryAll(By.css("input[type=radio]"))
+      .map((e) => e.nativeElement);
+
+    fixture.detectChanges();
+  }));
+
+  it("should select second element when setting selected to second", async () => {
+    testAppComponent.selected = "second";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(true);
+  });
+
+  it("should not select second element when setting selected to third", async () => {
+    testAppComponent.selected = "third";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(false);
+  });
+
+  it("should emit new value when changing selection by clicking on radio button", async () => {
+    testAppComponent.selected = "first";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    radioButtons[1].click();
+
+    expect(testAppComponent.selected).toBe("second");
+  });
+});
+
+@Component({
+  selector: "test-app",
+  template: `
+    <bit-radio-group [(ngModel)]="selected">
+      <bit-radio-button value="first">First</bit-radio-button>
+      <bit-radio-button value="second">Second</bit-radio-button>
+      <bit-radio-button value="third">Third</bit-radio-button>
+    </bit-radio-group>
+  `,
+})
+class TestApp {
+  selected?: string;
+}

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

@@ -0,0 +1,63 @@
+import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+
+import { BitLabel } from "../form-control/label.directive";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-radio-group",
+  templateUrl: "radio-group.component.html",
+})
+export class RadioGroupComponent implements ControlValueAccessor {
+  selected: unknown;
+  disabled = false;
+
+  private _name?: string;
+  @Input() get name() {
+    return this._name ?? this.ngControl?.name?.toString();
+  }
+  set name(value: string) {
+    this._name = value;
+  }
+
+  @HostBinding("attr.role") role = "radiogroup";
+  @HostBinding("attr.id") @Input() id = `bit-radio-group-${nextId++}`;
+
+  @ContentChild(BitLabel) protected label: BitLabel;
+
+  constructor(@Optional() @Self() private ngControl?: NgControl) {
+    if (ngControl != null) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  // ControlValueAccessor
+  onChange: (value: unknown) => void;
+  onTouched: () => void;
+
+  writeValue(value: boolean): void {
+    this.selected = value;
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onInputChange(value: unknown) {
+    this.selected = value;
+    this.onChange(this.selected);
+  }
+
+  onBlur() {
+    this.onTouched();
+  }
+}

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

@@ -0,0 +1,99 @@
+import { Component, HostBinding, Input, Optional, Self } from "@angular/core";
+import { NgControl, Validators } from "@angular/forms";
+
+import { BitFormControlAbstraction } from "../form-control";
+
+let nextId = 0;
+
+@Component({
+  selector: "input[type=radio][bitRadio]",
+  template: "",
+  providers: [{ provide: BitFormControlAbstraction, useExisting: RadioInputComponent }],
+})
+export class RadioInputComponent implements BitFormControlAbstraction {
+  @HostBinding("attr.id") @Input() id = `bit-radio-input-${nextId++}`;
+
+  @HostBinding("class")
+  protected inputClasses = [
+    "tw-appearance-none",
+    "tw-outline-none",
+    "tw-relative",
+    "tw-transition",
+    "tw-cursor-pointer",
+    "tw-inline-block",
+    "tw-rounded-full",
+    "tw-border",
+    "tw-border-solid",
+    "tw-border-secondary-500",
+    "tw-w-3.5",
+    "tw-h-3.5",
+    "tw-mr-1.5",
+    "tw-bottom-[-1px]", // Fix checkbox looking off-center
+
+    "hover:tw-border-2",
+    "[&>label:hover]:tw-border-2",
+
+    "before:tw-content-['']",
+    "before:tw-transition",
+    "before:tw-block",
+    "before:tw-absolute",
+    "before:tw-rounded-full",
+    "before:tw-inset-[2px]",
+
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-ring-offset-2",
+    "focus-visible:tw-ring-primary-700",
+
+    "disabled:tw-cursor-auto",
+    "disabled:tw-border",
+    "disabled:tw-bg-secondary-100",
+
+    "checked:tw-bg-text-contrast",
+    "checked:tw-border-primary-500",
+
+    "checked:hover:tw-border",
+    "checked:hover:tw-border-primary-700",
+    "checked:hover:before:tw-bg-primary-700",
+    "[&>label:hover]:checked:tw-bg-primary-700",
+    "[&>label:hover]:checked:tw-border-primary-700",
+
+    "checked:before:tw-bg-primary-500",
+
+    "checked:disabled:tw-border-secondary-100",
+    "checked:disabled:tw-bg-secondary-100",
+
+    "checked:disabled:before:tw-bg-text-muted",
+  ];
+
+  constructor(@Optional() @Self() private ngControl?: NgControl) {}
+
+  @HostBinding()
+  @Input()
+  get disabled() {
+    return this._disabled ?? this.ngControl?.disabled ?? false;
+  }
+  set disabled(value: any) {
+    this._disabled = value != null && value !== false;
+  }
+  private _disabled: boolean;
+
+  @Input()
+  get required() {
+    return (
+      this._required ?? this.ngControl?.control?.hasValidator(Validators.requiredTrue) ?? false
+    );
+  }
+  set required(value: any) {
+    this._required = value != null && value !== false;
+  }
+  private _required: boolean;
+
+  get hasError() {
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+  }
+
+  get error(): [string, any] {
+    const key = Object.keys(this.ngControl.errors)[0];
+    return [key, this.ngControl.errors[key]];
+  }
+}