From 7f59a7e6f77281602d16b26747dd246a551c7c7e Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Fri, 15 Apr 2016 12:28:56 +1200
Subject: [PATCH] Converted grid-field to table markup and SCSS to BEM

Also added tab index
---
 .../src/components/accordion/item.js          |   2 +-
 .../src/components/grid-field/action.js       |   2 +-
 .../src/components/grid-field/cell.js         |   4 +-
 .../src/components/grid-field/header-cell.js  |   2 +-
 .../src/components/grid-field/index.js        |  10 +-
 .../src/components/grid-field/row.js          |   4 +-
 .../src/components/grid-field/styles.scss     | 149 +++++++++---------
 .../src/components/grid-field/table.js        |  10 +-
 .../src/sections/campaign-admin/styles.scss   |   2 +-
 admin/javascript/src/styles/_typography.scss  |  37 +++++
 admin/javascript/src/styles/main.scss         |   5 +
 admin/scss/bootstrap/_variables.scss          |  79 +++++-----
 12 files changed, 177 insertions(+), 129 deletions(-)
 create mode 100644 admin/javascript/src/styles/_typography.scss

diff --git a/admin/javascript/src/components/accordion/item.js b/admin/javascript/src/components/accordion/item.js
index 17b8efb5f..8a4865e03 100644
--- a/admin/javascript/src/components/accordion/item.js
+++ b/admin/javascript/src/components/accordion/item.js
@@ -5,7 +5,7 @@ class AccordionItem extends SilverStripeComponent {
   render() {
     let className = `list-group-item ${this.props.className}`;
     return (
-      <a className={className}>
+      <a tabIndex="0" className={className}>
         {this.props.children}
       </a>
     );
diff --git a/admin/javascript/src/components/grid-field/action.js b/admin/javascript/src/components/grid-field/action.js
index 185cbd12b..f419d4b5d 100644
--- a/admin/javascript/src/components/grid-field/action.js
+++ b/admin/javascript/src/components/grid-field/action.js
@@ -10,7 +10,7 @@ class GridFieldActionComponent extends SilverStripeComponent {
   render() {
     return (
       <button
-        className={`grid-field-action-component font-icon-${this.props.icon}`}
+        className={`grid-field__icon-action font-icon-${this.props.icon}`}
         onClick={this.handleClick}
       />
     );
diff --git a/admin/javascript/src/components/grid-field/cell.js b/admin/javascript/src/components/grid-field/cell.js
index b118dd985..1145be011 100644
--- a/admin/javascript/src/components/grid-field/cell.js
+++ b/admin/javascript/src/components/grid-field/cell.js
@@ -10,12 +10,12 @@ class GridFieldCellComponent extends SilverStripeComponent {
 
   render() {
     const props = {
-      className: `grid-field-cell-component ${this.props.className}`,
+      className: `grid-field__cell ${this.props.className}`,
       onClick: this.handleDrillDown,
     };
 
     return (
-      <div {...props}>{this.props.children}</div>
+      <td {...props}>{this.props.children}</td>
     );
   }
 
diff --git a/admin/javascript/src/components/grid-field/header-cell.js b/admin/javascript/src/components/grid-field/header-cell.js
index 4add622cc..9cd61127e 100644
--- a/admin/javascript/src/components/grid-field/header-cell.js
+++ b/admin/javascript/src/components/grid-field/header-cell.js
@@ -5,7 +5,7 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
 
   render() {
     return (
-      <div className="grid-field-header-cell-component">{this.props.children}</div>
+      <th>{this.props.children}</th>
     );
   }
 
diff --git a/admin/javascript/src/components/grid-field/index.js b/admin/javascript/src/components/grid-field/index.js
index c709e9d19..acb684fac 100644
--- a/admin/javascript/src/components/grid-field/index.js
+++ b/admin/javascript/src/components/grid-field/index.js
@@ -50,7 +50,7 @@ class GridField extends SilverStripeComponent {
     const columns = this.props.data.columns;
 
     // Placeholder to align the headers correctly with the content
-    const actionPlaceholder = <span key={'actionPlaceholder'} />;
+    const actionPlaceholder = <th className={'grid-field__action-placeholder'} ></th>;
     const headerCells = columns.map((column, i) =>
       <GridFieldHeaderCell key={i}>{column.name}</GridFieldHeaderCell>
     );
@@ -64,7 +64,7 @@ class GridField extends SilverStripeComponent {
         const val = column.field.split('.').reduce((a, b) => a[b], record);
         const cellProps = {
           handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
-          className: handleDrillDown ? 'grid-field-cell-component--drillable' : '',
+          className: handleDrillDown ? 'grid-field__cell--drillable' : '',
           key: j,
           width: column.width,
         };
@@ -82,19 +82,19 @@ class GridField extends SilverStripeComponent {
             handleClick={this.editRecord}
             key={`action-${i}-edit`}
             record={record}
-          />,
+          />
           <GridFieldAction
             icon={'cancel'}
             handleClick={this.deleteRecord}
             key={`action-${i}-delete`}
             record={record}
-          />,
+          />
         </GridFieldCell>
       );
 
       const rowProps = {
         key: i,
-        className: handleDrillDown ? 'grid-field-row-component--drillable' : '',
+        className: handleDrillDown ? 'grid-field__row--drillable' : '',
       };
 
       return (
diff --git a/admin/javascript/src/components/grid-field/row.js b/admin/javascript/src/components/grid-field/row.js
index 83d65ca89..3e683d6ad 100644
--- a/admin/javascript/src/components/grid-field/row.js
+++ b/admin/javascript/src/components/grid-field/row.js
@@ -4,8 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
 class GridFieldRowComponent extends SilverStripeComponent {
 
   render() {
-    const className = `grid-field-row-component [ list-group-item ] ${this.props.className}`;
-    return <li className={className}>{this.props.children}</li>;
+    const className = `grid-field__row ${this.props.className}`;
+    return <tr tabIndex="0" className={className}>{this.props.children}</tr>;
   }
 }
 
diff --git a/admin/javascript/src/components/grid-field/styles.scss b/admin/javascript/src/components/grid-field/styles.scss
index 335a620a3..0dfc4288e 100644
--- a/admin/javascript/src/components/grid-field/styles.scss
+++ b/admin/javascript/src/components/grid-field/styles.scss
@@ -1,99 +1,98 @@
-.grid-field-action-component {
+// Grid-field
+// Extends basic table styles, requires .table .table-hover
+
+.grid-field__table {
+// Todo: Add extends
+// @extend .table;
+// @extend .table-hover;
+}
+.grid-field__row--drillable {
+    cursor: pointer;
+}
+.grid-field__cell[data-reactid$=-actions] {
+    white-space: nowrap;
+    width: 1px;
+}
+.grid-field__icon-action {
     background: none;
     border: 0;
-    color: $body-color;
-    padding: 0 $spacer-x/2;
-    height: 20px;
+    color: lighten($body-color, 10%);
+    padding: $spacer-y $spacer-x/2;
+    margin-top: -$spacer-y;
+    margin-bottom: -$spacer-y;
+    height: #{$line-height-base + $table-cell-padding*2};
     vertical-align: top;
 
     &:hover {
-        color: darken($body-color, 10%);
+        color: $body-color;
+        background: darken($body-bg,3%);
     }
-
     &::before {
         font-size: 20px;
     }
 }
 
-.grid-field-cell-component {
-    display: table-cell;
-    padding: $spacer-y $spacer-x;
-    line-height: 20px;
+// Responsive grid-field
+// Todo:
+// * replace with mixins - @include media-breakpoint-down(sm)
+// * add .text-truncate for overflowing cells
+@media (max-width: 47.9em) {
+  .grid-field__table td,
+  .grid-field__table th {
+    display: none;
 
     &:first-child {
-        padding-left: #{$spacer-x + $spacer-x*.25};
+      display: table-cell;
     }
-
-    &:last-child {
-        padding-right: #{$spacer-x + $spacer-x*.25};
-        width: 1px;
-
-        span { // TEMP, remove commas in js
-            display: none; 
-        }
-    }
-
-    &:nth-child(2) {
-        text-align: center;
-        width: 1px;
-    }
-
-    &[data-reactid$=actionPlaceholder] {
-        width: 1px;
-    }
-
-    &[data-reactid$=-actions] {
-        white-space: nowrap;
+    &.grid-field__cell[data-reactid$=-actions],
+    &.grid-field__action-placeholder {
+        display: table-cell;
     }
+  }
 }
 
-.grid-field-header-cell-component {
-    text-transform: uppercase;
-    font-size: $font-size-sm;
-    display: table-cell;
-    padding: $spacer-y $spacer-x;
-    line-height: 20px;
 
-    &:first-child {
-        padding-left: $grid-x*2.5;
-    }
+// OLD gridfield makeover - currently not in use.
+// Replace .ss-gridfield-table with .grid-field & .table
+// Has known scroll bugs
+.grid-field {
 
-    &:last-child {
-        padding-right: $grid-x*2.5;
-        width: 1px !important;
-    }
-}
+  .ss-gridfield-sort {  // Todo: rename to grid-filed__sort
+      background: transparent url(../images/arrows.png) no-repeat right -1px;
+      border: none;
+      width: 100%;
+      padding: 0;
+      text-shadow: none;
+      border-radius: 0;
+      text-transform: uppercase;
+      font-weight: normal;
+      text-align: left;
 
-.grid-field-table-component {
-    border-collapse: collapse;
-
-    li.grid-field-row-component {
-        display: table-row;
-        border: 0;
-        border-bottom: 1px solid $border-color;
-        margin: 0;
+      .ui-button-text {
         padding: 0;
+        line-height: 20px;
+        color: $body-color-light;
+      }
 
-        // Header row
-        &:first-child {
-            background: none;
-            border-bottom: 1px solid $border-color;
-        }
+      &:hover {
+        box-shadow: none;
+        background: transparent url(../images/arrows.png) no-repeat right -41px;
+      }
+      &.ss-gridfield-sorted-asc,
+      &.ss-gridfield-sorted-asc:hover {
+        background-position-y: -118px;
+      }
+      &.ss-gridfield-sorted-desc,
+      &.ss-gridfield-sorted-desc:hover {
+        background-position-y: -78px;
+      }
+  }
 
-		// Drillable rows highlight on hover
-		&--drillable:hover {
-			color: #555;
-			text-decoration: none;
-			background-color: #f5f5f5;
-
-			.grid-field-cell-component--drillable {
-				cursor: pointer;
-			}
-		}
-    }
-}
-
-.grid-field-table-component {
-    display: table;
-    width: 100%;
+  thead tr.title th {
+      font-size: 15px;
+      font-weight: bold;
+      text-transform: none;
+      border-bottom: 0;
+      padding-bottom: 0;
+  }
 }
diff --git a/admin/javascript/src/components/grid-field/table.js b/admin/javascript/src/components/grid-field/table.js
index 56dc90b8c..de00eeef6 100644
--- a/admin/javascript/src/components/grid-field/table.js
+++ b/admin/javascript/src/components/grid-field/table.js
@@ -5,10 +5,12 @@ class GridFieldTableComponent extends SilverStripeComponent {
 
   render() {
     return (
-      <ul className="grid-field-table-component [ list-group ]">
-        {this.generateHeader()}
-        {this.generateRows()}
-      </ul>
+      <div className="container-fluid grid-field">
+        <table className="table table-hover grid-field__table">
+          <thead>{this.generateHeader()}</thead>
+          <tbody>{this.generateRows()}</tbody>
+        </table>
+      </div>
     );
   }
 
diff --git a/admin/javascript/src/sections/campaign-admin/styles.scss b/admin/javascript/src/sections/campaign-admin/styles.scss
index 9b0010b84..5e58b4d40 100644
--- a/admin/javascript/src/sections/campaign-admin/styles.scss
+++ b/admin/javascript/src/sections/campaign-admin/styles.scss
@@ -9,7 +9,7 @@
 	background-color: #f6f7f8;
 	z-index: 2;
 	transition: width .2s;
-	padding-bottom: $navbar-height +1; // incl border
+	padding-bottom: $navbar-height+1; // incl border
 }
 
 .campaign-items {
diff --git a/admin/javascript/src/styles/_typography.scss b/admin/javascript/src/styles/_typography.scss
new file mode 100644
index 000000000..dbe49ea9c
--- /dev/null
+++ b/admin/javascript/src/styles/_typography.scss
@@ -0,0 +1,37 @@
+// Tables
+// Used as a base for components: Grid-field.
+
+.table {
+  margin-left: -$spacer-x;
+  margin-right: -$spacer-x;
+  min-width: calc(100% + #{$spacer-x*2});
+
+  thead th {
+    background-color: $body-bg;
+    border-bottom: $table-border-width solid $table-border-color;
+    text-transform: uppercase;
+    font-size: $font-size-sm;
+  }
+  th,
+  td {
+    border-top: 0;
+    border-bottom: $table-border-width solid $table-border-color;
+    line-height: 20px;
+
+    &:first-child {
+        padding-left: #{$spacer-x + $spacer-x*.25};
+    }
+    &:last-child {
+        padding-right: #{$spacer-x + $spacer-x*.25};
+    }
+  }
+  tfoot {
+    background-color: transparent;
+    font-size: $font-size-sm;
+
+    td {
+      border-bottom: 0;
+      background-color: $body-bg;
+    }
+  }
+}
diff --git a/admin/javascript/src/styles/main.scss b/admin/javascript/src/styles/main.scss
index ebb81046a..60eda8b25 100644
--- a/admin/javascript/src/styles/main.scss
+++ b/admin/javascript/src/styles/main.scss
@@ -1,4 +1,9 @@
 /** -----------------------------
+ * Base styles
+ * ------------------------------ */
+@import "_typography.scss";
+
+ /** -----------------------------
  * Sections
  * ------------------------------ */
 @import "../sections/campaign-admin/styles";
diff --git a/admin/scss/bootstrap/_variables.scss b/admin/scss/bootstrap/_variables.scss
index 3917bbdc8..51ecc6801 100644
--- a/admin/scss/bootstrap/_variables.scss
+++ b/admin/scss/bootstrap/_variables.scss
@@ -97,8 +97,8 @@ $border-width:               1px;
 
 $body-bg:                    #f6f7f8;
 $body-color:                 $gray-dark;
-$body-color-light:           lighten($body-color,10);
-$body-color-lighter:         lighten($body-color,20);
+$body-color-light:           lighten($gray-dark, 10);
+$body-color-lightest:        lighten($gray-dark, 20);
 
 
 // Links
@@ -185,14 +185,14 @@ $font-size-h6:               12px; /* 1rem; */
 // $display3-weight:             300;
 // $display4-weight:             300;
 
-$line-height:                1.538;     /* relative to font-size */
+$line-height:                1.538;
 $line-height-base:           20px;      /* can be used with varying font-sizes, holds grid sizing */
 
 $headings-margin-bottom:     $spacer;
-$headings-font-family:       inherit;
-$headings-font-weight:       500;
-$headings-line-height:       1.3;
-$headings-color:             inherit;
+// $headings-font-family:       inherit;
+// $headings-font-weight:       500;
+// $headings-line-height:       1.1;
+// $headings-color:             inherit;
 //
 // $lead-font-size:             1.25rem;
 // $lead-font-weight:           300;
@@ -237,13 +237,13 @@ $text-muted:                  #7f8b97;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:            .75rem;
-$table-sm-cell-padding:         .3rem;
+$table-cell-padding:            16px;  // update to $spacer
+$table-sm-cell-padding:         12px;   // update to $spacer
 
-$table-bg:                      transparent;
+$table-bg:                      #FFF;
 $table-bg-accent:               #f9f9f9;
 $table-bg-hover:                #f5f5f5;
-$table-bg-active:               $table-bg-hover;
+$table-bg-active:               $brand-primary;
 
 $table-border-width:            $border-width;
 $table-border-color:            $gray-lighter;
@@ -303,9 +303,9 @@ $btn-danger-border:              transparent;
 
 // Forms
 
-$input-padding-x:                .75rem;
-$input-padding-y:                .54rem; //.375rem;
-
+// $input-padding-x:                .75rem;
+// $input-padding-y:                .375rem;
+//
 // $input-bg:                       #fff;
 // $input-bg-disabled:              $gray-lighter;
 //
@@ -386,10 +386,10 @@ $input-padding-y:                .54rem; //.375rem;
 
 $navbar-height:               52px;
 $navbar-total-height:        53px;
-$navbar-border-radius:              0;
-$navbar-padding-horizontal:         $spacer;
-$navbar-padding-vertical:           ($spacer / 2);
-
+// $navbar-border-radius:              $border-radius;
+// $navbar-padding-horizontal:         $spacer;
+// $navbar-padding-vertical:           ($spacer / 2);
+//
 // $navbar-dark-color:                 rgba(255,255,255,.5);
 // $navbar-dark-hover-color:           rgba(255,255,255,.75);
 // $navbar-dark-active-color:          rgba(255,255,255,1);
@@ -403,23 +403,23 @@ $navbar-padding-vertical:           ($spacer / 2);
 
 // Navs
 
-$nav-link-padding:                          12px 8px;
-$nav-link-hover-bg:                         red; //$gray-lighter;
-
-$nav-disabled-link-color:                   $text-muted;
-$nav-disabled-link-hover-color:             $text-muted;
-
-$nav-tabs-border-color:                     #d9dee2;
-
-$nav-tabs-link-border-width:                0;
-$nav-tabs-link-hover-border-color:          green; //$gray-lighter;
-
-$nav-tabs-active-link-hover-bg:             $body-bg;
-$nav-tabs-active-link-hover-color:          $body-color;
-$nav-tabs-active-link-hover-border-color:   #ddd;
-
-$nav-tabs-justified-link-border-color:            #ddd;
-$nav-tabs-justified-active-link-border-color:     $body-bg;
+// $nav-link-padding:                          .5em 1em;
+// $nav-link-hover-bg:                         $gray-lighter;
+//
+// $nav-disabled-link-color:                   $gray-light;
+// $nav-disabled-link-hover-color:             $gray-light;
+//
+// $nav-tabs-border-color:                     #ddd;
+//
+// $nav-tabs-link-border-width:                $border-width;
+// $nav-tabs-link-hover-border-color:          $gray-lighter;
+//
+// $nav-tabs-active-link-hover-bg:             $body-bg;
+// $nav-tabs-active-link-hover-color:          $gray;
+// $nav-tabs-active-link-hover-border-color:   #ddd;
+//
+// $nav-tabs-justified-link-border-color:            #ddd;
+// $nav-tabs-justified-active-link-border-color:     $body-bg;
 //
 // $nav-pills-border-radius:                   $border-radius;
 // $nav-pills-active-link-hover-bg:            $component-active-bg;
@@ -643,8 +643,13 @@ $nav-tabs-justified-active-link-border-color:     $body-bg;
 
 // Breadcrumbs
 
-$breadcrumb-padding-vertical:   6px;
-$breadcrumb-padding-horizontal: 0;
+// $breadcrumb-padding-vertical:   .75rem;
+// $breadcrumb-padding-horizontal: 1rem;
+//
+// $breadcrumb-bg:                 $gray-lighter;
+// $breadcrumb-divider-color:      $gray-light;
+// $breadcrumb-active-color:       $gray-light;
+// $breadcrumb-divider:            "/";
 
 $breadcrumb-bg:                 transparent;
 $breadcrumb-divider-color:      $border-color-dark;