Add CardMedia component

demo/card/card.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Card, CardTitle, CardText, CardActions, CardMenu } from '../../src/Card';
+import { Card, CardTitle, CardText, CardActions, CardMenu, CardMedia } from '../../src/Card';
 import Button from '../../src/Button';
 import IconButton from '../../src/IconButton';
 import Icon from '../../src/Icon';
@@ -62,6 +62,17 @@ class Demo extends React.Component {
                         <Icon name="event" />
                     </CardActions>
                 </Card>
+
+                <p>Media card</p>
+                <Card shadow={0} style={{width: '256px'}}>
+                    <CardTitle>Media card</CardTitle>
+                    <CardMedia>
+                        <img src="http://www.getmdl.io/assets/demos/image_card.jpg" width="256" height="256" />
+                    </CardMedia>
+                    <CardText>
+                        This card contains media.
+                    </CardText>
+                </Card>
             </div>
         );
     }

index.js

@@ -13,6 +13,7 @@ module.exports = {
     Card: Card.Card,
     CardTitle: Card.CardTitle,
     CardActions: Card.CardActions,
+    CardMedia: Card.CardMedia,
     CardText: Card.CardText,
     CardMenu: Card.CardMenu,
     Checkbox: require('./lib/Checkbox'),

src/Card/__tests__/CardMedia-test.js

@@ -0,0 +1,38 @@
+/* eslint-env mocha */
+import expect from 'expect';
+import React from 'react';
+import { render } from '../../__tests__/render';
+import { CardMedia } from '../';
+
+describe('Card', () => {
+    describe('CardMedia', () => {
+        it('should render a div with the card media css class', () => {
+            const output = render(<CardMedia />);
+
+            expect(output.type).toBe('div');
+            expect(output.props.className).toInclude('mdl-card__media');
+        });
+
+        it('should allow custom css classes', () => {
+            const output = render(<CardMedia className="my-media" />);
+
+            expect(output.props.className)
+                .toInclude('mdl-card__media')
+                .toInclude('my-media');
+        });
+
+        it('should render with the children', () => {
+            const element = (
+                <CardMedia>
+                    <img src="test.png" />
+                </CardMedia>
+            );
+
+            const output = render(element);
+
+            expect(output.props.children)
+                .toEqual(<img src="test.png" />);
+        });
+    });
+});
+

src/Card/index.js

@@ -5,3 +5,4 @@ export const CardText = basicClassCreator('CardText', 'mdl-card__supporting-text
 export const CardMenu = basicClassCreator('CardMenu', 'mdl-card__menu');
 export CardTitle from './CardTitle';
 export CardActions from './CardActions';
+export const CardMedia = basicClassCreator('CardMedia', 'mdl-card__media');