feat(data-table): add zebra styles

src/components/data-table-v2/_data-table-v2-core.scss

@@ -345,7 +345,9 @@
   }
 
   // default selected row
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td,
   tr.#{$prefix}--data-table--selected td {
+    color: $text-01;
     background-color: $ui-03;
     border-top: 1px solid $ui-03;
     border-bottom: 1px solid $active-01; //bottom border acts as separator from other rows
@@ -357,12 +359,14 @@
   }
 
   // last row
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:last-of-type td,
   tr.#{$prefix}--data-table--selected:last-of-type td {
     border-top: 1px solid $ui-03; // doesn't need separators
     border-bottom: 1px solid $ui-03;
   }
 
   // hover
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td,
   .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
     color: $text-01;
     background: $data-table-column-hover;
@@ -374,6 +378,33 @@
   .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu .#{$prefix}--overflow-menu__icon {
     opacity: 1;
   }
+
+  //----------------------------------------------------------------------------
+  //ZEBRA
+  //----------------------------------------------------------------------------
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
+    background-color: $data-table-zebra-color;
+    border-top: 1px solid $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even):hover td {
+    background-color: $hover-field;
+    border-top: 1px solid $hover-field;
+    border-bottom: 1px solid $hover-field;
+  }
+
+  //----------------------------------------------------------------------------
+  //NO BORDER
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table--no-border tbody,
+  .#{$prefix}--data-table--no-border tr,
+  .#{$prefix}--data-table--no-border th,
+  .#{$prefix}--data-table--no-border td {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+  }
 }
 
 @include exports('data-table-v2-core') {

src/components/data-table-v2/data-table-v2.config.js

@@ -201,12 +201,6 @@ const columnsExpandable = [
   },
 ];
 
-const columnsEditable = columns.slice(1, 7).map((column, i) => ({
-  ...column,
-  editable: true,
-  editing: i === 0,
-}));
-
 const columnsSmall = columns.slice(1, -1).map(column => ({
   ...column,
   sortable: false,
@@ -356,39 +350,6 @@ const rowsExpandable = [
   },
 ];
 
-const rowsEditable = [
-  {
-    id: 'row-id-15',
-    name: 'Load Balancer 3',
-    protocol: 'HTTP',
-    port: '3000',
-    rule: 'Round Robin',
-    attachedGroups: 'Kevins VM Groups',
-    status: 'Disabled',
-  },
-  {
-    id: 'row-id-11',
-    name: 'Load Balancer 1',
-    protocol: 'HTTP',
-    port: '443',
-    rule: 'Round Robin',
-    attachedGroups: 'Maureens VM Groups',
-    status: 'Starting',
-  },
-  {
-    id: 'row-id-10',
-    name: 'Load Balancer 2',
-    protocol: 'HTTP',
-    port: '80',
-    rule: 'DNS delegation',
-    attachedGroups: 'Andrews VM Groups',
-    status: 'Active',
-  },
-].map((row, i) => ({
-  ...row,
-  editable: i === 0,
-}));
-
 module.exports = {
   label: 'Data Table V2',
   context: {
@@ -426,6 +387,47 @@ module.exports = {
         sort: true,
       },
     },
+    {
+      name: 'zebra-select',
+      label: 'Zebra Select',
+      notes: `
+        Data Tables are used to represent a collection of resources, displaying a
+        subset of their fields in columns, or headers.
+      `,
+      context: {
+        state: 'default',
+        title: 'Table title',
+        optionalHelper: 'Optional Helper Text',
+        batchActions,
+        toolbarActions,
+        toolbarActionsX,
+        columns,
+        rows,
+        selectedItemsCounterLabel: `
+          <span data-items-selected>3</span> items selected
+        `,
+        searchInputId: 'search__input-2',
+        searchLabelId: 'search-input-label-1',
+        searchLabel: 'Search',
+        clearSearchLabel: 'Clear search input',
+        addNewLabel: 'Add new',
+        cancelLabel: 'Cancel',
+        sortLabel: 'Sort rows by this header in descending order',
+        hasToolbar: true,
+        sort: true,
+        zebra: true,
+      },
+    },
+    {
+      name: 'zebra',
+      label: 'Zebra',
+      context: {
+        small: true,
+        columns: columnsSmall,
+        rows,
+        zebra: true,
+      },
+    },
     {
       name: 'expandable',
       label: 'Expandable',
@@ -451,20 +453,6 @@ module.exports = {
         sortLabel: 'Sort rows by this header in descending order',
       },
     },
-    {
-      name: 'editable',
-      label: 'Inline Edit',
-      context: {
-        title: 'Table title',
-        columns: columnsEditable,
-        rows: rowsEditable,
-        cancelLabel: 'Cancel',
-        saveLabel: 'Save',
-        sortLabel: 'Sort rows by this header in descending order',
-        zebra: true,
-        sort: true,
-      },
-    },
     {
       name: 'small',
       label: 'Small',