From e1bbafd86741181dcb408dca65cbd234cf452c94 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Sun, 14 Aug 2016 23:09:52 +0300
Subject: [PATCH] feat(Image) Add inline prop (#394)

---
 .../views/Statistic/Content/StatisticValueExample.js        | 4 +---
 src/elements/Image/Image.js                                 | 6 +++++-
 test/specs/elements/Image/Image-test.js                     | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js b/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
index c386b9ff68..804d0e7734 100644
--- a/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
+++ b/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
@@ -3,8 +3,6 @@ import { Icon, Image, Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
 
-// TODO: Update <Image> usage after <Image> will be updated to v1 API
-
 const StatisticValueExample = () => (
   <Group>
     <Statistic>
@@ -30,7 +28,7 @@ const StatisticValueExample = () => (
 
     <Statistic>
       <Value>
-        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
+        <Image inline shape='circular' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
         42
       </Value>
       <Label>Team Members</Label>
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 8e7e278134..52b361593a 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -19,7 +19,7 @@ import ImageGroup from './ImageGroup'
 function Image(props) {
   const {
     verticalAlign, alt, avatar, bordered, centered, className, disabled, floated, fluid,
-    hidden, height, href, shape, size, spaced, src, width, wrapped,
+    hidden, height, href, inline, shape, size, spaced, src, width, wrapped,
   } = props
 
   const classes = cx(
@@ -33,6 +33,7 @@ function Image(props) {
     useValueAndKey(floated, 'floated'),
     useKeyOnly(fluid, 'fluid'),
     useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(inline, 'inline'),
     useKeyOrValueAndKey(spaced, 'spaced'),
     shape,
     className,
@@ -119,6 +120,9 @@ Image.propTypes = {
   /** Renders the Image as an <a> tag with this href */
   href: PropTypes.string,
 
+  /** An image may appear inline */
+  inline: PropTypes.bool,
+
   /** An image may appear rounded or circular */
   shape: PropTypes.oneOf(Image._meta.props.shape),
 
diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
index f69821b19d..8aa9e2678d 100644
--- a/test/specs/elements/Image/Image-test.js
+++ b/test/specs/elements/Image/Image-test.js
@@ -17,6 +17,7 @@ describe('Image Component', () => {
   common.propKeyOnlyToClassName(Image, 'disabled')
   common.propKeyOnlyToClassName(Image, 'fluid')
   common.propKeyOnlyToClassName(Image, 'hidden')
+  common.propKeyOnlyToClassName(Image, 'inline')
 
   common.propKeyAndValueToClassName(Image, 'floated')
   common.propKeyOrValueToClassName(Image, 'spaced')