feat(Label): add icon, iconPosition and onIconClick props

CHANGELOG.md

@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add Icon `xSpacing` prop @Bugaa92 ([#22](https://github.com/stardust-ui/react/pull/22))
 - Add Button `icon` prop and Text `truncated` prop @Bugaa92 ([#13](https://github.com/stardust-ui/react/pull/13))
 - Add Button `disabled` prop @Bugaa92 ([#14](https://github.com/stardust-ui/react/pull/14))
+- Add Label `icon`, `onIconClick` and `iconPosition` props @mnajdova ([#19](https://github.com/stardust-ui/react/pull/19))
 - Add Menu `vertical` prop @miroslavstastny ([#21](https://github.com/stardust-ui/react/pull/21))
 
 ### Documentation

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Label, Icon } from '@stardust-ui/react'
+
+const LabelExampleIcon = () => (
+  <Label>
+    <Icon name="coffee" xSpacing="after" variables={() => ({ color: 'rgba(0, 0, 0, 0.6)' })} />
+    Label containing icon
+  </Label>
+)
+
+export default LabelExampleIcon

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+class LabelExampleIconAsShorthand extends React.Component<{}, { display: string }> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      display: 'inline-block',
+    }
+  }
+
+  public hide = () => {
+    this.setState({ display: 'none' })
+  }
+
+  public render() {
+    const { display } = this.state
+    return (
+      <Label
+        circular
+        style={{ display }}
+        icon={{
+          name: 'close',
+          onClick: this.hide,
+        }}
+        iconPosition="end"
+        content="Removable label"
+      />
+    )
+  }
+}
+
+export default LabelExampleIconAsShorthand

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

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleIconPositionShorthand = () => (
+  <Label circular icon="close" iconPosition="end" content="Label with icon after the content" />
+)
+
+export default LabelExampleIconPositionShorthand

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Label, Icon } from '@stardust-ui/react'
+
+const LabelExampleIconPosition = () => (
+  <Label circular>
+    Label with icon after the content
+    <Icon name="close" xSpacing="before" variables={() => ({ color: 'rgba(0, 0, 0, 0.6)' })} />
+  </Label>
+)
+
+export default LabelExampleIconPosition

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+class LabelExampleIconShorthand extends React.Component<{}, { display: string }> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      display: 'inline-block',
+    }
+  }
+
+  public hide = () => {
+    this.setState({ display: 'none' })
+  }
+
+  public render() {
+    const { display } = this.state
+    return (
+      <Label
+        circular
+        style={{ display }}
+        icon="close"
+        iconPosition="end"
+        onIconClick={this.hide}
+        content="Removable label"
+      />
+    )
+  }
+}
+
+export default LabelExampleIconShorthand

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

@@ -9,6 +9,26 @@ 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="The Icon inside Label can be customized"
+      description="The Icon component inside the Label can be defined with customizing it's prop"
+      examplePath="components/Label/Variations/LabelExampleIconAsShorthand"
+    />
   </ExampleSection>
 )
 

src/components/Icon/Icon.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react'
 import PropTypes from 'prop-types'
-import { customPropTypes, UIComponent, SUI } from '../../lib'
+import { customPropTypes, UIComponent, SUI, createShorthandFactory } from '../../lib'
 
 import iconRules from './iconRules'
 import iconVariables from './iconVariables'
@@ -38,9 +38,11 @@ export interface IconProps {
   xSpacing?: IconXSpacing
   style?: CSSProperties
   title?: string
+  variables?: (siteVariables: object) => object
 }
 
 class Icon extends UIComponent<IconProps, {}> {
+  static create: Function
   static className = 'ui-icon'
 
   static displayName = 'Icon'
@@ -119,4 +121,6 @@ class Icon extends UIComponent<IconProps, {}> {
   }
 }
 
+Icon.create = createShorthandFactory(Icon, name => ({ name }))
+
 export default Icon

src/components/Label/Label.tsx

@@ -1,10 +1,13 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { ReactNode } from 'react'
+import _ from 'lodash'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
+import { Icon } from '../..'
 import labelRules from './labelRules'
 import labelVariables from './labelVariables'
+import callable from '../../lib/callable'
 
 /**
  * A label displays content classification
@@ -31,9 +34,32 @@ class Label extends UIComponent<any, any> {
 
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
+
+    /** Label can have an icon. */
+    icon: customPropTypes.some([PropTypes.string, PropTypes.object]),
+
+    /** An icon label can format an Icon to appear before or after the text in the label */
+    iconPosition: PropTypes.oneOf(['start', 'end']),
+
+    /**
+     * Function called when the icon is clicked.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onIconClick: PropTypes.func,
   }
 
-  static handledProps = ['as', 'children', 'circular', 'className', 'content']
+  static handledProps = [
+    'as',
+    'children',
+    'circular',
+    'className',
+    'content',
+    'icon',
+    'iconPosition',
+    'onIconClick',
+  ]
 
   static defaultProps = {
     as: 'label',
@@ -43,11 +69,59 @@ class Label extends UIComponent<any, any> {
 
   static variables = labelVariables
 
+  handleIconOverrides = predefinedProps => {
+    const { onIconClick, iconPosition, content, variables: labelPropVariables } = this.props
+    const { onClick, variables, xSpacing } = predefinedProps
+
+    const iconVariables = callable(variables)()
+    const labelVariables = labelPropVariables
+      ? callable(labelPropVariables)()
+      : callable(Label.variables)()
+
+    return {
+      onClick: e => {
+        _.invoke(predefinedProps, 'onClick', e)
+        _.invoke(this.props, 'onIconClick', e, this.props)
+      },
+      ...((onClick || onIconClick) && { tabIndex: '0' }),
+      ...((!iconVariables || !iconVariables.color) && {
+        variables: { color: labelVariables.color },
+      }),
+      ...(!xSpacing && {
+        xSpacing: !content ? 'none' : iconPosition === 'end' ? 'before' : 'after',
+      }),
+    }
+  }
+
   renderComponent({ ElementType, classes, rest }) {
-    const { children, content } = this.props
+    const { children, content, icon, iconPosition } = this.props
+    const getContent = (): ReactNode => {
+      const iconAtEnd = iconPosition === 'end'
+      const iconAtStart = !iconAtEnd
+
+      const iconElement = Icon.create(
+        {
+          className: classes.icon,
+          ...(typeof icon === 'string' ? { name: icon } : { ...icon }),
+        },
+        {
+          generateKey: false,
+          overrideProps: this.handleIconOverrides,
+        },
+      )
+
+      return (
+        <React.Fragment>
+          {iconAtStart && icon && iconElement}
+          {content}
+          {iconAtEnd && icon && iconElement}
+        </React.Fragment>
+      )
+    }
+
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {childrenExist(children) ? children : getContent()}
       </ElementType>
     )
   }

src/components/Label/labelRules.ts

@@ -5,10 +5,18 @@ export default {
     padding: variables.padding,
     fontWeight: '500',
     backgroundColor: 'rgb(232, 232, 232)',
-    color: 'rgba(0, 0, 0, 0.6)',
+    color: variables.color,
     borderRadius: pxToRem(3),
     ...(props.circular && {
       borderRadius: variables.circularRadius,
     }),
   }),
+  icon: ({ props }) => ({
+    position: 'relative',
+    top: '-0.15em',
+    ...((props.onIconClick ||
+      (props.icon && typeof props.icon === 'object' && props.icon.onClick)) && {
+      cursor: 'pointer',
+    }),
+  }),
 }

src/components/Label/labelVariables.ts

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

test/specs/components/Label/Label-test.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { isConformant } from 'test/specs/commonTests'
+
+import Label from 'src/components/Label/Label'
+import { mountWithProvider } from '../../../utils'
+
+describe('Label', () => {
+  isConformant(Label)
+
+  describe('onIconClick', () => {
+    it('calls onIconClick when the icon is clicked', () => {
+      const onClick = jest.fn()
+      const button = mountWithProvider(
+        <Label icon={{ name: 'close', key: 'icon-key' }} onIconClick={onClick} />,
+      ).find('Icon[name="close"]')
+      button.simulate('click')
+
+      expect(onClick).toHaveBeenCalled()
+    })
+  })
+})