feat(Label): added image and imagePosition props

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Adding `behaviors` section to the menu, under the components @kolaps33 ([#119](https://github.com/stardust-ui/react/pull/119))
 - Add `avatar` prop to `Chat.Message` subcomponent @Bugaa92 ([#159](https://github.com/stardust-ui/react/pull/159))
 - add `iconOnly` prop to `Button` @mnajdova ([#182](https://github.com/stardust-ui/react/pull/182))
+- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
 
 <!--------------------------------[ v0.5.0 ]------------------------------- -->
 ## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30)

docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx → docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-class LabelExampleOnIconClickShorthand extends React.Component {
+class LabelExampleContentCustomizationShorthand extends React.Component {
   state = { hidden: false }
 
   hide = () => {
@@ -16,14 +16,19 @@ class LabelExampleOnIconClickShorthand extends React.Component {
 
     return (
       <Label
+        content="You can remove me!"
         circular
-        content="Removable label"
-        icon="close"
-        iconPosition="end"
-        onIconClick={this.hide}
+        image={{
+          src: 'public/images/avatar/small/matt.jpg',
+          avatar: true,
+        }}
+        icon={{
+          name: 'close',
+          onClick: this.hide,
+        }}
       />
     )
   }
 }
 
-export default LabelExampleOnIconClickShorthand
+export default LabelExampleContentCustomizationShorthand

docs/src/examples/components/Label/Variations/LabelExampleIcon.shorthand.tsx → docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-const LabelExampleIconShorthand = () => <Label icon="coffee" content="Label containing icon" />
+const LabelExampleIconShorthand = <Label content="Label with icon" icon="close" />
 
 export default LabelExampleIconShorthand

docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleIconPositionShorthand = (
+  <Label content="Have a coffee!" icon="coffee" iconPosition="start" />
+)
+
+export default LabelExampleIconPositionShorthand

docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label content="John Doe" image="public/images/avatar/small/matt.jpg" />
+)
+
+export default LabelExampleImageShorthand

docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label content="John Doe" image="public/images/avatar/small/matt.jpg" imagePosition="end" />
+)
+
+export default LabelExampleImageShorthand

docs/src/examples/components/Label/Content/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title="Content">
+    <ComponentExample
+      title="Label"
+      description="A label."
+      examplePath="components/Label/Content/LabelExample"
+    />
+    <ComponentExample
+      title="Image"
+      description="A label can contain image."
+      examplePath="components/Label/Content/LabelExampleImage"
+    />
+    <ComponentExample
+      title="Image position"
+      description="The image in the Label can be positioned to appear in the ending of the Label."
+      examplePath="components/Label/Content/LabelExampleImagePosition"
+    />
+    <ComponentExample
+      title="Icon"
+      description="A label can contain icon."
+      examplePath="components/Label/Content/LabelExampleIcon"
+    />
+    <ComponentExample
+      title="Icon position"
+      description="The icon in the Label can be positioned to appear in the starting of the Label."
+      examplePath="components/Label/Content/LabelExampleIconPosition"
+    />
+    <ComponentExample
+      title="Content customization"
+      description="The content props in the label can be customized."
+      examplePath="components/Label/Content/LabelExampleContentCustomization"
+    />
+  </ExampleSection>
+)
+
+export default Content

docs/src/examples/components/Label/Variations/index.tsx

@@ -9,26 +9,6 @@ const Variations = () => (
       description="A label can be circular."
       examplePath="components/Label/Variations/LabelExampleCircular"
     />
-    <ComponentExample
-      title="Icon"
-      description="The label can contain an icon."
-      examplePath="components/Label/Variations/LabelExampleIcon"
-    />
-    <ComponentExample
-      title="Icon position"
-      description="The icon inside the label can be aligned before or after the content."
-      examplePath="components/Label/Variations/LabelExampleIconPosition"
-    />
-    <ComponentExample
-      title="Clickable icon"
-      description="The icon inside the label can be clickable."
-      examplePath="components/Label/Variations/LabelExampleOnIconClick"
-    />
-    <ComponentExample
-      title="Icon props"
-      description="You can define the Icon props inside the Label."
-      examplePath="components/Label/Variations/LabelExampleIconProps"
-    />
   </ExampleSection>
 )
 

docs/src/examples/components/Label/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import Types from './Types'
+import Content from './Content'
 import Variations from './Variations'
 
 const LabelExamples = () => (
   <div>
-    <Types />
+    <Content />
     <Variations />
   </div>
 )

src/components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { customPropTypes, UIComponent } from '../../lib'
+import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import { ImageBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 
@@ -34,6 +34,8 @@ export interface IImageProps {
  *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
  */
 class Image extends UIComponent<Extendable<IImageProps>, any> {
+  static create: Function
+
   static className = 'ui-image'
 
   static displayName = 'Image'
@@ -85,4 +87,6 @@ class Image extends UIComponent<Extendable<IImageProps>, any> {
   }
 }
 
+Image.create = createShorthandFactory(Image, src => ({ src }))
+
 export default Image