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

Feed: add component #363

Merged
merged 16 commits into from
Aug 13, 2016
Merged

Feed: add component #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1a6fd1b
feat(Feed) Initial commit
layershifter Aug 3, 2016
09e0b48
feat(Feed) Docs and components update
Aug 5, 2016
22bf1c8
feat(Feed) Docs and components update
Aug 5, 2016
8df7077
feat(Feed) More docs and components
layershifter Aug 6, 2016
a3fce64
feat(Feed) Remove meta.library
Aug 8, 2016
cd3c201
feat(Feed) Update prop handling
Aug 8, 2016
e46ddd6
feat(Feed) Update prop handling
Aug 8, 2016
a68c759
feat(Feed) More shorthands
layershifter Aug 8, 2016
b362097
refactor(Feed): use string shorthand props
levithomason Aug 9, 2016
1d0e556
feat(Feed) Update prop handling and tests
Aug 11, 2016
1d31612
fix(Feed) More tests
layershifter Aug 11, 2016
51da3e3
refactor(Feed): update to refactored utils
levithomason Aug 13, 2016
379da0f
Merge branches 'feature/feed' and 'master' of https://github.com/Tech…
layershifter Aug 13, 2016
aa3dd4b
fix(Feed) Fixes and more tests
layershifter Aug 13, 2016
43f33d6
fix(Feed) Lint issues
layershifter Aug 13, 2016
d34eb88
fix(Feed) Update lint issues
layershifter Aug 13, 2016
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ Be sure to check out the above migrations before embarking on a new component.
| x Button | x Breadcrumb | _ Advertisement | x Accordion | x Form Validation |
| x Container | x Form | _ Card | x Checkbox | *API (NA)* |
| x Divider | x Grid | _ Comment | _ Dimmer | *Visibility (NA)* |
| x Flag | x Menu | _ Feed | x Dropdown | |
| x Flag | x Menu | x Feed | x Dropdown | |
| x Header | x Message | x Item | _ Embed | |
| x Icon | x Table | x Statistic | x Modal | |
| x Image | | | _ Nag | |
Expand Down
82 changes: 82 additions & 0 deletions docs/app/Examples/views/Feed/Content/AdditionalInformation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import _ from 'lodash'
import React from 'react'
import { Feed } from 'stardust'

const { Content, Event, Extra, Label, Summary } = Feed
const images = _.times(2, () => 'http://semantic-ui.com/images/wireframe/image.png')

const AdditionalInformation = () => {
return (
<Feed>
<Event>
<Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Helen Troy</a> added 2 photos
</Summary>
<Extra images>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
</Extra>
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Helen Troy</a> added 2 photos
</Summary>
<Extra images={images} />
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Helen Troy</a> added 2 photos
</Summary>
<Extra images={images} />
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Helen Troy</a> added 2 photos
</Summary>
<Extra images>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
</Extra>
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Laura Faucet</a> created a post
</Summary>
<Extra text>
Have you seen what's going on in Israel? Can you believe it.
</Extra>
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
<Content date='3 days ago'>
<Summary>
<a>Laura Faucet</a> created a post
</Summary>
<Extra text="Have you seen what's going on in Israel? Can you believe it." />
</Content>
</Event>
</Feed>
)
}

export default AdditionalInformation
49 changes: 49 additions & 0 deletions docs/app/Examples/views/Feed/Content/Date.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react'
import { Feed } from 'stardust'

const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'

const Date = () => {
return (
<Feed>
<Feed.Event>
<Feed.Label image={imageSrc} />
<Feed.Content>
<Feed.Date>3 days ago</Feed.Date>
<Feed.Summary>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
</Feed.Summary>
</Feed.Content>
</Feed.Event>

<Feed.Event>
<Feed.Label image={imageSrc} />
<Feed.Content>
<Feed.Date date='3 days ago' />
<Feed.Summary>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
</Feed.Summary>
</Feed.Content>
</Feed.Event>

<Feed.Event>
<Feed.Label image={imageSrc} />
<Feed.Content date='3 days ago'>
<Feed.Summary>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
</Feed.Summary>
</Feed.Content>
</Feed.Event>

<Feed.Event>
<Feed.Label image={imageSrc} />
<Feed.Content
date='3 days ago'
summary='You added Jenny Hess to your coworker group.'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduced all shorthand props, except icon/image, to strings only.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renders a simple read only feed like so:

image

/>
</Feed.Event>
</Feed>
)
}

export default Date
44 changes: 44 additions & 0 deletions docs/app/Examples/views/Feed/Content/DateSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react'
import { Feed } from 'stardust'

const { Content, Date, Event, Label, Summary } = Feed
const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'

const DateSummary = () => {
return (
<Feed>
<Event>
<Label image={imageSrc} />
<Content>
<Summary>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.

<Date>3 days ago</Date>
</Summary>
</Content>
</Event>

<Event>
<Label image={imageSrc} />
<Content>
<Summary>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.

<Date date='3 days ago' />
</Summary>
</Content>
</Event>

<Event>
<Label image={imageSrc} />
<Content>
<Summary date='3 days ago'>
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
</Summary>
</Content>
</Event>
</Feed>
)
}

export default DateSummary
29 changes: 29 additions & 0 deletions docs/app/Examples/views/Feed/Content/LabelIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react'
import { Feed } from 'stardust'

const LabelImage = () => {
return (
<Feed>
<Feed.Event>
<Feed.Label icon='pencil' />
<Feed.Content>
<Feed.Summary>
You posted on your friend <a>Stevie Feliciano's</a> wall.
<Feed.Date>Today</Feed.Date>
</Feed.Summary>
</Feed.Content>
</Feed.Event>

<Feed.Event icon='pencil'>
<Feed.Content>
<Feed.Summary>
You posted on your friend <a>Stevie Feliciano's</a> wall.
<Feed.Date>Today</Feed.Date>
</Feed.Summary>
</Feed.Content>
</Feed.Event>
</Feed>
)
}

export default LabelImage
35 changes: 35 additions & 0 deletions docs/app/Examples/views/Feed/Content/LabelImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react'
import { Feed } from 'stardust'

const image = <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />

const LabelImage = () => {
return (
<div>
<Feed>
<Feed.Event>
<Feed.Label>
<img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
</Feed.Label>
<Feed.Content>
You added Elliot Fu to the group <a>Coworkers</a>
</Feed.Content>
</Feed.Event>

<Feed.Event image='http://semantic-ui.com/images/avatar/small/elliot.jpg'>
<Feed.Content>
You added Elliot Fu to the group <a>Coworkers</a>
</Feed.Content>
</Feed.Event>

<Feed.Event image={image}>
<Feed.Content>
You added Elliot Fu to the group <a>Coworkers</a>
</Feed.Content>
</Feed.Event>
</Feed>
</div>
)
}

export default LabelImage
31 changes: 31 additions & 0 deletions docs/app/Examples/views/Feed/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react'
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const FeedContentExamples = () => {
return (
<ExampleSection title='Content'>
<ComponentExample
title='Label'
description='An event can contain an image or icon label'
examplePath='views/Feed/Content/LabelImage'
/>
<ComponentExample examplePath='views/Feed/Content/LabelIcon' />

<ComponentExample
title='Date'
description='An event or an event summary can contain a date'
examplePath='views/Feed/Content/Date'
/>
<ComponentExample examplePath='views/Feed/Content/DateSummary' />

<ComponentExample
title='Additional information'
description='An event can contain additional information like a set of images or text'
examplePath='views/Feed/Content/AdditionalInformation'
/>
</ExampleSection>
)
}

export default FeedContentExamples
83 changes: 83 additions & 0 deletions docs/app/Examples/views/Feed/Types/Basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react'
import { Feed } from 'stardust'

const { Content, Date, Event, Extra, Label, Like, Meta, Summary, User } = Feed

const Basic = () => {
return (
<Feed>
<Event>
<Label>
<img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
</Label>
<Content>
<Summary>
<User>Elliot Fu</User> added you as a friend
<Date>1 Hour Ago</Date>
</Summary>
<Meta>
<Like icon='like'>4 Likes</Like>
</Meta>
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
<Content>
<Summary>
<a>Helen Troy</a> added <a>2 new illustrations</a>
<Date>4 days ago</Date>
</Summary>
<Extra images>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
</Extra>
<Meta>
<Like>1 Like</Like>
</Meta>
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
<Content>
<Summary date='2 Days Ago'>
<User>Jenny Hess</User> added you as a friend
</Summary>
<Meta like='8 Likes' />
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/joe.jpg' />
<Content>
<Summary date='3 days ago'>
<a>Joe Henderson</a> posted on his page
</Summary>
<Extra text>
Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all
over again. Even if we don't run extra laps that day, we surely will come back for more of the same another
day soon.
</Extra>
<Meta like='5 Likes' />
</Content>
</Event>

<Event>
<Label image='http://semantic-ui.com/images/avatar/small/justen.jpg' />
<Content>
<Summary date='4 days ago'>
<a>Justen Kitsune</a> added <a>2 new photos</a> of you
</Summary>
<Extra images>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
<a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
</Extra>
<Meta like='41 Likes' />
</Content>
</Event>
</Feed>
)
}

export default Basic
Loading