feat(Item.Image): Add size prop

[clemensw]

• Resolves Item.Image doesn't honor size prop #746
• Reverses an explicit test for ui=false, so needs review.
• Renders similar to the example at http://semantic-ui.com/views/item.html#image
• Images now render left aligned and sized.

[codecov-io]

Current coverage is 99.48% (diff: 100%)

No coverage report found for master at 24e9490.

Powered by Codecov. Last update 24e9490...3f0533c

[layershifter]

This PR will break all other except case with size, it cannot be merged as is.

---

For a common understanding, we are talking about the example. This example uses size prop that will pass to Image component, but CSS for item.image doesn't handle size (what is right).

So, we need add ui when there is size prop and skip it in other cases.

<Item.Image /> // <div class="ui image">
<Item.Image size="small" /> // <div class="ui small image">

I think it's not responsibility of Image, so we need fix in Item.Image.

- import React from 'react'
+ import React, { PropTypes } from 'react'
import {
  META,
+ SUI, 
} from '../../lib'
import Image from '../../elements/Image'

function ItemImage(props) {
-  return <Image {...props} ui={false} wrapped />
+ const { size } = props
+ const rest = getUnhandledProps(ItemImage, props)
+
+ return <Image {...props} size={size} ui={!!size} wrapped />
}

ItemImage._meta = {
  name: 'ItemImage',
  parent: 'Item',
  type: META.TYPES.VIEW,
}

+ ItemImage.propTypes = {
+  /** An image may appear at different sizes */
+  size: PropTypes.oneOf(Image._meta.props.size),
+ },

export default ItemImage

import React from 'react'
import ItemImage from 'src/views/Item/ItemImage'

describe('ItemImage', () => {
  it('renders Image component', () => {
    shallow(<ItemImage />)
      .should.have.descendants('Image')
  })

  it('is wrapped without ui', () => {
    const wrapper = shallow(<ItemImage />)

    wrapper.should.have.prop('wrapped', true)
    wrapper.should.have.prop('ui', false)
  })

+  it('has ui with size prop', () => {
+    shallow(<ItemImage size='small' />)
+      .should.have.prop('ui', true)
+  })
})

[levithomason]

Let's also use ui={!!size} so the value is coerced to a boolean value. Otherwise, when the passes a size such as small the prop would be ui='small'.

[layershifter]

@clemensw do you have plans for PR update?

[levithomason]

Would like to merge @clemensw's work, however, whoever has time to get to this first let's ship it! :)

[clemensw]

Thank you for the review. I'm seriously confused by the logic behind Semantic UI 's use of the ui class in css. I've updated the PR based on your suggestions (substituting getUnhandledProps for SUI on the import and rest for props on the Image attributes). I booleanized size by checking against undefined, but will re-push the PR with your solution.

[layershifter]

@clemensw Thanks for updates 😺
@levithomason LGTM, ready to go?

[levithomason]

Thanks for the update and help!