[Docs] Updated Card Docs to new format #2590
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react'; | ||
| import Avatar from 'material-ui/lib/avatar'; | ||
| import Card from 'material-ui/lib/card/card'; | ||
| import CardActions from 'material-ui/lib/card/card-actions'; | ||
| import CardHeader from 'material-ui/lib/card/card-header'; | ||
| import CardMedia from 'material-ui/lib/card/card-media'; | ||
| import CardTitle from 'material-ui/lib/card/card-title'; | ||
| import FlatButton from 'material-ui/lib/flat-button'; | ||
| import CardText from 'material-ui/lib/card/card-text'; | ||
|
|
||
| const CardExampleWithAvatar = React.createClass({ | ||
| render() { | ||
| return ( | ||
| <Card> | ||
| <CardHeader | ||
| title="Title" | ||
| subtitle="Subtitle" | ||
| avatar={<Avatar style={{color: 'red'}}>A</Avatar>}/> | ||
| <CardHeader | ||
| title="Demo Url Based Avatar" | ||
| subtitle="Subtitle" | ||
| avatar="http://lorempixel.com/100/100/nature/"/> | ||
| <CardMedia overlay={<CardTitle title="Title" subtitle="Subtitle"/>}> | ||
| <img src="http://lorempixel.com/600/337/nature/"/> | ||
| </CardMedia> | ||
| <CardTitle title="Title" subtitle="Subtitle"/> | ||
| <CardActions> | ||
| <FlatButton label="Action1"/> | ||
| <FlatButton label="Action2"/> | ||
| </CardActions> | ||
| <CardText> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. | ||
| Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. | ||
| Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. | ||
| </CardText> | ||
| </Card> | ||
| ); | ||
| }, | ||
| }); | ||
| export default CardExampleWithAvatar; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import Card from 'material-ui/lib/card/card'; | ||
| import CardActions from 'material-ui/lib/card/card-actions'; | ||
| import CardHeader from 'material-ui/lib/card/card-header'; | ||
| import FlatButton from 'material-ui/lib/flat-button'; | ||
| import CardText from 'material-ui/lib/card/card-text'; | ||
|
|
||
| const CardExampleWithoutAvatar = React.createClass({ | ||
| render() { | ||
| return ( | ||
| <Card initiallyExpanded={true}> | ||
| <CardHeader | ||
| title="Without Avatar" | ||
| subtitle="Subtitle" | ||
| actAsExpander={true} | ||
| showExpandableButton={true} /> | ||
| <CardText expandable={true}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. | ||
| Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. | ||
| Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. | ||
| </CardText> | ||
| <CardActions expandable={true}> | ||
| <FlatButton label="Action1"/> | ||
| <FlatButton label="Action2"/> | ||
| </CardActions> | ||
| <CardText expandable={true}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. | ||
| Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. | ||
| Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. | ||
| </CardText> | ||
| </Card> | ||
| ); | ||
| }, | ||
| }); | ||
| export default CardExampleWithoutAvatar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| ## Card | ||
|
|
||
| A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an | ||
| entry point to more detailed information. For example, a card could | ||
| contain a photo, text, and a link about a single subject. | ||
|
|
||
| Cards have a constant width and variable height. The maximum height is | ||
| limited to the height of the available space on a platform, | ||
| but it can temporarily expand (for example, to display a comment field). | ||
| Cards do not flip over to reveal information on the back. | ||
|
|
||
| ### Examples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,169 +1,32 @@ | ||
| import React from 'react'; | ||
| import cardCode from '!raw!material-ui/lib/card/card'; | ||
| import CodeExample from '../../code-example/code-example'; | ||
| import PropTypeDescription from '../../PropTypeDescription'; | ||
| import MarkdownElement from '../../MarkdownElement'; | ||
| import CardExampleWithAvatar from '../../Card/ExampleWithAvatar'; | ||
| import cardExampleWithAvatarCode from '!raw!../../Card/ExampleWithAvatar'; | ||
| import CardExampleWithoutAvatar from '../../Card/ExampleWithoutAvatar'; | ||
| import cardExampleWithoutAvatarCode from '!raw!../../Card/ExampleWithoutAvatar'; | ||
| import cardReadmeText from '../../Card/README'; | ||
|
|
||
| export default class CardPage extends React.Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <MarkdownElement text={cardReadmeText} /> | ||
| <CodeExample code={cardExampleWithAvatarCode}> | ||
| <CardExampleWithAvatar /> | ||
| </CodeExample> | ||
| <CodeExample code={cardExampleWithoutAvatarCode}> | ||
| <CardExampleWithoutAvatar /> | ||
| </CodeExample> | ||
| <PropTypeDescription code={cardCode} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,12 +12,46 @@ const Card = React.createClass({ | |
| }; | ||
| }, | ||
|
|
||
| getDefaultProps() { | ||
|
There was a problem hiding this comment. I swear this is the last one 😅 Can you please move to to after propTypes? There was a problem hiding this comment. Should I make a PR to enforce There was a problem hiding this comment. Not until #2585 is merged. But if you have that planned we can ignore this for now :D There was a problem hiding this comment. Alright, let's wait #2585. |
||
| return { | ||
| expandable: false, | ||
| initiallyExpanded: true, | ||
|
|
||
| actAsExpander: false, | ||
| }; | ||
| }, | ||
|
|
||
| propTypes: { | ||
| /** | ||
| * Whether a click on this card component expands the card. Can be set on any child of the Card component. | ||
| */ | ||
| actAsExpander: React.PropTypes.bool, | ||
|
There was a problem hiding this comment. also, add default prop for all the bool types, it makes it more expressive in the docs. the code generator can pick them up :D |
||
|
|
||
| /** | ||
| * Can be used to render elements inside the Card. | ||
| */ | ||
| children: React.PropTypes.node, | ||
|
|
||
| /** | ||
| * Whether this card component is expandable. Can be set on any child of the Card component. | ||
| */ | ||
| expandable: React.PropTypes.bool, | ||
|
|
||
| /** | ||
| * Whether this card is initially expanded. | ||
| */ | ||
| initiallyExpanded: React.PropTypes.bool, | ||
|
|
||
| /** | ||
| * Fired when the expandable state changes. | ||
| */ | ||
| onExpandChange: React.PropTypes.func, | ||
|
|
||
| /** | ||
| * Whether this card component include a button to expand the card. CardTitle, | ||
| * CardHeader and CardActions implement showExpandableButton. Any child component | ||
| * of Card can implements showExpandableButton or forwards the property to a child | ||
| * component supporting it. | ||
| */ | ||
| showExpandableButton: React.PropTypes.bool, | ||
|
|
||
| /** | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use the stateless function component pattern for those examples?