From 14dc6ec9297c09aea54c0fa906423cf534a9b429 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 28 Aug 2020 10:12:39 +0200
Subject: [PATCH 1/8] move table, table-row & table-cell components to src

---
 {_src  => src}/atoms/table-cell/TableCell.html  | 0
 {_src  => src}/atoms/table-cell/TableCell.js    | 0
 {_src  => src}/atoms/table-cell/TableCell.scss  | 0
 {_src  => src}/atoms/table-cell/TableCell.vue   | 0
 {_src  => src}/atoms/table-row/TableRow.html    | 0
 {_src  => src}/atoms/table-row/TableRow.js      | 0
 {_src  => src}/atoms/table-row/TableRow.scss    | 0
 {_src  => src}/atoms/table-row/TableRow.vue     | 0
 {_src  => src}/atoms/table/Table.html           | 0
 {_src  => src}/atoms/table/Table.js             | 0
 {_src  => src}/atoms/table/Table.scss           | 0
 {_src  => src}/atoms/table/Table.selectors.json | 0
 {_src  => src}/atoms/table/Table.stories.js     | 0
 {_src  => src}/atoms/table/Table.vue            | 0
 {_src  => src}/atoms/table/mocks/bodyRows.json  | 0
 {_src  => src}/atoms/table/mocks/footCells.json | 0
 {_src  => src}/atoms/table/mocks/headCells.json | 0
 17 files changed, 0 insertions(+), 0 deletions(-)
 rename {_src  => src}/atoms/table-cell/TableCell.html (100%)
 rename {_src  => src}/atoms/table-cell/TableCell.js (100%)
 rename {_src  => src}/atoms/table-cell/TableCell.scss (100%)
 rename {_src  => src}/atoms/table-cell/TableCell.vue (100%)
 rename {_src  => src}/atoms/table-row/TableRow.html (100%)
 rename {_src  => src}/atoms/table-row/TableRow.js (100%)
 rename {_src  => src}/atoms/table-row/TableRow.scss (100%)
 rename {_src  => src}/atoms/table-row/TableRow.vue (100%)
 rename {_src  => src}/atoms/table/Table.html (100%)
 rename {_src  => src}/atoms/table/Table.js (100%)
 rename {_src  => src}/atoms/table/Table.scss (100%)
 rename {_src  => src}/atoms/table/Table.selectors.json (100%)
 rename {_src  => src}/atoms/table/Table.stories.js (100%)
 rename {_src  => src}/atoms/table/Table.vue (100%)
 rename {_src  => src}/atoms/table/mocks/bodyRows.json (100%)
 rename {_src  => src}/atoms/table/mocks/footCells.json (100%)
 rename {_src  => src}/atoms/table/mocks/headCells.json (100%)

diff --git a/_src /atoms/table-cell/TableCell.html b/src/atoms/table-cell/TableCell.html
similarity index 100%
rename from _src /atoms/table-cell/TableCell.html
rename to src/atoms/table-cell/TableCell.html
diff --git a/_src /atoms/table-cell/TableCell.js b/src/atoms/table-cell/TableCell.js
similarity index 100%
rename from _src /atoms/table-cell/TableCell.js
rename to src/atoms/table-cell/TableCell.js
diff --git a/_src /atoms/table-cell/TableCell.scss b/src/atoms/table-cell/TableCell.scss
similarity index 100%
rename from _src /atoms/table-cell/TableCell.scss
rename to src/atoms/table-cell/TableCell.scss
diff --git a/_src /atoms/table-cell/TableCell.vue b/src/atoms/table-cell/TableCell.vue
similarity index 100%
rename from _src /atoms/table-cell/TableCell.vue
rename to src/atoms/table-cell/TableCell.vue
diff --git a/_src /atoms/table-row/TableRow.html b/src/atoms/table-row/TableRow.html
similarity index 100%
rename from _src /atoms/table-row/TableRow.html
rename to src/atoms/table-row/TableRow.html
diff --git a/_src /atoms/table-row/TableRow.js b/src/atoms/table-row/TableRow.js
similarity index 100%
rename from _src /atoms/table-row/TableRow.js
rename to src/atoms/table-row/TableRow.js
diff --git a/_src /atoms/table-row/TableRow.scss b/src/atoms/table-row/TableRow.scss
similarity index 100%
rename from _src /atoms/table-row/TableRow.scss
rename to src/atoms/table-row/TableRow.scss
diff --git a/_src /atoms/table-row/TableRow.vue b/src/atoms/table-row/TableRow.vue
similarity index 100%
rename from _src /atoms/table-row/TableRow.vue
rename to src/atoms/table-row/TableRow.vue
diff --git a/_src /atoms/table/Table.html b/src/atoms/table/Table.html
similarity index 100%
rename from _src /atoms/table/Table.html
rename to src/atoms/table/Table.html
diff --git a/_src /atoms/table/Table.js b/src/atoms/table/Table.js
similarity index 100%
rename from _src /atoms/table/Table.js
rename to src/atoms/table/Table.js
diff --git a/_src /atoms/table/Table.scss b/src/atoms/table/Table.scss
similarity index 100%
rename from _src /atoms/table/Table.scss
rename to src/atoms/table/Table.scss
diff --git a/_src /atoms/table/Table.selectors.json b/src/atoms/table/Table.selectors.json
similarity index 100%
rename from _src /atoms/table/Table.selectors.json
rename to src/atoms/table/Table.selectors.json
diff --git a/_src /atoms/table/Table.stories.js b/src/atoms/table/Table.stories.js
similarity index 100%
rename from _src /atoms/table/Table.stories.js
rename to src/atoms/table/Table.stories.js
diff --git a/_src /atoms/table/Table.vue b/src/atoms/table/Table.vue
similarity index 100%
rename from _src /atoms/table/Table.vue
rename to src/atoms/table/Table.vue
diff --git a/_src /atoms/table/mocks/bodyRows.json b/src/atoms/table/mocks/bodyRows.json
similarity index 100%
rename from _src /atoms/table/mocks/bodyRows.json
rename to src/atoms/table/mocks/bodyRows.json
diff --git a/_src /atoms/table/mocks/footCells.json b/src/atoms/table/mocks/footCells.json
similarity index 100%
rename from _src /atoms/table/mocks/footCells.json
rename to src/atoms/table/mocks/footCells.json
diff --git a/_src /atoms/table/mocks/headCells.json b/src/atoms/table/mocks/headCells.json
similarity index 100%
rename from _src /atoms/table/mocks/headCells.json
rename to src/atoms/table/mocks/headCells.json

From 79fc1751da58c5169d2f06260532e8948b3aedad Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 28 Aug 2020 18:40:24 +0200
Subject: [PATCH 2/8] update table, table-row & table-cell components

---
 src/atoms/table-cell/TableCell.css  |  72 ++++++++++++++++
 src/atoms/table-cell/TableCell.scss | 109 ------------------------
 src/atoms/table-cell/TableCell.vue  |   3 +-
 src/atoms/table-row/TableRow.css    |  38 +++++++++
 src/atoms/table-row/TableRow.scss   |  75 -----------------
 src/atoms/table-row/TableRow.vue    |   2 +-
 src/atoms/table/Table.css           |  20 +++++
 src/atoms/table/Table.scss          |  22 -----
 src/atoms/table/Table.stories.js    | 126 ++++++++++++++--------------
 src/atoms/table/Table.vue           |   3 +-
 tailwind.config.js                  |   9 +-
 11 files changed, 202 insertions(+), 277 deletions(-)
 create mode 100644 src/atoms/table-cell/TableCell.css
 delete mode 100644 src/atoms/table-cell/TableCell.scss
 create mode 100644 src/atoms/table-row/TableRow.css
 delete mode 100644 src/atoms/table-row/TableRow.scss
 create mode 100644 src/atoms/table/Table.css
 delete mode 100644 src/atoms/table/Table.scss

diff --git a/src/atoms/table-cell/TableCell.css b/src/atoms/table-cell/TableCell.css
new file mode 100644
index 000000000..80132f937
--- /dev/null
+++ b/src/atoms/table-cell/TableCell.css
@@ -0,0 +1,72 @@
+.table th {
+  @apply hidden;
+}
+
+@screen md {
+  .table th {
+    @apply table-cell;
+    @apply p-4;
+    @apply bg-gray-100;
+    @apply border-r border-b border-solid border-light;
+    @apply text-left;
+  }
+
+  .table th:last-child {
+    @apply border-r-0;
+  }
+}
+
+.table td {
+  @apply flex;
+  @apply py-2 px-4;
+  @apply bg-white;
+}
+
+@screen md {
+  .table td {
+    @apply table-cell;
+    @apply p-4;
+    @apply border-r border-b border-solid border-light;
+  }
+
+  .table td:last-child {
+    @apply border-r-0;
+  }
+}
+
+.table td::before {
+  content: attr(data-th);
+
+  @apply block;
+  @apply max-w-1/4 mr-2;
+  @apply w-1/4;
+  @apply font-bold;
+}
+
+@screen md {
+  .table td::before {
+    @apply hidden;
+  }
+}
+
+.table tr:last-child td {
+  @apply border-b-0;
+}
+
+.table tfoot td {
+  @apply block;
+  @apply py-2 px-4;
+  @apply bg-white;
+}
+
+.table--odd-even tbody td {
+  @apply bg-transparent;
+}
+
+@screen md {
+  .table tfoot td {
+    @apply table-cell;
+    @apply p-4;
+    @apply border-t border-r border-b-0 border-solid border-light;
+  }
+}
diff --git a/src/atoms/table-cell/TableCell.scss b/src/atoms/table-cell/TableCell.scss
deleted file mode 100644
index fab60c456..000000000
--- a/src/atoms/table-cell/TableCell.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@import '../../../assets/styles/globals';
-
-$table__padding      : $spacer--medium !default;
-$table__cell__padding: $spacer $table__padding !default;
-$table__background   : $white !default;
-$table__th-background: $gray-lightest !default;
-$table__border       : 1px solid $gray-light !default;
-$table__border-bottom: none !default;
-$table__border-radius: $border-radius !default;
-
-.table {
-  th {
-    display: none;
-
-    &:last-child {
-      @include mq($screen-m) {
-        border-right: 0;
-      }
-    }
-
-    @include mq($screen-m) {
-      display: table-cell;
-      padding: $table__padding;
-      background: $table__th-background;
-      border-right: $table__border;
-      border-bottom: $table__border;
-    }
-  }
-
-  tr {
-    &:last-child {
-      border-bottom: $table__border-bottom;
-
-      td {
-        @include mq($screen-m) {
-          border-bottom: $table__border-bottom;
-        }
-
-        &:first-child {
-          @include mq($screen-m) {
-            border-bottom-left-radius: $table__border-radius;
-          }
-        }
-
-        &:last-child {
-          @include mq($screen-m) {
-            border-bottom-right-radius: $table__border-radius;
-          }
-        }
-      }
-    }
-  }
-
-  td {
-    display: flex;
-    padding: $table__cell__padding;
-    background: $table__background;
-
-    &::before {
-      display: block;
-      width: 25%;
-      max-width: 25%;
-      margin-right: 10px;
-      font-weight: bold;
-      content: attr(data-th);
-
-      @include mq($screen-m) {
-        display: none;
-      }
-    }
-
-    &:last-child {
-      @include mq($screen-m) {
-        border-right: 0;
-      }
-    }
-
-    @include mq($screen-m) {
-      display: table-cell;
-      padding: $table__padding;
-      background: $table__background;
-      border-right: $table__border;
-      border-bottom: $table__border;
-    }
-  }
-
-  tfoot {
-    tr {
-      td {
-        display: block;
-        padding: $table__cell__padding;
-        background: $table__background;
-        border-bottom: $table__border-bottom;
-
-        @include mq($screen-m) {
-          display: table-cell;
-          padding: $table__padding;
-          background: $table__th-background;
-          border-top: $table__border;
-          border-right: $table__border;
-        }
-      }
-
-      &:first-child {
-        border-top: $table__border;
-      }
-    }
-  }
-}
diff --git a/src/atoms/table-cell/TableCell.vue b/src/atoms/table-cell/TableCell.vue
index f1f8fd4bd..c62912bcd 100644
--- a/src/atoms/table-cell/TableCell.vue
+++ b/src/atoms/table-cell/TableCell.vue
@@ -5,9 +5,8 @@ import ATableCell from './TableCell.js'
 
 export default {
   name: 'AlpacaTableCell',
-
   mixins: [ATableCell]
 }
 </script>
 
-<style lang="scss" src="./TableCell.scss" />
+<style src="./TableCell.css" />
diff --git a/src/atoms/table-row/TableRow.css b/src/atoms/table-row/TableRow.css
new file mode 100644
index 000000000..61d02a9bd
--- /dev/null
+++ b/src/atoms/table-row/TableRow.css
@@ -0,0 +1,38 @@
+.table tr {
+  @apply block;
+  @apply py-4;
+  @apply border-b border-solid border-light;
+}
+
+.table tr:last-child {
+  @apply border-b-0;
+}
+
+@screen md {
+  .table tr {
+    @apply table-row;
+    @apply py-0;
+    @apply border-b-0;
+  }
+}
+
+.table thead tr {
+  @apply p-0;
+  @apply border-b-0;
+}
+
+.table tfoot tr:first-child {
+  @apply border-t border-solid border-light;
+}
+
+.table tfoot tr:last-child {
+  @apply border-b-0;
+}
+
+.table--odd-even tbody tr:nth-child(odd) {
+  @apply bg-white;
+}
+
+.table--odd-even tbody tr:nth-child(even) {
+  @apply bg-gray-200;
+}
diff --git a/src/atoms/table-row/TableRow.scss b/src/atoms/table-row/TableRow.scss
deleted file mode 100644
index 381981d58..000000000
--- a/src/atoms/table-row/TableRow.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import '../../../assets/styles/globals';
-
-$table__row__padding    : $spacer--medium 0 !default;
-$table__background--odd : $white !default;
-$table__background--even: $gray-lightest !default;
-$table__border          : 1px solid $gray-light !default;
-$table__border-radius   : $border-radius !default;
-
-.table {
-  &--odd-even {
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background: $table__background--odd;
-        }
-
-        &:nth-child(even) {
-          background: $table__background--even;
-        }
-
-        &:first-child {
-          border-top-left-radius: $table__border-radius;
-          border-top-right-radius: $table__border-radius;
-
-          @include mq($screen-m) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-          }
-        }
-      }
-
-      td {
-        background-color: transparent;
-      }
-    }
-  }
-
-  tr {
-    display: block;
-    padding: $table__row__padding;
-    border-bottom: $table__border;
-
-    @include mq($screen-m) {
-      display: table-row;
-      padding: 0;
-      border-bottom: 0;
-    }
-  }
-
-  thead {
-    tr {
-      padding: 0;
-      border-bottom: 0;
-
-      @include mq($screen-m) {
-        border-top-left-radius: $table__border-radius;
-        border-top-right-radius: $table__border-radius;
-      }
-    }
-
-    th {
-      &:first-child {
-        @include mq($screen-m) {
-          border-top-left-radius: $table__border-radius;
-        }
-      }
-
-      &:last-child {
-        @include mq($screen-m) {
-          border-top-right-radius: $table__border-radius;
-        }
-      }
-    }
-  }
-}
diff --git a/src/atoms/table-row/TableRow.vue b/src/atoms/table-row/TableRow.vue
index da0099f1f..ae56e5b71 100644
--- a/src/atoms/table-row/TableRow.vue
+++ b/src/atoms/table-row/TableRow.vue
@@ -9,4 +9,4 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./TableRow.scss" />
+<style src="./TableRow.css" />
diff --git a/src/atoms/table/Table.css b/src/atoms/table/Table.css
new file mode 100644
index 000000000..ed4313e15
--- /dev/null
+++ b/src/atoms/table/Table.css
@@ -0,0 +1,20 @@
+.table {
+  @apply w-full;
+  @apply my-2;
+  @apply bg-white;
+  @apply border border-solid border-light;
+  @apply border-separate;
+  @apply text-sm leading-relaxed;
+
+  border-spacing: 0;
+}
+
+@screen md {
+  .table {
+    @apply text-base;
+  }
+}
+
+.table__caption {
+  @apply sr-only;
+}
diff --git a/src/atoms/table/Table.scss b/src/atoms/table/Table.scss
deleted file mode 100644
index 864423127..000000000
--- a/src/atoms/table/Table.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import '../../../assets/styles/globals';
-
-$table__color        : $black !default;
-$table__background   : $white !default;
-$table__font-size    : $font-size-small !default;
-$table__border-radius: $border-radius !default;
-$table__border       : 1px solid $gray-light !default;
-
-.table {
-  width: 100%;
-  color: $table__color;
-  font-size: $table__font-size;
-  background: $table__background;
-  border: $table__border;
-  border-radius: $table__border-radius;
-  border-collapse: separate;
-  border-spacing: 0;
-
-  &__caption {
-    @include visually-hidden();
-  }
-}
diff --git a/src/atoms/table/Table.stories.js b/src/atoms/table/Table.stories.js
index b40d14130..46fc77b0d 100644
--- a/src/atoms/table/Table.stories.js
+++ b/src/atoms/table/Table.stories.js
@@ -1,11 +1,9 @@
-import { storiesOf } from '@storybook/vue'
 import { select } from '@storybook/addon-knobs'
 
 import bodyRows from './mocks/bodyRows.json'
 import headCells from './mocks/headCells.json'
 import footCells from './mocks/footCells.json'
 
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
 import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
 import selectorsConfig from './Table.selectors.json'
 
@@ -13,69 +11,67 @@ import ATable from './Table.vue'
 import ATableRow from '../table-row/TableRow.vue'
 import ATableCell from '../table-cell/TableCell.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/Table', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: { ATable, ATableRow, ATableCell },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      }
-    },
-    data: () => ({
-      bodyRows,
-      headCells,
-      footCells
-    }),
-    template: `
-      <a-table
-        caption="This is a table"
-        :class="classKnobs"
-      >
-        <thead>
-          <a-table-row>
-            <a-table-cell
-              tag="th"
-              v-for="headCell in headCells"
-              :key="headCell.id"
-              scope="col"
-            >
-              {{ headCell.text }}
-            </a-table-cell>
-          </a-table-row>
-        </thead>
-        <tbody>
-          <a-table-row
-            v-for="(row, i) in bodyRows"
-            :key="row.id"
+export default {
+  title: 'Atoms/Table',
+  component: ATable
+}
+
+export const Default = () => ({
+  components: { ATable, ATableRow, ATableCell },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
+    }
+  },
+  data: () => ({
+    bodyRows,
+    headCells,
+    footCells
+  }),
+  template: `
+    <a-table
+      caption="This is a table"
+      :class="classKnobs"
+    >
+      <thead>
+        <a-table-row>
+          <a-table-cell
+            tag="th"
+            v-for="headCell in headCells"
+            :key="headCell.id"
+            scope="col"
+          >
+            {{ headCell.text }}
+          </a-table-cell>
+        </a-table-row>
+      </thead>
+      <tbody>
+        <a-table-row
+          v-for="(row, i) in bodyRows"
+          :key="row.id"
+        >
+          <a-table-cell
+            v-for="bodyCell in row"
+            :key="bodyCell.id"
+            :data-th="headCells[i].text"
+          >
+            {{ bodyCell.text }}
+          </a-table-cell>
+        </a-table-row>
+      </tbody>
+      <tfoot>
+        <a-table-row>
+          <a-table-cell
+            v-for="footCell in footCells"
+            :key="footCell.id"
+            colspan="2"
           >
-            <a-table-cell
-              v-for="bodyCell in row"
-              :key="bodyCell.id"
-              :data-th="headCells[i].text"
-            >
-              {{ bodyCell.text }}
-            </a-table-cell>
-          </a-table-row>
-        </tbody>
-        <tfoot>
-          <a-table-row>
-            <a-table-cell
-              v-for="footCell in footCells"
-              :key="footCell.id"
-              colspan="2"
-            >
-              {{ footCell.text }}
-            </a-table-cell>
-          </a-table-row>
-        </tfoot>
-      </a-table>
-    `
-  }))
+            {{ footCell.text }}
+          </a-table-cell>
+        </a-table-row>
+      </tfoot>
+    </a-table>
+  `
+})
diff --git a/src/atoms/table/Table.vue b/src/atoms/table/Table.vue
index 4b35c0665..a3baf2b59 100644
--- a/src/atoms/table/Table.vue
+++ b/src/atoms/table/Table.vue
@@ -5,9 +5,8 @@ import ATable from './Table.js'
 
 export default {
   name: 'AlpacaTable',
-
   mixins: [ATable]
 }
 </script>
 
-<style lang="scss" src="./Table.scss" />
+<style src="./Table.css" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 75537d571..3d8f3b5d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,13 @@ module.exports = {
     'src/**/*.vue'
   ],
   theme: {
-    extend: {},
+    extend: {
+      maxWidth: {
+        '1/4': '25%',
+        '1/2': '50%',
+        '3/4': '75%'
+      }
+    },
     screens: {
       xs: '320px',
       sm: '480px',
@@ -29,6 +35,7 @@ module.exports = {
       'seafoam-blue': '#77ccb9',
       teal: '#0194ab',
       pink: '#ff5b77',
+      transparent: 'transparent',
       gray: {
         100: '#f7f7f9',
         200: '#fbfbfb',

From aa7a174935ef558b5d76b98cc9b5ba8b5061cf01 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 28 Aug 2020 18:40:42 +0200
Subject: [PATCH 3/8] add table UT

---
 src/atoms/table/Table.spec.js | 42 +++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/atoms/table/Table.spec.js

diff --git a/src/atoms/table/Table.spec.js b/src/atoms/table/Table.spec.js
new file mode 100644
index 000000000..e5fff4cf6
--- /dev/null
+++ b/src/atoms/table/Table.spec.js
@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+
+describe('atoms/Table.vue', () => {
+  it('has default structure', () => {
+    const wrapper = mount(Table)
+
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders caption prop when passed', () => {
+    const wrapper = mount(Table, {
+      propsData: {
+        caption: 'This is a table'
+      }
+    })
+
+    const caption = wrapper.find('caption')
+    expect(caption.exists()).toBe(true)
+    expect(caption.text()).toEqual('This is a table')
+  })
+
+  it('renders slots when defined', () => {
+    const wrapper = mount(Table, {
+      slots: {
+        default: '<tbody><tr><td>Test table</td></tr></tbody>',
+        caption: '<div class="caption">This is caption slot</div>'
+      }
+    })
+
+    const captionSlotElement = wrapper.find('div.caption')
+    expect(captionSlotElement.exists()).toBe(true)
+    expect(captionSlotElement.classes()).toContain('caption')
+    expect(captionSlotElement.text()).toEqual('This is caption slot')
+
+    const defaultSlot = wrapper.find('tbody tr td')
+    expect(defaultSlot.exists()).toBe(true)
+    expect(defaultSlot.text()).toEqual('Test table')
+  })
+})

From aee6458607ad1b16e759fda42225123159f69a13 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 11 Sep 2020 11:22:34 +0200
Subject: [PATCH 4/8] switch color gray-100 with gray-200

---
 src/atoms/table-cell/TableCell.css | 2 +-
 src/atoms/table-row/TableRow.css   | 2 +-
 tailwind.config.js                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/atoms/table-cell/TableCell.css b/src/atoms/table-cell/TableCell.css
index 80132f937..f80e5f5a4 100644
--- a/src/atoms/table-cell/TableCell.css
+++ b/src/atoms/table-cell/TableCell.css
@@ -6,7 +6,7 @@
   .table th {
     @apply table-cell;
     @apply p-4;
-    @apply bg-gray-100;
+    @apply bg-gray-200;
     @apply border-r border-b border-solid border-light;
     @apply text-left;
   }
diff --git a/src/atoms/table-row/TableRow.css b/src/atoms/table-row/TableRow.css
index 61d02a9bd..d5744b612 100644
--- a/src/atoms/table-row/TableRow.css
+++ b/src/atoms/table-row/TableRow.css
@@ -34,5 +34,5 @@
 }
 
 .table--odd-even tbody tr:nth-child(even) {
-  @apply bg-gray-200;
+  @apply bg-gray-100;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 3d8f3b5d3..30cc4d1fc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,8 +37,8 @@ module.exports = {
       pink: '#ff5b77',
       transparent: 'transparent',
       gray: {
-        100: '#f7f7f9',
-        200: '#fbfbfb',
+        100: '#fbfbfb',
+        200: '#f7f7f9',
         300: '#eaeaea',
         400: '#bdbdbd',
         500: '#d8d8d8',

From cd324bcf7d3752b8c3218cda9a69447e34175702 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 11 Sep 2020 11:49:24 +0200
Subject: [PATCH 5/8] add scope & role props to TableCell

---
 src/atoms/table-cell/TableCell.html |  3 ++-
 src/atoms/table-cell/TableCell.js   | 14 ++++++++++++++
 src/atoms/table/Table.stories.js    |  3 ++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/atoms/table-cell/TableCell.html b/src/atoms/table-cell/TableCell.html
index 47a823c39..be536548e 100644
--- a/src/atoms/table-cell/TableCell.html
+++ b/src/atoms/table-cell/TableCell.html
@@ -1,6 +1,7 @@
 <component
   :is="tag"
-  role="gridcell"
+  :role="role"
+  :scope="scope"
 >
   <!-- @slot Cell content -->
   <slot />
diff --git a/src/atoms/table-cell/TableCell.js b/src/atoms/table-cell/TableCell.js
index cff9de648..8aa6d05f4 100644
--- a/src/atoms/table-cell/TableCell.js
+++ b/src/atoms/table-cell/TableCell.js
@@ -7,6 +7,20 @@ export default {
     tag: {
       type: String,
       default: 'td'
+    },
+    /**
+     * Cell role
+     */
+    role: {
+      type: String,
+      default: 'gridcell'
+    },
+    /**
+     * Cell scope
+     */
+    scope: {
+      type: String,
+      default: null
     }
   }
 }
diff --git a/src/atoms/table/Table.stories.js b/src/atoms/table/Table.stories.js
index 46fc77b0d..f69ff9d92 100644
--- a/src/atoms/table/Table.stories.js
+++ b/src/atoms/table/Table.stories.js
@@ -39,9 +39,10 @@ export const Default = () => ({
         <a-table-row>
           <a-table-cell
             tag="th"
+            role="columnheader"
+            scope="col"
             v-for="headCell in headCells"
             :key="headCell.id"
-            scope="col"
           >
             {{ headCell.text }}
           </a-table-cell>

From b5046ef82c19b6fe31e3394acf4efcb2004d5d37 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 11 Sep 2020 13:32:19 +0200
Subject: [PATCH 6/8] add table scope row variant

---
 src/atoms/table-cell/TableCell.css  | 48 ++++++++++++++++++++++++---
 src/atoms/table-row/TableRow.css    |  4 +++
 src/atoms/table/Table.css           |  4 +++
 src/atoms/table/Table.stories.js    | 32 ++++++++++++++++++
 src/atoms/table/mocks/scopeRow.json | 50 +++++++++++++++++++++++++++++
 5 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 src/atoms/table/mocks/scopeRow.json

diff --git a/src/atoms/table-cell/TableCell.css b/src/atoms/table-cell/TableCell.css
index f80e5f5a4..8216efec9 100644
--- a/src/atoms/table-cell/TableCell.css
+++ b/src/atoms/table-cell/TableCell.css
@@ -59,10 +59,6 @@
   @apply bg-white;
 }
 
-.table--odd-even tbody td {
-  @apply bg-transparent;
-}
-
 @screen md {
   .table tfoot td {
     @apply table-cell;
@@ -70,3 +66,47 @@
     @apply border-t border-r border-b-0 border-solid border-light;
   }
 }
+
+.table--odd-even tbody td {
+  @apply bg-transparent;
+}
+
+.table--scope-row th {
+  @apply w-1/2;
+  @apply p-4;
+  @apply border-r-0;
+  @apply bg-white;
+  @apply font-normal;
+}
+
+.table--scope-row tr:nth-child(odd) th,
+.table--scope-row tr:nth-child(odd) td {
+  @apply bg-gray-200;
+}
+
+.table--scope-row th + td {
+  @apply flex-col flex-no-wrap;
+  @apply p-4;
+}
+
+@screen sm {
+  .table--scope-row th + td {
+    @apply flex-row;
+  }
+}
+
+.table--scope-row th + td::before {
+  @apply max-w-full w-full;
+  @apply mb-2;
+}
+
+@screen sm {
+  .table--scope-row th + td::before {
+    @apply max-w-1/2 w-1/2;
+    @apply mb-0;
+  }
+}
+
+.table--scope-row tr:last-child td {
+  @apply border-b;
+}
diff --git a/src/atoms/table-row/TableRow.css b/src/atoms/table-row/TableRow.css
index d5744b612..46d6ac078 100644
--- a/src/atoms/table-row/TableRow.css
+++ b/src/atoms/table-row/TableRow.css
@@ -36,3 +36,7 @@
 .table--odd-even tbody tr:nth-child(even) {
   @apply bg-gray-100;
 }
+
+.table--scope-row tbody tr {
+  @apply p-0;
+}
diff --git a/src/atoms/table/Table.css b/src/atoms/table/Table.css
index ed4313e15..bcd5556da 100644
--- a/src/atoms/table/Table.css
+++ b/src/atoms/table/Table.css
@@ -15,6 +15,10 @@
   }
 }
 
+.table--scope-row {
+  @apply border-t border-r-0 border-b-0 border-l-0;
+}
+
 .table__caption {
   @apply sr-only;
 }
diff --git a/src/atoms/table/Table.stories.js b/src/atoms/table/Table.stories.js
index f69ff9d92..0d1a8c032 100644
--- a/src/atoms/table/Table.stories.js
+++ b/src/atoms/table/Table.stories.js
@@ -3,6 +3,7 @@ import { select } from '@storybook/addon-knobs'
 import bodyRows from './mocks/bodyRows.json'
 import headCells from './mocks/headCells.json'
 import footCells from './mocks/footCells.json'
+import scopeRow from './mocks/scopeRow.json'
 
 import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
 import selectorsConfig from './Table.selectors.json'
@@ -76,3 +77,34 @@ export const Default = () => ({
     </a-table>
   `
 })
+
+export const ScopeRow = () => ({
+  components: { ATable, ATableRow, ATableCell },
+  data: () => ({
+    scopeRow
+  }),
+  template: `
+    <a-table
+      caption="This is a table"
+      class="table--scope-row"
+    >
+      <tbody>
+        <a-table-row
+          v-for="(row, i) in scopeRow"
+          :key="row.id"
+        >
+          <a-table-cell
+            v-for="bodyCell in row"
+            :tag="bodyCell.tag"
+            :role="bodyCell.role"
+            :scope="bodyCell.tag === 'th' ? bodyCell.scope : null"
+            :data-th="bodyCell.tag === 'td' ? bodyCell['data-th'] : null"
+            :key="bodyCell.id"
+          >
+            {{ bodyCell.text }}
+          </a-table-cell>
+        </a-table-row>
+      </tbody>
+    </a-table>
+  `
+})
diff --git a/src/atoms/table/mocks/scopeRow.json b/src/atoms/table/mocks/scopeRow.json
new file mode 100644
index 000000000..8c680dd2b
--- /dev/null
+++ b/src/atoms/table/mocks/scopeRow.json
@@ -0,0 +1,50 @@
+[
+  [
+    {
+      "tag": "th",
+      "role": "rowheader",
+      "scope": "row",
+      "text": "Example heading 1",
+      "id": "rowId1"
+    },
+    {
+      "tag": "td",
+      "role": "gridcell",
+      "text": "Example content 1",
+      "data-th": "Example heading 1:",
+      "id": "rowId2"
+    }
+  ],
+  [
+    {
+      "tag": "th",
+      "role": "rowheader",
+      "scope": "row",
+      "text": "Example heading 2",
+      "id": "rowId3"
+    },
+    {
+      "tag": "td",
+      "role": "gridcell",
+      "text": "Example content 2",
+      "data-th": "Example heading 2:",
+      "id": "rowId4"
+    }
+  ],
+  [
+    {
+      "tag": "th",
+      "role": "rowheader",
+      "scope": "row",
+      "text": "Example heading 3",
+      "id": "rowId5"
+    },
+    {
+      "tag": "td",
+      "role": "gridcell",
+      "text": "Example content 3",
+      "data-th": "Example heading 3:",
+      "id": "rowId6"
+    }
+  ]
+]

From 3fdd09e783a5c5a2a765ea044ee0327d486834d7 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 11 Sep 2020 16:15:46 +0200
Subject: [PATCH 7/8] add UT for TableCell & TableRow

---
 src/atoms/table-cell/TableCell.spec.js | 34 ++++++++++++++++++++++++++
 src/atoms/table-row/TableRow.spec.js   | 25 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/atoms/table-cell/TableCell.spec.js
 create mode 100644 src/atoms/table-row/TableRow.spec.js

diff --git a/src/atoms/table-cell/TableCell.spec.js b/src/atoms/table-cell/TableCell.spec.js
new file mode 100644
index 000000000..683701249
--- /dev/null
+++ b/src/atoms/table-cell/TableCell.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import TableCell from './TableCell.vue'
+
+describe('atoms/TableCell.vue', () => {
+  it('has default structure', () => {
+    const wrapper = mount(TableCell)
+
+    expect(wrapper.element.tagName).toBe('TD')
+    expect(wrapper.element.tagName).toBe('TD')
+    expect(wrapper.attributes().role).toBeDefined()
+    expect(wrapper.attributes().role).toEqual('gridcell')
+  })
+
+  it('renders scope prop when passed', () => {
+    const wrapper = mount(TableCell, {
+      propsData: {
+        scope: 'row'
+      }
+    })
+
+    expect(wrapper.attributes().scope).toBeDefined()
+    expect(wrapper.attributes().scope).toEqual('row')
+  })
+})
+
+it('renders slot text when passed', () => {
+  const wrapper = mount(TableCell, {
+    slots: {
+      default: 'Test table cell'
+    }
+  })
+
+  expect(wrapper.text()).toEqual('Test table cell')
+})
diff --git a/src/atoms/table-row/TableRow.spec.js b/src/atoms/table-row/TableRow.spec.js
new file mode 100644
index 000000000..ca90b215b
--- /dev/null
+++ b/src/atoms/table-row/TableRow.spec.js
@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import TableRow from './TableRow.vue'
+
+describe('atoms/TableRow.vue', () => {
+  it('has default structure', () => {
+    const wrapper = mount(TableRow)
+
+    expect(wrapper.element.tagName).toBe('TR')
+    expect(wrapper.element.tagName).toBe('TR')
+    expect(wrapper.attributes().role).toBeDefined()
+    expect(wrapper.attributes().role).toEqual('row')
+  })
+
+  it('renders slot text when passed', () => {
+    const wrapper = mount(TableRow, {
+      slots: {
+        default: '<td>Test table row</td>'
+      }
+    })
+
+    const defaultSlot = wrapper.find('td')
+    expect(defaultSlot.exists()).toBe(true)
+    expect(defaultSlot.text()).toEqual('Test table row')
+  })
+})

From 35a197bc0d970d7e51a7bf71503cbd834e055f2c Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 11 Sep 2020 16:18:29 +0200
Subject: [PATCH 8/8] UT fix

---
 src/atoms/table-row/TableRow.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/atoms/table-row/TableRow.spec.js b/src/atoms/table-row/TableRow.spec.js
index ca90b215b..591f1b507 100644
--- a/src/atoms/table-row/TableRow.spec.js
+++ b/src/atoms/table-row/TableRow.spec.js
@@ -11,7 +11,7 @@ describe('atoms/TableRow.vue', () => {
     expect(wrapper.attributes().role).toEqual('row')
   })
 
-  it('renders slot text when passed', () => {
+  it('renders slot when passed', () => {
     const wrapper = mount(TableRow, {
       slots: {
         default: '<td>Test table row</td>'