@bdc-libs/trinity.shared-consts

Trinity token services libs.

Features

• ES6 syntax, managed with Prettier + Eslint and Stylelint
• Unit testing with jest
• Lit custom elements
• ESM

Install

yarn add @bdc-libs/trinity.shared-consts
// or
npm i @bdc-libs/trinity.shared-consts

Usage

import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Size } from '@bdc-libs/trinity.shared-consts';

let TriButton = class TriButton extends LitElement {
  constructor() {
    super();
    /** Which size to display */
    this.size = Size.MEDIUM;
    /** Which type to display */
    this.type = ButtonType.PRIMARY;
    /** Which variant to display */
    this.variation = Variation.NONE;
    /** Whether the button is disabled */
    this.disabled = false;
    /** Whether the button should submit a form */
    this.submit = false;
    this.addEventListener('click', (e) => {
      if (this.disabled) {
        e.stopImmediatePropagation();
        e.preventDefault();
      }
    });
  }
  click() {
    this._button.click();
  }
  // eslint-disable-next-line
  focus(options) {
    this._button.focus(options);
  }
  blur() {
    this._button.blur();
  }
  _handleClick(event) {
    if (this.disabled) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  _handleSlotChange() {
    if (this.variation === Variation.ICONONLY) {
      this._defaultSlot
        .assignedElements()
        .filter((el) => el.nodeName.includes('TRI-ICON') ||
          el.nodeName.includes('TRI-WEB-ICON'))
        .forEach((el) => {
          // eslint-disable-next-line
          el.slot = 'icon';
        });
    }
  }
  render() {
    return html `
      <button
        class=${classMap({
      Button: true,
      [`Button--${this.type}`]: Boolean(this.type),
      [`Button--${this.size}`]: Boolean(this.size),
      [`Button--${this.variation}`]: this.variation === 'none' ? '' : Boolean(this.variation),
    })}
        aria-label="${ifDefined(this.label)}"
        @click=${this._handleClick}
        ?disabled=${this.disabled}
        type=${this.submit ? 'submit' : 'button'}
      >
        <slot name="before"></slot>
        <span><slot @slotchange=${this._handleSlotChange}></slot></span>
        <slot name="icon"></slot>
        <slot name="after"></slot>
      </button>
    `;
  }
};