hy-checkbox.tsx

import {Component, Host, h, Prop} from '@stencil/core';
import {CheckboxVariants} from '../../utils/utils';

@Component({
  tag: 'hy-checkbox',
  styleUrl: 'hy-checkbox.scss',
  shadow: false,
})
export class HyCheckbox {
  /**
   * Unique id for checkbox element
   */
  @Prop() checkboxId: string | number;
  /**
   * Value for input element
   */
  @Prop() checkboxValue: string | number;
  /**
   * Label for input to describe
   */
  @Prop() checkboxLabel: string;
  /**
   * Checked attribute
   */
  @Prop() checkboxChecked: boolean = false;
  /**
   * Variant to deifne what style of checkbox to use
   */
  @Prop() variant: CheckboxVariants = CheckboxVariants.default;

  render() {
    switch (this.variant) {
      case 'button':
        return (
          <Host class="hy-checkbox--button">
            <input
              type="checkbox"
              class="hy-checkbox--button__checkbox"
              checked={this.checkboxChecked}
              id={`${this.checkboxId}`}
              value={`${this.checkboxValue}`}
            />
            <label class="hy-checkbox--button__label" htmlFor={`${this.checkboxId}`}>
              {this.checkboxLabel}
              <span class="hy-checkbox--button__checkmark">
                <hy-icon class="hy-checkbox--button__label-icon" icon={'hy-icon-done'} size={14} aria-hidden="true" />
              </span>
            </label>
          </Host>
        );

      default:
        return (
          <Host class="hy-checkbox">
            <input
              type="checkbox"
              class="hy-checkbox__checkbox"
              checked={this.checkboxChecked}
              id={`${this.checkboxId}`}
              value={`${this.checkboxValue}`}
            />
            <label class="hy-checkbox__label" htmlFor={`${this.checkboxId}`}>
              <span class="hy-checkbox__checkmark">
                <hy-icon class="hy-checkbox__label-icon" icon={'hy-icon-done'} size={23} aria-hidden="true" />
              </span>
              {this.checkboxLabel}
            </label>
          </Host>
        );
    }
  }
}