Feature/update list

src/atoms/list-item/ListItem.css

@@ -0,0 +1,18 @@
+.a-list-item {
+  @apply p-2;
+}
+
+.a-list-item--label {
+  @apply float-left clear-left;
+  @apply table-cell;
+  @apply pt-0 pb-2 pl-0;
+}
+
+.a-list-item--label::after {
+  content: ":";
+}
+
+.a-list-item--value {
+  @apply table-cell;
+  @apply pt-0 pr-2 pb-2 pl-0;
+}

src/atoms/list-item/ListItem.html

@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  :class="getClass('list-item')"
+>
+  <!-- @slot for list item content -->
+  <slot />
+</component>

src/atoms/list-item/ListItem.js

@@ -0,0 +1,21 @@
+import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
+
+export default {
+  mixins: [alpacaUIMixin],
+  props: {
+    /**
+     * To use another tag instead of `li`
+     */
+    tag: {
+      type: String,
+      default: 'li'
+    }
+  },
+  config: {
+    base: {
+      'list-item': [
+        'p-2'
+      ]
+    }
+  }
+}

_src /atoms/list-item/ListItem.spec.js → src/atoms/list-item/ListItem.spec.js

@@ -6,8 +6,6 @@ describe('ListItem', () => {
     const wrapper = mount(AListItem)
 
     expect(wrapper.is('li')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list-item')
-    expect(wrapper.classes().length).toBe(1)
   })
 
   it('renders slot text when passed', () => {
@@ -17,8 +15,8 @@ describe('ListItem', () => {
       }
     })
 
-    expect(wrapper.find('.a-list-item > span').exists()).toBe(true)
-    expect(wrapper.find('.a-list-item > span').text()).toEqual('List item default text')
+    expect(wrapper.find('span').exists()).toBe(true)
+    expect(wrapper.find('span').text()).toEqual('List item default text')
   })
 
   it('should be generated with the `dt` passed as tag', () => {

_src /atoms/list-item/ListItem.vue → src/atoms/list-item/ListItem.vue

@@ -5,9 +5,6 @@ import AListItem from './ListItem.js'
 
 export default {
   name: 'AlpacaListItem',
-
   mixins: [AListItem]
 }
 </script>
-
-<style lang="scss" src="./ListItem.scss" />

_src /atoms/list/List.html → src/atoms/list/List.html

@@ -1,6 +1,6 @@
 <component
   :is="tag"
-  class="a-list"
+  :class="getClass('list')"
 >
   <!-- @slot List item -->
   <slot />

src/atoms/list/List.js

@@ -0,0 +1,49 @@
+import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
+
+export default {
+  mixins: [alpacaUIMixin],
+  props: {
+    /**
+     * To use another tag instead of `ul`
+     */
+    tag: {
+      type: String,
+      default: 'ul'
+    }
+  },
+  config: {
+    base: {
+      list: [
+        'list-none',
+        'text-primary'
+      ]
+    },
+    native: {
+      list: [
+        'list-disc'
+      ]
+    },
+    horizontal: {
+      list: [
+        'flex', 'flex-row', 'flex-wrap'
+      ]
+    },
+    centered: {
+      list: [
+        'justify-center',
+        'text-center'
+      ]
+    },
+    divided: {
+      list: [
+        'divide-y', 'divide-dark'
+      ]
+    },
+    'divided-horizontal': {
+      list: [
+        'flex', 'flex-row', 'flex-wrap',
+        'divide-x', 'divide-dark'
+      ]
+    }
+  }
+}

_src /atoms/list/List.spec.js → src/atoms/list/List.spec.js

@@ -5,9 +5,7 @@ describe('List', () => {
   it('has default structure', () => {
     const wrapper = mount(AList)
 
-    expect(wrapper.is('ul')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list')
-    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.element.tagName).toBe('UL')
   })
 
   it('renders slot text when passed', () => {
@@ -28,7 +26,7 @@ describe('List', () => {
       }
     })
 
-    expect(wrapper.is('ol')).toBe(true)
+    expect(wrapper.element.tagName).toBe('OL')
     expect(wrapper.classes()).toContain('a-list')
     expect(wrapper.props().tag).toBe('ol')
   })