feat(checkbox): add TEDI-Ready checkbox component #74

community/components/form/checkbox/checkbox.stories.ts

@@ -14,6 +14,11 @@ import { CheckboxCardGroupComponent } from "./checkbox-card-group/checkbox-card-
 export default {
   title: "Community/Form/Checkbox",
   component: CheckboxComponent,
+  parameters: {
+    status: {
+      type: ["existsInTediReady"],
+    },
+  },
   args: {
     size: "default",
     disabled: false,

tedi/components/form/checkbox/checkbox.component.scss

@@ -0,0 +1,102 @@
+@use "@tedi-design-system/core/mixins";
+@use "@tedi-design-system/core/bootstrap-utility/breakpoints";
+
+input[tedi-checkbox][type="checkbox"] {
+  --_checkbox-icon-size: 1.125rem;
+
+  appearance: none;
+  position: relative;
+  cursor: pointer;
+  border: 1px solid var(--form-checkbox-radio-default-border-default);
+  background-color: var(--form-checkbox-radio-default-background-default);
+  vertical-align: middle;
+  padding: 0;
+  margin: 0;
+
+  @include mixins.responsive-styles(width, form-checkbox-radio-size-responsive);
+  @include mixins.responsive-styles(
+    height,
+    form-checkbox-radio-size-responsive
+  );
+  @include mixins.responsive-styles(
+    border-radius,
+    form-checkbox-radio-indicator-radius-checkbox
+  );
+
+  @include breakpoints.media-breakpoint-up(sm) {
+    --_checkbox-icon-size: 1rem;
+  }
+
+  &:not(:disabled):hover {
+    border-color: var(--form-checkbox-radio-default-border-hover);
+    box-shadow: 0 0 0 1px var(--form-checkbox-radio-default-border-hover);
+  }
+
+  &:not(:checked):disabled {
+    cursor: not-allowed;
+    border-color: var(--form-general-border-disabled);
+    background-color: var(--form-general-background-disabled);
+  }
+
+  &:checked,
+  &:indeterminate {
+    border-color: var(--form-checkbox-radio-default-border-selected);
+    background-color: var(--form-checkbox-radio-default-background-selected);
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--form-checkbox-radio-default-border-selected-disabled);
+      background-color: var(
+        --form-checkbox-radio-default-background-selected-disabled
+      );
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      content: "check";
+      font-size: var(--_checkbox-icon-size);
+      font-family: "Material Symbols Outlined", sans-serif;
+      -webkit-font-smoothing: antialiased;
+      color: var(--form-checkbox-radio-default-check-indicator-default);
+      line-height: 1;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &:checked {
+    &::before {
+      content: "check";
+    }
+  }
+
+  &:indeterminate {
+    &::before {
+      content: "remove";
+    }
+  }
+
+  &:focus-visible {
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-style: solid;
+  }
+
+  &:not(:checked):not(:disabled).tedi-checkbox--invalid,
+  &:user-invalid,
+  &.ng-invalid.ng-touched {
+    border-color: var(--form-general-feedback-error-border);
+
+    &:hover {
+      border-color: var(--form-checkbox-radio-default-border-hover);
+    }
+  }
+
+  &.tedi-checkbox--large {
+    --_checkbox-icon-size: 1.125rem;
+
+    @include mixins.responsive-styles(width, form-checkbox-radio-size-large);
+    @include mixins.responsive-styles(height, form-checkbox-radio-size-large);
+  }
+}

tedi/components/form/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { CheckboxComponent } from "./checkbox.component";
+
+describe("CheckboxComponent", () => {
+  let fixture: ComponentFixture<CheckboxComponent>;
+  let element: HTMLInputElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CheckboxComponent],
+    });
+
+    fixture = TestBed.createComponent(CheckboxComponent);
+    element = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it("should create component", () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it("should not have large class by default", () => {
+    expect(element.classList).not.toContain("tedi-checkbox--large");
+  });
+
+  it("should apply large class", () => {
+    fixture.componentRef.setInput("size", "large");
+    fixture.detectChanges();
+    expect(element.classList).toContain("tedi-checkbox--large");
+  });
+
+  it("should not have invalid class by default", () => {
+    expect(element.classList).not.toContain("tedi-checkbox--invalid");
+  });
+
+  it("should apply invalid class", () => {
+    fixture.componentRef.setInput("invalid", true);
+    fixture.detectChanges();
+    expect(element.classList).toContain("tedi-checkbox--invalid");
+  });
+});

tedi/components/form/checkbox/checkbox.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+export type CheckboxSize = "default" | "large";
+
+@Component({
+  standalone: true,
+  selector: "input[type=checkbox][tedi-checkbox]",
+  template: "",
+  styleUrl: "./checkbox.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.tedi-checkbox--large]": "size() === 'large'",
+    "[class.tedi-checkbox--invalid]": "invalid()",
+  },
+})
+export class CheckboxComponent {
+  /**
+   * Size of the checkbox.
+   * @default default
+   */
+  readonly size = input<CheckboxSize>("default");
+  /**
+   * Is checkbox invalid?
+   * @default false
+   */
+  readonly invalid = input(false);
+}