Skip to content

Commit 056ebde

Browse files
layershifterlevithomason
layershifter
authored and
levithomason
committed
feat(Item): Update to v1 API (#431)
* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * feat(Image): configurable ui className * fix(Item): use getUnhandledProps * fix (ItemGroup) Fix in prop handling * fix(Item) Fix lint issues * fix(Item) Fix key handling * fix(Image): use useKeyOnly for ui class
1 parent 598f764 commit 056ebde

38 files changed

+1439
-53
lines changed

‎docs/app/Examples/views/Item/Content/Contents.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
import { Item } from 'stardust'
3+
4+
const { Content, Group, Image } = Item
5+
6+
const Contents = () => (
7+
<Group divided>
8+
<Item>
9+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
10+
<Content verticalAlign='middle'>Content A</Content>
11+
</Item>
12+
13+
<Item>
14+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
15+
<Content verticalAlign='middle'>Content B</Content>
16+
</Item>
17+
18+
<Item>
19+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
20+
<Content content='Content C' verticalAlign='middle' />
21+
</Item>
22+
</Group>
23+
)
24+
25+
export default Contents

‎docs/app/Examples/views/Item/Content/Descriptions.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { Item } from 'stardust'
3+
4+
const { Content, Description, Group, Header, Image } = Item
5+
const description = [
6+
'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
7+
'tiny stature, and even others for their massive size.',
8+
].join(' ')
9+
10+
const Descriptions = () => (
11+
<Group>
12+
<Item>
13+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
14+
15+
<Content>
16+
<Header as='a'>Cute Dog</Header>
17+
<Description>
18+
<p>{description}</p>
19+
<p>
20+
Many people also have their own barometers for what makes a cute dog.
21+
</p>
22+
</Description>
23+
</Content>
24+
</Item>
25+
26+
<Item>
27+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
28+
29+
<Content>
30+
<Header as='a'>Cute Dog</Header>
31+
<Description content={description} />
32+
</Content>
33+
</Item>
34+
35+
<Item>
36+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
37+
<Content header='Cute Dog' description={description} />
38+
</Item>
39+
</Group>
40+
)
41+
42+
export default Descriptions

‎docs/app/Examples/views/Item/Content/ExtraContent.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
import { Icon, Image as ImageComponent, Item } from 'stardust'
3+
4+
const { Content, Description, Extra, Group, Header, Image } = Item
5+
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
6+
7+
const ExtraContent = () => (
8+
<Group>
9+
<Item>
10+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
11+
12+
<Content>
13+
<Header as='a'>Cute Dog</Header>
14+
<Description>{paragraph}</Description>
15+
<Extra>
16+
<Icon name='green check' /> 121 Votes
17+
</Extra>
18+
</Content>
19+
</Item>
20+
21+
<Item>
22+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
23+
24+
<Content>
25+
<Header as='a'>Cute Dog</Header>
26+
<Description>{paragraph}</Description>
27+
<Extra content='121 Votes' />
28+
</Content>
29+
</Item>
30+
31+
<Item>
32+
<Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
33+
<Content header='Cute Dog' extra='121 Votes' />
34+
</Item>
35+
</Group>
36+
)
37+
38+
export default ExtraContent

‎docs/app/Examples/views/Item/Content/Headers.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import { Item } from 'stardust'
3+
4+
const { Content, Group, Header, Image } = Item
5+
6+
const Headers = () => (
7+
<Group>
8+
<Item>
9+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
10+
<Content verticalAlign='middle'>
11+
<Header as='a'>12 Years a Slave</Header>
12+
</Content>
13+
</Item>
14+
15+
<Item>
16+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
17+
<Content verticalAlign='middle'>
18+
<Header as='a' content='My Neighbor Totoro' />
19+
</Content>
20+
</Item>
21+
22+
<Item>
23+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
24+
<Content header='Watchmen' verticalAlign='middle' />
25+
</Item>
26+
</Group>
27+
)
28+
29+
export default Headers

‎docs/app/Examples/views/Item/Content/Images.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { Item } from 'stardust'
3+
4+
const { Group, Image } = Item
5+
6+
const Images = () => (
7+
<Group divided>
8+
<Item>
9+
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
10+
</Item>
11+
12+
<Item>
13+
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
14+
</Item>
15+
16+
<Item image='http://semantic-ui.com/images/wireframe/image.png' />
17+
</Group>
18+
)
19+
20+
export default Images

‎docs/app/Examples/views/Item/Content/Link.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import { Image as ImageComponent, Item } from 'stardust'
3+
4+
const { Content, Description, Group, Header, Image, Meta } = Item
5+
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
6+
7+
const Link = () => (
8+
<Group>
9+
<Item>
10+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
11+
12+
<Content>
13+
<Header>Arrowhead Valley Camp</Header>
14+
<Meta>
15+
<span className='price'>$1200</span>
16+
<span className='stay'>1 Month</span>
17+
</Meta>
18+
<Description>{paragraph}</Description>
19+
</Content>
20+
</Item>
21+
22+
<Item>
23+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
24+
25+
<Content>
26+
<Header>Buck's Homebrew Stayaway</Header>
27+
<Meta content='$1000 2 Weeks' />
28+
<Description>{paragraph}</Description>
29+
</Content>
30+
</Item>
31+
32+
<Item>
33+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
34+
<Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
35+
</Item>
36+
</Group>
37+
)
38+
39+
export default Link

‎docs/app/Examples/views/Item/Content/Metadata.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import { Image as ImageComponent, Item } from 'stardust'
3+
4+
const { Content, Description, Group, Header, Image, Meta } = Item
5+
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
6+
7+
const Metadata = () => (
8+
<Group>
9+
<Item>
10+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
11+
12+
<Content>
13+
<Header>Arrowhead Valley Camp</Header>
14+
<Meta>
15+
<span className='price'>$1200</span>
16+
<span className='stay'>1 Month</span>
17+
</Meta>
18+
<Description>{paragraph}</Description>
19+
</Content>
20+
</Item>
21+
22+
<Item>
23+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
24+
25+
<Content>
26+
<Header>Buck's Homebrew Stayaway</Header>
27+
<Meta content='$1000 2 Weeks' />
28+
<Description>{paragraph}</Description>
29+
</Content>
30+
</Item>
31+
32+
<Item>
33+
<Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
34+
<Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
35+
</Item>
36+
</Group>
37+
)
38+
39+
export default Metadata

‎docs/app/Examples/views/Item/Content/Ratings.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import { Icon, Item } from 'stardust'
3+
4+
const { Content, Group, Header, Image } = Item
5+
6+
const Ratings = () => (
7+
<Group>
8+
<Item>
9+
<Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
10+
11+
<Content verticalAlign='middle'>
12+
<Header>
13+
<Icon name='like' />
14+
Veronika Ossi
15+
</Header>
16+
</Content>
17+
</Item>
18+
19+
<Item>
20+
<Image size='tiny' src='http://semantic-ui.com/images/avatar/large/justen.jpg' />
21+
22+
<Content verticalAlign='middle'>
23+
<Header>
24+
<Icon name='favorite' />
25+
Justen Kitsune
26+
</Header>
27+
</Content>
28+
</Item>
29+
</Group>
30+
)
31+
32+
export default Ratings

‎docs/app/Examples/views/Item/Content/index.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react'
2+
3+
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
4+
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
5+
6+
const Content = () => (
7+
<ExampleSection title='Content'>
8+
<ComponentExample
9+
title='Image'
10+
description='An item can contain an image'
11+
examplePath='views/Item/Content/Images'
12+
/>
13+
14+
<ComponentExample
15+
title='Content'
16+
description='An item can contain content'
17+
examplePath='views/Item/Content/Contents'
18+
/>
19+
20+
<ComponentExample
21+
title='Header'
22+
description='An item can contain a header'
23+
examplePath='views/Item/Content/Headers'
24+
/>
25+
26+
<ComponentExample
27+
title='Metadata'
28+
description='An item can contain a header'
29+
examplePath='views/Item/Content/Metadata'
30+
/>
31+
32+
<ComponentExample
33+
title='Link'
34+
description='An item can contain contain links as images, headers, or inside content'
35+
examplePath='views/Item/Content/Link'
36+
/>
37+
38+
<ComponentExample
39+
title='Description'
40+
description='An item can contain contain links as images, headers, or inside content'
41+
examplePath='views/Item/Content/Descriptions'
42+
/>
43+
44+
<ComponentExample
45+
title='Extra Content'
46+
description='An item can contain contain links as images, headers, or inside content'
47+
examplePath='views/Item/Content/ExtraContent'
48+
/>
49+
50+
<ComponentExample
51+
title='Rating'
52+
description='An item can contain icons signifying a "like" or "favorite" action'
53+
examplePath='views/Item/Content/Ratings'
54+
/>
55+
</ExampleSection>
56+
)
57+
58+
export default Content

‎docs/app/Examples/views/Item/Types/Items.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { Image, Item } from 'stardust'
3+
4+
const Items = () => (
5+
<Item.Group>
6+
<Item>
7+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
8+
9+
<Item.Content>
10+
<Item.Header as='a'>Header</Item.Header>
11+
<Item.Meta>Description</Item.Meta>
12+
<Item.Description>
13+
<Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
14+
</Item.Description>
15+
<Item.Extra>Additional Details</Item.Extra>
16+
</Item.Content>
17+
</Item>
18+
19+
<Item>
20+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
21+
22+
<Item.Content>
23+
<Item.Header as='a'>Header</Item.Header>
24+
<Item.Meta>Description</Item.Meta>
25+
<Item.Description>
26+
<Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
27+
</Item.Description>
28+
<Item.Extra>Additional Details</Item.Extra>
29+
</Item.Content>
30+
</Item>
31+
</Item.Group>
32+
)
33+
34+
export default Items

‎docs/app/Examples/views/Item/Types/Props.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { Item } from 'stardust'
3+
4+
const items = [
5+
{
6+
childKey: 0,
7+
image: 'http://semantic-ui.com/images/wireframe/image.png',
8+
header: 'Header',
9+
description: 'Description',
10+
meta: 'Metadata',
11+
extra: 'Extra',
12+
},
13+
{
14+
childKey: 1,
15+
image: 'http://semantic-ui.com/images/wireframe/image.png',
16+
header: 'Header',
17+
description: 'Description',
18+
meta: 'Metadata',
19+
extra: 'Extra',
20+
},
21+
]
22+
23+
const Props = () => (
24+
<Item.Group items={items} />
25+
)
26+
27+
export default Props

0 commit comments

Comments
 (0)