Skip to content

Commit

Permalink
Feature/table refactor (#38)
Browse files Browse the repository at this point in the history 
* Correct syntax error for Hot module replacement to add module as second parameter to storiesOf for ArrowLeft

* Pass Multi dimensional array into names so that rows that include headings are grouped horizontally instead of vertically e.g. first row of values are all named row ‘one’

Headings for Column names are still named incrementally e.g. one, two, three, four

* Remove duplicate styling and adjust paddings

This is proposed padding to fix our issue #7 . If it's acceptable we could use the same on govuk-react.

* Add vertical align style optional style override.

* Correct deletion of space between rowHeading and columnCount.

* Generate docs

* Fix verticalAlign props passthrough

* Refactor stories to pass in an object with the name for headings <th> and the name for values <td>

* Refactor getName component to calculate th and td names based on whether rowIncludes heading or vice versa

* Refactor existing tests and add new tests based on new props e.g. verticalAlign style override test

* Update docs for Table

* Remove default parameters

* Remove console.log from test

* Remove verticalAlign as prop pass through and default to verticalAlign: ‘top’ in emotion styles.

* - Make names an array again
- Add nameByRow prop to decide if naming should be applied across columns or rows
- Ensure names array allows for entire rows/columns to be named the same or cells can have completely individual names

* Refactor stories based on names array

* Refactor tests based on names array

* Regenerate documentation

* Update Table usage:

Update inline documentation for table and regenerate doc files

* Fix TableHeading line lengths greater than 100 chars.
  • Loading branch information
@taranchauhan @stevesims
taranchauhan authored and stevesims committed Aug 6, 2018
1 parent f249a25 commit 060244e
Show file tree
Hide file tree
Showing 6 changed files with 288 additions and 65 deletions.
57 changes: 49 additions & 8 deletions API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -893,36 +893,77 @@ Table

Simple
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
```

rowIncludesHeading
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
```

rowIncludesHeading, no titles
```jsx
<Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
<Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
```

rowIncludesHeading, no titles, small single row
```jsx
<Table rows={[['title', 'value']]} rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];
<Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
```

rowIncludesHeading, with flexible columns
rowIncludesHeading, with titles, with flexible columns
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
`flexibleColumns` | | `````` | bool |
`flexibleColumns` | | ```false``` | bool |
`name` | | `````` | string |
`nameByRow` | | ```false``` | bool |
`names` | | ```[]``` | arrayOf[object Object] |
`rowIncludesHeading` | | `````` | bool |
`rowIncludesHeading` | | ```false``` | bool |
`rows` | true | `````` | arrayOf[object Object] |
`titles` | | `````` | arrayOf[object Object] |

Expand Down
57 changes: 49 additions & 8 deletions components/table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,77 @@ Table

Simple
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={exampleNames} />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const columnTableNames = ['one', 'two', 'three', ['i', 'am', 'named', 'individually']];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} names={columnTableNames} />
```

rowIncludesHeading
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
```

rowIncludesHeading, no titles
```jsx
<Table rows={arrayExampleContent} rowIncludesHeading names={exampleNames} />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

<Table rows={arrayExampleContent} rowIncludesHeading nameByRow names={rowTableNames} />
```

rowIncludesHeading, no titles, small single row
```jsx
<Table rows={[['title', 'value']]} rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNames = ['one', ['i', 'am', 'named', 'individually'], 'three'];

<Table rows={[['title', 'value']]} rowIncludesHeading nameByRow names={rowTableNames} />
```

rowIncludesHeading, with flexible columns
rowIncludesHeading, with titles, with flexible columns
```jsx
<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading />
const arrayExampleHeadings = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4'];
const arrayExampleContent = [
['Content 1-1', 'Content 1-2', 'Content 1-3', 'Content 1-4'],
['Content 2-1', 'Content 2-2', 'Content 2-3', 'Content 2-4'],
['Content 3-1', 'Content 3-2', 'Content 3-3', 'Content 3-4'],
];
const rowTableNamesWithTitles = ['heading', 'one', ['i', 'am', 'named', 'individually'], 'three'];

<Table titles={arrayExampleHeadings} rows={arrayExampleContent} flexibleColumns rowIncludesHeading nameByRow names={rowTableNamesWithTitles} />
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
`flexibleColumns` | | `````` | bool |
`flexibleColumns` | | ```false``` | bool |
`name` | | `````` | string |
`nameByRow` | | ```false``` | bool |
`names` | | ```[]``` | arrayOf[object Object] |
`rowIncludesHeading` | | `````` | bool |
`rowIncludesHeading` | | ```false``` | bool |
`rows` | true | `````` | arrayOf[object Object] |
`titles` | | `````` | arrayOf[object Object] |

Expand Down
5 changes: 4 additions & 1 deletion components/table/src/__snapshots__/test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`Table matches snapshot 1`] = `
<tr>
<TableHeading
key="0"
name="one"
name="heading"
>
Heading 4
</TableHeading>
Expand All @@ -22,6 +22,7 @@ exports[`Table matches snapshot 1`] = `
<TableHeading
columnCount={1}
key="0"
name="one"
rowHeading={true}
>
Content 1-4
Expand All @@ -33,6 +34,7 @@ exports[`Table matches snapshot 1`] = `
<TableHeading
columnCount={1}
key="0"
name="i"
rowHeading={true}
>
Content 2-4
Expand All @@ -44,6 +46,7 @@ exports[`Table matches snapshot 1`] = `
<TableHeading
columnCount={1}
key="0"
name="three"
rowHeading={true}
>
Content 3-4
Expand Down
Loading

0 comments on commit 060244e

Please sign in to comment.