✨ Add List and ListItem

Signed-off-by: Eduardo San Martin Morote <posva13@gmail.com>

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>

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>

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',
+    ])
+  })
+})

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))
+})