From 9537ebba234bee79c0722742df60537bc993ee4e Mon Sep 17 00:00:00 2001 From: Erick Date: Fri, 18 Dec 2015 16:05:48 -0600 Subject: [PATCH] Updated Card Docs to new format --- .../app/components/Card/ExampleWithAvatar.jsx | 45 +++++ .../components/Card/ExampleWithoutAvatar.jsx | 37 ++++ docs/src/app/components/Card/README.md | 12 ++ .../app/components/pages/components/cards.jsx | 171 ++---------------- .../app/components/raw-code/cards-code.txt | 50 ----- src/card/card.jsx | 30 ++- 6 files changed, 139 insertions(+), 206 deletions(-) create mode 100644 docs/src/app/components/Card/ExampleWithAvatar.jsx create mode 100644 docs/src/app/components/Card/ExampleWithoutAvatar.jsx create mode 100644 docs/src/app/components/Card/README.md delete mode 100644 docs/src/app/components/raw-code/cards-code.txt diff --git a/docs/src/app/components/Card/ExampleWithAvatar.jsx b/docs/src/app/components/Card/ExampleWithAvatar.jsx new file mode 100644 index 00000000000000..ea6bd157e8bb4c --- /dev/null +++ b/docs/src/app/components/Card/ExampleWithAvatar.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import mui from 'material-ui'; + +const { + Avatar, + Card, + CardActions, + CardHeader, + CardMedia, + CardText, + CardTitle, + FlatButton, +} = mui; + +const CardExampleWithAvatar = React.createClass({ + render() { + return ( + + A}/> + + }> + + + + + + + + + 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. + + + ); + }, +}); +export default CardExampleWithAvatar; diff --git a/docs/src/app/components/Card/ExampleWithoutAvatar.jsx b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx new file mode 100644 index 00000000000000..205fb138939bb0 --- /dev/null +++ b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx @@ -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 ( + + + + 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. + + + + + + + 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. + + + ); + }, +}); +export default CardExampleWithoutAvatar; diff --git a/docs/src/app/components/Card/README.md b/docs/src/app/components/Card/README.md new file mode 100644 index 00000000000000..e2d74533272c8d --- /dev/null +++ b/docs/src/app/components/Card/README.md @@ -0,0 +1,12 @@ +## Card + +A card 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 diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx index 1b527326e0acef..1af88bad946e43 100644 --- a/docs/src/app/components/pages/components/cards.jsx +++ b/docs/src/app/components/pages/components/cards.jsx @@ -1,169 +1,32 @@ import React from 'react'; -import mui from 'material-ui'; -import ComponentDoc from '../../component-doc'; +import cardCode from '!raw!material-ui/lib/card/card'; import CodeExample from '../../code-example/code-example'; - -const { - Avatar, - Card, - CardActions, - CardHeader, - CardMedia, - CardText, - CardTitle, - FlatButton, - Paper, -} = mui; -import Code from 'cards-code'; -import CodeBlock from '../../code-example/code-block'; +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); - - this.desc = - 'A card 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.' + - '\n\n' + - '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.'; - - - this.componentInfo = [ - { - name: 'Card.Props', - infoArray: [ - { - name: 'initiallyExpanded', - type: 'bool', - header: 'optional', - desc: 'Whether this card is initially expanded.', - }, - ], - }, - { - name: 'Props', - infoArray: [ - { - name: 'expandable', - type: 'bool', - header: 'optional', - desc: 'Whether this card component is expandable. Can be set on any child of the Card component.', - }, - { - name: 'actAsExpander', - type: 'bool', - header: 'optional', - desc: 'Whether a click on this card component expands the card. ' + - 'Can be set on any child of the Card component.', - }, - { - name: 'showExpandableButton', - type: 'bool', - header: 'optional', - desc: '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.', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the card\'s root element.', - }, - ], - }, - { - name: 'Card.Events', - infoArray: [ - { - name: 'onExpandChange', - type: 'function(isExpanded)', - header: 'optional', - desc: 'Fired when the expandable state changes.', - }, - ], - }, - ]; } render() { return ( - - - - - { - '//Import statements:\nimport Card from \'material-ui/lib/card/card\';\n' + - 'import CardActions from \'material-ui/lib/card/card-actions\';\n' + - 'import CardHeader from \'material-ui/lib/card/card-header\';\n' + - 'import CardMedia from \'material-ui/lib/card/card-media\';\n' + - 'import CardText from \'material-ui/lib/card/card-text\';\n' + - 'import CardTitle from \'material-ui/lib/card/card-title\';\n\n' + - '//See material-ui/lib/index.js for more\n' - } - - - - - - A}/> - - }> - - - - - - - - - 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. - - -
- - - - 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. - - - - - - - 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. - - +
+ + + - + + + + +
); } - } diff --git a/docs/src/app/components/raw-code/cards-code.txt b/docs/src/app/components/raw-code/cards-code.txt deleted file mode 100644 index 1a984330e8cfa2..00000000000000 --- a/docs/src/app/components/raw-code/cards-code.txt +++ /dev/null @@ -1,50 +0,0 @@ - - A}/> - - }> - - - - - - - - - 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. - - - - - A} - actAsExpander={true} - showExpandableButton={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. - - - - - - - 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. - - diff --git a/src/card/card.jsx b/src/card/card.jsx index 87418c94b8974f..ce720d6a30e254 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -13,16 +13,42 @@ const Card = React.createClass({ }, 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, + + /** + * 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, /** - * Override the inline-styles of the root element. - */ + * Override the inline-styles of the card's root element. + */ style: React.PropTypes.object, },