LitStrap POC

litstrap-button.js

import { LitElement, html, css } from 'lit-element';

export const LitstrapButton = class LitstrapButton extends LitElement {
  static get properties() {
    return {
      kind: {
        type: String,
        reflect: true,
      },
      size: {
        type: String,
        reflect: true,
      },
      block: {
        type: Boolean,
        reflect: true,
      },
      outline: {
        type: Boolean,
        reflect: true,
      },
      enabled: {
        type: Boolean,
        reflect: true,
      },
    };
  }

  static get styles() {
    return css`
      :host {
        display: block;
      }
    `;
  }

  static get COLORS() {
    return {
      PRIMARY: 'primary',
      SECONDARY: 'secondary',
      SUCCESS: 'success',
      DANGER: 'danger',
      WARNING: 'warning',
      INFO: 'info',
      LIGHT: 'light',
      DARK: 'dark',
      LINK: 'link',
    };
  }

  static get SIZES() {
    return {
      SMALL: 'sm',
      NORMAL: 'normal',
      LARGE: 'lg',
    };
  }

  set kind(value) {
    const oldValue = this._kind;
    const upper = value && value.toUpperCase && value.toUpperCase();
    if (upper
      && (upper in LitstrapButton.COLORS)
      && this.kind !== value
    ) {
      this._kind = value;
      this.requestUpdate('kind', oldValue);
    }

    return value;
  }

  get kind() {
    return this._kind;
  }

  set size(value) {
    const oldValue = this._size;
    const upper = value && value.toUpperCase && value.toUpperCase();
    if (upper
      && (upper in LitstrapButton.SIZES)
      && this.size !== value
    ) {
      this._size = value;
      this.requestUpdate('size', oldValue);
    }

    return value;
  }

  get size() {
    return this._size;
  }

  render() {
    const size = (() => {
      switch (this.size) {
        case 'large': return 'btn-lg';
        case 'small': return 'btn-sm';
        default: return '';
      }
    })();

    const outline = this.outline ? 'outline-' : '';
    const kind = `btn-${outline}${this.kind}`;
    const block = this.block ? 'btn-block' : '';

    return html`
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
      <button 
        type="button" 
        class="btn ${kind} ${size} ${block}"
        ?disabled="${!this.enabled}"
      >
        <slot></slot>
      </button>
    `;
  }

  constructor() {
    super();
    this.kind = this.kind || 'primary';
    this.size = this.size || 'normal';
  }
};

export default LitstrapButton;

window.customElements.define('litstrap-button', LitstrapButton);