feat(Image): update to v1 API

Author: levithomason

config.js

@@ -52,7 +52,9 @@ config = Object.assign({}, config, {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: __DEV__ && 'eval-cheap-module-source-map' || __STAGING__ && 'source-map',
+  compiler_devtool: __DEV__ && 'eval-cheap-module-source-map'
+  || __TEST__ && 'cheap-module-source-map'
+  || __STAGING__ && 'source-map',
   compiler_hash_type: __PROD__ ? 'chunkhash' : 'hash',
   compiler_inline_manifest: false,
   compiler_fail_on_warning: __TEST__ || __PROD__,

docs/app/Examples/elements/Image/Groups/ImageGroupSizeExample.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image.png'
+
+const ImageImageExample = () => (
+  <div>
+    <Image.Group size='tiny'>
+      <Image src={src} />
+      <Image src={src} />
+      <Image src={src} />
+      <Image src={src} />
+    </Image.Group>
+    <br />
+    <Image.Group size='small'>
+      <Image src={src} />
+      <Image src={src} />
+      <Image src={src} />
+      <Image src={src} />
+    </Image.Group>
+  </div>
+)
+
+export default ImageImageExample

docs/app/Examples/elements/Image/Groups/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ImageTypesExamples = () => (
+  <ExampleSection title='Groups'>
+    <ComponentExample
+      title='Size'
+      description='A group of images can be formatted to have the same size'
+      examplePath='elements/Image/Groups/ImageGroupSizeExample'
+    />
+  </ExampleSection>
+)
+
+export default ImageTypesExamples

docs/app/Examples/elements/Image/States/ImageDisabledExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image.png'
+
+const ImageDisabledExample = () => (
+  <Image src={src} size='small' disabled />
+)
+
+export default ImageDisabledExample

docs/app/Examples/elements/Image/States/ImageHiddenExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image.png'
+
+const ImageHiddenExample = () => (
+  <Image src={src} size='small' hidden />
+)
+
+export default ImageHiddenExample

docs/app/Examples/elements/Image/States/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ImageStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Hidden'
+      description='An image can be hidden'
+      examplePath='elements/Image/States/ImageHiddenExample'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='An image can show that it is disabled and cannot be selected'
+      examplePath='elements/Image/States/ImageDisabledExample'
+    />
+  </ExampleSection>
+)
+
+export default ImageStatesExamples

docs/app/Examples/elements/Image/Types/ImageHrefExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image-text.png'
+
+const ImageHrefExample = () => (
+  <Image src={src} size='small' href='http://google.com' target='_blank' />
+)
+
+export default ImageHrefExample

docs/app/Examples/elements/Image/Types/ImageImageExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image.png'
+
+const ImageImageExample = () => (
+  <Image src={src} size='small' />
+)
+
+export default ImageImageExample

docs/app/Examples/elements/Image/Types/ImageOnClickExample.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image-text.png'
+
+class ImageOnClickExample extends Component {
+  handleClick = () => this.setState({})
+
+  render() {
+    const { didClick } = this.state
+
+    return (
+      <div>
+        <Image src={src} size='small' onClick={this.handleClick} />
+        {didClick && (
+          <p>Captured image click!</p>
+        )}
+      </div>
+    )
+  }
+}
+
+export default ImageOnClickExample

docs/app/Examples/elements/Image/Types/ImageWrappedExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'stardust'
+
+const src = 'http://semantic-ui.com/images/wireframe/image.png'
+
+const ImageImageExample = () => (
+  <Image src={src} size='small' wrapped />
+)
+
+export default ImageImageExample