Feature/update list (#286)

* update list

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

@@ -5,9 +5,7 @@ describe('ListItem', () => {
   it('has default structure', () => {
     const wrapper = mount(AListItem)
 
-    expect(wrapper.is('li')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list-item')
-    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.element.tagName).toBe('LI')
   })
 
   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', () => {
@@ -28,8 +26,7 @@ describe('ListItem', () => {
       }
     })
 
-    expect(wrapper.is('dt')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list-item')
+    expect(wrapper.element.tagName).toBe('DT')
     expect(wrapper.props().tag).toBe('dt')
   })
 })

_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', 'space-x-6'
+      ]
+    },
+    centered: {
+      list: [
+        'justify-center',
+        'text-center'
+      ]
+    },
+    divided: {
+      list: [
+        'divide-y', 'divide-gray-100'
+      ]
+    },
+    'divided-horizontal': {
+      list: [
+        'flex', 'flex-row', 'flex-wrap',
+        'divide-x', 'divide-gray-100'
+      ]
+    }
+  }
+}

_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', () => {
@@ -17,8 +15,8 @@ describe('List', () => {
       }
     })
 
-    expect(wrapper.find('.a-list > li').exists()).toBe(true)
-    expect(wrapper.find('.a-list > li').text()).toEqual('List default text')
+    expect(wrapper.find('ul > li').exists()).toBe(true)
+    expect(wrapper.find('ul > li').text()).toEqual('List default text')
   })
 
   it('should be generated with the `ol` passed as tag', () => {
@@ -28,8 +26,7 @@ describe('List', () => {
       }
     })
 
-    expect(wrapper.is('ol')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list')
+    expect(wrapper.element.tagName).toBe('OL')
     expect(wrapper.props().tag).toBe('ol')
   })
 })

src/atoms/list/List.stories.js

@@ -0,0 +1,76 @@
+import AList from './List.vue'
+import AListItem from '@atoms/list-item/ListItem.vue'
+import ALink from '@atoms/link/Link.vue'
+
+export default {
+  title: 'Atoms/List',
+  component: AList,
+  argTypes: {
+    tag: {
+      control: {
+        type: 'text'
+      }
+    },
+    variant: {
+      control: {
+        type: 'multi-select',
+        options: [
+          'primary',
+          'native',
+          'horizontal',
+          'divided',
+          'centered',
+          'divided-horizontal'
+        ]
+      }
+    }
+  }
+}
+
+// base list
+const BaseTemplate = (args, { argTypes }) => ({
+  components: { AList, AListItem },
+  props: Object.keys(argTypes),
+  template: `
+    <a-list
+      :tag="tag"
+      :variant="variant"
+    >
+      <a-list-item>
+        Lorem ipsum
+      </a-list-item>
+      <a-list-item>
+        Lorem ipsum
+      </a-list-item>
+      <a-list-item>
+        Lorem ipsum
+      </a-list-item>
+    </a-list>
+  `
+})
+
+export const Default = BaseTemplate.bind({})
+
+// with slots list
+const WithSlotsTemplate = (args, { argTypes }) => ({
+  components: { AList, AListItem, ALink },
+  props: Object.keys(argTypes),
+  template: `
+    <a-list
+      :tag="tag"
+      :variant="variant"
+    >
+      <a-list-item>
+        <a-link href="#">Lorem ipsum</a-link>
+      </a-list-item>
+      <a-list-item>
+        <a-link href="#">Lorem ipsum</a-link>
+      </a-list-item>
+      <a-list-item>
+        <a-link href="#">Lorem ipsum</a-link>
+      </a-list-item>
+    </a-list>
+  `
+})
+
+export const WithSlots = WithSlotsTemplate.bind({})

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

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