Modular Card component

docs/src/app/app-routes.jsx

@@ -19,6 +19,7 @@ var Components = require('./components/pages/components.jsx');
 var AppBar = require('./components/pages/components/app-bar.jsx');
 var Avatars = require('./components/pages/components/avatars.jsx');
 var Buttons = require('./components/pages/components/buttons.jsx');
+var Cards = require('./components/pages/components/cards.jsx');
 var DatePicker = require('./components/pages/components/date-picker.jsx');
 var Dialog = require('./components/pages/components/dialog.jsx');
 var DropDownMenu = require('./components/pages/components/drop-down-menu.jsx');
@@ -62,6 +63,7 @@ var AppRoutes = (
       <Route name="appbar" handler={AppBar} />
       <Route name="avatars" handler={Avatars} />
       <Route name="buttons" handler={Buttons} />
+      <Route name="cards" handler={Cards} />
       <Route name="date-picker" handler={DatePicker} />
       <Route name="dialog" handler={Dialog} />
       <Route name="dropdown-menu" handler={DropDownMenu} />

docs/src/app/components/pages/components.jsx

@@ -8,6 +8,7 @@ class Components extends React.Component {
       { route: 'appbar', text: 'AppBar'},
       { route: 'avatars', text: 'Avatars'},
       { route: 'buttons', text: 'Buttons'},
+      { route: 'cards', text: 'Cards'},
       { route: 'date-picker', text: 'Date Picker'},
       { route: 'dialog', text: 'Dialog'},
       { route: 'dropdown-menu', text: 'Dropdown Menu'},

docs/src/app/components/pages/components/cards.jsx

@@ -0,0 +1,88 @@
+var React = require('react');
+var mui = require('mui');
+var ComponentDoc = require('../../component-doc.jsx');
+var {Card, CardMedia, CardTitle, CardActions, CardText, CardHeader, FlatButton, Avatar} = mui;
+
+class CardPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.code = `
+       <Card>
+          <CardHeader
+            title="Title"
+            subtitle="Subtitle"
+            avatar={<Avatar>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>`;
+
+    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 = [];
+  }
+
+  render() {
+    return (
+      <ComponentDoc
+        name="Card"
+        code={this.code}
+        desc={this.desc}
+        componentInfo={this.componentInfo}>
+          <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>
+      </ComponentDoc>
+    );
+  }
+
+}
+
+module.exports = CardPage;

src/avatar.jsx

@@ -45,6 +45,7 @@ var SvgIcon = React.createClass({
         borderRadius: '50%',
         border: src ? 'solid 1px' : 'none',
         borderColor: this.context.muiTheme.palette.borderColor,
+        display:'inline-block',
 
         //Needed for letter avatars
         textAlign: 'center',

src/card/card-actions.jsx

@@ -0,0 +1,29 @@
+var React = require('react');
+var Styles = require('../styles');
+
+var CardActions = React.createClass({
+  getStyles: function () {
+    return {
+      root: {
+        padding: 8
+      }
+    }
+  },
+  render: function () {
+    var styles = this.getStyles();
+
+    var children = React.Children.map(this.props.children, function (child) {
+      return React.cloneElement(child, {
+        style: {marginRight: 8}
+      });
+    });
+
+    return (
+      <div {...this.props} style={styles.root}>
+        {children}
+      </div>
+    );
+  }
+});
+
+module.exports = CardActions;

src/card/card-header.jsx

@@ -0,0 +1,82 @@
+var React = require('react');
+var Styles = require('../styles');
+var Avatar = require('../avatar');
+var StylePropable = require('../mixins/style-propable');
+
+var CardHeader = React.createClass({
+
+  mixins: [StylePropable],
+
+  propTypes: {
+    title: React.PropTypes.string,
+    titleColor: React.PropTypes.string,
+    titleStyle: React.PropTypes.object,
+    subtitle: React.PropTypes.string,
+    subtitleColor: React.PropTypes.string,
+    subtitleStyle: React.PropTypes.object,
+    textStyle: React.PropTypes.object
+  },
+
+  getDefaultProps: function () {
+    return {
+      titleColor: Styles.Colors.darkBlack,
+      subtitleColor: Styles.Colors.lightBlack
+    };
+  },
+
+  getStyles: function () {
+    return {
+      root: {
+        height: 72,
+        padding: 16,
+        fontWeight: Styles.Typography.fontWeightMedium,
+        boxSizing: 'border-box'
+      },
+      text: {
+        display: 'inline-block',
+        verticalAlign: 'top'
+      },
+      avatar: {
+        marginRight:16
+      },
+      title: {
+        color: this.props.titleColor,
+        display: 'block',
+        fontSize: 15
+      },
+      subtitle: {
+        color: this.props.subtitleColor,
+        display: 'block',
+        fontSize: 14
+      }
+    }
+  },
+
+  render: function () {
+    var styles = this.getStyles();
+    var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
+    var textStyle = this.mergeAndPrefix(styles.text, this.props.textStyle);
+    var titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle);
+    var subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle);
+
+    var avatar = this.props.avatar;
+    if (React.isValidElement(this.props.avatar)) {
+      var avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style);
+      avatar = React.cloneElement(avatar, {style:avatarMergedStyle})
+    }
+    else 
+      avatar = <Avatar src={this.props.avatar} style={styles.avatar}/>
+
+    return (
+      <div {...this.props} style={rootStyle}>
+        {avatar}
+        <div style={textStyle}>
+          <span style={titleStyle}>{this.props.title}</span>
+          <span style={subtitleStyle}>{this.props.subtitle}</span>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = CardHeader;

src/card/card-media.jsx

@@ -0,0 +1,98 @@
+var React = require('react');
+var Styles = require('../styles');
+var StylePropable = require('../mixins/style-propable');
+
+var CardMedia = React.createClass({
+
+  mixins:[StylePropable],
+
+  propTypes: {
+    overlay: React.PropTypes.node,
+    style: React.PropTypes.object,
+    overlayStyle: React.PropTypes.object,
+    overlayContainerStyle: React.PropTypes.object,
+    overlayContentStyle: React.PropTypes.object,
+    mediaStyle: React.PropTypes.object
+  },
+
+  getStyles: function () {
+    return {
+      root: {
+        position: 'relative'
+      },
+      overlayContainer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0
+      },
+      overlay: {
+        height: '100%',
+        position: 'relative'
+      },
+      overlayContent: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        left: 0,
+        paddingTop: 8,
+        background: Styles.Colors.lightBlack
+      }
+    };
+  },
+
+  render: function () {
+    var styles = this.getStyles();
+    var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
+    var mediaStyle = this.mergeAndPrefix(styles.media, this.props.mediaStyle);
+    var overlayContainerStyle = this.mergeAndPrefix(styles.overlayContainer, this.props.overlayContainerStyle);
+    var overlayContentStyle = this.mergeAndPrefix(styles.overlayContent, this.props.overlayContentStyle);
+    var overlayStyle = this.mergeAndPrefix(styles.overlay, this.props.overlayStyle);
+
+
+    var children = React.Children.map(this.props.children, function (child) {
+      return React.cloneElement(child, {
+        style: {
+          verticalAlign: 'top',
+          maxWidth: '100%',
+          minWidth: '100%'
+        }
+      });
+    });
+
+    var overlayChildren = React.Children.map(this.props.overlay, function (child) {
+      if (child.type.displayName === 'CardHeader' || child.type.displayName === 'CardTitle'
+      ) {
+        return React.cloneElement(child, {
+          titleColor: Styles.Colors.darkWhite,
+          subtitleColor: Styles.Colors.lightWhite
+        });
+      } else if (child.type.displayName === 'CardText') {
+        return React.cloneElement(child, {
+          color: Styles.Colors.darkWhite
+        });
+      } else {
+        return child;
+      }
+    });
+
+    return (
+      <div {...this.props} style={rootStyle}>
+        <div style={mediaStyle}>
+          {children}
+        </div>
+        {(this.props.overlay) ?
+          <div style={overlayContainerStyle}>
+            <div style={overlayStyle}>
+              <div style={overlayContentStyle}>
+                {overlayChildren}
+              </div>
+            </div>
+          </div> : ''}
+      </div>
+    );
+  }
+});
+
+module.exports = CardMedia;

src/card/card-text.jsx

@@ -0,0 +1,42 @@
+var React = require('react');
+var Styles = require('../styles');
+var StylePropable = require('../mixins/style-propable');
+
+var CardText = React.createClass({
+
+  mixins:[StylePropable],
+
+  propTypes: {
+    color: React.PropTypes.string,
+    style: React.PropTypes.object
+  },
+
+  getDefaultProps: function () {
+    return {
+      color: Styles.Colors.ck
+    }
+  },
+
+  getStyles: function () {
+    return {
+      root: {
+        padding: 16,
+        fontSize: '14px',
+        color: this.props.color
+      }
+    }
+  },
+
+  render: function () {
+    var styles = this.getStyles();
+    var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
+
+    return (
+      <div {...this.props} style={rootStyle}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+module.exports = CardText;