[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
2025-12-14 23:33:31 +00:00 · 2022-12-05 08:49:03 +01:00
parent e9781b4214
commit d17d188534
26 changed files with 970 additions and 9 deletions
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/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({});