Merge b80ca4a into 131f3c5

package.json

@@ -20,16 +20,16 @@
   },
   "dependencies": {
     "@alepop/check-for-uri-handler": "0.0.4",
-    "@stencil/core": "0.9.7",
-    "spectre.css": "^0.4.4"
+    "@stencil/core": "0.9.7"
   },
   "devDependencies": {
     "@stencil/dev-server": "latest",
-    "@stencil/sass": "0.0.5",
     "@stencil/utils": "latest",
     "@types/jest": "^21.1.1",
     "coveralls": "^3.0.0",
-    "jest": "^21.2.1"
+    "jest": "^21.2.1",
+    "tslint": "5.10.0",
+    "tslint-ionic-rules": "0.0.16"
   },
   "repository": {
     "type": "git",

src/components.d.ts

@@ -33,6 +33,7 @@ declare global {
     interface LiskButtonSend {
       'amount': number;
       'buttonTitle': string;
+      'classNames': string;
       'recipient': string;
     }
   }
@@ -58,6 +59,7 @@ declare global {
     export interface LiskButtonSendAttributes extends HTMLAttributes {
       'amount'?: number;
       'buttonTitle'?: string;
+      'classNames'?: string;
       'recipient'?: string;
     }
   }
@@ -69,6 +71,7 @@ declare global {
   namespace StencilComponents {
     interface LiskButtonSign {
       'buttonTitle': string;
+      'classNames': string;
       'message': string;
       'sourceId': string;
       'type': string;
@@ -95,6 +98,7 @@ declare global {
   namespace JSXElements {
     export interface LiskButtonSignAttributes extends HTMLAttributes {
       'buttonTitle'?: string;
+      'classNames'?: string;
       'message'?: string;
       'sourceId'?: string;
       'type'?: string;
@@ -108,6 +112,7 @@ declare global {
   namespace StencilComponents {
     interface LiskButtonVote {
       'buttonTitle': string;
+      'classNames': string;
       'unvotes': string;
       'votes': string;
     }
@@ -133,6 +138,7 @@ declare global {
   namespace JSXElements {
     export interface LiskButtonVoteAttributes extends HTMLAttributes {
       'buttonTitle'?: string;
+      'classNames'?: string;
       'unvotes'?: string;
       'votes'?: string;
     }

src/components/lisk-button-send/lisk-button-send.tsx

@@ -1,31 +1,35 @@
 import { Component, Prop } from '@stencil/core';
-import {  getURL } from '../utils/index';
+
 import { LiskButton } from '../lisk-button/lisk-button';
+import { getURL } from '../utils/index';
 
 @Component({
   tag: 'lisk-button-send',
-  styleUrl: '../lisk-button/lisk-button.scss',
-  shadow: true
 })
 export class LiskButtonSend extends LiskButton {
   constructor() {
     super();
-    this.open = this.open.bind(this);
   }
 
   @Prop() amount: number;
   @Prop() recipient: string;
-  @Prop() buttonTitle: string
+  @Prop() buttonTitle: string;
+  @Prop() classNames = 'lisk-btn-send-wrapper';
 
-  open() {
+  private open = (): void => {
     const { amount, recipient } = this;
     const url = getURL({ amount, recipient, kind: 'send' });
     this.openUrl(url);
   }
 
+  private getTitle = () =>
+    this.buttonTitle || `Send ${this.amount} LSK to ${this.recipient}`
+
+  hostData() {
+    return super.hostData(this.classNames);
+  }
+
   render() {
-    return <button class={`btn btn-primary ${this.loading ? 'loading' : ''} ${this.showTooltip ? 'tooltip' : ''}`}
-                   onClick={this.open}
-                   data-tooltip={this.getTooltipText()}>{this.buttonTitle || `Send ${this.amount} LSK to ${this.recipient}`}</button>
+    return <button onClick={this.open}>{this.getTitle()}</button>;
   }
 }

src/components/lisk-button-sign/lisk-button-sign.tsx

@@ -1,43 +1,48 @@
 import { Component, Prop } from '@stencil/core';
-import {  getURL } from '../utils/index';
+
 import { LiskButton } from '../lisk-button/lisk-button';
+import { getURL } from '../utils/index';
 
 @Component({
   tag: 'lisk-button-sign',
-  styleUrl: '../lisk-button/lisk-button.scss',
-  shadow: true
 })
 export class LiskButtonSign extends LiskButton {
   constructor() {
     super();
-    this.open = this.open.bind(this);
   }
 
   @Prop() type: string;
   @Prop() message: string;
   @Prop() buttonTitle: string;
-  @Prop() sourceId: string = "";
+  @Prop() sourceId = '';
+  @Prop() classNames = 'lisk-btn-sign-wrapper';
 
-  getValue(): string {
+  private getValue(): string {
     const input: HTMLInputElement = document.querySelector(`#${this.sourceId}`);
     return input.value;
   }
 
-  open(): void {
+  private open = (): void => {
     const { type, message } = this;
-    const data = !!this.sourceId ? this.getValue() : message;
+    const data = this.sourceId ? this.getValue() : message;
     const url = getURL({
       message: data,
-      kind: (type === 'nano' ? 'sign-nano' : 'sign-hub')
+      kind: type === 'nano' ? 'sign-nano' : 'sign-hub',
     });
     this.openUrl(url);
   }
 
+  private getTitle = () => {
+    const wallet = this.type === 'nano' ? 'Lisk Nano' : 'Lisk Hub';
+    return this.buttonTitle || `Use ${wallet} to sign the message`;
+  }
+
+  hostData() {
+    return super.hostData(this.classNames);
+  }
+
   render() {
-    //NB: Lisk-nano doesn't support message pre-fill... it will just open sign message page
-    const wallet = this.type === 'nano' ? 'Lisk Nano' : "Lisk Hub";
-    return <button class={`btn btn-primary ${this.loading ? 'loading' : ''} ${this.showTooltip ? 'tooltip' : ''}`}
-                   onClick={this.open}
-                   data-tooltip={this.getTooltipText()}>{this.buttonTitle || `Use ${wallet} to sign the message`}</button>
+    // NB: Lisk-nano doesn't support message pre-fill... it will just open sign message page
+    return <button onClick={this.open}>{this.getTitle()}</button>;
   }
 }

src/components/lisk-button-vote/lisk-button-vote.tsx

@@ -1,42 +1,48 @@
 import { Component, Prop } from '@stencil/core';
-import {  getURL } from '../utils/index';
+
 import { LiskButton } from '../lisk-button/lisk-button';
+import { getURL } from '../utils/index';
 
 @Component({
   tag: 'lisk-button-vote',
-  styleUrl: '../lisk-button/lisk-button.scss',
-  shadow: true
 })
 export class LiskButtonVote extends LiskButton {
   constructor() {
     super();
-    this.open = this.open.bind(this);
-    this.getDefaultTitle = this.getDefaultTitle.bind(this);
   }
 
   @Prop() unvotes: string;
   @Prop() votes: string;
   @Prop() buttonTitle: string;
+  @Prop() classNames = 'lisk-btn-vote-wrapper';
 
-  open() {
+  private open = (): void => {
     const { votes, unvotes } = this;
     const url = getURL({ votes, unvotes, kind: 'vote' });
     this.openUrl(url);
   }
 
-  getDefaultTitle() {
+  private getTitel = () => this.buttonTitle || this.getDefaultTitle();
+
+  private getDefaultTitle = () => {
     if (this.votes) {
       const [first, ...others] = this.votes.split(',');
-      return `Vote for ${first}${others.length ? ` and ${others.length} others...` : ''}`;
+      return `Vote for ${first}${
+        others.length ? ` and ${others.length} others...` : ''
+      }`;
     } else if (this.unvotes) {
       const [first, ...others] = this.unvotes.split(',');
-      return `Unvote ${first}${others.length ? ` and ${others.length} others...` : ''}`;
+      return `Unvote ${first}${
+        others.length ? ` and ${others.length} others...` : ''
+      }`;
     }
   }
 
+  hostData() {
+    return super.hostData(this.classNames);
+  }
+
   render() {
-    return <button class={`btn btn-success ${this.loading ? 'loading' : ''} ${this.showTooltip ? 'tooltip' : ''}`}
-                   onClick={this.open}
-                   data-tooltip={this.getTooltipText()}>{this.buttonTitle || this.getDefaultTitle()}</button>
+    return <button onClick={this.open}>{this.getTitel()}</button>;
   }
 }