feat(design): update checkbox implementation

apps/design-land/src/app/checkbox/checkbox.component.html

@@ -1,8 +1,19 @@
 <h1>Daff Checkbox</h1>
 
-<h2>Basic Checkbox</h2>
 <design-land-example-viewer-container example="basic-checkbox"></design-land-example-viewer-container>
 
-<h2>Checkbox Set</h2>
+<design-land-example-viewer-container example="checkbox-with-hint"></design-land-example-viewer-container>
+
+<design-land-example-viewer-container example="checkbox-with-error"></design-land-example-viewer-container>
+
+<design-land-example-viewer-container example="required-checkbox"></design-land-example-viewer-container>
+
+<design-land-example-viewer-container example="disabled-checkbox"></design-land-example-viewer-container>
+
 <design-land-example-viewer-container example="checkbox-set"></design-land-example-viewer-container>
 
+<design-land-example-viewer-container example="checkbox-set-orientations"></design-land-example-viewer-container>
+
+<design-land-example-viewer-container example="checkbox-set-with-hint"></design-land-example-viewer-container>
+
+<design-land-example-viewer-container example="checkbox-set-with-error"></design-land-example-viewer-container>

libs/design-examples/checkbox/src/basic-checkbox/basic-checkbox.component.html

@@ -1,6 +1,3 @@
-<daff-checkbox [formControl]="checkboxExample" value="checkboxExample">Checkbox</daff-checkbox>
-<div>
-  {{checkboxExample.value}}
-</div>
-<button daff-button color="primary" (click)="setFalse()">Set to false</button>
-<button daff-button (click)="setTrue()">Set to true</button>
+<daff-checkbox value="terms-and-conditions">
+	Accept terms and conditions
+</daff-checkbox>

libs/design-examples/checkbox/src/basic-checkbox/basic-checkbox.component.ts

@@ -1,39 +1,16 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
 } from '@angular/core';
-import {
-  UntypedFormControl,
-  ReactiveFormsModule,
-} from '@angular/forms';
 
-import { DaffButtonComponent } from '@daffodil/design/button';
-import { DaffCheckboxModule } from '@daffodil/design/checkbox';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
 
 @Component({
   selector: 'basic-checkbox-example',
   templateUrl: './basic-checkbox.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    DaffCheckboxModule,
-    ReactiveFormsModule,
-    DaffButtonComponent,
+    DAFF_CHECKBOX_COMPONENTS,
   ],
 })
-export class BasicCheckboxExampleComponent implements OnInit {
-  checkboxExample = new UntypedFormControl();
-
-  /**
-   * @docs-private
-   */
-  ngOnInit() {
-    this.checkboxExample.setValue(true);
-  }
-  setFalse() {
-    this.checkboxExample.setValue(false);
-  }
-  setTrue() {
-    this.checkboxExample.setValue(true);
-  }
-}
+export class BasicCheckboxExampleComponent {}

libs/design-examples/checkbox/src/checkbox-set-orientations/checkbox-set-orientations.component.html

@@ -0,0 +1,13 @@
+<daff-checkbox-set [orientation]="orientationControl.value">
+  <daff-checkbox-set-label>Sizes</daff-checkbox-set-label>
+  <daff-checkbox>Extra small</daff-checkbox>
+  <daff-checkbox>Small</daff-checkbox>
+  <daff-checkbox>Medium</daff-checkbox>
+  <daff-checkbox>Large</daff-checkbox>
+</daff-checkbox-set>
+
+<select [formControl]="orientationControl">
+   @for (option of options; track option) {
+    <option [value]="option.value">{{ option.label }}</option>
+  }
+</select>

libs/design-examples/checkbox/src/checkbox-set-orientations/checkbox-set-orientations.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+
+import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'checkbox-set-orientations',
+  templateUrl: './checkbox-set-orientations.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ReactiveFormsModule,
+    DaffButtonComponent,
+    DAFF_CHECKBOX_COMPONENTS,
+  ],
+})
+export class CheckboxSetOrientationsExampleComponent {
+  orientationControl: UntypedFormControl = new UntypedFormControl('');
+
+  options = [
+    { value: '', label: 'Default' },
+    { value: 'vertical', label: 'Vertical' },
+    { value: 'horizontal', label: 'Horizontal' },
+  ];
+}

libs/design-examples/checkbox/src/checkbox-set-with-error/checkbox-set-with-error.component.html

@@ -0,0 +1,7 @@
+<daff-checkbox-set [formGroup]="choices">
+  <daff-checkbox-set-label>Choices</daff-checkbox-set-label>
+  <daff-checkbox formControlName="choiceOne">Choice 1</daff-checkbox>
+  <daff-checkbox formControlName="choiceTwo">Choice 2</daff-checkbox>
+  <daff-checkbox formControlName="choiceThree">Choice 3</daff-checkbox>
+  <daff-error-message>Error message</daff-error-message>
+</daff-checkbox-set>

libs/design-examples/checkbox/src/checkbox-set-with-error/checkbox-set-with-error.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+
+import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'checkbox-set-with-error',
+  templateUrl: './checkbox-set-with-error.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ReactiveFormsModule,
+    DaffButtonComponent,
+    DAFF_CHECKBOX_COMPONENTS,
+  ],
+})
+export class CheckboxSetWithErrorExampleComponent {
+  choices = new UntypedFormGroup({
+    choiceOne: new UntypedFormControl('', Validators.required),
+    choiceTwo: new UntypedFormControl('', Validators.required),
+    choiceThree: new UntypedFormControl('', Validators.required),
+  });
+}

libs/design-examples/checkbox/src/checkbox-set-with-hint/checkbox-set-with-hint.component.html

@@ -0,0 +1,7 @@
+<daff-checkbox-set [formGroup]="choices">
+  <daff-checkbox-set-label>Choices</daff-checkbox-set-label>
+  <daff-checkbox formControlName="choiceOne">Choice 1</daff-checkbox>
+  <daff-checkbox formControlName="choiceTwo">Choice 2</daff-checkbox>
+  <daff-checkbox formControlName="choiceThree">Choice 3</daff-checkbox>
+  <daff-hint>Choices hint</daff-hint>
+</daff-checkbox-set>

libs/design-examples/checkbox/src/checkbox-set-with-hint/checkbox-set-with-hint.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+
+import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'checkbox-set-with-hint',
+  templateUrl: './checkbox-set-with-hint.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ReactiveFormsModule,
+    DaffButtonComponent,
+    DAFF_CHECKBOX_COMPONENTS,
+  ],
+})
+export class CheckboxSetWithHintExampleComponent {
+  choices = new UntypedFormGroup({
+    choiceOne: new UntypedFormControl('', Validators.required),
+    choiceTwo: new UntypedFormControl('', Validators.required),
+    choiceThree: new UntypedFormControl('', Validators.required),
+  });
+}

libs/design-examples/checkbox/src/checkbox-set/checkbox-set.component.html

@@ -1,13 +1,6 @@
-<daff-checkbox-set [formArray]="checkboxArray">
-  <daff-checkbox [formControl]="checkboxArray.at(0)" value="option1">Option 1 </daff-checkbox>
-  <daff-checkbox [formControl]="checkboxArray.at(1)" value="option2">Option 2 </daff-checkbox>
-  <daff-checkbox [formControl]="checkboxArray.at(2)" value="option3">Option 3 </daff-checkbox>
-</daff-checkbox-set>
-
-<div>
-  {{checkboxArray.value}}
-</div>
-<button daff-button color="secondary" (click)="displayList()">Get List of Values</button>
-<div>
-  List of selected values: {{selectedValues}}
-</div>
+<daff-checkbox-set [formGroup]="choices">
+  <daff-checkbox-set-label>Choices</daff-checkbox-set-label>
+  <daff-checkbox formControlName="choiceOne">Choice 1</daff-checkbox>
+  <daff-checkbox formControlName="choiceTwo">Choice 2</daff-checkbox>
+  <daff-checkbox formControlName="choiceThree">Choice 3</daff-checkbox>
+</daff-checkbox-set>

libs/design-examples/checkbox/src/checkbox-set/checkbox-set.component.ts

@@ -1,45 +1,31 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
-  ViewChild,
 } from '@angular/core';
 import {
-  UntypedFormArray,
-  UntypedFormControl,
   ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
 } from '@angular/forms';
 
 import { DaffButtonComponent } from '@daffodil/design/button';
-import {
-  DaffCheckboxSetComponent,
-  DaffCheckboxModule,
-} from '@daffodil/design/checkbox';
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
 
 @Component({
   selector: 'checkbox-set-example',
   templateUrl: './checkbox-set.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    DaffCheckboxModule,
     ReactiveFormsModule,
     DaffButtonComponent,
+    DAFF_CHECKBOX_COMPONENTS,
   ],
 })
-export class CheckboxSetExampleComponent implements OnInit {
-
-  @ViewChild(DaffCheckboxSetComponent)
-  private checkboxSet: DaffCheckboxSetComponent;
-  checkboxArray = new UntypedFormArray([new UntypedFormControl(), new UntypedFormControl(), new UntypedFormControl()]);
-  selectedValues = [];
-
-  /**
-   * @docs-private
-   */
-  ngOnInit() {
-    this.checkboxArray.setValue([false, false, false]);
-  }
-  displayList() {
-    this.selectedValues = this.checkboxSet.getValues();
-  }
+export class CheckboxSetExampleComponent {
+  choices = new UntypedFormGroup({
+    choiceOne: new UntypedFormControl('', Validators.required),
+    choiceTwo: new UntypedFormControl('', Validators.required),
+    choiceThree: new UntypedFormControl('', Validators.required),
+  });
 }

libs/design-examples/checkbox/src/checkbox-with-error/checkbox-with-error.component.html

@@ -0,0 +1,4 @@
+<daff-checkbox value="terms-and-conditions">
+	Accept terms and conditions
+	<daff-error-message>Error</daff-error-message>
+</daff-checkbox>

libs/design-examples/checkbox/src/checkbox-with-error/checkbox-with-error.component.ts

@@ -0,0 +1,16 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'checkbox-with-error',
+  templateUrl: './checkbox-with-error.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DAFF_CHECKBOX_COMPONENTS,
+  ],
+})
+export class CheckboxWithErrorExampleComponent {}

libs/design-examples/checkbox/src/checkbox-with-hint/checkbox-with-hint.component.html

@@ -0,0 +1,4 @@
+<daff-checkbox value="terms-and-conditions">
+	Accept terms and conditions
+	<daff-hint>Hint</daff-hint>
+</daff-checkbox>

libs/design-examples/checkbox/src/checkbox-with-hint/checkbox-with-hint.component.ts

@@ -0,0 +1,16 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'checkbox-with-hint',
+  templateUrl: './checkbox-with-hint.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DAFF_CHECKBOX_COMPONENTS,
+  ],
+})
+export class CheckboxWithHintExampleComponent {}

libs/design-examples/checkbox/src/disabled-checkbox/disabled-checkbox.component.html

@@ -0,0 +1,7 @@
+<daff-checkbox [formControl]="terms" value="terms-and-conditions">
+	Accept terms and conditions
+</daff-checkbox>
+
+<daff-checkbox [disabled]="true" value="terms-and-conditions">
+	Accept terms and conditions
+</daff-checkbox>

libs/design-examples/checkbox/src/disabled-checkbox/disabled-checkbox.component.ts

@@ -0,0 +1,24 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+  Validators,
+} from '@angular/forms';
+
+import { DAFF_CHECKBOX_COMPONENTS } from '@daffodil/design/checkbox';
+
+@Component({
+  selector: 'disabled-checkbox',
+  templateUrl: './disabled-checkbox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DAFF_CHECKBOX_COMPONENTS,
+    ReactiveFormsModule,
+  ],
+})
+export class DisabledCheckboxExampleComponent {
+  terms = new UntypedFormControl(false, Validators.requiredTrue);
+}

libs/design-examples/checkbox/src/examples.ts

@@ -1,7 +1,21 @@
 import { BasicCheckboxExampleComponent } from './basic-checkbox/basic-checkbox.component';
 import { CheckboxSetExampleComponent } from './checkbox-set/checkbox-set.component';
+import { CheckboxSetOrientationsExampleComponent } from './checkbox-set-orientations/checkbox-set-orientations.component';
+import { CheckboxSetWithErrorExampleComponent } from './checkbox-set-with-error/checkbox-set-with-error.component';
+import { CheckboxSetWithHintExampleComponent } from './checkbox-set-with-hint/checkbox-set-with-hint.component';
+import { CheckboxWithErrorExampleComponent } from './checkbox-with-error/checkbox-with-error.component';
+import { CheckboxWithHintExampleComponent } from './checkbox-with-hint/checkbox-with-hint.component';
+import { DisabledCheckboxExampleComponent } from './disabled-checkbox/disabled-checkbox.component';
+import { RequiredCheckboxExampleComponent } from './required-checkbox/required-checkbox.component';
 
 export const CHECKBOX_EXAMPLES = [
   CheckboxSetExampleComponent,
   BasicCheckboxExampleComponent,
+  CheckboxSetOrientationsExampleComponent,
+  DisabledCheckboxExampleComponent,
+  CheckboxSetWithHintExampleComponent,
+  CheckboxSetWithErrorExampleComponent,
+  RequiredCheckboxExampleComponent,
+  CheckboxWithHintExampleComponent,
+  CheckboxWithErrorExampleComponent,
 ];

libs/design-examples/checkbox/src/required-checkbox/required-checkbox.component.html

@@ -0,0 +1,7 @@
+<daff-checkbox [formControl]="terms" value="terms-and-conditions">
+	Accept terms and conditions
+</daff-checkbox>
+
+<daff-checkbox [required]="true" value="terms-and-conditions">
+	Accept terms and conditions
+</daff-checkbox>