Skip to content

Commit 23b7559

Browse files
kyleturcolevithomason
kyleturco
authored and
levithomason
committed
finish ListItem upates
1 parent a7d55fa commit 23b7559

6 files changed

Lines changed: 45 additions & 122 deletions

File tree

‎docs/app/Examples/elements/List/Variations/ListCelledExample.js‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import React, {Component} from 'react';
2-
import {List, Item} from 'stardust';
2+
import {List, ListItem} from 'stardust';
33

4-
export default class ListDividedExample extends Component {
4+
export default class ListCelledExample extends Component {
55
render() {
6+
const avatar1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
7+
const avatar2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
8+
const avatar3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
9+
610
return (
711
<List className='celled'>
8-
<Item>
9-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />
10-
<div className='content'>
11-
<div className='header'>Helen</div>
12-
</div>
13-
</Item>
14-
<Item>
15-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />
16-
<div className='content'>
17-
<div className='header'>Christian</div>
18-
</div>
19-
</Item>
20-
<Item>
21-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />
22-
<div className='content'>
23-
<div className='header'>Daniel</div>
24-
</div>
25-
</Item>
12+
<ListItem image={avatar1} header='Helen' />
13+
<ListItem image={avatar2} header='Christian' />
14+
<ListItem image={avatar3} header='Daniel' />
2615
</List>
2716
);
2817
}

‎docs/app/Examples/elements/List/Variations/ListDividedExample.js‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import React, {Component} from 'react';
2-
import {List, Item} from 'stardust';
2+
import {List, ListItem} from 'stardust';
33

44
export default class ListDividedExample extends Component {
55
render() {
6+
const avatar1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
7+
const avatar2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
8+
const avatar3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
9+
610
return (
711
<List className='middle aligned divided'>
8-
<Item>
9-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />
10-
<div className='content'>
11-
<div className='header'>Helen</div>
12-
</div>
13-
</Item>
14-
<Item>
15-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />
16-
<div className='content'>
17-
<div className='header'>Christian</div>
18-
</div>
19-
</Item>
20-
<Item>
21-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />
22-
<div className='content'>
23-
<div className='header'>Daniel</div>
24-
</div>
25-
</Item>
12+
<ListItem image={avatar1} header='Helen' />
13+
<ListItem image={avatar2} header='Christian' />
14+
<ListItem image={avatar3} header='Daniel' />
2615
</List>
2716
);
2817
}

‎docs/app/Examples/elements/List/Variations/ListHorizontalExample.js‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,17 @@
11
import React, {Component} from 'react';
2-
import {List, Item} from 'stardust';
2+
import {List, ListItem} from 'stardust';
33

44
export default class ListHorizontalExample extends Component {
55
render() {
6+
const image1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/1' />;
7+
const image2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/2' />;
8+
const image3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/3' />;
9+
610
return (
711
<List className='horizontal'>
8-
<Item>
9-
<img className='ui avatar image' src='http://lorempixel.com/100/100/city/1' />
10-
<div className='content'>
11-
<a className='header'>Chicago</a>
12-
<div className='description'> This city is located in the state of Illinois</div>
13-
</div>
14-
</Item>
15-
<Item>
16-
<img className='ui avatar image' src='http://lorempixel.com/100/100/city/2' />
17-
<div className='content'>
18-
<a className='header'>Indianapolis</a>
19-
<div className='description'> This city is located in the state of Indiana</div>
20-
</div>
21-
</Item>
22-
<Item>
23-
<img className='ui avatar image' src='http://lorempixel.com/100/100/city/3' />
24-
<div className='content'>
25-
<a className='header'>Nashville</a>
26-
<div className='description'> This city is located in the state of Tennessee</div>
27-
</div>
28-
</Item>
12+
<ListItem image={image1} header='Chicago' description='This city is located in the state of Illinois' />
13+
<ListItem image={image2} header='Indianapolis' description='This city is located in the state of Indiana' />
14+
<ListItem image={image3} header='Nashville' description='This city is located in the state of Tennessee' />
2915
</List>
3016
);
3117
}

‎docs/app/Examples/elements/List/Variations/ListInvertedExample.js‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
import React, {Component} from 'react';
2-
import {Segment, List, Item} from 'stardust';
2+
import {Segment, List, ListItem} from 'stardust';
33

44
export default class ListInvertedExample extends Component {
55
render() {
66
return (
77
<Segment className='inverted'>
88
<List className='inverted relaxed divided'>
9-
<Item>
10-
<div className='content'>
11-
<div className='header'>Chicago</div>
12-
<div className='description'>Located in the state of Illinois</div>
13-
</div>
14-
</Item>
15-
<Item>
16-
<div className='content'>
17-
<div className='header'>Indianapolis</div>
18-
<div className='description'>Located in the state of Indiana</div>
19-
</div>
20-
</Item>
21-
<Item>
22-
<div className='content'>
23-
<div className='header'>Nashville</div>
24-
<div className='description'>Located in the state of Tennessee</div>
25-
</div>
26-
</Item>
9+
<ListItem header='Chicago' description='Located in the state of Illinois' />
10+
<ListItem header='Indianapolis' description='Located in the state of Indiana' />
11+
<ListItem header='Nashville' description='Located in the state of Tennessee' />
2712
</List>
2813
</Segment>
2914
);

‎docs/app/Examples/elements/List/Variations/ListRelaxedExample.js‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,16 @@
11
import React, {Component} from 'react';
2-
import {List, Item} from 'stardust';
2+
import {List, ListItem} from 'stardust';
33

44
export default class ListRelaxedExample extends Component {
55
render() {
6+
const avatar1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
7+
const avatar2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
8+
const avatar3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
69
return (
710
<List className='relaxed'>
8-
<Item>
9-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />
10-
<div className='content'>
11-
<div className='header'>Helen</div>
12-
<div className='description'>Account Executive</div>
13-
</div>
14-
</Item>
15-
<Item>
16-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />
17-
<div className='content'>
18-
<div className='header'>Christian</div>
19-
<div className='description'>Jr. Account Executive</div>
20-
</div>
21-
</Item>
22-
<Item>
23-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />
24-
<div className='content'>
25-
<div className='header'>Daniel</div>
26-
<div className='description'>Head of Creative</div>
27-
</div>
28-
</Item>
11+
<ListItem image={avatar1} header='Helen' />
12+
<ListItem image={avatar2} header='Christian' />
13+
<ListItem image={avatar3} header='Daniel' />
2914
</List>
3015
);
3116
}

‎docs/app/Examples/elements/List/Variations/ListSelectionExample.js‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import React, {Component} from 'react';
2-
import {List, Item} from 'stardust';
2+
import {List, ListItem} from 'stardust';
33

44
export default class ListSelectionExample extends Component {
55
render() {
6+
const avatar1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
7+
const avatar2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
8+
const avatar3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
9+
610
return (
7-
<List className='middle aligned selection'>
8-
<Item>
9-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />
10-
<div className='content'>
11-
<div className='header'>Helen</div>
12-
</div>
13-
</Item>
14-
<Item>
15-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />
16-
<div className='content'>
17-
<div className='header'>Christian</div>
18-
</div>
19-
</Item>
20-
<Item>
21-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />
22-
<div className='content'>
23-
<div className='header'>Daniel</div>
24-
</div>
25-
</Item>
11+
<List className='selection'>
12+
<ListItem image={avatar1} header='Helen' />
13+
<ListItem image={avatar2} header='Christian' />
14+
<ListItem image={avatar3} header='Daniel' />
2615
</List>
2716
);
2817
}

0 commit comments

Comments
 (0)