Feature/update list

src/atoms/list-item/ListItem.css

@@ -0,0 +1,20 @@
+.a-list-item {
+  @apply p-2;
+}
+
+.a-list-item--label {
+  float: left;
+
+  @apply clear-left;
+  @apply table-cell;
+  @apply pt-0 pr-2 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 → src/atoms/list-item/ListItem.html

@@ -1,7 +1,8 @@
 <component
   :is="tag"
+  :class="tagClassName"
   class="a-list-item"
 >
-  <!-- @slot Item content -->
+  <!-- @slot for list item content -->
   <slot />
 </component>

src/atoms/list-item/ListItem.js

@@ -0,0 +1,23 @@
+export default {
+  props: {
+    /**
+     * To use another tag instead of `li`
+     */
+    tag: {
+      type: String,
+      default: 'li'
+    }
+  },
+  computed: {
+    tagClassName () {
+      switch (this.tag) {
+        case 'dt':
+          return 'a-list-item--label'
+        case 'dd':
+          return 'a-list-item--value'
+        default:
+          return ''
+      }
+    }
+  }
+}

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

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

src/atoms/list/List.css

@@ -0,0 +1,42 @@
+.a-list {
+  @apply m-0 p-0;
+  @apply list-none;
+  @apply text-primary;
+}
+
+.a-list--horizontal {
+  @apply flex;
+  @apply flex-row flex-wrap;
+}
+
+@screen md {
+  .a-list--horizontal {
+    @apply flex-no-wrap;
+  }
+}
+
+.a-list--center {
+  @apply justify-center;
+  @apply text-center;
+}
+
+.a-list--native {
+  @apply list-disc;
+}
+
+.a-list--native.a-list--horizontal {
+  @apply list-none;
+}
+
+.a-list--divided > * {
+  @apply border-solid border-dark;
+  @apply border-b border-r-0;
+}
+
+.a-list--divided.a-list--horizontal > * {
+  @apply border-r border-b-0;
+}
+
+.a-list--divided > *:last-child {
+  @apply border-0;
+}

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

@@ -2,7 +2,7 @@
 export default {
   props: {
     /**
-     *  Tag
+     * To use another tag instead of `ul`
      */
     tag: {
       type: String,

src/atoms/list/List.selectors.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": ".a-list--horizontal",
+    "description": "Selector for applying horizontal styles"
+  },
+  {
+    "name": ".a-list--center",
+    "description": "Selector for applying center styles"
+  },
+  {
+    "name": ".a-list--native",
+    "description": "Selector for applying native styles"
+  },
+  {
+    "name": ".a-list--divided",
+    "description": "Selector for applying divided styles"
+  }
+]

src/atoms/list/List.stories.js

@@ -0,0 +1,74 @@
+import { select, text } from '@storybook/addon-knobs'
+
+import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import selectorsConfig from './List.selectors.json'
+
+import AList from './List.vue'
+import AListItem from '../list-item/ListItem.vue'
+
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
+
+export default {
+  title: 'Atoms/List',
+  component: AList
+}
+
+export const Default = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
+    }
+  },
+  template: `
+      <a-list :class="classKnobs">
+        <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 Description = () => ({
+  components: { AList, AListItem },
+  props: {
+    tagKnobs: {
+      default: text('Tag', 'dl')
+    }
+  },
+  template: `
+    <a-list :tag="tagKnobs">
+      <a-list-item tag="dt">
+        Lorem ipsum
+      </a-list-item>
+      <a-list-item tag="dd">
+        Lorem ipsum value
+      </a-list-item>
+      <a-list-item tag="dt">
+        Lorem ipsum
+      </a-list-item>
+      <a-list-item tag="dd">
+        Lorem ipsum value
+      </a-list-item>
+    </a-list>
+  `
+})
+
+export const WithSlots = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
+    }
+  },
+  template: `
+    <a-list :class="classKnobs">
+    </a-list>
+  `
+})

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

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