From d79f4dbcfac225bd5112792c330b9c4c86445e26 Mon Sep 17 00:00:00 2001 From: elmariofredo Date: Wed, 18 Oct 2017 10:36:57 +0200 Subject: [PATCH] feat(md-button): add --- package.json | 2 +- src/components.d.ts | 47 +++++++++++++++++++++---- src/components/md-button/md-button.scss | 1 + src/components/md-button/md-button.tsx | 17 +++++++++ src/index.html | 7 +++- stencil.config.js | 8 +++-- yarn.lock | 38 ++++++++++++++++++++ 7 files changed, 109 insertions(+), 11 deletions(-) create mode 100644 src/components/md-button/md-button.scss create mode 100644 src/components/md-button/md-button.tsx diff --git a/package.json b/package.json index f255eb2..867dcbf 100755 --- 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 index 9d1ac20..9087978 100755 --- 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 new file mode 100644 index 0000000..003827b --- /dev/null +++ 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 new file mode 100644 index 0000000..c2da310 --- /dev/null +++ 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 ( +
+ +
+ ) + } + +} diff --git a/src/index.html b/src/index.html index a3ac853..761f238 100755 --- a/src/index.html +++ b/src/index.html @@ -8,13 +8,18 @@ - + + + + TEST + + Box diff --git a/stencil.config.js b/stencil.config.js index 52e1276..0a35800 100755 --- 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 index 0b5763a..d98b699 100644 --- 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"