Button

src/components/button/index.ts

@@ -1,12 +1,23 @@
-import { html, property, customElement, TemplateResult } from 'lit-element';
+import {
+    html,
+    property,
+    customElement,
+    TemplateResult,
+    css,
+    CSSResult,
+    unsafeCSS,
+} from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ComponentBase } from '../componentBase';
 
+//import * as componentCss from "./style.scss";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const styles = require('!!raw-loader?esModule=false!sass-loader!./style.scss');
+
 @customElement('adix-button')
 export class ADIXButton extends ComponentBase {
     @property() public text = '';
     @property() public type:
-        | ''
         | 'primary'
         | 'secondary'
         | 'success'
@@ -14,25 +25,32 @@ export class ADIXButton extends ComponentBase {
         | 'warning'
         | 'info'
         | 'light'
-        | 'dark' = '';
+        | 'dark' = 'primary';
 
     @property() public disabled = false;
 
+    public static get styles(): CSSResult[] {
+        return [
+            css`
+                ${unsafeCSS(styles)}
+            `,
+        ];
+    }
+
     public render(): TemplateResult {
         return html`
             <button
                 class=${classMap({
-                    btm: true,
+                    btn: true,
-                    primary: this.type === 'primary',
+                    'btn-primary': this.type === 'primary',
-                    secondary: this.type === 'secondary',
+                    'btn-secondary': this.type === 'secondary',
-                    success: this.type === 'success',
+                    'btn-success': this.type === 'success',
-                    danger: this.type === 'danger',
+                    'btn-danger': this.type === 'danger',
-                    warning: this.type === 'warning',
+                    'btn-warning': this.type === 'warning',
-                    info: this.type === 'info',
+                    'btn-info': this.type === 'info',
-                    light: this.type === 'light',
+                    'btn-light': this.type === 'light',
-                    dark: this.type === 'dark',
+                    'btn-dark': this.type === 'dark',
                 })}
-
                 ?disabled=${this.disabled}
             >
                 <slot>${this.text}</slot>

src/components/button/style.scss

@@ -0,0 +1,9 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+@import "~bootstrap/scss/buttons";
+
+.test {
+    color: white;
+}