Added support for Image caption.

Adding feedbacks

src/js/components/Image.js

@@ -3,27 +3,45 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Label from './Label';
+
 const CLASS_ROOT = 'image';
 
 export default class Image extends Component {
   render () {
-    let { size, full } = this.props;
+    let { caption, className, full, id, size, src } = this.props;
     let classes = classnames(
       CLASS_ROOT,
-      this.props.className,
       {
         [`${CLASS_ROOT}--${size}`]: size,
         [`${CLASS_ROOT}--full`]: typeof full === 'boolean' && full,
         [`${CLASS_ROOT}--full-${full}`]: typeof full === 'string'
-      }
+      },
+      className
     );
 
-    return <img id={this.props.id} className={classes} src={this.props.src} />;
+    return caption ? (
+      <figure className={classes}>
+        <img id={id} src={src} className={`${CLASS_ROOT}__image`} />
+        <figcaption className={`${CLASS_ROOT}__caption`}>
+          <Label>{caption}</Label>
+        </figcaption>
+      </figure>
+    ) : (
+      <img id={id} src={src} className={classes} />
+    );
   }
 };
 
 Image.propTypes = {
+  caption: PropTypes.string,
+  className: PropTypes.string,
   full: PropTypes.oneOf([true, 'horizontal', 'vertical', false]),
-  src: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'thumb'])
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'thumb']),
+  src: PropTypes.string
+};
+
+Image.defaultProps = {
+  size: 'medium'
 };

src/scss/grommet-core/_objects.image.scss

@@ -2,6 +2,8 @@
 
 .image {
 
+  max-width: 100%;
+
   &--medium {
     width: $image-width;
   }
@@ -33,4 +35,13 @@
   &--full-vertical {
     height: 100%;
   }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__caption {
+    text-align: center;
+    padding: halve($inuit-base-spacing-unit);
+  }
 }