From c19765cfe871490706b9a04c4c3c0c8690d8d753 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 3 Jul 2020 17:17:17 +0200
Subject: [PATCH 01/19] base css rewrite for list & list item

---
 src/atoms/list-item/ListItem.css     |  3 ++
 src/atoms/list-item/ListItem.html    |  7 +++
 src/atoms/list-item/ListItem.js      | 11 ++++
 src/atoms/list-item/ListItem.spec.js | 35 ++++++++++++
 src/atoms/list-item/ListItem.vue     | 13 +++++
 src/atoms/list/List.css              | 29 ++++++++++
 src/atoms/list/List.html             |  7 +++
 src/atoms/list/List.js               | 12 +++++
 src/atoms/list/List.selectors.json   | 14 +++++
 src/atoms/list/List.spec.js          | 35 ++++++++++++
 src/atoms/list/List.stories.js       | 79 ++++++++++++++++++++++++++++
 src/atoms/list/List.vue              | 13 +++++
 12 files changed, 258 insertions(+)
 create mode 100644 src/atoms/list-item/ListItem.css
 create mode 100644 src/atoms/list-item/ListItem.html
 create mode 100644 src/atoms/list-item/ListItem.js
 create mode 100644 src/atoms/list-item/ListItem.spec.js
 create mode 100644 src/atoms/list-item/ListItem.vue
 create mode 100644 src/atoms/list/List.css
 create mode 100644 src/atoms/list/List.html
 create mode 100644 src/atoms/list/List.js
 create mode 100644 src/atoms/list/List.selectors.json
 create mode 100644 src/atoms/list/List.spec.js
 create mode 100644 src/atoms/list/List.stories.js
 create mode 100644 src/atoms/list/List.vue

diff --git a/src/atoms/list-item/ListItem.css b/src/atoms/list-item/ListItem.css
new file mode 100644
index 000000000..4d5d99dbd
--- /dev/null
+++ b/src/atoms/list-item/ListItem.css
@@ -0,0 +1,3 @@
+.a-list-item {
+  @apply p-2;
+}
diff --git a/src/atoms/list-item/ListItem.html b/src/atoms/list-item/ListItem.html
new file mode 100644
index 000000000..096710eb3
--- /dev/null
+++ b/src/atoms/list-item/ListItem.html
@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-list-item"
+>
+  <!-- @slot for list item content -->
+  <slot />
+</component>
diff --git a/src/atoms/list-item/ListItem.js b/src/atoms/list-item/ListItem.js
new file mode 100644
index 000000000..c1820e97b
--- /dev/null
+++ b/src/atoms/list-item/ListItem.js
@@ -0,0 +1,11 @@
+export default {
+  props: {
+    /**
+     * To use another tag instead of `li`
+     */
+    tag: {
+      type: String,
+      default: 'li'
+    }
+  }
+}
diff --git a/src/atoms/list-item/ListItem.spec.js b/src/atoms/list-item/ListItem.spec.js
new file mode 100644
index 000000000..62234cbbc
--- /dev/null
+++ b/src/atoms/list-item/ListItem.spec.js
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import AListItem from './ListItem.vue'
+
+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)
+  })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(AListItem, {
+      slots: {
+        default: '<span>List item default text</span>'
+      }
+    })
+
+    expect(wrapper.find('.a-list-item > span').exists()).toBe(true)
+    expect(wrapper.find('.a-list-item > span').text()).toEqual('List item default text')
+  })
+
+  it('should be generated with the `dt` passed as tag', () => {
+    const wrapper = mount(AListItem, {
+      propsData: {
+        tag: 'dt'
+      }
+    })
+
+    expect(wrapper.is('dt')).toBe(true)
+    expect(wrapper.classes()).toContain('a-list-item')
+    expect(wrapper.props().tag).toBe('dt')
+  })
+})
diff --git a/src/atoms/list-item/ListItem.vue b/src/atoms/list-item/ListItem.vue
new file mode 100644
index 000000000..3caae23c2
--- /dev/null
+++ b/src/atoms/list-item/ListItem.vue
@@ -0,0 +1,13 @@
+<template src="./ListItem.html" />
+
+<script>
+import AListItem from './ListItem.js'
+
+export default {
+  name: 'AlpacaListItem',
+
+  mixins: [AListItem]
+}
+</script>
+
+<style lang="css" src="./ListItem.css" />
diff --git a/src/atoms/list/List.css b/src/atoms/list/List.css
new file mode 100644
index 000000000..ef6733e69
--- /dev/null
+++ b/src/atoms/list/List.css
@@ -0,0 +1,29 @@
+.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--divided {
+
+}
+
+.a-list--native {
+  
+}
diff --git a/src/atoms/list/List.html b/src/atoms/list/List.html
new file mode 100644
index 000000000..3e7bf0ba7
--- /dev/null
+++ b/src/atoms/list/List.html
@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-list"
+>
+  <!-- @slot List item -->
+  <slot />
+</component>
diff --git a/src/atoms/list/List.js b/src/atoms/list/List.js
new file mode 100644
index 000000000..fd5fed2ca
--- /dev/null
+++ b/src/atoms/list/List.js
@@ -0,0 +1,12 @@
+// @vue/component
+export default {
+  props: {
+    /**
+     *  To use another tag instead of `ul`
+     */
+    tag: {
+      type: String,
+      default: 'ul'
+    }
+  }
+}
diff --git a/src/atoms/list/List.selectors.json b/src/atoms/list/List.selectors.json
new file mode 100644
index 000000000..963214c54
--- /dev/null
+++ b/src/atoms/list/List.selectors.json
@@ -0,0 +1,14 @@
+[
+  {
+    "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"
+  }
+]
diff --git a/src/atoms/list/List.spec.js b/src/atoms/list/List.spec.js
new file mode 100644
index 000000000..12017d634
--- /dev/null
+++ b/src/atoms/list/List.spec.js
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import AList from './List.vue'
+
+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)
+  })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(AList, {
+      slots: {
+        default: '<li>List default text</li>'
+      }
+    })
+
+    expect(wrapper.find('.a-list > li').exists()).toBe(true)
+    expect(wrapper.find('.a-list > li').text()).toEqual('List default text')
+  })
+
+  it('should be generated with the `ol` passed as tag', () => {
+    const wrapper = mount(AList, {
+      propsData: {
+        tag: 'ol'
+      }
+    })
+
+    expect(wrapper.is('ol')).toBe(true)
+    expect(wrapper.classes()).toContain('a-list')
+    expect(wrapper.props().tag).toBe('ol')
+  })
+})
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
new file mode 100644
index 000000000..7e612bf24
--- /dev/null
+++ b/src/atoms/list/List.stories.js
@@ -0,0 +1,79 @@
+import { storiesOf } from '@storybook/vue'
+import { select } from '@storybook/addon-knobs'
+
+import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
+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'
+import AIcon from '../icon/Icon.vue'
+import AIconPerson from '../icon/templates/IconPerson.vue'
+import AIconCheck from '../icon/templates/IconCheck.vue'
+
+const info = `
+  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
+  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
+`
+
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
+
+storiesOf('Atoms/List', module)
+  .addParameters({ info })
+  .add('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>
+    `
+  }))
+  .add('With slots', () => ({
+    components: {
+      AList,
+      AListItem,
+      AIcon,
+      AIconPerson,
+      AIconCheck
+    },
+    props: {
+      classKnobs: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+    },
+    template: `
+      <a-list :class="classKnobs">
+        <a-list-item>
+          <a-icon title="Account icon">
+            <a-icon-person />
+          </a-icon>
+        </a-list-item>
+        <a-list-item>
+          <a-icon title="Check icon">
+            <a-icon-check />
+          </a-icon>
+        </a-list-item>
+        <a-list-item>
+          <a-icon title="Account icon">
+            <a-icon-person />
+          </a-icon>
+        </a-list-item>
+      </a-list>
+    `
+  }))
diff --git a/src/atoms/list/List.vue b/src/atoms/list/List.vue
new file mode 100644
index 000000000..47a2d2549
--- /dev/null
+++ b/src/atoms/list/List.vue
@@ -0,0 +1,13 @@
+<template src="./List.html" />
+
+<script>
+import AList from './List.js'
+
+export default {
+  name: 'AlpacaList',
+
+  mixins: [AList]
+}
+</script>
+
+<style lang="css" src="./List.css" />

From 9f68f96a83ef2c1e70fc0cc4a2f0292690644710 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 3 Jul 2020 17:19:53 +0200
Subject: [PATCH 02/19] remove list & list item from _src

---
 _src /atoms/list-item/ListItem.html    |  7 ---
 _src /atoms/list-item/ListItem.js      | 11 ----
 _src /atoms/list-item/ListItem.scss    |  7 ---
 _src /atoms/list-item/ListItem.spec.js | 35 ------------
 _src /atoms/list-item/ListItem.vue     | 13 -----
 _src /atoms/list/List.html             |  7 ---
 _src /atoms/list/List.js               | 12 ----
 _src /atoms/list/List.scss             | 14 -----
 _src /atoms/list/List.selectors.json   |  6 --
 _src /atoms/list/List.spec.js          | 35 ------------
 _src /atoms/list/List.stories.js       | 79 --------------------------
 _src /atoms/list/List.vue              | 13 -----
 12 files changed, 239 deletions(-)
 delete mode 100644 _src /atoms/list-item/ListItem.html
 delete mode 100644 _src /atoms/list-item/ListItem.js
 delete mode 100644 _src /atoms/list-item/ListItem.scss
 delete mode 100644 _src /atoms/list-item/ListItem.spec.js
 delete mode 100644 _src /atoms/list-item/ListItem.vue
 delete mode 100644 _src /atoms/list/List.html
 delete mode 100644 _src /atoms/list/List.js
 delete mode 100644 _src /atoms/list/List.scss
 delete mode 100644 _src /atoms/list/List.selectors.json
 delete mode 100644 _src /atoms/list/List.spec.js
 delete mode 100644 _src /atoms/list/List.stories.js
 delete mode 100644 _src /atoms/list/List.vue

diff --git a/_src /atoms/list-item/ListItem.html b/_src /atoms/list-item/ListItem.html
deleted file mode 100644
index 351521439..000000000
--- a/_src /atoms/list-item/ListItem.html	
+++ /dev/null
@@ -1,7 +0,0 @@
-<component
-  :is="tag"
-  class="a-list-item"
->
-  <!-- @slot Item content -->
-  <slot />
-</component>
diff --git a/_src /atoms/list-item/ListItem.js b/_src /atoms/list-item/ListItem.js
deleted file mode 100644
index 63074e5bb..000000000
--- a/_src /atoms/list-item/ListItem.js	
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  props: {
-    /**
-     * List items tag
-     */
-    tag: {
-      type: String,
-      default: 'li'
-    }
-  }
-}
diff --git a/_src /atoms/list-item/ListItem.scss b/_src /atoms/list-item/ListItem.scss
deleted file mode 100644
index 04fa859fc..000000000
--- a/_src /atoms/list-item/ListItem.scss	
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../../../assets/styles/globals';
-
-$list-item-padding: $spacer !default;
-
-.a-list-item {
-  padding: $list-item-padding;
-}
diff --git a/_src /atoms/list-item/ListItem.spec.js b/_src /atoms/list-item/ListItem.spec.js
deleted file mode 100644
index 62234cbbc..000000000
--- a/_src /atoms/list-item/ListItem.spec.js	
+++ /dev/null
@@ -1,35 +0,0 @@
-import { mount } from '@vue/test-utils'
-import AListItem from './ListItem.vue'
-
-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)
-  })
-
-  it('renders slot text when passed', () => {
-    const wrapper = mount(AListItem, {
-      slots: {
-        default: '<span>List item default text</span>'
-      }
-    })
-
-    expect(wrapper.find('.a-list-item > span').exists()).toBe(true)
-    expect(wrapper.find('.a-list-item > span').text()).toEqual('List item default text')
-  })
-
-  it('should be generated with the `dt` passed as tag', () => {
-    const wrapper = mount(AListItem, {
-      propsData: {
-        tag: 'dt'
-      }
-    })
-
-    expect(wrapper.is('dt')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list-item')
-    expect(wrapper.props().tag).toBe('dt')
-  })
-})
diff --git a/_src /atoms/list-item/ListItem.vue b/_src /atoms/list-item/ListItem.vue
deleted file mode 100644
index 66ebece36..000000000
--- a/_src /atoms/list-item/ListItem.vue	
+++ /dev/null
@@ -1,13 +0,0 @@
-<template src="./ListItem.html" />
-
-<script>
-import AListItem from './ListItem.js'
-
-export default {
-  name: 'AlpacaListItem',
-
-  mixins: [AListItem]
-}
-</script>
-
-<style lang="scss" src="./ListItem.scss" />
diff --git a/_src /atoms/list/List.html b/_src /atoms/list/List.html
deleted file mode 100644
index 3e7bf0ba7..000000000
--- a/_src /atoms/list/List.html	
+++ /dev/null
@@ -1,7 +0,0 @@
-<component
-  :is="tag"
-  class="a-list"
->
-  <!-- @slot List item -->
-  <slot />
-</component>
diff --git a/_src /atoms/list/List.js b/_src /atoms/list/List.js
deleted file mode 100644
index cd9c462ba..000000000
--- a/_src /atoms/list/List.js	
+++ /dev/null
@@ -1,12 +0,0 @@
-// @vue/component
-export default {
-  props: {
-    /**
-     *  Tag
-     */
-    tag: {
-      type: String,
-      default: 'ul'
-    }
-  }
-}
diff --git a/_src /atoms/list/List.scss b/_src /atoms/list/List.scss
deleted file mode 100644
index 6e19d9db7..000000000
--- a/_src /atoms/list/List.scss	
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '../../../assets/styles/globals';
-
-$list__style: none !default;
-
-.a-list {
-  margin: 0;
-  padding: 0;
-  list-style: $list__style;
-
-  &--horizontal {
-    display: flex;
-    flex-flow: row wrap;
-  }
-}
diff --git a/_src /atoms/list/List.selectors.json b/_src /atoms/list/List.selectors.json
deleted file mode 100644
index 3246a5d71..000000000
--- a/_src /atoms/list/List.selectors.json	
+++ /dev/null
@@ -1,6 +0,0 @@
-[
-  {
-    "name": ".a-list--horizontal",
-    "description": "Selector for applying horizontal styles"
-  }
-]
diff --git a/_src /atoms/list/List.spec.js b/_src /atoms/list/List.spec.js
deleted file mode 100644
index 12017d634..000000000
--- a/_src /atoms/list/List.spec.js	
+++ /dev/null
@@ -1,35 +0,0 @@
-import { mount } from '@vue/test-utils'
-import AList from './List.vue'
-
-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)
-  })
-
-  it('renders slot text when passed', () => {
-    const wrapper = mount(AList, {
-      slots: {
-        default: '<li>List default text</li>'
-      }
-    })
-
-    expect(wrapper.find('.a-list > li').exists()).toBe(true)
-    expect(wrapper.find('.a-list > li').text()).toEqual('List default text')
-  })
-
-  it('should be generated with the `ol` passed as tag', () => {
-    const wrapper = mount(AList, {
-      propsData: {
-        tag: 'ol'
-      }
-    })
-
-    expect(wrapper.is('ol')).toBe(true)
-    expect(wrapper.classes()).toContain('a-list')
-    expect(wrapper.props().tag).toBe('ol')
-  })
-})
diff --git a/_src /atoms/list/List.stories.js b/_src /atoms/list/List.stories.js
deleted file mode 100644
index 7e612bf24..000000000
--- a/_src /atoms/list/List.stories.js	
+++ /dev/null
@@ -1,79 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { select } from '@storybook/addon-knobs'
-
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
-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'
-import AIcon from '../icon/Icon.vue'
-import AIconPerson from '../icon/templates/IconPerson.vue'
-import AIconCheck from '../icon/templates/IconCheck.vue'
-
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
-
-const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
-
-storiesOf('Atoms/List', module)
-  .addParameters({ info })
-  .add('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>
-    `
-  }))
-  .add('With slots', () => ({
-    components: {
-      AList,
-      AListItem,
-      AIcon,
-      AIconPerson,
-      AIconCheck
-    },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      }
-    },
-    template: `
-      <a-list :class="classKnobs">
-        <a-list-item>
-          <a-icon title="Account icon">
-            <a-icon-person />
-          </a-icon>
-        </a-list-item>
-        <a-list-item>
-          <a-icon title="Check icon">
-            <a-icon-check />
-          </a-icon>
-        </a-list-item>
-        <a-list-item>
-          <a-icon title="Account icon">
-            <a-icon-person />
-          </a-icon>
-        </a-list-item>
-      </a-list>
-    `
-  }))
diff --git a/_src /atoms/list/List.vue b/_src /atoms/list/List.vue
deleted file mode 100644
index 0ea78609e..000000000
--- a/_src /atoms/list/List.vue	
+++ /dev/null
@@ -1,13 +0,0 @@
-<template src="./List.html" />
-
-<script>
-import AList from './List.js'
-
-export default {
-  name: 'AlpacaList',
-
-  mixins: [AList]
-}
-</script>
-
-<style lang="scss" src="./List.scss" />

From 405d9a86f878398c9bbaf80a62f5802e03c3e97d Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 17 Jul 2020 13:40:29 +0200
Subject: [PATCH 03/19] add divided, native styles & description list

---
 src/atoms/list-item/ListItem.css   |  16 ++++
 src/atoms/list-item/ListItem.html  |   1 +
 src/atoms/list-item/ListItem.js    |  12 +++
 src/atoms/list/List.css            |  19 ++++-
 src/atoms/list/List.js             |   2 +-
 src/atoms/list/List.selectors.json |   4 +
 src/atoms/list/List.stories.js     | 129 ++++++++++++++++-------------
 7 files changed, 121 insertions(+), 62 deletions(-)

diff --git a/src/atoms/list-item/ListItem.css b/src/atoms/list-item/ListItem.css
index 4d5d99dbd..a1d8ad692 100644
--- a/src/atoms/list-item/ListItem.css
+++ b/src/atoms/list-item/ListItem.css
@@ -1,3 +1,19 @@
 .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;
+}
diff --git a/src/atoms/list-item/ListItem.html b/src/atoms/list-item/ListItem.html
index 096710eb3..3079bfdb5 100644
--- a/src/atoms/list-item/ListItem.html
+++ b/src/atoms/list-item/ListItem.html
@@ -1,5 +1,6 @@
 <component
   :is="tag"
+  :class="tagClassName"
   class="a-list-item"
 >
   <!-- @slot for list item content -->
diff --git a/src/atoms/list-item/ListItem.js b/src/atoms/list-item/ListItem.js
index c1820e97b..34bf08a84 100644
--- a/src/atoms/list-item/ListItem.js
+++ b/src/atoms/list-item/ListItem.js
@@ -7,5 +7,17 @@ export default {
       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 ''
+      }
+    }
   }
 }
diff --git a/src/atoms/list/List.css b/src/atoms/list/List.css
index ef6733e69..0368b14c3 100644
--- a/src/atoms/list/List.css
+++ b/src/atoms/list/List.css
@@ -20,10 +20,23 @@
   @apply text-center;
 }
 
-.a-list--divided {
+.a-list--native {
+  @apply list-disc;
+}
 
+.a-list--native.a-list--horizontal {
+  @apply list-none;
 }
 
-.a-list--native {
-  
+.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;
 }
diff --git a/src/atoms/list/List.js b/src/atoms/list/List.js
index fd5fed2ca..d58a17390 100644
--- a/src/atoms/list/List.js
+++ b/src/atoms/list/List.js
@@ -2,7 +2,7 @@
 export default {
   props: {
     /**
-     *  To use another tag instead of `ul`
+     * To use another tag instead of `ul`
      */
     tag: {
       type: String,
diff --git a/src/atoms/list/List.selectors.json b/src/atoms/list/List.selectors.json
index 963214c54..95e9fdc2e 100644
--- a/src/atoms/list/List.selectors.json
+++ b/src/atoms/list/List.selectors.json
@@ -10,5 +10,9 @@
   {
     "name": ".a-list--native",
     "description": "Selector for applying native styles"
+  },
+  {
+    "name": ".a-list--divided",
+    "description": "Selector for applying divided styles"
   }
 ]
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 7e612bf24..50ef7750b 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,36 +1,26 @@
-import { storiesOf } from '@storybook/vue'
-import { select } from '@storybook/addon-knobs'
+import { select, text } from '@storybook/addon-knobs'
 
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
 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'
-import AIcon from '../icon/Icon.vue'
-import AIconPerson from '../icon/templates/IconPerson.vue'
-import AIconCheck from '../icon/templates/IconCheck.vue'
-
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
 
 const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
-storiesOf('Atoms/List', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: {
-      AList,
-      AListItem
-    },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      }
-    },
-    template: `
+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
@@ -43,37 +33,60 @@ storiesOf('Atoms/List', module)
         </a-list-item>
       </a-list>
     `
-  }))
-  .add('With slots', () => ({
-    components: {
-      AList,
-      AListItem,
-      AIcon,
-      AIconPerson,
-      AIconCheck
-    },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      }
-    },
-    template: `
-      <a-list :class="classKnobs">
-        <a-list-item>
-          <a-icon title="Account icon">
-            <a-icon-person />
-          </a-icon>
-        </a-list-item>
-        <a-list-item>
-          <a-icon title="Check icon">
-            <a-icon-check />
-          </a-icon>
-        </a-list-item>
-        <a-list-item>
-          <a-icon title="Account icon">
-            <a-icon-person />
-          </a-icon>
-        </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>
+  `
+})
+
+// <a-list :class="classKnobs">
+// <a-list-item>
+//   <a-icon title="Account icon">
+//     <a-icon-person />
+//   </a-icon>
+// </a-list-item>
+// <a-list-item>
+//   <a-icon title="Check icon">
+//     <a-icon-check />
+//   </a-icon>
+// </a-list-item>
+// <a-list-item>
+//   <a-icon title="Account icon">
+//     <a-icon-person />
+//   </a-icon>
+// </a-list-item>
+// </a-list>

From 578b0784eddcb780694a6bfebde8bed90ec60e09 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 31 Jul 2020 12:48:21 +0200
Subject: [PATCH 04/19] remove lang tag

---
 src/atoms/list-item/ListItem.vue | 3 +--
 src/atoms/list/List.vue          | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/atoms/list-item/ListItem.vue b/src/atoms/list-item/ListItem.vue
index 3caae23c2..89fc6e1e1 100644
--- a/src/atoms/list-item/ListItem.vue
+++ b/src/atoms/list-item/ListItem.vue
@@ -5,9 +5,8 @@ import AListItem from './ListItem.js'
 
 export default {
   name: 'AlpacaListItem',
-
   mixins: [AListItem]
 }
 </script>
 
-<style lang="css" src="./ListItem.css" />
+<style src="./ListItem.css" />
diff --git a/src/atoms/list/List.vue b/src/atoms/list/List.vue
index 47a2d2549..931284fcb 100644
--- a/src/atoms/list/List.vue
+++ b/src/atoms/list/List.vue
@@ -5,9 +5,8 @@ import AList from './List.js'
 
 export default {
   name: 'AlpacaList',
-
   mixins: [AList]
 }
 </script>
 
-<style lang="css" src="./List.css" />
+<style src="./List.css" />

From 7e170c33284ab4b30cb82ae93b7055770d13a5d6 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 31 Jul 2020 14:44:43 +0200
Subject: [PATCH 05/19] update list

---
 src/atoms/list-item/ListItem.css |  1 +
 src/atoms/list/List.css          |  2 +-
 src/atoms/list/List.stories.js   | 18 ------------------
 3 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/src/atoms/list-item/ListItem.css b/src/atoms/list-item/ListItem.css
index a1d8ad692..288c2c6e3 100644
--- a/src/atoms/list-item/ListItem.css
+++ b/src/atoms/list-item/ListItem.css
@@ -4,6 +4,7 @@
 
 .a-list-item--label {
   float: left;
+
   @apply clear-left;
   @apply table-cell;
   @apply pt-0 pr-2 pb-2 pl-0;
diff --git a/src/atoms/list/List.css b/src/atoms/list/List.css
index 0368b14c3..5c72aa98f 100644
--- a/src/atoms/list/List.css
+++ b/src/atoms/list/List.css
@@ -29,7 +29,7 @@
 }
 
 .a-list--divided > * {
-  @apply  border-solid border-dark;
+  @apply border-solid border-dark;
   @apply border-b border-r-0;
 }
 
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 50ef7750b..632bba5f6 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -72,21 +72,3 @@ export const WithSlots = () => ({
     </a-list>
   `
 })
-
-// <a-list :class="classKnobs">
-// <a-list-item>
-//   <a-icon title="Account icon">
-//     <a-icon-person />
-//   </a-icon>
-// </a-list-item>
-// <a-list-item>
-//   <a-icon title="Check icon">
-//     <a-icon-check />
-//   </a-icon>
-// </a-list-item>
-// <a-list-item>
-//   <a-icon title="Account icon">
-//     <a-icon-person />
-//   </a-icon>
-// </a-list-item>
-// </a-list>

From f37f32e7902669959eb2c1d74beafba180ca9b45 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 28 Aug 2020 15:30:25 +0200
Subject: [PATCH 06/19] update css, add multiselect to list BEM modifiers

---
 src/atoms/list/List.css                  |  9 +--------
 src/atoms/list/List.stories.js           | 10 +++++-----
 utils/helpers/get-select-knobs-config.js |  8 ++++++++
 3 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 utils/helpers/get-select-knobs-config.js

diff --git a/src/atoms/list/List.css b/src/atoms/list/List.css
index 5c72aa98f..74ffd12b0 100644
--- a/src/atoms/list/List.css
+++ b/src/atoms/list/List.css
@@ -1,7 +1,6 @@
 .a-list {
   @apply m-0 p-0;
-  @apply list-none;
-  @apply text-primary;
+  @apply list-none text-primary;
 }
 
 .a-list--horizontal {
@@ -9,12 +8,6 @@
   @apply flex-row flex-wrap;
 }
 
-@screen md {
-  .a-list--horizontal {
-    @apply flex-no-wrap;
-  }
-}
-
 .a-list--center {
   @apply justify-center;
   @apply text-center;
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 632bba5f6..3f8f98e79 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,12 +1,12 @@
-import { select, text } from '@storybook/addon-knobs'
+import { text, optionsKnob } from '@storybook/addon-knobs'
 
-import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import getSelectKnobsConfig from '@utils/helpers/get-select-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)
+const classKnobsConfig = getSelectKnobsConfig(selectorsConfig)
 
 export default {
   title: 'Atoms/List',
@@ -17,7 +17,7 @@ export const Default = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: select('BEM Modifier', classKnobsConfig)
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
     }
   },
   template: `
@@ -64,7 +64,7 @@ export const WithSlots = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: select('BEM Modifier', classKnobsConfig)
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
     }
   },
   template: `
diff --git a/utils/helpers/get-select-knobs-config.js b/utils/helpers/get-select-knobs-config.js
new file mode 100644
index 000000000..59c9e1e8a
--- /dev/null
+++ b/utils/helpers/get-select-knobs-config.js
@@ -0,0 +1,8 @@
+export default (items) => {
+  items = items.map((item) => item.name.replace('.', ''))
+  items.unshift(null)
+  return items.reduce((obj, item) => {
+    obj[item] = item
+    return obj
+  }, {})
+}

From bc827a534fe4639b0d7035dfecf6df1f870ac8ad Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 28 Aug 2020 16:38:15 +0200
Subject: [PATCH 07/19] update tests

---
 src/atoms/list/List.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/atoms/list/List.spec.js b/src/atoms/list/List.spec.js
index 12017d634..f33970562 100644
--- a/src/atoms/list/List.spec.js
+++ b/src/atoms/list/List.spec.js
@@ -5,7 +5,7 @@ describe('List', () => {
   it('has default structure', () => {
     const wrapper = mount(AList)
 
-    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.element.tagName).toBe('UL')
     expect(wrapper.classes()).toContain('a-list')
     expect(wrapper.classes().length).toBe(1)
   })
@@ -28,7 +28,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')
   })

From e8f1d7cfae961a8386edced8510fbc5901e4d8d3 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 11 Sep 2020 15:24:58 +0200
Subject: [PATCH 08/19] enable float

---
 src/atoms/list-item/ListItem.css | 6 ++----
 tailwind.config.js               | 4 +---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/atoms/list-item/ListItem.css b/src/atoms/list-item/ListItem.css
index 288c2c6e3..82d183c91 100644
--- a/src/atoms/list-item/ListItem.css
+++ b/src/atoms/list-item/ListItem.css
@@ -3,11 +3,9 @@
 }
 
 .a-list-item--label {
-  float: left;
-
-  @apply clear-left;
+  @apply float-left clear-left;
   @apply table-cell;
-  @apply pt-0 pr-2 pb-2 pl-0;
+  @apply pt-0 pb-2 pl-0;
 }
 
 .a-list-item--label::after {
diff --git a/tailwind.config.js b/tailwind.config.js
index cfca7f8c1..551a724e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,7 +71,5 @@ module.exports = {
   },
   variants: {},
   plugins: [],
-  corePlugins: {
-    float: false
-  }
+  corePlugins: {}
 }

From 0112b7c9a649e9282e714789f9edc743621d1579 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 11 Sep 2020 15:25:25 +0200
Subject: [PATCH 09/19] remove null from select options list

---
 utils/helpers/get-select-knobs-config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/utils/helpers/get-select-knobs-config.js b/utils/helpers/get-select-knobs-config.js
index 59c9e1e8a..66cd92505 100644
--- a/utils/helpers/get-select-knobs-config.js
+++ b/utils/helpers/get-select-knobs-config.js
@@ -1,6 +1,5 @@
 export default (items) => {
   items = items.map((item) => item.name.replace('.', ''))
-  items.unshift(null)
   return items.reduce((obj, item) => {
     obj[item] = item
     return obj

From 54bb7357f24f4786a4a89926a2470247b27842ee Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 11 Sep 2020 15:42:06 +0200
Subject: [PATCH 10/19] add stories for modifiers and slots

---
 src/atoms/list/List.stories.js | 136 +++++++++++++++++++++++++++++----
 1 file changed, 121 insertions(+), 15 deletions(-)

diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 3f8f98e79..461416093 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,13 +1,32 @@
-import { text, optionsKnob } from '@storybook/addon-knobs'
+import { optionsKnob } from '@storybook/addon-knobs'
 
 import getSelectKnobsConfig from '@utils/helpers/get-select-knobs-config.js'
 import selectorsConfig from './List.selectors.json'
 
 import AList from './List.vue'
 import AListItem from '../list-item/ListItem.vue'
+import AIcon from '../icon/Icon.vue'
+import AIconPerson from '../icon/templates/IconPerson.vue'
+import AIconCheck from '../icon/templates/IconCheck.vue'
+import AIconPhone from '../icon/templates/IconPhone.vue'
+import ALink from '../link/Link.vue'
 
 const classKnobsConfig = getSelectKnobsConfig(selectorsConfig)
 
+const basicTemplate = `
+  <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 default {
   title: 'Atoms/List',
   component: AList
@@ -15,13 +34,8 @@ export default {
 
 export const Default = () => ({
   components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
-    }
-  },
   template: `
-      <a-list :class="classKnobs">
+      <a-list>
         <a-list-item>
           Lorem ipsum
         </a-list-item>
@@ -35,15 +49,70 @@ export const Default = () => ({
     `
 })
 
-export const Description = () => ({
+export const Native = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--native', { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
+})
+
+export const Horizontal = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--horizontal', { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
+})
+
+export const Divided = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--divided', { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
+})
+
+export const Centered = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--center', { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
+})
+
+export const CenteredHorizontal = () => ({
   components: { AList, AListItem },
   props: {
-    tagKnobs: {
-      default: text('Tag', 'dl')
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--center', 'a-list--horizontal'], { display: 'multi-select' })
     }
   },
+  template: basicTemplate
+})
+
+export const DividedHorizontal = () => ({
+  components: { AList, AListItem },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--horizontal', 'a-list--divided'], { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
+})
+
+export const Description = () => ({
+  components: { AList, AListItem },
   template: `
-    <a-list :tag="tagKnobs">
+    <a-list tag="dl">
       <a-list-item tag="dt">
         Lorem ipsum
       </a-list-item>
@@ -60,15 +129,52 @@ export const Description = () => ({
   `
 })
 
-export const WithSlots = () => ({
-  components: { AList, AListItem },
+export const WithLinks = () => ({
+  components: { AList, AListItem, ALink },
   props: {
     classKnobs: {
       default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
     }
   },
   template: `
-    <a-list :class="classKnobs">
-    </a-list>
+  <a-list :class="classKnobs">
+    <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 WithIcons = () => ({
+  components: { AList, AListItem, AIcon, AIconPerson, AIconCheck, AIconPhone },
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
+    }
+  },
+  template: `
+  <a-list :class="classKnobs">
+    <a-list-item>
+      <a-icon title="Account icon">
+        <a-icon-person />
+      </a-icon>
+    </a-list-item>
+    <a-list-item>
+      <a-icon title="Check icon">
+        <a-icon-check />
+      </a-icon>
+    </a-list-item>
+    <a-list-item>
+      <a-icon title="Phone icon">
+        <a-icon-phone />
+      </a-icon>
+    </a-list-item>
+  </a-list>
   `
 })

From 289021439fbe42281d99d9c9d6ad8e090981cd5f Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 9 Oct 2020 10:13:59 +0200
Subject: [PATCH 11/19] default select values

---
 src/atoms/list/List.stories.js | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 461416093..8b5f43634 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -34,26 +34,19 @@ export default {
 
 export const Default = () => ({
   components: { AList, AListItem },
-  template: `
-      <a-list>
-        <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>
-    `
+  props: {
+    classKnobs: {
+      default: optionsKnob('BEM Modifier', classKnobsConfig, [], { display: 'multi-select' })
+    }
+  },
+  template: basicTemplate
 })
 
 export const Native = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--native', { display: 'multi-select' })
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--native'], { display: 'multi-select' })
     }
   },
   template: basicTemplate
@@ -63,7 +56,7 @@ export const Horizontal = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--horizontal', { display: 'multi-select' })
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--horizontal'], { display: 'multi-select' })
     }
   },
   template: basicTemplate
@@ -73,7 +66,7 @@ export const Divided = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--divided', { display: 'multi-select' })
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--divided'], { display: 'multi-select' })
     }
   },
   template: basicTemplate
@@ -83,7 +76,7 @@ export const Centered = () => ({
   components: { AList, AListItem },
   props: {
     classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'a-list--center', { display: 'multi-select' })
+      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--center'], { display: 'multi-select' })
     }
   },
   template: basicTemplate
@@ -133,7 +126,7 @@ export const WithLinks = () => ({
   components: { AList, AListItem, ALink },
   props: {
     classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
+      default: optionsKnob('BEM Modifier', classKnobsConfig, [], { display: 'multi-select' })
     }
   },
   template: `

From c28a27db30efb1ff07e98918985314e3a75f37d9 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 21 May 2021 13:17:32 +0200
Subject: [PATCH 12/19] update list component

---
 src/atoms/list/List.css            |  35 -----
 src/atoms/list/List.html           |   2 +-
 src/atoms/list/List.js             |  43 +++++-
 src/atoms/list/List.selectors.json |  18 ---
 src/atoms/list/List.spec.js        |   2 -
 src/atoms/list/List.stories.js     | 221 ++++++++++++-----------------
 src/atoms/list/List.vue            |   2 -
 7 files changed, 134 insertions(+), 189 deletions(-)
 delete mode 100644 src/atoms/list/List.css
 delete mode 100644 src/atoms/list/List.selectors.json

diff --git a/src/atoms/list/List.css b/src/atoms/list/List.css
deleted file mode 100644
index 74ffd12b0..000000000
--- a/src/atoms/list/List.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.a-list {
-  @apply m-0 p-0;
-  @apply list-none text-primary;
-}
-
-.a-list--horizontal {
-  @apply flex;
-  @apply flex-row flex-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;
-}
diff --git a/src/atoms/list/List.html b/src/atoms/list/List.html
index 3e7bf0ba7..a0f7ddf55 100644
--- a/src/atoms/list/List.html
+++ b/src/atoms/list/List.html
@@ -1,6 +1,6 @@
 <component
   :is="tag"
-  class="a-list"
+  :class="getClass('list')"
 >
   <!-- @slot List item -->
   <slot />
diff --git a/src/atoms/list/List.js b/src/atoms/list/List.js
index d58a17390..59e28dce6 100644
--- a/src/atoms/list/List.js
+++ b/src/atoms/list/List.js
@@ -1,5 +1,7 @@
-// @vue/component
+import getClass from '../../../utils/helpers/get-class.js'
+
 export default {
+  mixins: [getClass],
   props: {
     /**
      * To use another tag instead of `ul`
@@ -8,5 +10,44 @@ export default {
       type: String,
       default: 'ul'
     }
+  },
+  data () {
+    return {
+      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'
+          ]
+        }
+      }
+    }
   }
 }
diff --git a/src/atoms/list/List.selectors.json b/src/atoms/list/List.selectors.json
deleted file mode 100644
index 95e9fdc2e..000000000
--- a/src/atoms/list/List.selectors.json
+++ /dev/null
@@ -1,18 +0,0 @@
-[
-  {
-    "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"
-  }
-]
diff --git a/src/atoms/list/List.spec.js b/src/atoms/list/List.spec.js
index f33970562..c9d0e993c 100644
--- a/src/atoms/list/List.spec.js
+++ b/src/atoms/list/List.spec.js
@@ -6,8 +6,6 @@ describe('List', () => {
     const wrapper = mount(AList)
 
     expect(wrapper.element.tagName).toBe('UL')
-    expect(wrapper.classes()).toContain('a-list')
-    expect(wrapper.classes().length).toBe(1)
   })
 
   it('renders slot text when passed', () => {
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 8b5f43634..9ae148ffc 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,109 +1,64 @@
-import { optionsKnob } from '@storybook/addon-knobs'
-
-import getSelectKnobsConfig from '@utils/helpers/get-select-knobs-config.js'
-import selectorsConfig from './List.selectors.json'
-
 import AList from './List.vue'
 import AListItem from '../list-item/ListItem.vue'
+import ALink from '../link/Link.vue'
 import AIcon from '../icon/Icon.vue'
 import AIconPerson from '../icon/templates/IconPerson.vue'
 import AIconCheck from '../icon/templates/IconCheck.vue'
 import AIconPhone from '../icon/templates/IconPhone.vue'
-import ALink from '../link/Link.vue'
-
-const classKnobsConfig = getSelectKnobsConfig(selectorsConfig)
-
-const basicTemplate = `
-  <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 default {
   title: 'Atoms/List',
-  component: AList
-}
-
-export const Default = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, [], { display: 'multi-select' })
+  component: AList,
+  argTypes: {
+    tag: {
+      control: {
+        type: 'text'
+      }
+    },
+    variant: {
+      control: {
+        type: 'multi-select',
+        options: [
+          'primary',
+          'native',
+          'horizontal',
+          'divided',
+          'centered',
+          'divided-horizontal'
+        ]
+      }
     }
-  },
-  template: basicTemplate
-})
-
-export const Native = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--native'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
-})
-
-export const Horizontal = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--horizontal'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
-})
-
-export const Divided = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--divided'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
-})
-
-export const Centered = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--center'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
-})
+  }
+}
 
-export const CenteredHorizontal = () => ({
+// base list
+const BaseTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--center', 'a-list--horizontal'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
+  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 DividedHorizontal = () => ({
-  components: { AList, AListItem },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, ['a-list--horizontal', 'a-list--divided'], { display: 'multi-select' })
-    }
-  },
-  template: basicTemplate
-})
+export const Default = BaseTemplate.bind({})
 
-export const Description = () => ({
+// description list
+const DescriptionTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem },
+  props: Object.keys(argTypes),
   template: `
     <a-list tag="dl">
       <a-list-item tag="dt">
@@ -122,52 +77,58 @@ export const Description = () => ({
   `
 })
 
-export const WithLinks = () => ({
+export const Description = DescriptionTemplate.bind({})
+
+// with links list
+const WithLinksTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem, ALink },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, [], { display: 'multi-select' })
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
-  <a-list :class="classKnobs">
-    <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>
+    <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 WithIcons = () => ({
+export const WithLinks = WithLinksTemplate.bind({})
+
+// with icons list
+const WithIconsTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem, AIcon, AIconPerson, AIconCheck, AIconPhone },
-  props: {
-    classKnobs: {
-      default: optionsKnob('BEM Modifier', classKnobsConfig, 'null', { display: 'multi-select' })
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
-  <a-list :class="classKnobs">
-    <a-list-item>
-      <a-icon title="Account icon">
-        <a-icon-person />
-      </a-icon>
-    </a-list-item>
-    <a-list-item>
-      <a-icon title="Check icon">
-        <a-icon-check />
-      </a-icon>
-    </a-list-item>
-    <a-list-item>
-      <a-icon title="Phone icon">
-        <a-icon-phone />
-      </a-icon>
-    </a-list-item>
-  </a-list>
+    <a-list
+      :tag="tag"
+      :variant="variant"
+    >
+      <a-list-item>
+        <a-icon title="Account icon">
+          <a-icon-person />
+        </a-icon>
+      </a-list-item>
+      <a-list-item>
+        <a-icon title="Check icon">
+          <a-icon-check />
+        </a-icon>
+      </a-list-item>
+      <a-list-item>
+        <a-icon title="Phone icon">
+          <a-icon-phone />
+        </a-icon>
+      </a-list-item>
+    </a-list>
   `
 })
+
+export const WithIcons = WithIconsTemplate.bind({})
diff --git a/src/atoms/list/List.vue b/src/atoms/list/List.vue
index 931284fcb..700d3a28b 100644
--- a/src/atoms/list/List.vue
+++ b/src/atoms/list/List.vue
@@ -8,5 +8,3 @@ export default {
   mixins: [AList]
 }
 </script>
-
-<style src="./List.css" />

From c871b45e571d620ac633f5bf0442f56320630dcb Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 21 May 2021 13:40:07 +0200
Subject: [PATCH 13/19] update list item

---
 src/atoms/list-item/ListItem.html    |  3 +-
 src/atoms/list-item/ListItem.js      | 20 ++++++------
 src/atoms/list-item/ListItem.spec.js |  6 ++--
 src/atoms/list-item/ListItem.vue     |  2 --
 src/atoms/list/List.stories.js       | 48 ++++++++++++++--------------
 5 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/atoms/list-item/ListItem.html b/src/atoms/list-item/ListItem.html
index 3079bfdb5..2b44f9664 100644
--- a/src/atoms/list-item/ListItem.html
+++ b/src/atoms/list-item/ListItem.html
@@ -1,7 +1,6 @@
 <component
   :is="tag"
-  :class="tagClassName"
-  class="a-list-item"
+  :class="getClass('list-item')"
 >
   <!-- @slot for list item content -->
   <slot />
diff --git a/src/atoms/list-item/ListItem.js b/src/atoms/list-item/ListItem.js
index 34bf08a84..f29d41d8e 100644
--- a/src/atoms/list-item/ListItem.js
+++ b/src/atoms/list-item/ListItem.js
@@ -1,4 +1,7 @@
+import getClass from '../../../utils/helpers/get-class.js'
+
 export default {
+  mixins: [getClass],
   props: {
     /**
      * To use another tag instead of `li`
@@ -8,15 +11,14 @@ export default {
       default: 'li'
     }
   },
-  computed: {
-    tagClassName () {
-      switch (this.tag) {
-        case 'dt':
-          return 'a-list-item--label'
-        case 'dd':
-          return 'a-list-item--value'
-        default:
-          return ''
+  data () {
+    return {
+      config: {
+        primary: {
+          'list-item': [
+            'p-2'
+          ]
+        }
       }
     }
   }
diff --git a/src/atoms/list-item/ListItem.spec.js b/src/atoms/list-item/ListItem.spec.js
index 62234cbbc..7d15cf84e 100644
--- a/src/atoms/list-item/ListItem.spec.js
+++ b/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', () => {
diff --git a/src/atoms/list-item/ListItem.vue b/src/atoms/list-item/ListItem.vue
index 89fc6e1e1..af5334349 100644
--- a/src/atoms/list-item/ListItem.vue
+++ b/src/atoms/list-item/ListItem.vue
@@ -8,5 +8,3 @@ export default {
   mixins: [AListItem]
 }
 </script>
-
-<style src="./ListItem.css" />
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 9ae148ffc..f3f984959 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -55,30 +55,6 @@ const BaseTemplate = (args, { argTypes }) => ({
 
 export const Default = BaseTemplate.bind({})
 
-// description list
-const DescriptionTemplate = (args, { argTypes }) => ({
-  components: { AList, AListItem },
-  props: Object.keys(argTypes),
-  template: `
-    <a-list tag="dl">
-      <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 Description = DescriptionTemplate.bind({})
-
 // with links list
 const WithLinksTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem, ALink },
@@ -132,3 +108,27 @@ const WithIconsTemplate = (args, { argTypes }) => ({
 })
 
 export const WithIcons = WithIconsTemplate.bind({})
+
+// description list
+// const DescriptionTemplate = (args, { argTypes }) => ({
+//   components: { AList, AListItem },
+//   props: Object.keys(argTypes),
+//   template: `
+//     <a-list tag="dl">
+//       <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 Description = DescriptionTemplate.bind({})

From 335e5fc9dcd252cf64c519a9e1a688d2a1d85ccd Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 21 May 2021 15:50:16 +0200
Subject: [PATCH 14/19] use aliases in imports

---
 src/atoms/list/List.stories.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index f3f984959..f17904f72 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,10 +1,10 @@
 import AList from './List.vue'
-import AListItem from '../list-item/ListItem.vue'
-import ALink from '../link/Link.vue'
-import AIcon from '../icon/Icon.vue'
-import AIconPerson from '../icon/templates/IconPerson.vue'
-import AIconCheck from '../icon/templates/IconCheck.vue'
-import AIconPhone from '../icon/templates/IconPhone.vue'
+import AListItem from '@atoms/list-item/ListItem.vue'
+import ALink from '@atoms/link/Link.vue'
+import AIcon from '@atoms/icon/Icon.vue'
+import AIconPerson from '@atoms/icon/templates/IconPerson.vue'
+import AIconCheck from '@atoms/icon/templates/IconCheck.vue'
+import AIconPhone from '@atoms/icon/templates/IconPhone.vue'
 
 export default {
   title: 'Atoms/List',

From d1205d4470e0c433b7812f96e37a7e10429ee382 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 2 Jul 2021 15:56:07 +0200
Subject: [PATCH 15/19] add alpaca mixin

---
 src/atoms/list-item/ListItem.js | 18 ++++----
 src/atoms/list/List.js          | 74 ++++++++++++++++-----------------
 utils/helpers/alpaca-ui.js      | 49 ++++++++++++++++++++++
 3 files changed, 91 insertions(+), 50 deletions(-)
 create mode 100644 utils/helpers/alpaca-ui.js

diff --git a/src/atoms/list-item/ListItem.js b/src/atoms/list-item/ListItem.js
index f29d41d8e..29c097bb4 100644
--- a/src/atoms/list-item/ListItem.js
+++ b/src/atoms/list-item/ListItem.js
@@ -1,7 +1,7 @@
-import getClass from '../../../utils/helpers/get-class.js'
+import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
 
 export default {
-  mixins: [getClass],
+  mixins: [alpacaUIMixin],
   props: {
     /**
      * To use another tag instead of `li`
@@ -11,15 +11,11 @@ export default {
       default: 'li'
     }
   },
-  data () {
-    return {
-      config: {
-        primary: {
-          'list-item': [
-            'p-2'
-          ]
-        }
-      }
+  config: {
+    base: {
+      'list-item': [
+        'p-2'
+      ]
     }
   }
 }
diff --git a/src/atoms/list/List.js b/src/atoms/list/List.js
index 59e28dce6..7d359c835 100644
--- a/src/atoms/list/List.js
+++ b/src/atoms/list/List.js
@@ -1,7 +1,7 @@
-import getClass from '../../../utils/helpers/get-class.js'
+import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
 
 export default {
-  mixins: [getClass],
+  mixins: [alpacaUIMixin],
   props: {
     /**
      * To use another tag instead of `ul`
@@ -11,43 +11,39 @@ export default {
       default: 'ul'
     }
   },
-  data () {
-    return {
-      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'
-          ]
-        }
-      }
+  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'
+      ]
     }
   }
 }
diff --git a/utils/helpers/alpaca-ui.js b/utils/helpers/alpaca-ui.js
new file mode 100644
index 000000000..22e8df01b
--- /dev/null
+++ b/utils/helpers/alpaca-ui.js
@@ -0,0 +1,49 @@
+var alpacaUIMixin = {
+  computed: {
+    alpacaConfig () {
+      const config = this.$options.config
+      return config
+    }
+  },
+  props: {
+    variant: {
+      type: [String, Array],
+      default: ''
+    }
+  },
+  methods: {
+    getClass (el) {
+      const styles = this.alpacaConfig
+      const baseStyles = styles.base
+      const primaryStyles = styles.primary
+      let variantStyles
+      let classes = []
+
+      if (baseStyles) {
+        classes = [...baseStyles[el]]
+      }
+
+      if (this.variant.length === 0) {
+        primaryStyles && classes.push(primaryStyles[el])
+      } else if (typeof this.variant === 'string' && this.variant !== 'none') {
+        variantStyles = styles[this.variant]
+        variantStyles && classes.push(variantStyles[el])
+      } else if (typeof this.variant === 'object') {
+        this.variant.forEach(item => {
+          variantStyles = styles[item]
+          variantStyles && classes.push(variantStyles[el])
+        })
+      }
+
+      return classes
+    }
+  }
+}
+exports.alpacaUIMixin = alpacaUIMixin
+
+function AlpacaUI (Vue) {
+  Vue.mixin(alpacaUIMixin)
+}
+
+var _default = AlpacaUI
+exports.default = _default

From 959cd430e479ab8e73948353010603b2dfc68b7a Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 16 Jul 2021 11:30:24 +0200
Subject: [PATCH 16/19] CR changes & styles update

---
 src/atoms/list-item/ListItem.js          |  2 +-
 src/atoms/list/List.js                   |  8 ++++----
 src/atoms/list/List.stories.js           | 24 ------------------------
 utils/helpers/alpaca-ui.js               | 11 ++---------
 utils/helpers/get-select-knobs-config.js |  7 -------
 5 files changed, 7 insertions(+), 45 deletions(-)
 delete mode 100644 utils/helpers/get-select-knobs-config.js

diff --git a/src/atoms/list-item/ListItem.js b/src/atoms/list-item/ListItem.js
index 29c097bb4..b59507b3a 100644
--- a/src/atoms/list-item/ListItem.js
+++ b/src/atoms/list-item/ListItem.js
@@ -1,4 +1,4 @@
-import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
+import alpacaUIMixin from '../../../utils/helpers/alpaca-ui.js'
 
 export default {
   mixins: [alpacaUIMixin],
diff --git a/src/atoms/list/List.js b/src/atoms/list/List.js
index 7d359c835..f8adbdd25 100644
--- a/src/atoms/list/List.js
+++ b/src/atoms/list/List.js
@@ -1,4 +1,4 @@
-import { alpacaUIMixin } from '../../../utils/helpers/alpaca-ui.js'
+import alpacaUIMixin from '../../../utils/helpers/alpaca-ui.js'
 
 export default {
   mixins: [alpacaUIMixin],
@@ -25,7 +25,7 @@ export default {
     },
     horizontal: {
       list: [
-        'flex', 'flex-row', 'flex-wrap'
+        'flex', 'flex-row', 'flex-wrap', 'space-x-6'
       ]
     },
     centered: {
@@ -36,13 +36,13 @@ export default {
     },
     divided: {
       list: [
-        'divide-y', 'divide-dark'
+        'divide-y', 'divide-gray-100'
       ]
     },
     'divided-horizontal': {
       list: [
         'flex', 'flex-row', 'flex-wrap',
-        'divide-x', 'divide-dark'
+        'divide-x', 'divide-gray-100'
       ]
     }
   }
diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index f17904f72..4ea46293a 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -108,27 +108,3 @@ const WithIconsTemplate = (args, { argTypes }) => ({
 })
 
 export const WithIcons = WithIconsTemplate.bind({})
-
-// description list
-// const DescriptionTemplate = (args, { argTypes }) => ({
-//   components: { AList, AListItem },
-//   props: Object.keys(argTypes),
-//   template: `
-//     <a-list tag="dl">
-//       <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 Description = DescriptionTemplate.bind({})
diff --git a/utils/helpers/alpaca-ui.js b/utils/helpers/alpaca-ui.js
index 22e8df01b..38ce56f78 100644
--- a/utils/helpers/alpaca-ui.js
+++ b/utils/helpers/alpaca-ui.js
@@ -1,7 +1,8 @@
-var alpacaUIMixin = {
+export default {
   computed: {
     alpacaConfig () {
       const config = this.$options.config
+
       return config
     }
   },
@@ -39,11 +40,3 @@ var alpacaUIMixin = {
     }
   }
 }
-exports.alpacaUIMixin = alpacaUIMixin
-
-function AlpacaUI (Vue) {
-  Vue.mixin(alpacaUIMixin)
-}
-
-var _default = AlpacaUI
-exports.default = _default
diff --git a/utils/helpers/get-select-knobs-config.js b/utils/helpers/get-select-knobs-config.js
deleted file mode 100644
index 66cd92505..000000000
--- a/utils/helpers/get-select-knobs-config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default (items) => {
-  items = items.map((item) => item.name.replace('.', ''))
-  return items.reduce((obj, item) => {
-    obj[item] = item
-    return obj
-  }, {})
-}

From a13c55b367b6626e70a0d5b43615a356c7f348ef Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 16 Jul 2021 11:40:18 +0200
Subject: [PATCH 17/19] update tests

---
 src/atoms/list-item/ListItem.spec.js | 5 ++---
 src/atoms/list/List.spec.js          | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/atoms/list-item/ListItem.spec.js b/src/atoms/list-item/ListItem.spec.js
index 7d15cf84e..83456931e 100644
--- a/src/atoms/list-item/ListItem.spec.js
+++ b/src/atoms/list-item/ListItem.spec.js
@@ -5,7 +5,7 @@ describe('ListItem', () => {
   it('has default structure', () => {
     const wrapper = mount(AListItem)
 
-    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.element.tagName).toBe('LI')
   })
 
   it('renders slot text when passed', () => {
@@ -26,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')
   })
 })
diff --git a/src/atoms/list/List.spec.js b/src/atoms/list/List.spec.js
index c9d0e993c..0976bbfe6 100644
--- a/src/atoms/list/List.spec.js
+++ b/src/atoms/list/List.spec.js
@@ -15,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', () => {
@@ -27,7 +27,6 @@ describe('List', () => {
     })
 
     expect(wrapper.element.tagName).toBe('OL')
-    expect(wrapper.classes()).toContain('a-list')
     expect(wrapper.props().tag).toBe('ol')
   })
 })

From b30e62caf0e55e12eb8d4a0ca94efea6ed53f065 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 16 Jul 2021 12:13:23 +0200
Subject: [PATCH 18/19] remove unused css

---
 src/atoms/list-item/ListItem.css | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/atoms/list-item/ListItem.css

diff --git a/src/atoms/list-item/ListItem.css b/src/atoms/list-item/ListItem.css
deleted file mode 100644
index 82d183c91..000000000
--- a/src/atoms/list-item/ListItem.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.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;
-}

From 520f4d80afa00428d4ae501502c8f884a78e8f14 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 16 Jul 2021 13:14:06 +0200
Subject: [PATCH 19/19] leave only one story with slots

---
 src/atoms/list/List.stories.js | 40 +++-------------------------------
 1 file changed, 3 insertions(+), 37 deletions(-)

diff --git a/src/atoms/list/List.stories.js b/src/atoms/list/List.stories.js
index 4ea46293a..7d7d08343 100644
--- a/src/atoms/list/List.stories.js
+++ b/src/atoms/list/List.stories.js
@@ -1,10 +1,6 @@
 import AList from './List.vue'
 import AListItem from '@atoms/list-item/ListItem.vue'
 import ALink from '@atoms/link/Link.vue'
-import AIcon from '@atoms/icon/Icon.vue'
-import AIconPerson from '@atoms/icon/templates/IconPerson.vue'
-import AIconCheck from '@atoms/icon/templates/IconCheck.vue'
-import AIconPhone from '@atoms/icon/templates/IconPhone.vue'
 
 export default {
   title: 'Atoms/List',
@@ -55,8 +51,8 @@ const BaseTemplate = (args, { argTypes }) => ({
 
 export const Default = BaseTemplate.bind({})
 
-// with links list
-const WithLinksTemplate = (args, { argTypes }) => ({
+// with slots list
+const WithSlotsTemplate = (args, { argTypes }) => ({
   components: { AList, AListItem, ALink },
   props: Object.keys(argTypes),
   template: `
@@ -77,34 +73,4 @@ const WithLinksTemplate = (args, { argTypes }) => ({
   `
 })
 
-export const WithLinks = WithLinksTemplate.bind({})
-
-// with icons list
-const WithIconsTemplate = (args, { argTypes }) => ({
-  components: { AList, AListItem, AIcon, AIconPerson, AIconCheck, AIconPhone },
-  props: Object.keys(argTypes),
-  template: `
-    <a-list
-      :tag="tag"
-      :variant="variant"
-    >
-      <a-list-item>
-        <a-icon title="Account icon">
-          <a-icon-person />
-        </a-icon>
-      </a-list-item>
-      <a-list-item>
-        <a-icon title="Check icon">
-          <a-icon-check />
-        </a-icon>
-      </a-list-item>
-      <a-list-item>
-        <a-icon title="Phone icon">
-          <a-icon-phone />
-        </a-icon>
-      </a-list-item>
-    </a-list>
-  `
-})
-
-export const WithIcons = WithIconsTemplate.bind({})
+export const WithSlots = WithSlotsTemplate.bind({})