From 8d2eab463b2db9cecba680ad6e0c1be38a31c998 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 13 Apr 2017 16:56:13 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20List=20and=20ListItem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Eduardo San Martin Morote <posva13@gmail.com>
---
 src/List/List.vue           | 31 ++++++++++++++++++++++++++++++
 src/List/ListItem.vue       | 25 ++++++++++++++++++++++++
 test/specs/List.spec.js     | 38 +++++++++++++++++++++++++++++++++++++
 test/specs/ListItem.spec.js | 18 ++++++++++++++++++
 4 files changed, 112 insertions(+)
 create mode 100644 src/List/List.vue
 create mode 100644 src/List/ListItem.vue
 create mode 100644 test/specs/List.spec.js
 create mode 100644 test/specs/ListItem.spec.js

diff --git a/src/List/List.vue b/src/List/List.vue
new file mode 100644
index 0000000..b1cab21
--- /dev/null
+++ b/src/List/List.vue
@@ -0,0 +1,31 @@
+<script>
+import { propsToClasses } from '../utils'
+
+export default {
+  functional: true,
+
+  props: {
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+    dense: Boolean,
+    twoLines: Boolean,
+  },
+
+  render (h, { data, children, props }) {
+    const tag = props.tag
+    delete props.tag
+    const staticClass = propsToClasses('mdc-list', props)
+    data.staticClass = data.staticClass
+                     ? `${data.staticClass} ${staticClass}`
+                     : staticClass
+    return h(tag, {
+      ...data,
+    }, children)
+  },
+}
+</script>
+
+<style lang="scss" src="@material/list/mdc-list.scss">
+</style>
diff --git a/src/List/ListItem.vue b/src/List/ListItem.vue
new file mode 100644
index 0000000..a39b39c
--- /dev/null
+++ b/src/List/ListItem.vue
@@ -0,0 +1,25 @@
+<script>
+export default {
+  functional: true,
+
+  props: {
+    tag: {
+      type: String,
+      default: 'li',
+    },
+  },
+
+  render (h, { data, children, props: { tag }}) {
+    const staticClass = 'mdc-list-item'
+    data.staticClass = data.staticClass
+                     ? `${data.staticClass} ${staticClass}`
+                     : staticClass
+    return h(tag, {
+      ...data,
+    }, children)
+  },
+}
+</script>
+
+<style lang="scss" src="@material/list/mdc-list.scss">
+</style>
diff --git a/test/specs/List.spec.js b/test/specs/List.spec.js
new file mode 100644
index 0000000..2e1de59
--- /dev/null
+++ b/test/specs/List.spec.js
@@ -0,0 +1,38 @@
+import List from 'src/List/List.vue'
+import ListItem from 'src/List/ListItem.vue'
+import {
+  createVM,
+  dataPropagationTest,
+  attrTest,
+} from '../helpers'
+
+describe('List', function () {
+  it('renders an upgraded list', function () {
+    const vm = createVM(this, h => (
+      <List ref='list'>
+        <ListItem>Item 1</ListItem>
+        <ListItem>Item 2</ListItem>
+      </List>
+    ), {
+    })
+    vm.$refs.list.should.have.class('mdc-list')
+    vm.$refs.list.should.match('ul')
+  })
+
+  it('can render a custom tag', function () {
+    const vm = createVM(this, h => (
+      <List ref='list' tag='div'>Hello</List>
+    ))
+    vm.$refs.list.should.have.class('mdc-list')
+    vm.$refs.list.should.match('div')
+  })
+
+  it('keeps original tag data', dataPropagationTest(List))
+
+  describe('attrs', function () {
+    attrTest(it, 'mdc-list', List, [
+      'dense',
+      'two-lines',
+    ])
+  })
+})
diff --git a/test/specs/ListItem.spec.js b/test/specs/ListItem.spec.js
new file mode 100644
index 0000000..b8b25cc
--- /dev/null
+++ b/test/specs/ListItem.spec.js
@@ -0,0 +1,18 @@
+import ListItem from 'src/List/ListItem.vue'
+import {
+  createVM,
+  dataPropagationTest,
+} from '../helpers'
+
+describe('ListItem', function () {
+  it('renders an upgraded list item', function () {
+    const vm = createVM(this, `
+<ListItem>Item 1</ListItem>
+`, {
+  components: { ListItem },
+})
+    vm
+  })
+
+  it('keeps original tag data', dataPropagationTest(ListItem))
+})