feat : mdc-list WIP

o-rango · Dec 17, 2017 · 38bada4 · 38bada4
1 parent 335a2df
commit 38bada4
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 2 deletions.
diff --git a/src/components/o-mdc-list/o-mdc-list.item.tsx b/src/components/o-mdc-list/o-mdc-list.item.tsx
@@ -0,0 +1,16 @@
+import { Component, Prop, CssClassMap } from '@stencil/core';
+
+@Component({
+  tag: 'o-mdc-list-item',
+  styleUrl: 'o-mdc-list.scss',
+  shadow: true
+})
+export class MdcListItemComponent {
+  render() {
+    return (
+      <li class="mdc-list-item">
+        <slot/>
+      </li>
+    );
+  }
+}
diff --git a/src/components/o-mdc-list/o-mdc-list.scss b/src/components/o-mdc-list/o-mdc-list.scss
@@ -0,0 +1,18 @@
+@import "@material/list/mdc-list";
+
+  .mdc---bordered {
+    /* remove the side padding. we'll be placing it around the item instead. */
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .mdc-list--bordered .mdc-list-item {
+    /* Add the list side padding padding to the list item. */
+    padding: 0 16px;
+    /* Add a border around each element. */
+    border: 1px solid rgba(0, 0, 0, .12);
+  }
+  /* Ensure adjacent borders don't collide with one another. */
+  .mdc-list--bordered .mdc-list-item:not(:first-child) {
+    border-top: none;
+  }
+
diff --git a/src/components/o-mdc-list/o-mdc-list.spec.tsx b/src/components/o-mdc-list/o-mdc-list.spec.tsx
@@ -0,0 +1,9 @@
+import { flush, render } from '@stencil/core/testing';
+import { MdcListComponent } from './o-mdc-list';
+
+describe('o-mdc-Menu', () => {
+  it('should build', () => {
+    expect(new MdcListComponent()).toBeTruthy();
+  });
+
+});
diff --git a/src/components/o-mdc-list/o-mdc-list.tsx b/src/components/o-mdc-list/o-mdc-list.tsx
@@ -0,0 +1,31 @@
+import { Component, Prop, CssClassMap } from '@stencil/core';
+
+@Component({
+  tag: 'o-mdc-list',
+  styleUrl: 'o-mdc-list.scss',
+  shadow: true
+})
+export class MdcListComponent {
+
+  @Prop()id : string;
+  @Prop()dense : boolean;
+  @Prop()avatarList : boolean;
+  @Prop()twoLine : boolean;
+  @Prop()bordered : boolean;
+
+  render() {
+    const listClasses: CssClassMap = {
+      'mdc-list': true,
+      'mdc-list--dense': this.dense,
+      'mdc-list--avatar-list': this.avatarList,
+      'mdc-list--two-line': this.twoLine,
+      'mdc-list--bordered': this.bordered
+    };
+
+    return (
+      <ul class={listClasses} id={this.id}>
+        <slot/>
+      </ul>
+    );
+  }
+}
diff --git a/src/components/o-mdc-list/readme.md b/src/components/o-mdc-list/readme.md
@@ -0,0 +1,11 @@
+# o-mdc-select
+
+
+
+<!-- Auto Generated Below -->
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*
diff --git a/src/index.html b/src/index.html
@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <o-mdc-toolbar flexible fixed>
+    <o-mdc-toolbar fixed>
       <o-mdc-toolbar-section align-start >
             <mdc-toolbar-title>Title Start</mdc-toolbar-title>
       </o-mdc-toolbar-section>
@@ -91,7 +91,7 @@ <h2>Text field demo</h2>
 
     <fieldset>
       <h2>Select demo</h2>
-      <!-- <o-mdc-select></o-mdc-select> -->
+     <!-- <o-mdc-select></o-mdc-select> -->
     </fieldset>
 
 
@@ -121,6 +121,24 @@ <h2>Snackbar demo</h2>
        <o-mdc-snackbar align-start></o-mdc-snackbar>
 
     </fieldset>
+
+    <fieldset>
+      <h2>List demo</h2>
+      <o-mdc-list bordered id="roca">
+        <o-mdc-list-item>
+          Caso
+        </o-mdc-list-item>
+        <o-mdc-list-item>
+          Caso 2
+        </o-mdc-list-item>
+        <o-mdc-list-item>
+          Caso 3
+        </o-mdc-list-item>
+        <o-mdc-list-item>
+          Caso 4
+        </o-mdc-list-item>
+      </o-mdc-list>
+    </fieldset>
   </body>
 
   <script>

diff --git a/stencil.config.js b/stencil.config.js
@@ -2,6 +2,7 @@ exports.config = {
   namespace: 'orango-material',
   generateDistribution: true,
   bundles: [
+    { components: ['o-mdc-list' , 'o-mdc-list-item'] },
     { components: ['o-mdc-theme'] },
     { components: ['o-mdc-snackbar'] },
     { components: ['o-mdc-form-field'] },