feat(Label): added image and imagePosition props

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update styles for Menu underlined primary @miroslavstastny ([#20](https://github.com/stardust-ui/react/pull/20))
 - Add Avatar `getInitials` prop and `presenceIndicatorBackground` variable @mnajdova ([#38](https://github.com/stardust-ui/react/pull/38))
 - Add 'fluid' variant and size variables to Image @kuzhelov ([#54](https://github.com/stardust-ui/react/pull/54))
+- Add Label `image` shorthand prop @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55))  
 
 <!--------------------------------[ v0.2.5 ]------------------------------- -->
 ## [v0.2.5](https://github.com/stardust-ui/react/tree/v0.2.5) (2018-08-03)

docs/src/examples/components/Label/Variations/LabelExampleIconAsShorthand.shorthand.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-class LabelExampleIconAsShorthand extends React.Component<{}, { display: string }> {
+class LabelExampleIconAsShorthand extends React.Component<any, any> {
   constructor(props) {
     super(props)
-    this.state = {
-      display: 'inline-block',
-    }
+    this.state = {}
   }
 
   public hide = () => {

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label
+    circular
+    icon="close"
+    iconPosition="end"
+    content="John Doe"
+    image={{ src: 'public/images/avatar/small/matt.jpg', avatar: true }}
+  />
+)
+
+export default LabelExampleImageShorthand

docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-class LabelExampleIconShorthand extends React.Component<{}, { display: string }> {
+class LabelExampleIconShorthand extends React.Component<any, any> {
   constructor(props) {
     super(props)
-    this.state = {
-      display: 'inline-block',
-    }
+    this.state = {}
   }
 
   public hide = () => {

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

@@ -29,6 +29,11 @@ const Variations = () => (
       description="The Icon component inside the Label can be defined with customizing it's prop"
       examplePath="components/Label/Variations/LabelExampleIconAsShorthand"
     />
+    <ComponentExample
+      title="Image"
+      description="The Label can contain an image"
+      examplePath="components/Label/Variations/LabelExampleImage"
+    />
   </ExampleSection>
 )
 

src/components/Image/Image.tsx

@@ -1,14 +1,16 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { customPropTypes, UIComponent } from '../../lib'
+import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import imageRules from './imageRules'
 import imageVariables from './imageVariables'
 
 /**
  * An image is a graphic representation of something.
  */
 class Image extends UIComponent<any, any> {
+  static create: Function
+
   static className = 'ui-image'
 
   static displayName = 'Image'
@@ -45,4 +47,6 @@ class Image extends UIComponent<any, any> {
   }
 }
 
+Image.create = createShorthandFactory(Image, src => ({ src }))
+
 export default Image

src/components/Label/Label.tsx

@@ -4,7 +4,7 @@ import * as _ from 'lodash'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
-import { Icon } from '../..'
+import { Icon, Image } from '../..'
 import labelRules from './labelRules'
 import labelVariables from './labelVariables'
 import callable from '../../lib/callable'
@@ -41,6 +41,9 @@ class Label extends UIComponent<any, any> {
     /** An icon label can format an Icon to appear before or after the text in the label */
     iconPosition: PropTypes.oneOf(['start', 'end']),
 
+    /** Label can have an icon. */
+    image: customPropTypes.some([PropTypes.string, PropTypes.object]),
+
     /**
      * Function called when the icon is clicked.
      *
@@ -58,6 +61,7 @@ class Label extends UIComponent<any, any> {
     'content',
     'icon',
     'iconPosition',
+    'image',
     'onIconClick',
   ]
 
@@ -94,7 +98,7 @@ class Label extends UIComponent<any, any> {
   }
 
   renderComponent({ ElementType, classes, rest }) {
-    const { children, content, icon, iconPosition } = this.props
+    const { children, content, icon, iconPosition, image } = this.props
     const getContent = (): React.ReactNode => {
       const iconAtEnd = iconPosition === 'end'
       const iconAtStart = !iconAtEnd
@@ -110,8 +114,19 @@ class Label extends UIComponent<any, any> {
         },
       )
 
+      const imageElement = Image.create(
+        {
+          className: classes.image,
+          ...(typeof image === 'string' ? { src: image } : { ...image }),
+        },
+        {
+          generateKey: false,
+        },
+      )
+
       return (
         <React.Fragment>
+          {image && imageElement}
           {iconAtStart && icon && iconElement}
           {content}
           {iconAtEnd && icon && iconElement}

src/components/Label/labelRules.ts

@@ -1,22 +1,39 @@
 import { pxToRem } from '../../lib'
 
+const getLabelHeight = () => {
+  return pxToRem(20)
+}
+
 export default {
   root: ({ props, variables }) => ({
+    height: getLabelHeight(),
+    margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     padding: variables.padding,
-    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: pxToRem(14),
+    lineHeight: getLabelHeight(),
+    verticalAlign: 'middle',
     backgroundColor: 'rgb(232, 232, 232)',
     color: variables.color,
     borderRadius: pxToRem(3),
     ...(props.circular && {
       borderRadius: variables.circularRadius,
     }),
+    overflow: 'hidden',
   }),
   icon: ({ props }) => ({
     position: 'relative',
-    top: '-0.15em',
+    top: `-${pxToRem(2)}`,
     ...((props.onIconClick ||
       (props.icon && typeof props.icon === 'object' && props.icon.onClick)) && {
       cursor: 'pointer',
     }),
   }),
+  image: () => ({
+    height: `${getLabelHeight()} !important`,
+    width: `${getLabelHeight()} !important`,
+    verticalAlign: 'top',
+    position: 'relative',
+    left: `-${pxToRem(4)}`,
+  }),
 }

src/components/Label/labelVariables.ts

@@ -2,8 +2,8 @@ import { pxToRem } from '../../lib'
 
 export default () => {
   const vars: any = {}
-  vars.circularRadius = pxToRem(5000)
-  vars.padding = `${pxToRem(6)} ${pxToRem(8)}`
+  vars.circularRadius = pxToRem(9999)
+  vars.padding = `0 ${pxToRem(4)} 0 ${pxToRem(4)}`
   vars.color = 'rgba(0, 0, 0, 0.6)'
   return vars
 }