feat(md-button): add

devopsmariocom · Oct 21, 2017 · d79f4db · d79f4db
1 parent 6edc041
commit d79f4db
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "stencil build --prerender",
-    "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server --no-open\" ",
+    "dev": "SASS_PATH=node_modules sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server --no-open\" ",
     "serve": "stencil-dev-server",
     "start": "npm run dev",
     "test": "jest --no-cache",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -26,6 +26,8 @@ declare global {
   }
   namespace JSXElements {
       export interface BuBoxAttributes extends HTMLAttributes {
+          mode?: string,
+          color?: string,
 
       }
   }
@@ -53,17 +55,48 @@ declare global {
   }
   namespace JSXElements {
       export interface BuButtonAttributes extends HTMLAttributes {
+          mode?: string,
+          color?: string,
 
           type?: string,
           value?: string,
-          disabled?: boolean | "true" | "false",
+          disabled?: boolean,
           size?: string,
-          outlined?: boolean | "true" | "false",
-          inverted?: boolean | "true" | "false",
-          hovered?: boolean | "true" | "false",
-          focused?: boolean | "true" | "false",
-          active?: boolean | "true" | "false",
-          loading?: boolean | "true" | "false"
+          outlined?: boolean,
+          inverted?: boolean,
+          hovered?: boolean,
+          focused?: boolean,
+          active?: boolean,
+          loading?: boolean
+      }
+  }
+}
+
+import { MdButton as MdButton } from './components/md-button/md-button';
+
+interface HTMLMdButtonElement extends MdButton, HTMLElement {
+}
+declare var HTMLMdButtonElement: {
+  prototype: HTMLMdButtonElement;
+  new (): HTMLMdButtonElement;
+};
+declare global {
+  interface HTMLElementTagNameMap {
+      "md-button": HTMLMdButtonElement;
+  }
+  interface ElementTagNameMap {
+      "md-button": HTMLMdButtonElement;
+  }
+  namespace JSX {
+      interface IntrinsicElements {
+          "md-button": JSXElements.MdButtonAttributes;
+      }
+  }
+  namespace JSXElements {
+      export interface MdButtonAttributes extends HTMLAttributes {
+          mode?: string,
+          color?: string,
+
       }
   }
 }

diff --git a/src/components/md-button/md-button.scss b/src/components/md-button/md-button.scss
@@ -0,0 +1 @@
+@import "@material/button/mdc-button.scss";
diff --git a/src/components/md-button/md-button.tsx b/src/components/md-button/md-button.tsx
@@ -0,0 +1,17 @@
+import { Component } from "@stencil/core";
+
+@Component({
+  tag: 'md-button',
+  styleUrl: 'md-button.scss'
+})
+export class MdButton {
+
+  render() {
+    return (
+      <div class="mdc-button mdc-button--raised">
+        <slot />
+      </div>
+    )
+  }
+
+}
diff --git a/src/index.html b/src/index.html
@@ -8,13 +8,18 @@
   <meta name="theme-color" content="#16161d">
   <meta name="apple-mobile-web-app-capable" content="yes">
 
-  <script src="/build/app.js"></script>
+  <script src="/build/bulma.js"></script>
 
   <link rel="apple-touch-icon" href="/assets/icon/icon.png">
   <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
   <link rel="manifest" href="/manifest.json">
 </head>
 <body>
+
+  <bu-box>
+    <md-button>TEST</md-button>
+  </bu-box>
+
   <bu-box>
     <legend>Box</legend>
     <bu-box>

diff --git a/stencil.config.js b/stencil.config.js
@@ -1,10 +1,14 @@
 exports.config = {
   namespace: 'Bulma',
-  generateDistribution: true,
-  generateWWW: false,
+  // sassConfig: {
+  //   includePaths: ['node_modules'],
+  // },
+  // generateDistribution: true,
+  // generateWWW: false,
   bundles: [
     { components: ['bu-box'] },
     { components: ['bu-button'] },
+    { components: ['md-button'] },
   ]
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -2,6 +2,44 @@
 # yarn lockfile v1
 
 
+"@material/animation@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-0.4.1.tgz#bf8b50aedad4cffce8a5b428fdca8f1abbaf176e"
+
+"@material/base@^0.2.6":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-0.2.6.tgz#3003f3df2c06d172151d4160b8c8b2e6c65e7c01"
+
+"@material/button@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@material/button/-/button-0.23.0.tgz#6c5c24778292ab1f13f83ee94a2c8e026b04a2d3"
+  dependencies:
+    "@material/elevation" "^0.1.13"
+    "@material/ripple" "^0.23.0"
+    "@material/theme" "^0.4.0"
+    "@material/typography" "^0.3.0"
+
+"@material/elevation@^0.1.13":
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-0.1.13.tgz#a38885f3caf4398ca6a7468c308887d70bd4605b"
+  dependencies:
+    "@material/animation" "^0.4.1"
+
+"@material/ripple@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-0.23.0.tgz#d5cd1b3014d0d079b835fc62d51eccbb5d775373"
+  dependencies:
+    "@material/base" "^0.2.6"
+    "@material/theme" "^0.4.0"
+
+"@material/theme@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-0.4.0.tgz#0aef1a0279b65c15990584fb8b8eca095c734641"
+
+"@material/typography@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-0.3.0.tgz#f828c2d3215bfd66c58072709b4260c64125390a"
+
 "@stencil/core@next":
   version "0.0.6-13"
   resolved "https://registry.yarnpkg.com/@stencil/core/-/core-0.0.6-13.tgz#075075e3cc624209f64dd54d27dac7df891febdb"