Consolidated grid-field component

Every top-level folder in /components should be a standalone component.
This isn't the case for the grid-field-* ones, so they belong into the same folder.
See https://github.com/Automattic/wp-calypso/blob/master/docs/components.md

merge styles

admin/javascript/src/components/form-builder/index.js

@@ -7,7 +7,7 @@ import SilverStripeComponent from '../../SilverStripeComponent';
 import FormComponent from '../form';
 import TextField from '../text-field';
 import HiddenField from '../hidden-field';
-import GridField from '../../sections/grid-field';
+import GridField from '../../components/grid-field';
 
 // Using this to map field types to components until we implement dependency injection.
 var fakeInjector = {

admin/javascript/src/components/grid-field-action/README.md

@@ -1,13 +0,0 @@
-# GridFieldAction
-
-This component renders a button within a grid-field to handle actions.
-
-## Props
-
-### handleClick (function - required)
-
-The handler for when a button is clicked
-
-#### Arguments
-
- * event - the click event

admin/javascript/src/components/grid-field-action/styles.scss

@@ -1,20 +0,0 @@
-.grid-field-action-component {
-    background: none;
-    border: 0;
-    color: $gray-dark;
-    float: left;
-    padding: 0 8px;
-    height: 52px;
-
-    &:hover {
-        color: darken($gray-dark, 10%);
-    }
-    
-    &::before {
-        font-size: 20px;
-    }
-    
-    &:last-of-type {
-        margin-right: 12px;
-    }
-}

admin/javascript/src/components/grid-field-action/tests/grid-field-action.js

@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldActionComponent', () => {
-
-});

admin/javascript/src/components/grid-field-cell/README.md

@@ -1,9 +0,0 @@
-# GridFieldCell
-
-This component represents a data cell in a GridFieldRow.
-
-## Props
-
-### width (number)
-
-Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).

admin/javascript/src/components/grid-field-cell/styles.scss

@@ -1,25 +0,0 @@
-.grid-field-cell-component {
-    display: flex;
-    flex-flow: row nowrap;
-    flex-grow: 1;
-    flex-basis: 0;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    padding: $grid-y*2 $grid-x*2;
-    line-height: 20px;
-
-    &:first-child {
-        padding-left: $grid-x*2.5;
-    }
-    
-    &:last-child {
-        padding-right: $grid-x*2.5;
-    }
-    
-    @for $i from 1 through 10 {
-        &.cell-width-#{$i} {
-            flex-grow: $i;
-        }
-    }
-}

admin/javascript/src/components/grid-field-cell/tests/grid-field-cell-test.js

@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldCellComponent', () => {
-
-});

admin/javascript/src/components/grid-field-header-cell/README.md

@@ -1,9 +0,0 @@
-# GridFieldHeaderCell
-
-This component is a cell in a GridFirldHeader component.
-
-## Props
-
-### width (number)
-
-Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).

admin/javascript/src/components/grid-field-header-cell/styles.scss

@@ -1,27 +0,0 @@
-.grid-field-header-cell-component {
-    text-transform: uppercase;
-    font-size: $font-size-root - 1;
-    display: flex;
-    flex-flow: row nowrap;
-    flex-grow: 1;
-    flex-basis: 0;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    padding: $grid-y*2 $grid-x*2;
-    line-height: 20px;
-
-    &:first-child {
-        padding-left: $grid-x*2.5;
-    }
-    
-    &:last-child {
-        padding-right: $grid-x*2.5;
-    }
-    
-    @for $i from 1 through 10 {
-        &.cell-width-#{$i} {
-            flex-grow: $i;
-        }
-    }
-}

admin/javascript/src/components/grid-field-header-cell/tests/grid-field-header-cell-test.js

@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldHeaderCellComponent', () => {
-
-});

admin/javascript/src/components/grid-field-header/README.md

@@ -1,5 +0,0 @@
-# GridFieldHeader
-
-This component is used to display a tabel header row on a GridFieldComponent.
-
-## Props

admin/javascript/src/components/grid-field-header/styles.scss

@@ -1,3 +0,0 @@
-.grid-field-header-component {
-
-}

admin/javascript/src/components/grid-field-header/tests/grid-field-header-test.js

@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldHeaderComponent', () => {
-
-});

admin/javascript/src/components/grid-field-row/README.md

@@ -1,9 +0,0 @@
-# GridFieldRow
-
-Represents a row in a GridField.
-
-## Props
-
-### cells (array)
-
-The table data to display in the row.

admin/javascript/src/components/grid-field-row/styles.scss

@@ -1,16 +0,0 @@
-.grid-field-table-component {
-    li.grid-field-row-component {
-        display: flex;
-        flex-flow: row nowrap;
-        width: 100%;
-        border: 0;
-        box-shadow: inset 0 -1px 0 0 $gray-lighter;
-        margin: 0;
-        padding: 0;
-
-        // Header row
-        &:first-child {
-            background: none;
-        }
-    }
-}

admin/javascript/src/components/grid-field-row/tests/grid-field-row-test.js

@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldRowComponent', () => {
-
-});

admin/javascript/src/components/grid-field-table/README.md

@@ -1,13 +0,0 @@
-# GridFieldTableComponent
-
-This component is used to display structured data in an extendible table layout.
-
-## Props
-
-### Headings (array)
-
-The column headings.
-
-### Rows (array)
-
-The table rows.

admin/javascript/src/components/grid-field-table/styles.scss

@@ -1,5 +0,0 @@
-.grid-field-table-component {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-}

admin/javascript/src/components/grid-field/README.md

@@ -0,0 +1,48 @@
+# GridField
+
+General purpose component for tabular data.
+
+## GridFieldTableComponent
+
+This component is used to display structured data in an extendible table layout.
+
+**Required Props**
+
+ * **Headings** - (array) The column headings.
+ * **Rows** - (array) The table rows.
+
+## GridFieldAction
+
+This component renders a button within a grid-field to handle actions.
+
+**Required Props**
+
+ * **handleClick** - Function for when a button is clicked
+
+## GridFieldCell
+
+This component represents a data cell in a GridFieldRow.
+
+**Optional Props**
+
+ * **width** - Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
+
+## GridFieldHeader
+
+This component is used to display a table header row on a GridFieldComponent.
+
+## GridFieldHeaderCell
+
+This component is a cell in a GridFieldHeader component.
+
+**Optional Props**
+
+ * **width** - Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
+
+# GridFieldRow
+
+Represents a row in a GridField.
+
+**Optional Props**
+
+ * **cells** - (array) The table data to display in the row.

admin/javascript/src/components/grid-field/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import SilverStripeComponent from '../../SilverStripeComponent';
-import GridFieldRowComponent from '../grid-field-row';
+import GridFieldRowComponent from './row';
 
 class GridFieldHeaderComponent extends SilverStripeComponent {
 

admin/javascript/src/components/grid-field/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import SilverStripeComponent from '../../SilverStripeComponent';
-import GridFieldTable from '../../components/grid-field-table';
+import GridFieldTable from './table';
-import GridFieldHeader from '../../components/grid-field-header';
+import GridFieldHeader from './header';
-import GridFieldHeaderCell from '../../components/grid-field-header-cell';
+import GridFieldHeaderCell from './header-cell';
-import GridFieldRow from '../../components/grid-field-row';
+import GridFieldRow from './row';
-import GridFieldCell from '../../components/grid-field-cell';
+import GridFieldCell from './cell';
-import GridFieldAction from '../../components/grid-field-action';
+import GridFieldAction from './action';
 
 class GridField extends SilverStripeComponent {
 
     constructor(props) {
         super(props);
-        
+
         this.deleteCampaign = this.deleteCampaign.bind(this);
         this.editCampaign = this.editCampaign.bind(this);
 

admin/javascript/src/components/grid-field/styles.scss

@@ -0,0 +1,97 @@
+.grid-field-action-component {
+    background: none;
+    border: 0;
+    color: $gray-dark;
+    float: left;
+    padding: 0 8px;
+    height: 52px;
+
+    &:hover {
+        color: darken($gray-dark, 10%);
+    }
+
+    &::before {
+        font-size: 20px;
+    }
+
+    &:last-of-type {
+        margin-right: 12px;
+    }
+}
+
+.grid-field-cell-component {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-grow: 1;
+    flex-basis: 0;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    padding: $grid-y*2 $grid-x*2;
+    line-height: 20px;
+
+    &:first-child {
+        padding-left: $grid-x*2.5;
+    }
+
+    &:last-child {
+        padding-right: $grid-x*2.5;
+    }
+
+    @for $i from 1 through 10 {
+        &.cell-width-#{$i} {
+            flex-grow: $i;
+        }
+    }
+}
+
+.grid-field-header-cell-component {
+    text-transform: uppercase;
+    font-size: $font-size-root - 1;
+    display: flex;
+    flex-flow: row nowrap;
+    flex-grow: 1;
+    flex-basis: 0;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    padding: $grid-y*2 $grid-x*2;
+    line-height: 20px;
+
+    &:first-child {
+        padding-left: $grid-x*2.5;
+    }
+
+    &:last-child {
+        padding-right: $grid-x*2.5;
+    }
+
+    @for $i from 1 through 10 {
+        &.cell-width-#{$i} {
+            flex-grow: $i;
+        }
+    }
+}
+
+.grid-field-table-component {
+    li.grid-field-row-component {
+        display: flex;
+        flex-flow: row nowrap;
+        width: 100%;
+        border: 0;
+        box-shadow: inset 0 -1px 0 0 $gray-lighter;
+        margin: 0;
+        padding: 0;
+
+        // Header row
+        &:first-child {
+            background: none;
+        }
+    }
+}
+
+.grid-field-table-component {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+}

admin/javascript/src/components/grid-field/tests/grid-field-test.js

@@ -1,8 +1,9 @@
 jest.dontMock('../index');
+jest.dontMock('../table');
 
 const React = require('react'),
     ReactTestUtils = require('react-addons-test-utils'),
-    GridFieldTableComponent = require('../index.js').default;
+    GridFieldTableComponent = require('../table.js').default;
 
 describe('GridFieldTableComponent', () => {
     var props;
@@ -33,11 +34,11 @@ describe('GridFieldTableComponent', () => {
             gridfield = ReactTestUtils.renderIntoDocument(
                 <GridFieldTableComponent {...props} />
             );
-            
+
             expect(gridfield.generateHeader()).toBe(null);
         });
     });
-    
+
     describe('generateRows()', function () {
         var gridfield;
 
@@ -59,7 +60,7 @@ describe('GridFieldTableComponent', () => {
             gridfield = ReactTestUtils.renderIntoDocument(
                 <GridFieldTableComponent {...props} />
             );
-            
+
             expect(gridfield.generateRows()).toBe(null);
         });
     });

admin/javascript/src/sections/grid-field/README.md

@@ -1,3 +0,0 @@
-# GridField
-
-General purpose component for tabular data.

admin/javascript/src/styles/main.scss

@@ -6,12 +6,7 @@
 /** -----------------------------
  * components
  * ------------------------------ */
-@import "../components/grid-field-table/styles";
+@import "../components/grid-field/styles";
-@import "../components/grid-field-cell/styles";
-@import "../components/grid-field-header/styles";
-@import "../components/grid-field-header-cell/styles";
-@import "../components/grid-field-row/styles";
-@import "../components/grid-field-action/styles";
 @import "../components/north-header/styles";
 @import "../components/north-header-breadcrumbs/styles";
 @import "../components/action/styles";

gulpfile.js

@@ -194,12 +194,12 @@ gulp.task('bundle-lib', function bundleLib() {
         .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form',                     { expose: 'form' })
         .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-action',              { expose: 'form-action' })
         .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/form-builder',             { expose: 'form-builder' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/sections/grid-field',                 { expose: 'grid-field' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field',               { expose: 'grid-field' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-cell',          { expose: 'grid-field-cell' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/cell',          { expose: 'grid-field-cell' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-header',        { expose: 'grid-field-header' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header',        { expose: 'grid-field-header' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-header-cell',   { expose: 'grid-field-header-cell' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/header-cell',   { expose: 'grid-field-header-cell' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-row',           { expose: 'grid-field-row' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/row',           { expose: 'grid-field-row' })
-        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field-table',         { expose: 'grid-field-table' })
+        .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/grid-field/table',         { expose: 'grid-field-table' })
         .require(PATHS.ADMIN_JAVASCRIPT_SRC + '/components/hidden-field',             { expose: 'hidden-field' })
         .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/i18n.js',                         { expose: 'i18n' })
         .require(PATHS.FRAMEWORK_JAVASCRIPT_SRC + '/jQuery.js',                       { expose: 'jQuery' })