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

Card: add component #387

Merged
merged 15 commits into from
Aug 18, 2016
Merged

Card: add component #387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bc7850b
feat(Card): add Card view src and tests
athurman Aug 11, 2016
bb4a518
feat(Card): add card class props
athurman Aug 11, 2016
fbcb783
feat(Card): complete card component props
athurman Aug 12, 2016
117b5e1
feat(Card): build out child components
athurman Aug 12, 2016
7aefa09
feat(Card): add Card view src and tests
athurman Aug 11, 2016
38e46bb
feat(Card): add card class props
athurman Aug 11, 2016
76cc183
refactor(Card): update to use refactored utils
levithomason Aug 13, 2016
df7f82c
refactor(view/Card): refactor rest to utilize getUnhandledProps util
athurman Aug 15, 2016
eb6399f
feat(CardGroup): add CardGroup component
athurman Aug 15, 2016
c46329b
feat(Cards): add docs examples
athurman Aug 15, 2016
5593c5f
feat(Card): Add card and card sub component tests
athurman Aug 16, 2016
9ff0acd
chore(README): mark off Card component
athurman Aug 16, 2016
a09c503
feat(Card): add image prop to card component
athurman Aug 16, 2016
4035e0d
chore(Card): add doc blocks to all Card component props
athurman Aug 18, 2016
05718d6
fix(CardGroup): change propTypes widths to itemsPerRow
levithomason Aug 18, 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 @@ -131,7 +131,7 @@ Be sure to check out the above migrations before embarking on a new component.
| Elements | Collections | Views | Modules | Behaviors |
|-----------------|-----------------|-----------------|-----------------|--------------------|
| x Button | x Breadcrumb | _ Advertisement | x Accordion | x Form Validation |
| x Container | x Form | _ Card | x Checkbox | *API (NA)* |
| x Container | x Form | x Card | x Checkbox | *API (NA)* |
| x Divider | x Grid | _ Comment | _ Dimmer | *Visibility (NA)* |
| x Flag | x Menu | x Feed | x Dropdown | |
| x Header | x Message | x Item | _ Embed | |
Expand Down
46 changes: 46 additions & 0 deletions docs/app/Examples/views/Card/Content/ContentBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react'
import { Card, Feed } from 'stardust'

const ContentBlock = () => (
<Card>
<Card.Content>
<Card.Header>
Recent Activity
</Card.Header>
</Card.Content>
<Card.Content>
<Feed>
<Feed.Event>
<Feed.Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
<Feed.Content>
<Feed.Date date='1 day 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='http://semantic-ui.com/images/avatar2/small/molly.png' />
<Feed.Content>
<Feed.Date date='3 days ago' />
<Feed.Summary>
You added <a>Molly Malone</a> as a friend.
</Feed.Summary>
</Feed.Content>
</Feed.Event>

<Feed.Event>
<Feed.Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
<Feed.Content date='4 days ago'>
<Feed.Summary>
You added <a>Elliot Baker</a> to your <a>musicians</a> group.
</Feed.Summary>
</Feed.Content>
</Feed.Event>
</Feed>
</Card.Content>
</Card>
)

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

const description = [
'Amy is a violinist with 2 years experience in the wedding industry.',
'She enjoys the outdoors and currently resides in upstate New York.',
].join(' ')

const ExtraContent = () => (
<Card>
<Card.Content>
<Card.Header>
About Amy
</Card.Header>
</Card.Content>
<Card.Content description={description} />
<Card.Content extra>
<Icon name='user' />
4 Friends
</Card.Content>
</Card>
)

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

const HeaderCards = () => (
<Card.Group>
<Card>
<Card.Content>
<Card.Header>
Matthew Harris
</Card.Header>
<Card.Meta>
Co-Worker
</Card.Meta>
<Card.Description>
Matthew is a pianist living in Nashville.
</Card.Description>
</Card.Content>
</Card>

<Card>
<Card.Content>
<Card.Header content='Jake Smith' />
<Card.Meta content='Musicians' />
<Card.Description content='Jake is a drummer living in New York.' />
</Card.Content>
</Card>

<Card>
<Card.Content
header='Elliot Baker'
meta='Friend'
description='Elliot is a music producer living in Chicago.'
/>
</Card>
</Card.Group>
)

export default HeaderCards
29 changes: 29 additions & 0 deletions docs/app/Examples/views/Card/Content/ImageCard.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 { Card, Icon, Image } from 'stardust'

const ImageCard = () => (
<Card>
<Image src='http://semantic-ui.com/images/avatar/large/daniel.jpg' />
<Card.Content>
<Card.Header>
Daniel
</Card.Header>
<Card.Meta>
<span className='date'>
Joined in 2016
</span>
</Card.Meta>
<Card.Description>
Daniel is a comedian living in Nashville.
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
10 Friends
</a>
</Card.Content>
</Card>
)

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

const LinkCard = () => (
<Card
href='#link'
Copy link
Member

@levithomason levithomason Aug 17, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Whoops, no # when defining an href.

Oh, I see, this is going to link to the example of the same name. In the future, prefer empty # to linking to actual anchors. No need to update. 👍

header='Elliot Baker'
meta='Friend'
description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
/>
)

export default LinkCard
36 changes: 36 additions & 0 deletions docs/app/Examples/views/Card/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react'

import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const Content = () => (
<ExampleSection title='Content'>
<ComponentExample
title='Content Block'
description='A card contains blocks of content'
examplePath='views/Card/Content/ContentBlock'
/>
<ComponentExample
title='Extra Content'
description='A card can contain extra content meant to be formatted separately from the main content'
examplePath='views/Card/Content/ExtraContent'
/>
<ComponentExample
title='Image'
description='A card can contain an image'
examplePath='views/Card/Content/ImageCard'
/>
<ComponentExample
title='Header'
description='A card can contain a header'
examplePath='views/Card/Content/HeaderCard'
/>
<ComponentExample
title='Link'
description='A card can be formatted to link to other contnet'
examplePath='views/Card/Content/LinkCard'
/>
</ExampleSection>
)

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

const items = [
{
header: 'Project Report - April',
description: 'Leverage agile frameworks to provide a robust synopsis for high level overviews.',
meta: 'ROI: 30%',
},
{
header: 'Project Report - May',
description: 'Bring to the table win-win survival strategies to ensure proactive domination.',
meta: 'ROI: 34%',
},
{
header: 'Project Report - June',
description: 'Capitalise on low hanging fruit to identify a ballpark value added activity to beta test.',
meta: 'ROI: 27%',
},
]

const GroupByProps = () => (
<Card.Group items={items} />
)

export default GroupByProps
69 changes: 69 additions & 0 deletions docs/app/Examples/views/Card/Types/Groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from 'react'
import { Button, Card, Image } from 'stardust'

const Groups = () => (
<Card.Group>
<Card>
<Card.Content>
<Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar/large/steve.jpg' />
<Card.Header>
Steve Sanders
</Card.Header>
<Card.Meta>
Friends of Elliot
</Card.Meta>
<Card.Description>
Steve wants to add you to the group <strong>best friends</strong>
</Card.Description>
</Card.Content>
<Card.Content extra>
<div className='ui two buttons'>
<Button className='basic green'>Approve</Button>
<Button className='basic red'>Decline</Button>
</div>
</Card.Content>
</Card>
<Card>
<Card.Content>
<Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar2/large/molly.png' />
<Card.Header>
Molly Thomas
</Card.Header>
<Card.Meta>
New User
</Card.Meta>
<Card.Description>
Molly wants to add you to the group <strong>musicians</strong>
</Card.Description>
</Card.Content>
<Card.Content extra>
<div className='ui two buttons'>
<Button className='basic green'>Approve</Button>
<Button className='basic red'>Decline</Button>
</div>
</Card.Content>
</Card>
<Card>
<Card.Content>
<Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
<Card.Header>
Jenny Lawrence
</Card.Header>
<Card.Meta>
New User
</Card.Meta>
<Card.Description>
Jenny requested permission to view your contact details
</Card.Description>
</Card.Content>
<Card.Content extra>
<div className='ui two buttons'>
<Button className='basic green'>Approve</Button>
<Button className='basic red'>Decline</Button>
</div>
</Card.Content>
</Card>
</Card.Group>
)

export default Groups
29 changes: 29 additions & 0 deletions docs/app/Examples/views/Card/Types/IndividualCard.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 { Card, Icon, Image } from 'stardust'

const IndividualCard = () => (
<Card>
<Image src='http://semantic-ui.com/images/avatar2/large/matthew.png' />
<Card.Content>
<Card.Header>
Matthew
</Card.Header>
<Card.Meta>
<span className='date'>
Joined in 2015
</span>
</Card.Meta>
<Card.Description>
Matthew is a musician living in Nashville.
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
22 Friends
</a>
</Card.Content>
</Card>
)

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

const extra = (
<a>
<Icon name='user' />
16 Friends
</a>
)

const IndividualCardByProps = () => (
<Card
image='http://semantic-ui.com/images/avatar/large/elliot.jpg'
header='Elliot Baker'
meta='Friend'
description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
extra={extra}
/>
)

export default IndividualCardByProps
29 changes: 29 additions & 0 deletions docs/app/Examples/views/Card/Types/index.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 ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const Types = () => (
<ExampleSection title='Types'>
<ComponentExample
title='Card'
description='A card displays site content in a manner similar to a playing card'
examplePath='views/Card/Types/IndividualCard'
/>
<ComponentExample
description='You can also use props to configure the markup'
examplePath='views/Card/Types/IndividualCardByProps'
/>
<ComponentExample
title='Cards'
description='A group of cards'
examplePath='views/Card/Types/Groups'
/>
<ComponentExample
description='You can also use props to configure the markup'
examplePath='views/Card/Types/GroupByProps'
/>
</ExampleSection>
)

export default Types
Loading