Updated Card Docs to new format

mui · Dec 18, 2015 · 2aeb8a5 · 2aeb8a5
1 parent efcddb2
commit 2aeb8a5
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 206 deletions.
diff --git a/docs/src/app/components/Card/ExampleWithAvatar.jsx 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 (
+      <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;
diff --git a/docs/src/app/components/Card/ExampleWithoutAvatar.jsx b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import mui from 'material-ui';
+
+const {
+  Avatar,
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardText,
+  CardTitle,
+  FlatButton,
+} = mui;
+
+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;
diff --git a/docs/src/app/components/Card/README.md 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
@@ -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 (
-      <ComponentDoc
-        name="Card"
-        desc={this.desc}
-        componentInfo={this.componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            '//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'
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <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>
-          <br />
-          <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>
+      <div>
+        <MarkdownElement text={cardReadmeText} />
+        <CodeExample code={cardExampleWithAvatarCode}>
+          <CardExampleWithAvatar />
         </CodeExample>
-      </ComponentDoc>
+        <CodeExample code={cardExampleWithoutAvatarCode}>
+          <CardExampleWithoutAvatar />
+        </CodeExample>
+        <PropTypeDescription code={cardCode} />
+      </div>
     );
   }
-
 }
diff --git a/docs/src/app/components/raw-code/cards-code.txt b/docs/src/app/components/raw-code/cards-code.txt
diff --git 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,
   },