Skip to content

Commit a7d55fa

Browse files
kyleturcolevithomason
kyleturco
authored and
levithomason
committed
continue ListItem update
1 parent 44ddeaa commit a7d55fa

8 files changed

Lines changed: 57 additions & 75 deletions

File tree

‎docs/app/Examples/elements/List/Content/ListDescriptionExample.js‎

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

44
export default class ListDescriptionExample extends Component {
55
render() {
6+
const mapIcon = <i className='map marker icon' />;
7+
68
return (
79
<List>
8-
<Item>
9-
<i className='map marker icon' />
10-
<div className='content'>
11-
<a className='header'>Chicago, IL></a>
12-
<div className='description'> This city is located in the state of Illinois</div>
13-
</div>
14-
</Item>
15-
<Item>
16-
<i className='map marker icon' />
17-
<div className='content'>
18-
<a className='header'>Nashville, TN></a>
19-
<div className='description'> This city is located in the state of Tennessee</div>
20-
</div>
21-
</Item>
10+
<ListItem image={mapIcon} header='Chicago' description='This city is located in the state of Illinois' />
11+
<ListItem image={mapIcon} header='Nashville' description='This city is located in the state of Tennessee' />
2212
</List>
2313
);
2414
}

‎docs/app/Examples/elements/List/Content/ListIconExample.js‎

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

44
export default class ListIconExample extends Component {
55
render() {
6+
const helpIcon = <i className='help icon' />;
7+
const triangleIcon = <i className='right triangle icon' />;
8+
69
return (
710
<List>
8-
<a className='item'>
9-
<i className='help icon' />
10-
<div className='content'>
11-
<div className='header'>Floated Icon</div>
12-
<div className='description'>This text will always have a left margin so it sits alongside the icon</div>
13-
</div>
14-
</a>
15-
<a className='item'>
16-
<i className='right triangle icon' />
17-
<div className='content'>
18-
<div className='header'>Icon Alignment</div>
19-
<div className='description'>Floated icons are by default top aligned</div>
20-
</div>
21-
</a>
22-
<div className='item'>
23-
<i className='help icon' />
24-
<div className='content'>
11+
<ListItem
12+
image={helpIcon}
13+
header='Floated Icon'
14+
description='This text will always have a left margin so it sits alongside the icon'
15+
/>
16+
<ListItem
17+
image={triangleIcon}
18+
header='Icon Alignment'
19+
description='Floated icons are by default top aligned'
20+
/>
21+
<ListItem image={helpIcon}>
2522
Inline Text
26-
</div>
27-
</div>
23+
</ListItem>
2824
</List>
2925
);
3026
}

‎docs/app/Examples/elements/List/Content/ListImageExample.js‎

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

44
export default class ListImageExample extends Component {
55
render() {
6+
const helenAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
7+
const christianAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
8+
const danielAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
9+
610
return (
7-
<List />
11+
<List>
12+
<ListItem image={helenAvatar} header='Helen' />
13+
<ListItem image={christianAvatar} header='Christian' />
14+
<ListItem image={danielAvatar} header='Daniel' />
15+
</List>
816
);
917
}
1018
}

‎docs/app/Examples/elements/List/Content/ListItemExample.js‎

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

44
export default class ListItemExample extends Component {
55
render() {
66
return (
77
<List>
8-
<Item>1</Item>
9-
<Item>2</Item>
10-
<Item>3</Item>
8+
<ListItem>1</ListItem>
9+
<ListItem>2</ListItem>
10+
<ListItem>3</ListItem>
1111
</List>
1212
);
1313
}

‎docs/app/Examples/elements/List/Types/ListBulletedExample.js‎

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

44
export default class ListBulletedExample extends Component {
55
render() {
66
return (
77
<List className='bulleted'>
8-
<Item>Apples</Item>
9-
<Item>Pears</Item>
10-
<Item>Oranges</Item>
8+
<ListItem>Apples</ListItem>
9+
<ListItem>Pears</ListItem>
10+
<ListItem>Oranges</ListItem>
1111
</List>
1212
);
1313
}

‎docs/app/Examples/elements/List/Types/ListListExample.js‎

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

44
export default class ListListExample extends Component {
55
render() {
66
return (
77
<List>
8-
<Item>Apples</Item>
9-
<Item>Pears</Item>
10-
<Item>Oranges</Item>
8+
<ListItem>Apples</ListItem>
9+
<ListItem>Pears</ListItem>
10+
<ListItem>Oranges</ListItem>
1111
</List>
1212
);
1313
}

‎docs/app/Examples/elements/List/Types/ListOrderedExample.js‎

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

44
export default class ListBulletedExample extends Component {
55
render() {
66
return (
77
<List className='ordered'>
8-
<Item>Apples</Item>
8+
<ListItem>Apples</ListItem>
99
<div>
1010
<List>
11-
<Item>Fuji</Item>
12-
<Item>Granny Smith</Item>
13-
<Item>Honeycrisp</Item>
11+
<ListItem>Fuji</ListItem>
12+
<ListItem>Granny Smith</ListItem>
13+
<ListItem>Honeycrisp</ListItem>
1414
</List>
1515
</div>
16-
<Item>Pears</Item>
17-
<Item>Oranges</Item>
16+
<ListItem>Pears</ListItem>
17+
<ListItem>Oranges</ListItem>
1818
</List>
1919
);
2020
}

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

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

44
export default class ListAnimatedExample 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
<div>
811
<Message className='info'>
912
Be sure content can fit on one line, otherwise text content will reflow when hovered.
1013
</Message>
1114
<List className='middle aligned animated'>
12-
<Item>
13-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />
14-
<div className='content'>
15-
<div className='header'>Helen</div>
16-
</div>
17-
</Item>
18-
<Item>
19-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />
20-
<div className='content'>
21-
<div className='header'>Christian</div>
22-
</div>
23-
</Item>
24-
<Item>
25-
<img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />
26-
<div className='content'>
27-
<div className='header'>Daniel</div>
28-
</div>
29-
</Item>
15+
<ListItem image={avatar1} header='Helen' />
16+
<ListItem image={avatar2} header='Christian' />
17+
<ListItem image={avatar3} header='Daniel' />
3018
</List>
3119
</div>
3220
);

0 commit comments

Comments
 (0)