From e363ffaff84fe7f5ad43342a1b893a7bddeed00c Mon Sep 17 00:00:00 2001
From: Jeff Carbonella <jeff@contactually.com>
Date: Fri, 9 Sep 2016 12:49:53 -0400
Subject: [PATCH] refactor(Label): update props to the latest specs (#474)

---
 src/elements/Label/Label.js             | 45 ++++++++++-------
 test/specs/elements/Label/Label-test.js | 67 +++++--------------------
 2 files changed, 39 insertions(+), 73 deletions(-)

diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index dd0836cd50..3f6a2c825a 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -2,6 +2,7 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
@@ -19,8 +20,8 @@ import { Icon, Image } from '../'
  */
 function Label(props) {
   const {
-    attached, basic, children, color, corner, className, circular, detail, detailLink, floating, horizontal,
-    icon, image, link, onClick, onDetailClick, onRemove, pointing, removable, ribbon, size, tag, text,
+    attached, basic, children, color, corner, className, circular, detail, detailAs, empty, floating, horizontal,
+    icon, image, onClick, onDetailClick, onRemove, pointing, removable, ribbon, size, tag, content,
   } = props
 
   const handleClick = e => onClick && onClick(e, props)
@@ -31,31 +32,30 @@ function Label(props) {
     size,
     color,
     useKeyOnly(basic, 'basic'),
+    useKeyOnly(circular, 'circular'),
     useKeyOnly(floating, 'floating'),
     useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(empty, 'empty'),
     useKeyOnly(tag, 'tag'),
     useValueAndKey(attached, 'attached'),
     useKeyOrValueAndKey(corner, 'corner'),
     useKeyOrValueAndKey(pointing, 'pointing'),
     useKeyOrValueAndKey(ribbon, 'ribbon'),
-    circular && (children && 'circular' || 'empty circular'),
     // TODO how to handle image child with no image class? there are two image style labels.
     (image || childrenUtils.someByType(children, Image) || childrenUtils.someByType(children, 'img')) && 'image',
     'label',
     className
   )
 
-  const DetailComponent = (detailLink || onDetailClick) && 'a' || 'div'
-  const ElementType = getElementType(Label, props, () => {
-    if (image || link || onClick) return 'a'
-  })
+  const DetailComponent = detailAs || 'div'
+  const ElementType = getElementType(Label, props)
   const rest = getUnhandledProps(Label, props)
 
   return (
     <ElementType className={classes} onClick={handleClick} {...rest}>
       {createIcon(icon)}
       {createImage(image)}
-      {text}
+      {content}
       {children}
       {detail && (
         <DetailComponent className='detail' onClick={handleDetailClick}>{detail}</DetailComponent>
@@ -93,8 +93,11 @@ Label.propTypes = {
   /** A label can reduce its complexity. */
   basic: PropTypes.bool,
 
-  /** Primary content of the label, same as text. */
-  children: PropTypes.node,
+  /** Primary content of the label, same as content. */
+  children: customPropTypes.every([
+    customPropTypes.disallow(['icon', 'image', 'content']),
+    PropTypes.node,
+  ]),
 
   /** Classes to add to the label className. */
   className: PropTypes.string,
@@ -111,8 +114,17 @@ Label.propTypes = {
   /** Additional text with less emphasis. */
   detail: PropTypes.string,
 
-  /** Format the detail as a link. */
-  detailLink: PropTypes.bool,
+  /** An element type to render the 'detail' as (string or function). */
+  detailAs: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
+  /** Formats the label as a dot. */
+  empty: customPropTypes.every([
+    customPropTypes.demand(['circular']),
+    PropTypes.bool,
+  ]),
 
   /** Format a label to align better alongside text. */
   horizontal: PropTypes.bool,
@@ -120,7 +132,7 @@ Label.propTypes = {
   /** Float above another element in the upper right corner. */
   floating: PropTypes.bool,
 
-  /** Make the label circular, or a dot if it is empty. */
+  /** Make the label circular, or a dot when used with 'empty' prop. */
   circular: PropTypes.bool,
 
   /** Add an icon by icon name or pass an <Icon /> */
@@ -135,9 +147,6 @@ Label.propTypes = {
     PropTypes.element,
   ]),
 
-  /** Format the label as a link on hover. */
-  link: PropTypes.bool,
-
   /** Adds the link style when present, called with (event, props). */
   onClick: PropTypes.func,
 
@@ -165,8 +174,8 @@ Label.propTypes = {
   /** Format the label like a product tag. */
   tag: PropTypes.bool,
 
-  /** Primary text of the label, same as children. */
-  text: PropTypes.node,
+  /** Primary content of the label, same as children. */
+  content: PropTypes.node,
 }
 
 export default Label
diff --git a/test/specs/elements/Label/Label-test.js b/test/specs/elements/Label/Label-test.js
index 3244574ec5..42d3940a22 100644
--- a/test/specs/elements/Label/Label-test.js
+++ b/test/specs/elements/Label/Label-test.js
@@ -13,6 +13,7 @@ describe('Label Component', () => {
 
   common.propKeyOnlyToClassName(Label, 'basic')
   common.propKeyOnlyToClassName(Label, 'circular')
+  common.propKeyOnlyToClassName(Label, 'empty')
   common.propKeyOnlyToClassName(Label, 'floating')
   common.propKeyOnlyToClassName(Label, 'horizontal')
   common.propKeyOnlyToClassName(Label, 'tag')
@@ -33,18 +34,6 @@ describe('Label Component', () => {
       .should.have.tagName('div')
   })
 
-  describe('(empty) circular', () => {
-    it('is added to className when there are no children', () => {
-      shallow(<Label circular />)
-        .should.have.className('empty circular')
-    })
-
-    it('is not added to className when there are children', () => {
-      shallow(<Label circular>Child</Label>)
-        .should.not.have.className('empty circular')
-    })
-  })
-
   describe('detail', () => {
     it('renders detail as a div', () => {
       shallow(<Label detail={faker.hacker.noun()} />)
@@ -52,6 +41,12 @@ describe('Label Component', () => {
         .should.have.tagName('div')
     })
 
+    it('renders detail using component from detailAs prop', () => {
+      shallow(<Label detail={faker.hacker.noun()} detailAs='a' />)
+        .find('.detail')
+        .should.have.tagName('a')
+    })
+
     it('has no detail when not defined', () => {
       shallow(<Label />)
         .should.not.have.descendants('.detail')
@@ -72,19 +67,6 @@ describe('Label Component', () => {
     })
   })
 
-  describe('detailLink', () => {
-    it('has no detail when not defined', () => {
-      shallow(<Label />)
-        .should.not.have.descendants('.detail')
-    })
-
-    it('renders detail as an a tag', () => {
-      shallow(<Label detail={faker.hacker.noun()} detailLink />)
-        .find('.detail')
-        .should.have.tagName('a')
-    })
-  })
-
   describe('icon', () => {
     it('adds a i as first child', () => {
       shallow(<Label icon={faker.hacker.noun()}><br /></Label>)
@@ -129,27 +111,7 @@ describe('Label Component', () => {
     })
   })
 
-  describe('link', () => {
-    it('does not render label as an "a" when not defined', () => {
-      shallow(<Label />)
-        .should.not.have.tagName('a')
-    })
-
-    it('renders label as an "a"', () => {
-      shallow(<Label link />)
-        .should.have.tagName('a')
-    })
-  })
-
   describe('onClick', () => {
-    it('does not render as an "a" when not defined', () => {
-      shallow(<Label />)
-        .should.not.have.tagName('a')
-    })
-    it('renders label as an "a"', () => {
-      shallow(<Label onClick={() => null} />)
-        .should.have.tagName('a')
-    })
     it('is called when label is clicked', () => {
       const props = {
         onClick: sandbox.spy(),
@@ -191,11 +153,6 @@ describe('Label Component', () => {
   })
 
   describe('onDetailClick', () => {
-    it('renders detail as an a tag', () => {
-      shallow(<Label detail={faker.hacker.noun()} onDetailClick={() => null} />)
-        .should.have.descendants('a.detail')
-    })
-
     it('is called when detail is clicked', () => {
       const props = {
         detail: faker.hacker.noun(),
@@ -225,18 +182,18 @@ describe('Label Component', () => {
     })
   })
 
-  describe('text', () => {
-    it('has no text by default', () => {
+  describe('content', () => {
+    it('has no content by default', () => {
       shallow(<Label />)
         .text()
         .should.be.empty()
     })
 
     it('adds the value as children', () => {
-      const text = faker.hacker.phrase()
-      shallow(<Label text={text} />)
+      const content = faker.hacker.phrase()
+      shallow(<Label content={content} />)
         .children()
-        .should.contain.text(text)
+        .should.contain.text(content)
     })
   })
 })