button.jsx

import { Component, Prop, h, Event, EventEmitter } from "@stencil/core";

@Component({
  tag: "mdn-button",
  styleUrl: "mdn-button.css",
  shadow: true
})
export class ButtonComponent {
  @Prop() showIcon = false;
  @Prop() buttonLabel: string;
  @Prop() size = "SMALL";
  @Prop() type = "PRIMARY";
  @Prop() outline = false;
  @Prop() transparent = false;
  @Prop() controlDisabled = false;
  @Prop() centered = false;
  @Event() buttonClickEventEmitter: EventEmitter;

  private getSizeClass(): string {
    switch (this.size) {
      case "SMALL":
        return "c-button--small";
    }
  }

  private getTypeClass(): string {
    switch (this.type) {
      case "NEGATIVE":
        return "c-button--negative";
      case "PRIMARY":
        return "c-button--primary";
      case "INVERSE":
        return "c-button--inverse";
    }
  }

  render() {
    return (
        <button
          disabled={this.controlDisabled}
          class={
            "c-button c-button--icon " +
            this.getSizeClass() +
            " " +
            this.getTypeClass()
          }
        >
        {this.buttonLabel}
        </button>
    );
  }
}