button.tsx

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

const fillcolors = {
  primary: colors.brandMain,
  secondary: 'white',
};

@Component({
  tag: 'hy-button',
  styleUrl: 'button.scss',
  shadow: false,
})
export class Button {
  /**
   * Button type. Defaults to submit.
   */
  @Prop() buttonType: string = 'submit';

  /**
   * Custom classes added to button element.
   */
  @Prop() buttonClasses: string = '';

  /**
   * The element variant. Defaults to primary
   */
  @Prop() variant: ButtonVariants = 'primary';
  /**
   *  deprecated, use disabled boolean value
   *  */
  @Prop() state: 'enabled' | 'disabled' = 'enabled';
  /**
   * Size (height) of the button. Normal: 44px, large: 48px
   */
  @Prop() size: 'normal' | 'large' = 'normal';
  /**
   * Use this to programmatically disable the button, matches the native button functionality
   */
  @Prop() disabled: boolean = false;
  /**
   *  Set this on if an anchor tag is required instead of a button.
   */
  @Prop() url?: string = '';
  /**
   * Aria label for the element
   */
  @Prop() ariaLabel?: string;
  /**
   * Use only with url property. Sets the
   */
  @Prop() isExternal?: boolean = false;
  /**
   * Icon to use on the left side
   */
  @Prop() icon?: string;
  /**
   * Icon to use on the right side
   */
  @Prop() iconRight?: string;

  render() {
    const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size, this.buttonClasses];
    const iconFillColor = fillcolors[this.variant];
    const target = this.isExternal ? '_blank' : '_self';

    return this.url ? (
      <Host icon-right="hy-icon-arrow-right" aria-label={this.ariaLabel}>
        <div style={{display: 'flex'}}>
          <a class={classAttributes.join(' ')} href={this.url} target={target}>
            <span class="hy-button__text">
              <slot />
            </span>
            <span class="hy-button__icon">
              <hy-icon icon="hy-icon-arrow-right" fill={iconFillColor} size={13} />
            </span>
          </a>
        </div>
      </Host>
    ) : (
      <Host aria-label={this.ariaLabel}>
        <button type={this.buttonType} class={classAttributes.join(' ')} disabled={this.disabled}>
          {!!this.icon && (
            <span class="hy-button__icon hy-button__icon--left">
              <hy-icon icon={this.icon} fill={iconFillColor} size={13} />
            </span>
          )}
          <span class="hy-button__text">
            <slot />
          </span>
          {!!this.iconRight && (
            <span class="hy-button__icon hy-button__icon--right">
              <hy-icon icon={this.iconRight} fill={iconFillColor} size={13} />
            </span>
          )}
        </button>
      </Host>
    );
  }
}