Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/table refactor #38

Merged
merged 24 commits into from
Aug 6, 2018
Merged

Feature/table refactor #38

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
73d852c
Correct syntax error for Hot module replacement to add module as seco…
Jul 13, 2018
c34f2c2
Pass Multi dimensional array into names so that rows that include hea…
Jul 13, 2018
c85d0b8
Merge branch 'master' into feature/table-refactor
gavinorland Jul 17, 2018
b08cabd
Remove duplicate styling and adjust paddings
gavinorland Jul 17, 2018
8d4ef36
Add vertical align style optional style override.
Jul 19, 2018
8a4d075
Correct deletion of space between rowHeading and columnCount.
Jul 19, 2018
cc859db
Generate docs
Jul 19, 2018
1ee641f
Fix verticalAlign props passthrough
Jul 19, 2018
6ea7f87
Refactor stories to pass in an object with the name for headings <th>…
Jul 19, 2018
edd5475
Refactor getName component to calculate th and td names based on whet…
Jul 19, 2018
f8d63cf
Refactor existing tests and add new tests based on new props e.g. ver…
Jul 19, 2018
c7d657f
Update docs for Table
Jul 19, 2018
4f64a6b
Remove default parameters
Jul 19, 2018
bf9d247
Remove console.log from test
Jul 19, 2018
672e737
Remove verticalAlign as prop pass through and default to verticalAlig…
Jul 20, 2018
9e5dbc4
Merge branch 'master' into feature/table-refactor
Jul 20, 2018
a38295c
- Make names an array again
Jul 20, 2018
61d6783
Refactor stories based on names array
Jul 20, 2018
e674e18
Refactor tests based on names array
Jul 20, 2018
f3edfcd
Regenerate documentation
Jul 20, 2018
03013c2
Merge branch 'master' into feature/table-refactor
Jul 20, 2018
c89c11f
Update Table usage:
Jul 20, 2018
3c0d50a
Fix TableHeading line lengths greater than 100 chars.
Jul 30, 2018
326f97a
Merge branch 'master' into feature/table-refactor
Loque- Aug 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions API.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -877,36 +877,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
2 changes: 1 addition & 1 deletion components/arrow-left/src/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const lightBackground = {
};

const stories = storiesOf('Icons/ArrowLeft', module);
const examples = storiesOf('Icons/ArrowLeft/Examples');
const examples = storiesOf('Icons/ArrowLeft/Examples', module);

stories.addDecorator(WithDocsCustom(ReadMe));
stories.addDecorator(withKnobs);
Expand Down
57 changes: 49 additions & 8 deletions components/table/README.md
View file
Open in desktop
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
Open in desktop
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