feat(data-table): add zebra styles

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

@@ -291,6 +291,10 @@
     padding-right: $spacing-03;
   }
 
+  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
+    padding-bottom: 0;
+  }
+
   .#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
     background: $ui-03;
   }
@@ -323,6 +327,26 @@
     top: rem(3px); //used to center svg without setting display flex //display block needed for overflow text truncation
   }
 
+  //----------------------------------------------------------------------------
+  //ZEBRA
+  //----------------------------------------------------------------------------
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
+    border-bottom: 1px solid $ui-01;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
+    background-color: $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+    border-top: 1px solid $data-table-zebra-color;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:hover td {
+    background-color: $hover-field;
+    border-bottom: 1px solid $hover-field;
+    border-top: 1px solid $hover-field;
+  }
+
   //----------------------------------------------------------------------------
   // Select
   //----------------------------------------------------------------------------
@@ -344,25 +368,40 @@
     background: $data-table-column-hover;
   }
 
-  // default selected row
+  // default selected row + zebra select - even child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$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
   }
 
   // first row
+  .#{$prefix}--data-table--zebra tbody tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
     border-top: 1px solid $active-01; //top border acts as separator from thead
   }
 
-  // last row
+  // last row + zebra select last
+  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
+  .#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected 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
+  // zebra select - odd child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td {
+    border-bottom: 1px solid $active-01;
+  }
+
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td {
+    border-bottom: 1px solid $data-table-column-hover;
+  }
+
+  // hover + zebra select - even child
+  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected:hover td,
   .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
     color: $text-01;
     background: $data-table-column-hover;

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

@@ -84,11 +84,6 @@
     padding-right: $spacing-03;
   }
 
-  .#{$prefix}--data-table--sort th:first-of-type.#{$prefix}--table-column-checkbox,
-  .#{$prefix}--data-table--sort td:first-of-type {
-    padding-left: $spacing-04;
-  }
-
   .#{$prefix}--data-table--sort th:first-of-type .#{$prefix}--table-sort {
     padding-left: $spacing-04;
   }

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',

src/components/data-table-v2/data-table-v2.hbs

@@ -309,7 +309,7 @@
   <section class="{{@root.prefix}}--data-table_inner-container">
   {{/if}}
   <!-- Table -->
-  <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}} {{#if sticky}}{{@root.prefix}}--data-table--sticky-header{{/if}} {{#if zebra}} {{@root.prefix}}--data-table--no-border {{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}} {{#if tall}}{{@root.prefix}}--data-table--tall {{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort {{/if}}" >
+  <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}} {{#if sticky}}{{@root.prefix}}--data-table--sticky-header{{/if}} {{#if zebra}}{{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}} {{#if tall}}{{@root.prefix}}--data-table--tall {{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort {{/if}}" >
     <thead>
       <tr>
         {{#each columns}}