refactor(data-table): fixing details from reviews

storyblok · Dec 8, 2020 · d422c39 · d422c39
1 parent 0bfb569
commit d422c39
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/src/components/DataTable/DataTable.stories.js b/src/components/DataTable/DataTable.stories.js
@@ -279,7 +279,7 @@ export const Slots = (args) => ({
         </SbDataTableColumn>
 
         <SbDataTableColumn label="Static">
-          Teste de conteúdo estático
+          Static content testing
         </SbDataTableColumn>
       </SbDataTable>
     </div>

diff --git a/src/components/DataTable/components/SbDataTableBody.js b/src/components/DataTable/components/SbDataTableBody.js
@@ -16,7 +16,7 @@ export const SbDataTableBodyRow = {
       type: Array,
     },
     row: {
-      type: Object | Array,
+      type: [Object, Array],
     },
     selectedRows: {
       type: Array,
@@ -131,7 +131,7 @@ export const SbDataTableBody = {
 
   render(h) {
     return h('tbody', [
-      this.items.map((row, index) => {
+      this.items.map((row) => {
         return h(SbDataTableBodyRow, {
           props: {
             allowSelection: this.allowSelection,

diff --git a/src/components/DataTable/components/SbDataTableColumn.js b/src/components/DataTable/components/SbDataTableColumn.js
@@ -10,15 +10,15 @@ export const SbDataTableColumn = {
     label: {
       type: String,
     },
+    row: {
+      type: Object,
+    },
     sortable: {
       type: Boolean,
     },
     value: {
       type: String,
     },
-    row: {
-      type: Object,
-    },
     width: {
       type: String,
     },

diff --git a/src/components/DataTable/data-table.scss b/src/components/DataTable/data-table.scss
@@ -38,7 +38,7 @@
         transform: translateY(-50%);
       }
 
-      br {
+      * {
         display: none;
       }
     }
@@ -79,7 +79,7 @@
 
   &__head-cell, &__body-cell {
     color: $light-gray;
-    font-size: 14px;
+    font-size: $font-size-md;
     line-height: 1.3;
     font-weight: normal;
     text-align: left;
@@ -93,7 +93,7 @@
   }
 
   &__col-main {
-    font-weight: 500;
+    font-weight: $font-weight-medium;
     color: $sb-dark-blue;
   }
 
@@ -106,7 +106,7 @@
   }
 
   &__sort-icon {
-    margin-left: 10px;
+    margin-left: 1rem;
     opacity: 0;
 
     .sb-data-table--show-icon & {

diff --git a/src/components/DataTable/index.js b/src/components/DataTable/index.js
@@ -83,6 +83,10 @@ const SbDataTable = {
       }
     },
 
+    showHeader() {
+      return !this.hideHeader && this.headers.length
+    },
+
     sortedData() {
       if (this.sortKey && this.sortOrder !== 0) {
         return this.doSort()
@@ -257,7 +261,7 @@ const SbDataTable = {
           staticClass: 'sb-data-table__container',
         },
         [
-          !this.hideHeader && this.headers.length
+          this.showHeader
             ? h(SbDataTableHeader, {
                 props: {
                   allowSelection: this.allowSelection,