Updated Image Component to v1 API

docs/app/Examples/elements/Image/ImageExampes.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import ImageTypesExamples from './Types/ImageTypesExamples'
+
+export default class ImageExamples extends Component {
+  render() {
+    return (
+      <div>
+        <ImageTypesExamples />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageAlignedExample extends Component {
+  render() {
+    return (
+      <div>
+        <Image shape='rounded' />
+        <Image shape='circular' />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageAvatarExample extends Component {
+  render() {
+    return (
+      <Image avatar />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageBorderedExample extends Component {
+  render() {
+    return (
+      <Image bordered />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageCenteredExample extends Component {
+  render() {
+    return (
+      <Image centered />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageDisabledExample extends Component {
+  render() {
+    return (
+      <Image disabled />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageSpacedExample extends Component {
+  render() {
+    return (
+      <Image floated='left' />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageFluidExample extends Component {
+  render() {
+    return (
+      <Image fluid />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageHiddenExample extends Component {
+  render() {
+    return (
+      <Image hidden />
+    )
+  }
+}

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

@@ -1,11 +1,10 @@
 import React, { Component } from 'react'
 import { Image } from 'stardust'
-import image from '../image-text.png'
 
 export default class ImageLinkExample extends Component {
   render() {
     return (
-      <Image src={image} href='http://google.com' size='medium' />
+      <Image link />
     )
   }
 }

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

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageShapesExample extends Component {
+  render() {
+    return (
+      <div>
+        <Image shape='rounded' />
+        <Image shape='circular' />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageSizeExample extends Component {
+  render() {
+    return (
+      <div>
+        <Image size='mini' />
+        <Image size='tiny' />
+        <Image size='small' />
+        <Image size='medium' />
+        <Image size='large' />
+        <Image size='big' />
+        <Image size='huge' />
+        <Image size='massive' />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Image } from 'stardust'
+
+export default class ImageSpacedExample extends Component {
+  render() {
+    return (
+      <Image spaced />
+    )
+  }
+}

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

@@ -1,28 +1,71 @@
-/* eslint-disable max-len */
-
 import React, { Component } from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
-import { Message } from 'stardust'
 
 export default class ImageTypesExamples extends Component {
   render() {
     return (
       <ExampleSection title='Types'>
         <ComponentExample
-          title='Image'
-          description='An image'
-          examplePath='elements/Image/Types/ImageImageExample'
-        >
-          <Message className='info'>
-            Unless a size is specified, images will use the original dimensions of the image up to the size of its container..
-          </Message>
-        </ComponentExample>
-        <ComponentExample
-          title='Image Link'
-          description='An image can be formatted to link to other content'
+          title='Aligned'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageAlignedExample'
+        />
+        <ComponentExample
+          title='Avatar'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageAvatarExample'
+        />
+        <ComponentExample
+          title='Bordered'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageBorderedExample'
+        />
+        <ComponentExample
+          title='Centered'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageCenteredExample'
+        />
+        <ComponentExample
+          title='Disabled'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageDisabledExample'
+        />
+        <ComponentExample
+          title='Floated'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageFloatedExample'
+        />
+        <ComponentExample
+          title='Fluid'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageFluidExample'
+        />
+        <ComponentExample
+          title='Hidden'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageHiddenExample'
+        />
+        <ComponentExample
+          title='Link'
+          description='A standard image'
           examplePath='elements/Image/Types/ImageLinkExample'
         />
+        <ComponentExample
+          title='Shapes'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageShapesExample'
+        />
+        <ComponentExample
+          title='Size'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageSizeExample'
+        />
+        <ComponentExample
+          title='Spaced'
+          description='A standard image'
+          examplePath='elements/Image/Types/ImageSpacedExample'
+        />
       </ExampleSection>
     )
   }