Feature/import new components

API.md

@@ -1,3 +1,70 @@
+ArrayObjectTable
+================
+
+### Import
+```js
+  import ArrayObjectTable from '@govuk-frederic/array-object-table';
+```
+<!-- STORY -->
+
+### Usage
+
+Simple
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  { one: 'test', two: 'test' },
+  { one: 'test' },
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title}/>;
+```
+
+With skipEmptyRows
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  {},
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
+```
+
+With skipEmptyRows and hideWithNoValues
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  {},
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
+```
+
+### Properties
+Prop | Required | Default | Type | Description
+:--- | :------- | :------ | :--- | :----------
+ `array` |  | ```[]``` | arrayOf[object Object] | 
+ `fields` |  | ```[]``` | arrayOf[object Object] | 
+ `hideWithNoValues` |  | ```false``` | bool | 
+ `skipEmptyRows` |  | ```false``` | bool | 
+ `title` |  | `````` | node | 
+
+
 ArrowLeft
 =========
 
@@ -514,22 +581,6 @@ import { HashRouter, Link } from 'react-router-dom';
   </CounterBar>
 </HashRouter>
 ```
-Use an active Link component for a counter
-```jsx
-import { HashRouter, Link } from 'react-router-dom';
-
-<HashRouter>
-  <CounterBar>
-    <CounterBar.Total score={15}>All counters</CounterBar.Total>
-    <CounterBar.Counters>
-      <CounterBar.Counter score={1} component={Link} to="/courses/1/" active>Counter *1</CounterBar.Counter>
-      <CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
-      <CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
-      <CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
-      <CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
-    </CounterBar.Counters>
-  </CounterBar>
-</HashRouter>
 
 ### Properties
 Prop | Required | Default | Type | Description
@@ -664,6 +715,69 @@ Prop | Required | Default | Type | Description
  `inlineBlock` |  | `````` | bool | 
 
 
+ObjectTable
+===========
+
+### Import
+```js
+  import ObjectTable from '@govuk-frederic/object-table';
+```
+<!-- STORY -->
+
+### Usage
+
+Simple
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+  { key: 'three', heading: 'Three' },
+  { key: 'four', heading: 'Four' },
+];
+const object = { one: 'test', two: 'test', three: '', four: null };
+const title = ['Heading'];
+
+<ObjectTable fields={fields} object={object} title={title}/>;
+```
+
+With skipEmptyValues
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+  { key: 'three', heading: 'Three' },
+  { key: 'four', heading: 'Four' },
+];
+const object = { one: 'test', two: 'test', three: '', four: null };
+const title = ['Heading'];
+
+<ObjectTable fields={fields} object={object} title={title} skipEmptyValues={false}/>
+```
+
+With hideWithNoValues
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const object = { };
+const title = ['Heading'];
+
+<ObjectTable fields={fields} object={object} title={title} hideWithNoValues />;
+```
+
+### Properties
+Prop | Required | Default | Type | Description
+:--- | :------- | :------ | :--- | :----------
+ `defaultTransform` |  | `````` | func | 
+ `fields` |  | ```[]``` | arrayOf[object Object] | 
+ `hideWithNoValues` |  | ```false``` | bool | 
+ `object` |  | ```{}``` | object | 
+ `skipEmptyValues` |  | ```true``` | bool | 
+ `skipMissingKeys` |  | `````` | bool | 
+ `title` |  | `````` | node | 
+
+
 OpenButton
 ==========
 

components/array-object-table/README.md

@@ -0,0 +1,67 @@
+ArrayObjectTable
+================
+
+### Import
+```js
+  import ArrayObjectTable from '@govuk-frederic/array-object-table';
+```
+<!-- STORY -->
+
+### Usage
+
+Simple
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  { one: 'test', two: 'test' },
+  { one: 'test' },
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title}/>;
+```
+
+With skipEmptyRows
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  {},
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
+```
+
+With skipEmptyRows and hideWithNoValues
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two' },
+];
+const array = [
+  {},
+  {},
+];
+const title = ['Heading'];
+
+<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
+```
+
+### Properties
+Prop | Required | Default | Type | Description
+:--- | :------- | :------ | :--- | :----------
+ `array` |  | ```[]``` | arrayOf[object Object] | 
+ `fields` |  | ```[]``` | arrayOf[object Object] | 
+ `hideWithNoValues` |  | ```false``` | bool | 
+ `skipEmptyRows` |  | ```false``` | bool | 
+ `title` |  | `````` | node | 
+
+

components/array-object-table/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@govuk-frederic/array-object-table",
+  "version": "0.0.1",
+  "dependencies": {
+    "@govuk-frederic/table": "^0.0.3",
+    "@govuk-frederic/utils": "^0.0.1"
+  },
+  "devDependencies": {
+    "@govuk-react/storybook-components": "^0.2.4",
+    "@storybook/addon-knobs": "^3.4.2"
+  },
+  "peerDependencies": {
+    "emotion": ">=9",
+    "prop-types": ">=15",
+    "react": ">=16.2.0",
+    "react-emotion": ">=9"
+  },
+  "scripts": {
+    "build": "npm run build:lib && npm run build:es",
+    "build:lib": "rimraf lib && babel src -d lib --source-maps",
+    "build:es": "rimraf es && cross-env BABEL_ENV=es babel src -d es --source-maps",
+    "docs": "doc-component ./lib/index.js ./README.md"
+  },
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "author": "Gavin Orland",
+  "license": "MIT",
+  "homepage": "https://github.com/stevesims/govuk-frederic#readme",
+  "description": "govuk-frederic: Frederic project specific components.",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

components/array-object-table/src/index.js

@@ -0,0 +1,83 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'govuk-frederic';
+
+import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
+
+/**
+ *
+ * ### Usage
+ *
+ * Simple
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two' },
+ * ];
+ * const array = [
+ *   { one: 'test', two: 'test' },
+ *   { one: 'test' },
+ *   {},
+ * ];
+ * const title = ['Heading'];
+ * 
+ * <ArrayObjectTable fields={fields} array={array} title={title}/>;
+ * ```
+ * 
+ * With skipEmptyRows
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two' },
+ * ];
+ * const array = [
+ *   {},
+ *   {},
+ * ];
+ * const title = ['Heading'];
+ * 
+ * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
+ * ```
+ * 
+ * With skipEmptyRows and hideWithNoValues
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two' },
+ * ];
+ * const array = [
+ *   {},
+ *   {},
+ * ];
+ * const title = ['Heading'];
+ * 
+ * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
+ * ```
+ * */
+const ArrayObjectTable = ({ fields = [], array = [], hideWithNoValues = false, skipEmptyRows = false, title, ...props }) => {
+  let rows = rowsFromArray(array, fields, skipEmptyRows);
+  if (!rows.length && !hideWithNoValues) {
+    rows = rowsFromArray([{}], fields, false);
+  }
+  return rows.length ?
+    <Fragment>
+      {title ? title : null}
+      <Table rows={rows} titles={titlesFromFields(fields)} {...props}/>
+    </Fragment>
+    :
+    null;
+};
+
+ArrayObjectTable.propTypes = {
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    heading: PropTypes.string.isRequired,
+    transform: PropTypes.func,
+  })),
+  array: PropTypes.arrayOf(PropTypes.object),
+  hideWithNoValues: PropTypes.bool,
+  skipEmptyRows: PropTypes.bool,
+  title: PropTypes.node,
+};
+
+export default ArrayObjectTable;