diff --git a/admin/javascript/src/components/form-builder/index.js b/admin/javascript/src/components/form-builder/index.js
index 980c4fbde..d96cbada0 100644
--- a/admin/javascript/src/components/form-builder/index.js
+++ b/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 = {
diff --git a/admin/javascript/src/components/grid-field-action/README.md b/admin/javascript/src/components/grid-field-action/README.md
deleted file mode 100644
index 38a451260..000000000
--- a/admin/javascript/src/components/grid-field-action/README.md
+++ /dev/null
@@ -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
diff --git a/admin/javascript/src/components/grid-field-action/styles.scss b/admin/javascript/src/components/grid-field-action/styles.scss
deleted file mode 100644
index 69da535ed..000000000
--- a/admin/javascript/src/components/grid-field-action/styles.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/admin/javascript/src/components/grid-field-action/tests/grid-field-action.js b/admin/javascript/src/components/grid-field-action/tests/grid-field-action.js
deleted file mode 100644
index 2695e2b67..000000000
--- a/admin/javascript/src/components/grid-field-action/tests/grid-field-action.js
+++ /dev/null
@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldActionComponent', () => {
-
-});
diff --git a/admin/javascript/src/components/grid-field-cell/README.md b/admin/javascript/src/components/grid-field-cell/README.md
deleted file mode 100644
index b15aeb286..000000000
--- a/admin/javascript/src/components/grid-field-cell/README.md
+++ /dev/null
@@ -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).
diff --git a/admin/javascript/src/components/grid-field-cell/styles.scss b/admin/javascript/src/components/grid-field-cell/styles.scss
deleted file mode 100644
index f52b177f0..000000000
--- a/admin/javascript/src/components/grid-field-cell/styles.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/admin/javascript/src/components/grid-field-cell/tests/grid-field-cell-test.js b/admin/javascript/src/components/grid-field-cell/tests/grid-field-cell-test.js
deleted file mode 100644
index 7ae444b05..000000000
--- a/admin/javascript/src/components/grid-field-cell/tests/grid-field-cell-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldCellComponent', () => {
-
-});
diff --git a/admin/javascript/src/components/grid-field-header-cell/README.md b/admin/javascript/src/components/grid-field-header-cell/README.md
deleted file mode 100644
index d35ec0ed5..000000000
--- a/admin/javascript/src/components/grid-field-header-cell/README.md
+++ /dev/null
@@ -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).
diff --git a/admin/javascript/src/components/grid-field-header-cell/styles.scss b/admin/javascript/src/components/grid-field-header-cell/styles.scss
deleted file mode 100644
index 1d3926590..000000000
--- a/admin/javascript/src/components/grid-field-header-cell/styles.scss
+++ /dev/null
@@ -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;
- }
- }
-}
\ No newline at end of file
diff --git a/admin/javascript/src/components/grid-field-header-cell/tests/grid-field-header-cell-test.js b/admin/javascript/src/components/grid-field-header-cell/tests/grid-field-header-cell-test.js
deleted file mode 100644
index 3ac2048b3..000000000
--- a/admin/javascript/src/components/grid-field-header-cell/tests/grid-field-header-cell-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldHeaderCellComponent', () => {
-
-});
diff --git a/admin/javascript/src/components/grid-field-header/README.md b/admin/javascript/src/components/grid-field-header/README.md
deleted file mode 100644
index 3b6a0c345..000000000
--- a/admin/javascript/src/components/grid-field-header/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# GridFieldHeader
-
-This component is used to display a tabel header row on a GridFieldComponent.
-
-## Props
diff --git a/admin/javascript/src/components/grid-field-header/styles.scss b/admin/javascript/src/components/grid-field-header/styles.scss
deleted file mode 100644
index 39a7db6ec..000000000
--- a/admin/javascript/src/components/grid-field-header/styles.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.grid-field-header-component {
-
-}
diff --git a/admin/javascript/src/components/grid-field-header/tests/grid-field-header-test.js b/admin/javascript/src/components/grid-field-header/tests/grid-field-header-test.js
deleted file mode 100644
index cb5eb4bf1..000000000
--- a/admin/javascript/src/components/grid-field-header/tests/grid-field-header-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldHeaderComponent', () => {
-
-});
diff --git a/admin/javascript/src/components/grid-field-row/README.md b/admin/javascript/src/components/grid-field-row/README.md
deleted file mode 100644
index 9cdee86ca..000000000
--- a/admin/javascript/src/components/grid-field-row/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# GridFieldRow
-
-Represents a row in a GridField.
-
-## Props
-
-### cells (array)
-
-The table data to display in the row.
diff --git a/admin/javascript/src/components/grid-field-row/styles.scss b/admin/javascript/src/components/grid-field-row/styles.scss
deleted file mode 100644
index 28d3c9012..000000000
--- a/admin/javascript/src/components/grid-field-row/styles.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/admin/javascript/src/components/grid-field-row/tests/grid-field-row-test.js b/admin/javascript/src/components/grid-field-row/tests/grid-field-row-test.js
deleted file mode 100644
index d660e32f0..000000000
--- a/admin/javascript/src/components/grid-field-row/tests/grid-field-row-test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-jest.dontMock('../index');
-
-describe('GridFieldRowComponent', () => {
-
-});
diff --git a/admin/javascript/src/components/grid-field-table/README.md b/admin/javascript/src/components/grid-field-table/README.md
deleted file mode 100644
index 259fa6494..000000000
--- a/admin/javascript/src/components/grid-field-table/README.md
+++ /dev/null
@@ -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.
diff --git a/admin/javascript/src/components/grid-field-table/styles.scss b/admin/javascript/src/components/grid-field-table/styles.scss
deleted file mode 100644
index 15aceb166..000000000
--- a/admin/javascript/src/components/grid-field-table/styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.grid-field-table-component {
- display: flex;
- flex-flow: column nowrap;
- justify-content: space-between;
-}
diff --git a/admin/javascript/src/components/grid-field/README.md b/admin/javascript/src/components/grid-field/README.md
new file mode 100644
index 000000000..ec1f8adc9
--- /dev/null
+++ b/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.
diff --git a/admin/javascript/src/components/grid-field-action/index.js b/admin/javascript/src/components/grid-field/action.js
similarity index 100%
rename from admin/javascript/src/components/grid-field-action/index.js
rename to admin/javascript/src/components/grid-field/action.js
diff --git a/admin/javascript/src/components/grid-field-cell/index.js b/admin/javascript/src/components/grid-field/cell.js
similarity index 100%
rename from admin/javascript/src/components/grid-field-cell/index.js
rename to admin/javascript/src/components/grid-field/cell.js
diff --git a/admin/javascript/src/components/grid-field-header-cell/index.js b/admin/javascript/src/components/grid-field/header-cell.js
similarity index 100%
rename from admin/javascript/src/components/grid-field-header-cell/index.js
rename to admin/javascript/src/components/grid-field/header-cell.js
diff --git a/admin/javascript/src/components/grid-field-header/index.js b/admin/javascript/src/components/grid-field/header.js
similarity index 85%
rename from admin/javascript/src/components/grid-field-header/index.js
rename to admin/javascript/src/components/grid-field/header.js
index 9a6547535..2a5cf1cc6 100644
--- a/admin/javascript/src/components/grid-field-header/index.js
+++ b/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 {
diff --git a/admin/javascript/src/sections/grid-field/index.js b/admin/javascript/src/components/grid-field/index.js
similarity index 87%
rename from admin/javascript/src/sections/grid-field/index.js
rename to admin/javascript/src/components/grid-field/index.js
index 379be9d71..848a94dc4 100644
--- a/admin/javascript/src/sections/grid-field/index.js
+++ b/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 GridFieldHeader from '../../components/grid-field-header';
-import GridFieldHeaderCell from '../../components/grid-field-header-cell';
-import GridFieldRow from '../../components/grid-field-row';
-import GridFieldCell from '../../components/grid-field-cell';
-import GridFieldAction from '../../components/grid-field-action';
+import GridFieldTable from './table';
+import GridFieldHeader from './header';
+import GridFieldHeaderCell from './header-cell';
+import GridFieldRow from './row';
+import GridFieldCell from './cell';
+import GridFieldAction from './action';
class GridField extends SilverStripeComponent {
constructor(props) {
super(props);
-
+
this.deleteCampaign = this.deleteCampaign.bind(this);
this.editCampaign = this.editCampaign.bind(this);
diff --git a/admin/javascript/src/components/grid-field-row/index.js b/admin/javascript/src/components/grid-field/row.js
similarity index 100%
rename from admin/javascript/src/components/grid-field-row/index.js
rename to admin/javascript/src/components/grid-field/row.js
diff --git a/admin/javascript/src/components/grid-field/styles.scss b/admin/javascript/src/components/grid-field/styles.scss
new file mode 100644
index 000000000..335d15d91
--- /dev/null
+++ b/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;
+}
diff --git a/admin/javascript/src/components/grid-field-table/index.js b/admin/javascript/src/components/grid-field/table.js
similarity index 100%
rename from admin/javascript/src/components/grid-field-table/index.js
rename to admin/javascript/src/components/grid-field/table.js
diff --git a/admin/javascript/src/components/grid-field-table/tests/grid-field-test.js b/admin/javascript/src/components/grid-field/tests/grid-field-test.js
similarity index 95%
rename from admin/javascript/src/components/grid-field-table/tests/grid-field-test.js
rename to admin/javascript/src/components/grid-field/tests/grid-field-test.js
index 0869ecdfe..b5bbc9d2a 100644
--- a/admin/javascript/src/components/grid-field-table/tests/grid-field-test.js
+++ b/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(
);
-
+
expect(gridfield.generateHeader()).toBe(null);
});
});
-
+
describe('generateRows()', function () {
var gridfield;
@@ -59,7 +60,7 @@ describe('GridFieldTableComponent', () => {
gridfield = ReactTestUtils.renderIntoDocument(
);
-
+
expect(gridfield.generateRows()).toBe(null);
});
});
diff --git a/admin/javascript/src/sections/grid-field/README.md b/admin/javascript/src/sections/grid-field/README.md
deleted file mode 100644
index 5aa85f47b..000000000
--- a/admin/javascript/src/sections/grid-field/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# GridField
-
-General purpose component for tabular data.
diff --git a/admin/javascript/src/styles/main.scss b/admin/javascript/src/styles/main.scss
index 3dcf4b781..7a8131168 100644
--- a/admin/javascript/src/styles/main.scss
+++ b/admin/javascript/src/styles/main.scss
@@ -6,12 +6,7 @@
/** -----------------------------
* components
* ------------------------------ */
-@import "../components/grid-field-table/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/grid-field/styles";
@import "../components/north-header/styles";
@import "../components/north-header-breadcrumbs/styles";
@import "../components/action/styles";
diff --git a/gulpfile.js b/gulpfile.js
index 1f9b51863..0ef589708 100644
--- a/gulpfile.js
+++ b/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-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-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-table', { expose: 'grid-field-table' })
+ .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/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/row', { expose: 'grid-field-row' })
+ .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' })