@bdc-libs/trinity.shared-consts 0.0.2

package/README.md

@@ -0,0 +1,99 @@
+# @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
+
+```sh
+yarn add @bdc-libs/trinity.shared-consts
+// or
+npm i @bdc-libs/trinity.shared-consts
+```
+
+### Usage
+
+```js
+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>
+    `;
+  }
+};
+```

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@bdc-libs/trinity.shared-consts",
+  "version": "0.0.2",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Trinity shared consts",
+  "license": "MIT",
+  "author": "hbll",
+  "main": "src/sizes.js",
+  "scripts": {
+    "test": "exit 0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "lit": "^2.3.1"
+  }
+}

package/src/sizes.js

@@ -0,0 +1,26 @@
+export var Size;
+(function (Size) {
+    Size["SMALL"] = "small";
+    Size["MEDIUM"] = "medium";
+    Size["LARGE"] = "large";
+})(Size || (Size = {}));
+export var Padding;
+(function (Padding) {
+    Padding["NONE"] = "none";
+    Padding["SMALL"] = "small";
+    Padding["MEDIUM"] = "medium";
+    Padding["LARGE"] = "large";
+})(Padding || (Padding = {}));
+export var ContentPaddingHorizontal;
+(function (ContentPaddingHorizontal) {
+    ContentPaddingHorizontal["NONE"] = "none";
+    ContentPaddingHorizontal["SMALL"] = "small";
+    ContentPaddingHorizontal["MEDIUM"] = "medium";
+    ContentPaddingHorizontal["LARGE"] = "large";
+})(ContentPaddingHorizontal || (ContentPaddingHorizontal = {}));
+export var ContentPaddingVertical;
+(function (ContentPaddingVertical) {
+    ContentPaddingVertical["NONE"] = "none";
+    ContentPaddingVertical["SMALL"] = "small";
+    ContentPaddingVertical["MEDIUM"] = "medium";
+})(ContentPaddingVertical || (ContentPaddingVertical = {}));