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 {
  /**
   * 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,
    ];
    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 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>
    );
  }
}