Merge pull request #7 from o-rango/feature/#6

Feature/#6

readme.md

@@ -7,4 +7,28 @@
 ###  WIP  Adapters to implement Material Design Components
 
 
+> Planned Components
+
+- [x] button 
+- [] card 
+- [] checkbox 
+- [] dialog 
+- [] drawer 
+- [x] fab 
+- [] grid-list 
+- [] icon-toggle 
+- [] layout-grid 
+- [] linear-progress 
+- [] list 
+- [] menu 
+- [] radio 
+- [] select 
+- [] slider 
+- [] snackbar 
+- [] switch 
+- [] tabs 
+- [] textfield 
+- [] toolbar 
+- [] typography
+
 

src/components.d.ts

@@ -6,202 +6,31 @@
 
 
 import {
-  MdcButtonComponent as OMdcButton
-} from './components/o-mdc-button/o-mdc-button';
+  MdcSelectComponent as OMdcSelect
+} from './components/o-mdc-select/o-mdc-select';
 
 declare global {
-  interface HTMLOMdcButtonElement extends OMdcButton, HTMLElement {
+  interface HTMLOMdcSelectElement extends OMdcSelect, HTMLElement {
   }
-  var HTMLOMdcButtonElement: {
-    prototype: HTMLOMdcButtonElement;
-    new (): HTMLOMdcButtonElement;
+  var HTMLOMdcSelectElement: {
+    prototype: HTMLOMdcSelectElement;
+    new (): HTMLOMdcSelectElement;
   };
   interface HTMLElementTagNameMap {
-    "o-mdc-button": HTMLOMdcButtonElement;
+    "o-mdc-select": HTMLOMdcSelectElement;
   }
   interface ElementTagNameMap {
-    "o-mdc-button": HTMLOMdcButtonElement;
+    "o-mdc-select": HTMLOMdcSelectElement;
   }
   namespace JSX {
     interface IntrinsicElements {
-      "o-mdc-button": JSXElements.OMdcButtonAttributes;
+      "o-mdc-select": JSXElements.OMdcSelectAttributes;
     }
   }
   namespace JSXElements {
-    export interface OMdcButtonAttributes extends HTMLAttributes {
-      name?: string;
-      id?: string;
-      href?: string;
-      disabled?: boolean;
-      raised?: boolean;
-      unelevated?: boolean;
-      stroked?: boolean;
-      dense?: boolean;
-      compact?: boolean;
-    }
-  }
-}
-
-
-import {
-  MdcFabComponent as OMdcFab
-} from './components/o-mdc-fab/o-mdc-fab';
-
-declare global {
-  interface HTMLOMdcFabElement extends OMdcFab, HTMLElement {
-  }
-  var HTMLOMdcFabElement: {
-    prototype: HTMLOMdcFabElement;
-    new (): HTMLOMdcFabElement;
-  };
-  interface HTMLElementTagNameMap {
-    "o-mdc-fab": HTMLOMdcFabElement;
-  }
-  interface ElementTagNameMap {
-    "o-mdc-fab": HTMLOMdcFabElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "o-mdc-fab": JSXElements.OMdcFabAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface OMdcFabAttributes extends HTMLAttributes {
-      name?: string;
-      id?: string;
-      href?: string;
-      mini?: boolean;
-      absolute?: boolean;
-      fixed?: boolean;
-    }
-  }
-}
-
-
-import {
-  MdcLinearProgressComponent as OMdcLinearProgress
-} from './components/o-mdc-linear-progress/o-mdc-linear-progress';
-
-declare global {
-  interface HTMLOMdcLinearProgressElement extends OMdcLinearProgress, HTMLElement {
-  }
-  var HTMLOMdcLinearProgressElement: {
-    prototype: HTMLOMdcLinearProgressElement;
-    new (): HTMLOMdcLinearProgressElement;
-  };
-  interface HTMLElementTagNameMap {
-    "o-mdc-linear-progress": HTMLOMdcLinearProgressElement;
-  }
-  interface ElementTagNameMap {
-    "o-mdc-linear-progress": HTMLOMdcLinearProgressElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "o-mdc-linear-progress": JSXElements.OMdcLinearProgressAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface OMdcLinearProgressAttributes extends HTMLAttributes {
-
-    }
-  }
-}
-
-
-import {
-  MdcToolbarSectionComponent as OMdcToolbarSection
-} from './components/o-mdc-toolbar/o-mdc-toolbar-section';
-
-declare global {
-  interface HTMLOMdcToolbarSectionElement extends OMdcToolbarSection, HTMLElement {
-  }
-  var HTMLOMdcToolbarSectionElement: {
-    prototype: HTMLOMdcToolbarSectionElement;
-    new (): HTMLOMdcToolbarSectionElement;
-  };
-  interface HTMLElementTagNameMap {
-    "o-mdc-toolbar-section": HTMLOMdcToolbarSectionElement;
-  }
-  interface ElementTagNameMap {
-    "o-mdc-toolbar-section": HTMLOMdcToolbarSectionElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "o-mdc-toolbar-section": JSXElements.OMdcToolbarSectionAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface OMdcToolbarSectionAttributes extends HTMLAttributes {
-      alignStart?: boolean;
-      alignEnd?: boolean;
-      shrinkToFit?: boolean;
-    }
-  }
-}
-
-
-import {
-  MdcToolbarTitleComponent as OMdcToolbarTitle
-} from './components/o-mdc-toolbar/o-mdc-toolbar-title';
-
-declare global {
-  interface HTMLOMdcToolbarTitleElement extends OMdcToolbarTitle, HTMLElement {
-  }
-  var HTMLOMdcToolbarTitleElement: {
-    prototype: HTMLOMdcToolbarTitleElement;
-    new (): HTMLOMdcToolbarTitleElement;
-  };
-  interface HTMLElementTagNameMap {
-    "o-mdc-toolbar-title": HTMLOMdcToolbarTitleElement;
-  }
-  interface ElementTagNameMap {
-    "o-mdc-toolbar-title": HTMLOMdcToolbarTitleElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "o-mdc-toolbar-title": JSXElements.OMdcToolbarTitleAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface OMdcToolbarTitleAttributes extends HTMLAttributes {
+    export interface OMdcSelectAttributes extends HTMLAttributes {
 
     }
   }
 }
 
-
-import {
-  MdcToolbarComponent as OMdcToolbar
-} from './components/o-mdc-toolbar/o-mdc-toolbar';
-
-declare global {
-  interface HTMLOMdcToolbarElement extends OMdcToolbar, HTMLElement {
-  }
-  var HTMLOMdcToolbarElement: {
-    prototype: HTMLOMdcToolbarElement;
-    new (): HTMLOMdcToolbarElement;
-  };
-  interface HTMLElementTagNameMap {
-    "o-mdc-toolbar": HTMLOMdcToolbarElement;
-  }
-  interface ElementTagNameMap {
-    "o-mdc-toolbar": HTMLOMdcToolbarElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "o-mdc-toolbar": JSXElements.OMdcToolbarAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface OMdcToolbarAttributes extends HTMLAttributes {
-      name?: string;
-      id?: string;
-      fixed?: boolean;
-      waterfall?: boolean;
-      fixedLastrow?: boolean;
-      flexible?: boolean;
-      flexibleDefault?: boolean;
-    }
-  }
-}
-

src/components/o-mdc-select/o-mdc-select.scss

@@ -0,0 +1 @@
+@import "@material/select/mdc-select";

src/components/o-mdc-select/o-mdc-select.tsx

@@ -0,0 +1,42 @@
+import {Component, Prop, Element, CssClassMap} from '@stencil/core';
+
+@Component({
+  tag: 'o-mdc-select',
+  styleUrl: 'o-mdc-select.scss',
+  shadow: true
+})
+export class MdcSelectComponent {
+  render() {
+    return (
+<div class="mdc-select" role="listbox" tabindex="0">
+  <div class="mdc-select__surface">
+    <div class="mdc-select__label">Pick a Food Group</div>
+    <div class="mdc-select__selected-text"></div>
+    <div class="mdc-select__bottom-line"></div>
+  </div>
+  <div class="mdc-simple-menu mdc-select__menu">
+    <ul class="mdc-list mdc-simple-menu__items">
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Bread, Cereal, Rice, and Pasta
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Vegetables
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Fruit
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Milk, Yogurt, and Cheese
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Fats, Oils, and Sweets
+      </li>
+    </ul>
+  </div>
+</div>
+    );
+  }
+}

src/components/o-mdc-text-field/o-mdc-text-field.scss

@@ -0,0 +1 @@
+@import "@material/textfield/mdc-text-field";

src/components/o-mdc-text-field/o-mdc-text-field.tsx

@@ -0,0 +1,18 @@
+import {Component} from '@stencil/core';
+
+@Component({
+  tag: 'o-mdc-text-field',
+  styleUrl: 'o-mdc-text-field.scss',
+  shadow: true
+})
+export class MdcTextFieldComponent {
+  render() {
+    return (
+      <div class="mdc-text-field">
+        <input type="text" id="my-text-field" class="mdc-text-field__input"></input>
+        <label class="mdc-text-field__label">Hint text</label>
+        <div class="mdc-text-field__bottom-line"></div>
+      </div>
+    );
+  }
+}

src/components/o-mdc-toolbar/o-mdc-toolbar.tsx

@@ -21,7 +21,6 @@ export class MdcToolbarComponent {
 
     componentDidLoad() {
       this.foundation = MDCToolbar.attachTo(this.MdcToolbarEl.shadowRoot.querySelector('.mdc-toolbar'));
-      debugger;
 
     }
 

src/index.html

@@ -85,7 +85,15 @@ <h2>Progress bar demo</h2>
       </o-mdc-linear-progress>
     </fieldset>
 
+    <fieldset>
+      <h2>Text field demo</h2>
+      <o-mdc-text-field></o-mdc-text-field>
+    </fieldset>
 
+    <fieldset>
+      <h2>Select demo</h2>
+      <o-mdc-select></o-mdc-select>
+    </fieldset>
   </body>
 
 </html>

stencil.config.js

@@ -3,6 +3,8 @@ exports.config = {
   generateDistribution: true,
   bundles: [
     { components: ['o-mdc-button'] },
+    { components: ['o-mdc-text-field'] },
+    { components: ['o-mdc-select'] },
     { components: ['o-mdc-fab'] },
     { components: ['o-mdc-linear-progress'] },
     { components: ['o-mdc-toolbar', 'o-mdc-toolbar-title' , 'o-mdc-toolbar-section'] }