From 1e843c477b3aa58384eaf0808911cf5ce9e926ce Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Mon, 29 Aug 2016 18:48:41 -0700
Subject: [PATCH 1/2] wip

---
 docs/app/Examples/views/Feed/Types/Basic.js | 81 +++++++++++++++++++++
 src/addons/Confirm/Confirm.js               | 10 ++-
 src/elements/Header/Header.js               |  5 +-
 src/lib/customPropTypes.js                  | 37 +++++++++-
 src/views/Feed/FeedContent.js               | 23 ++++++
 src/views/Feed/FeedDate.js                  |  8 +-
 src/views/Feed/FeedEvent.js                 | 22 +-----
 src/views/Feed/FeedLabel.js                 | 28 +------
 src/views/Feed/FeedLike.js                  | 18 +----
 src/views/Feed/FeedMeta.js                  |  9 +--
 src/views/Feed/FeedSummary.js               | 24 +-----
 src/views/Feed/FeedUser.js                  |  8 +-
 src/views/Item/Item.js                      | 30 ++------
 src/views/Item/ItemContent.js               | 25 ++-----
 src/views/Item/ItemDescription.js           |  5 +-
 src/views/Item/ItemExtra.js                 |  5 +-
 src/views/Item/ItemHeader.js                |  5 +-
 src/views/Item/ItemMeta.js                  |  5 +-
 src/views/Statistic/Statistic.js            |  5 +-
 src/views/Statistic/StatisticLabel.js       |  5 +-
 src/views/Statistic/StatisticValue.js       |  5 +-
 21 files changed, 183 insertions(+), 180 deletions(-)
 create mode 100644 docs/app/Examples/views/Feed/Types/Basic.js

diff --git a/docs/app/Examples/views/Feed/Types/Basic.js b/docs/app/Examples/views/Feed/Types/Basic.js
new file mode 100644
index 0000000000..97d607e748
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Types/Basic.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const { Content, Date, Event, Extra, Label, Like, Meta, Summary, User } = Feed
+
+const Basic = () => {
+  return (
+    <Feed>
+      <Event>
+        <Label>
+          <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+        </Label>
+        <Content>
+          <Summary>
+            <User>Elliot Fu</User> added you as a friend
+            <Date>1 Hour Ago</Date>
+          </Summary>
+          <Meta>
+            <Like icon='like'>4 Likes</Like>
+          </Meta>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content>
+          <Summary>
+            <a>Helen Troy</a> added <a>2 new illustrations</a>
+            <Date>4 days ago</Date>
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+          <Meta>
+            <Like>1 Like</Like>
+          </Meta>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+        <Content>
+          <Summary date='2 Days Ago' user='Jenny Hess' content='add you as a friend' />
+          <Meta like='8 Likes' />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Content>
+          <Summary date='3 days ago'>
+            <a>Joe Henderson</a> posted on his page
+          </Summary>
+          <Extra text>
+            Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all
+            over again. Even if we don't run extra laps that day, we surely will come back for more of the same another
+            day soon.
+          </Extra>
+          <Meta like='5 Likes' />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/justen.jpg' />
+        <Content>
+          <Summary date='4 days ago'>
+            <a>Justen Kitsune</a> added <a>2 new photos</a> of you
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+          <Meta like='41 Likes' />
+        </Content>
+      </Event>
+    </Feed>
+  )
+}
+
+export default Basic
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 81dbfccdca..9935cb70d0 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -2,7 +2,12 @@ import React, { PropTypes } from 'react'
 
 import { Button } from '../../elements'
 import { Modal } from '../../modules'
-import { getUnhandledProps, META } from '../../lib'
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
 
 /**
  * A Confirm modal gives the user a choice to confirm or cancel an action
@@ -30,6 +35,9 @@ Confirm._meta = {
 }
 
 Confirm.propTypes = {
+  /** An element type to render as (string or function). */
+  as: customPropTypes.as,
+
   /** Whether or not the modal is visible */
   active: PropTypes.bool,
 
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index ec5119edb6..6c01345c95 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -100,10 +100,7 @@ Header.propTypes = {
   children: PropTypes.node,
 
   /** Primary content.  Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Add an icon by icon name or pass an <Icon /.> */
   icon: customPropTypes.every([
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index 70a388fee3..c90bac8adb 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -187,7 +187,10 @@ export const demand = (requiredProps) => {
  */
 export const deprecate = (help, validator) => {
   return (props, propName, componentName, ...args) => {
-    if (typeof help !== 'string') {
+    // do not show deprecation warnings in production
+    if (process.env.NODE_ENV === 'production') return
+
+    if (!_.isString(help)) {
       throw new Error([
         'Invalid `help` argument supplied to deprecate, expected a string.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
@@ -219,3 +222,35 @@ export const deprecate = (help, validator) => {
     return error
   }
 }
+
+/**
+ * Ensure a prop conforms to shorthand prop standards.
+ */
+export const shorthand = (...args) => every([
+  disallow(['children']),
+  PropTypes.string,
+])(...args)
+
+/**
+ * Ensure a prop conforms to icon prop standards.
+ */
+export const icon = (...args) => every([
+  disallow(['children']),
+  PropTypes.node,
+])(...args)
+
+/**
+ * Ensure a prop conforms to icon prop standards.
+ */
+export const image = (...args) => every([
+  disallow(['children']),
+  PropTypes.node,
+])(...args)
+
+/**
+ * Ensure a prop can be used as a React key in an array of child components.
+ */
+export const childKey = (...args) => every([
+  PropTypes.string,
+  PropTypes.number,
+])(...args)
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 6e051db084..838dd9adec 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -28,8 +28,13 @@ function FeedContent(props) {
       {createShorthand(FeedDate, val => ({ content: val }), date)}
       {createShorthand(FeedSummary, val => ({ content: val }), summary)}
       {content}
+<<<<<<< HEAD
       {createShorthand(FeedExtra, val => ({ text: true, content: val }), extraText)}
       {createShorthand(FeedExtra, val => ({ images: val }), extraImages)}
+=======
+      {createShorthand(FeedExtra, val => ({ images: val }), extraImages)}
+      {createShorthand(FeedExtra, val => ({ text: val }), extraText)}
+>>>>>>> wip
       {createShorthand(FeedMeta, val => ({ content: val }), meta)}
     </ElementType>
   )
@@ -60,6 +65,7 @@ FeedContent.propTypes = {
   /** Classes that will be added to the FeedContent className. */
   className: PropTypes.string,
 
+<<<<<<< HEAD
   /** Shorthand for children. */
   content: customPropTypes.every([
     customPropTypes.disallow(['children']),
@@ -68,10 +74,15 @@ FeedContent.propTypes = {
       PropTypes.number,
     ]),
   ]),
+=======
+  /** Deprecated. Use date, extraText, extraImages, meta, and summary instead. */
+  content: customPropTypes.deprecate('Use date, extraText, extraImages, meta, and summary instead.'),
+>>>>>>> wip
 
   /** An event can contain a date. */
   date: FeedDate.propTypes.content,
 
+<<<<<<< HEAD
   /** Shorthand for the FeedExtra component with images. Mutually exclusive with children. */
   extraImages: FeedExtra.propTypes.images,
 
@@ -82,6 +93,18 @@ FeedContent.propTypes = {
   meta: FeedMeta.propTypes.content,
 
   /** Shorthand for the FeedSummary component. Mutually exclusive with children. */
+=======
+  /** Shorthand for FeedExtra with prop images. */
+  extraImages: FeedExtra.propTypes.images,
+
+  /** Shorthand for FeedExtra with prop text. */
+  extraText: FeedExtra.propTypes.text,
+
+  /** Shorthand for FeedMeta. */
+  meta: FeedMeta.propTypes.content,
+
+  /** Shorthand for FeedSummary. */
+>>>>>>> wip
   summary: FeedSummary.propTypes.content,
 }
 
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index 7f80d3c4bf..c1d1c3b534 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -39,13 +39,7 @@ FeedDate.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default FeedDate
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 844c2db149..9e07876062 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -12,7 +12,7 @@ import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
 function FeedEvent(props) {
-  const { content, children, className, date, extraImages, extraText, image, icon, meta, summary } = props
+  const { children, className, date, extraImages, extraText, image, icon, meta, summary } = props
   const classes = cx(className, 'event')
   const rest = getUnhandledProps(FeedEvent, props)
   const ElementType = getElementType(FeedEvent, props)
@@ -70,26 +70,10 @@ FeedEvent.propTypes = {
   extraText: FeedContent.propTypes.extraText,
 
   /** An event can contain icon label. Mutually exclusive with children. */
-  icon: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  icon: customPropTypes.icon,
 
   /** An event can contain image label. Mutually exclusive with children. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  image: customPropTypes.image,
 
   /** Shorthand for FeedMeta. Mutually exclusive with children. */
   meta: FeedContent.propTypes.meta,
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 2f584c7f4d..ada62603d8 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -49,35 +49,13 @@ FeedLabel.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 
   /** An event can contain icon label. Mutually exclusive with children. */
-  icon: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  icon: customPropTypes.shorthand,
 
   /** An event can contain image label. Mutually exclusive with children. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  image: customPropTypes.shorthand,
 }
 
 export default FeedLabel
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 4280df363c..2bdff9797e 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -51,24 +51,10 @@ FeedLike.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Shorthand for icon. Mutually exclusive with children. */
-  icon: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.object,
-      PropTypes.element,
-    ]),
-  ]),
+  icon: customPropTypes.shorthand,
 }
 
 export default FeedLike
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 4ac79c5240..476e9b9afb 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -48,16 +48,11 @@ FeedMeta.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Shorthand for the FeedLike component. Mutually exclusive with children. */
   like: FeedLike.propTypes.content,
+  /** Primary content of the FeedMeta. */
 }
 
 export default FeedMeta
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 36dc0de047..8e3e4fc835 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -50,31 +50,13 @@ FeedSummary.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Shorthand for the FeedDate component. Mutually exclusive with children. */
-  date: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  date: customPropTypes.shorthand,
 
   /** Shorthand for the FeedUser component. Mutually exclusive with children. */
-  user: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  user: customPropTypes.shorthand,
 }
 
 export default FeedSummary
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index bc49ff432e..1aaab9cdc5 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -37,13 +37,7 @@ FeedUser.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for children. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 FeedUser.defaultProps = {
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 45c9d87b53..1ed85ff0b8 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -68,40 +68,22 @@ Item.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for ItemContent component. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Shorthand for ItemDescription component. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  description: customPropTypes.shorthand,
 
   /** Shorthand for ItemExtra component. */
-  extra: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  extra: customPropTypes.shorthand,
 
   /** Shorthand for ItemImage component. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  image: customPropTypes.shorthand,
 
   /** Shorthand for ItemHeader component. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  header: customPropTypes.shorthand,
 
   /** Shorthand for ItemMeta component. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  meta: customPropTypes.shorthand,
 }
 
 export default Item
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 5a645aefe0..3a2467d022 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -63,34 +63,19 @@ ItemContent.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the ItemContent. Mutually exclusive with the children prop. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 
   /** Shorthand for of the ItemDescription. Mutually exclusive with the children prop. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  description: customPropTypes.shorthand,
 
   /** Shorthand for ItemExtra component. Mutually exclusive with the children prop. */
-  extra: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  extra: customPropTypes.shorthand,
 
   /** Shorthand for ItemHeader component. Mutually exclusive with the children prop. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  header: customPropTypes.shorthand,
 
   /** Shorthand for ItemMeta component. Mutually exclusive with the children prop. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  meta: customPropTypes.shorthand,
 
   /** Content can specify its vertical alignment */
   verticalAlign: PropTypes.oneOf(ItemContent._meta.props.verticalAlign),
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index 174a30dc89..3458bfa063 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -40,10 +40,7 @@ ItemDescription.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the ItemDescription. Mutually exclusive with the children prop. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default ItemDescription
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index 46757c844c..cd937bb89f 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -40,10 +40,7 @@ ItemExtra.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the ItemExtra. Mutually exclusive with the children prop. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default ItemExtra
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index de3269a236..3239c6ea54 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -40,10 +40,7 @@ ItemHeader.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the ItemHeader. Mutually exclusive with the children prop. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default ItemHeader
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 5cee57eff1..6882d8d2c8 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -40,10 +40,7 @@ ItemMeta.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the ItemMeta. Mutually exclusive with the children prop. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default ItemMeta
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 3fdbfbbb95..fa194a1d2d 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -78,10 +78,7 @@ Statistic.propTypes = {
   inverted: PropTypes.bool,
 
   /** Label content of the Statistic. Mutually exclusive with the children prop. */
-  label: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  label: customPropTypes.shorthand,
 
   /** A statistic can vary in size. */
   size: PropTypes.oneOf(Statistic._meta.props.size),
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index 62e1edba39..34742ad0e0 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -37,10 +37,7 @@ StatisticLabel.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the StatisticLabel. Mutually exclusive with the children prop. */
-  label: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  label: customPropTypes.shorthand,
 }
 
 export default StatisticLabel
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 27c35a2afd..deed6f8b31 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -41,10 +41,7 @@ StatisticValue.propTypes = {
   text: PropTypes.bool,
 
   /** Primary content of the StatisticValue. Mutually exclusive with the children prop. */
-  value: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.string,
-  ]),
+  value: customPropTypes.shorthand,
 }
 
 export default StatisticValue

From 535b27975c69fae1824ef9197d4b682d9704a6f1 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Sun, 2 Oct 2016 22:46:59 -0700
Subject: [PATCH 2/2] wip

---
 docs/app/Examples/views/Feed/Types/Basic.js | 81 ---------------------
 src/lib/customPropTypes.js                  | 40 ++++++++--
 src/views/Card/Card.js                      | 37 +++-------
 src/views/Card/CardContent.js               | 28 ++-----
 src/views/Card/CardDescription.js           |  8 +-
 src/views/Card/CardGroup.js                 | 23 ++++--
 src/views/Card/CardHeader.js                |  5 +-
 src/views/Card/CardMeta.js                  |  8 +-
 src/views/Feed/FeedContent.js               | 31 +-------
 src/views/Feed/FeedEvent.js                 | 13 +---
 src/views/Feed/FeedLabel.js                 |  4 +-
 src/views/Feed/FeedLike.js                  |  2 +-
 src/views/Feed/FeedMeta.js                  |  3 +-
 src/views/Feed/FeedSummary.js               |  5 +-
 src/views/Item/Item.js                      | 31 ++++----
 src/views/Item/ItemContent.js               | 24 +++---
 src/views/Item/ItemDescription.js           |  4 +-
 src/views/Item/ItemExtra.js                 |  4 +-
 src/views/Item/ItemGroup.js                 | 19 ++---
 src/views/Item/ItemHeader.js                |  4 +-
 src/views/Item/ItemImage.js                 |  2 +
 src/views/Item/ItemMeta.js                  |  4 +-
 src/views/Statistic/Statistic.js            | 18 ++---
 src/views/Statistic/StatisticGroup.js       | 13 ++--
 src/views/Statistic/StatisticLabel.js       | 12 +--
 src/views/Statistic/StatisticValue.js       | 12 +--
 26 files changed, 147 insertions(+), 288 deletions(-)
 delete mode 100644 docs/app/Examples/views/Feed/Types/Basic.js

diff --git a/docs/app/Examples/views/Feed/Types/Basic.js b/docs/app/Examples/views/Feed/Types/Basic.js
deleted file mode 100644
index 97d607e748..0000000000
--- a/docs/app/Examples/views/Feed/Types/Basic.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react'
-import { Feed } from 'stardust'
-
-const { Content, Date, Event, Extra, Label, Like, Meta, Summary, User } = Feed
-
-const Basic = () => {
-  return (
-    <Feed>
-      <Event>
-        <Label>
-          <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
-        </Label>
-        <Content>
-          <Summary>
-            <User>Elliot Fu</User> added you as a friend
-            <Date>1 Hour Ago</Date>
-          </Summary>
-          <Meta>
-            <Like icon='like'>4 Likes</Like>
-          </Meta>
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content>
-          <Summary>
-            <a>Helen Troy</a> added <a>2 new illustrations</a>
-            <Date>4 days ago</Date>
-          </Summary>
-          <Extra images>
-            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
-            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
-          </Extra>
-          <Meta>
-            <Like>1 Like</Like>
-          </Meta>
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
-        <Content>
-          <Summary date='2 Days Ago' user='Jenny Hess' content='add you as a friend' />
-          <Meta like='8 Likes' />
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/joe.jpg' />
-        <Content>
-          <Summary date='3 days ago'>
-            <a>Joe Henderson</a> posted on his page
-          </Summary>
-          <Extra text>
-            Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all
-            over again. Even if we don't run extra laps that day, we surely will come back for more of the same another
-            day soon.
-          </Extra>
-          <Meta like='5 Likes' />
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/justen.jpg' />
-        <Content>
-          <Summary date='4 days ago'>
-            <a>Justen Kitsune</a> added <a>2 new photos</a> of you
-          </Summary>
-          <Extra images>
-            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
-            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
-          </Extra>
-          <Meta like='41 Likes' />
-        </Content>
-      </Event>
-    </Feed>
-  )
-}
-
-export default Basic
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index c90bac8adb..23febf1499 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -187,10 +187,7 @@ export const demand = (requiredProps) => {
  */
 export const deprecate = (help, validator) => {
   return (props, propName, componentName, ...args) => {
-    // do not show deprecation warnings in production
-    if (process.env.NODE_ENV === 'production') return
-
-    if (!_.isString(help)) {
+    if (typeof help !== 'string') {
       throw new Error([
         'Invalid `help` argument supplied to deprecate, expected a string.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
@@ -223,6 +220,10 @@ export const deprecate = (help, validator) => {
   }
 }
 
+// ----------------------------------------
+// Prop specific types
+// ----------------------------------------
+
 /**
  * Ensure a prop conforms to shorthand prop standards.
  */
@@ -235,18 +236,41 @@ export const shorthand = (...args) => every([
  * Ensure a prop conforms to icon prop standards.
  */
 export const icon = (...args) => every([
-  disallow(['children']),
-  PropTypes.node,
+  disallow(['children', 'image']),
+  PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.element,
+  ]),
 ])(...args)
 
 /**
  * Ensure a prop conforms to icon prop standards.
  */
 export const image = (...args) => every([
-  disallow(['children']),
-  PropTypes.node,
+  disallow(['children', 'icon']),
+  PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.element,
+  ]),
 ])(...args)
 
+/**
+ * Ensure a prop conforms to children prop standards.
+ */
+export const children = (Component) => (props, ...rest) => {
+  const disallowedProps = _.flow(
+    _.pickBy(checker => checker === shorthand || checker === icon || checker === image),
+    _.keys,
+  )(Component.propTypes)
+
+  return every([
+    disallow(disallowedProps),
+    PropTypes.node,
+  ])(props, ...rest)
+}
+
 /**
  * Ensure a prop can be used as a React key in an array of child components.
  */
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index f9c00d8775..f3c9c7a50d 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -87,7 +87,7 @@ Card.propTypes = {
   /** A Card can center itself inside its container. */
   centered: PropTypes.bool,
 
-  /** Primary content of the Card. */
+  /** Primary content of the Card. Mutually exclusive with all shorthand props. */
   children: customPropTypes.every([
     customPropTypes.disallow(['description', 'header', 'image', 'meta']),
     PropTypes.node,
@@ -99,41 +99,26 @@ Card.propTypes = {
   /** A Card can be formatted to display different colors. */
   color: PropTypes.oneOf(Card._meta.props.color),
 
-  /** Shorthand prop for CardDescription. Mutually exclusive with children. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardDescription component. Mutually exclusive with children. */
+  description: CardContent.propTypes.description,
 
-  /** Shorthand prop for CardContent containing extra prop. Mutually exclusive with children. */
-  extra: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardContent component containing extra prop. Mutually exclusive with children. */
+  extra: PropTypes.shorthand,
 
   /** A Card can be formatted to take up the width of its container. */
   fluid: PropTypes.bool,
 
-  /** Shorthand prop for CardHeader. Mutually exclusive with children. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardHeader component. Mutually exclusive with children. */
+  header: CardContent.propTypes.header,
 
   /** Render as an `a` tag instead of a `div` and adds the href attribute. */
   href: PropTypes.string,
 
-  /** A card can contain an Image component. */
-  image: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** A card can contain an Image component. Mutually exclusive with children. */
+  image: customPropTypes.image,
 
-  /** Shorthand prop for CardMeta. Mutually exclusive with children. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  /** Shorthand prop for the CardMeta component. Mutually exclusive with children. */
+  meta: CardContent.propTypes.meta,
 
   /** Render as an `a` tag instead of a `div` and called with event on Card click. */
   onClick: PropTypes.func,
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index faddf5d8c7..bf6f33584f 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -59,34 +59,16 @@ CardContent.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand prop for CardDescription. Mutually exclusive with children. */
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  description: CardDescription.propTypes.content,
 
   /** A card can contain extra content meant to be formatted separately from the main content */
   extra: PropTypes.bool,
 
-  /** Shorthand prop for CardHeader. Mutually exclusive with children. */
-  header: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  /** Shorthand prop for the CardHeader component. Mutually exclusive with children. */
+  header: CardHeader.propTypes.content,
 
-  /** Shorthand prop for CardMeta. Mutually exclusive with children. */
-  meta: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  /** Shorthand prop for the CardMeta component. Mutually exclusive with children. */
+  meta: CardMeta.propTypes.content,
 }
 
 export default CardContent
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 3b6b2dd430..df1df2d71a 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -40,13 +40,7 @@ CardDescription.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardDescription. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardDescription
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 621f20cf6d..1beaaddcf1 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -27,12 +28,18 @@ function CardGroup(props) {
   const rest = getUnhandledProps(CardGroup, props)
   const ElementType = getElementType(CardGroup, props)
 
-  const content = !items ? children : items.map(item => {
-    const key = item.key || [item.header, item.description].join('-')
-    return <Card key={key} {...item} />
+  if (children) {
+    return <ElementType {...rest} className={classes}>{children}</ElementType>
+  }
+
+  const itemsJSX = _.map(items, item => {
+    const { childKey, itemProps } = item
+    const finalKey = childKey || [itemProps.header, itemProps.description].join('-')
+
+    return <Card {...itemProps} key={finalKey} />
   })
 
-  return <ElementType {...rest} className={classes}>{content}</ElementType>
+  return <ElementType {...rest} className={classes}>{itemsJSX}</ElementType>
 }
 
 CardGroup._meta = {
@@ -64,10 +71,10 @@ CardGroup.propTypes = {
   items: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
-      description: PropTypes.node,
-      meta: PropTypes.node,
-      key: PropTypes.string,
-      header: PropTypes.node,
+      childKey: PropTypes.childKey,
+      // do not spread Card propTypes here
+      // it will be undefined due to circular imports
+      // allow the Card to validate the props it is sent
     })),
   ]),
 
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index 3c947d916b..5409f641ef 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -40,10 +40,7 @@ CardHeader.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardHeader. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardHeader
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index c6c20eff9f..193ac4255f 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -40,13 +40,7 @@ CardMeta.propTypes = {
   className: PropTypes.string,
 
   /** Primary content of the CardMeta. Mutually exclusive with children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  content: customPropTypes.shorthand,
 }
 
 export default CardMeta
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 838dd9adec..d8f049506b 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -28,13 +28,8 @@ function FeedContent(props) {
       {createShorthand(FeedDate, val => ({ content: val }), date)}
       {createShorthand(FeedSummary, val => ({ content: val }), summary)}
       {content}
-<<<<<<< HEAD
       {createShorthand(FeedExtra, val => ({ text: true, content: val }), extraText)}
       {createShorthand(FeedExtra, val => ({ images: val }), extraImages)}
-=======
-      {createShorthand(FeedExtra, val => ({ images: val }), extraImages)}
-      {createShorthand(FeedExtra, val => ({ text: val }), extraText)}
->>>>>>> wip
       {createShorthand(FeedMeta, val => ({ content: val }), meta)}
     </ElementType>
   )
@@ -65,24 +60,12 @@ FeedContent.propTypes = {
   /** Classes that will be added to the FeedContent className. */
   className: PropTypes.string,
 
-<<<<<<< HEAD
   /** Shorthand for children. */
-  content: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
-=======
-  /** Deprecated. Use date, extraText, extraImages, meta, and summary instead. */
-  content: customPropTypes.deprecate('Use date, extraText, extraImages, meta, and summary instead.'),
->>>>>>> wip
+  content: customPropTypes.shorthand,
 
   /** An event can contain a date. */
   date: FeedDate.propTypes.content,
 
-<<<<<<< HEAD
   /** Shorthand for the FeedExtra component with images. Mutually exclusive with children. */
   extraImages: FeedExtra.propTypes.images,
 
@@ -92,19 +75,7 @@ FeedContent.propTypes = {
   /** Shorthand for the FeedMeta component. Mutually exclusive with children. */
   meta: FeedMeta.propTypes.content,
 
-  /** Shorthand for the FeedSummary component. Mutually exclusive with children. */
-=======
-  /** Shorthand for FeedExtra with prop images. */
-  extraImages: FeedExtra.propTypes.images,
-
-  /** Shorthand for FeedExtra with prop text. */
-  extraText: FeedExtra.propTypes.text,
-
-  /** Shorthand for FeedMeta. */
-  meta: FeedMeta.propTypes.content,
-
   /** Shorthand for FeedSummary. */
->>>>>>> wip
   summary: FeedSummary.propTypes.content,
 }
 
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 9e07876062..eb9548c037 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -41,18 +41,7 @@ FeedEvent.propTypes = {
   as: customPropTypes.as,
 
   /** Primary content of the FeedEvent. Mutually exclusive with all shorthand props. */
-  children: customPropTypes.every([
-    customPropTypes.disallow([
-      'date',
-      'extraImages',
-      'extraText',
-      'icon',
-      'image',
-      'meta',
-      'summary',
-    ]),
-    PropTypes.node,
-  ]),
+  children: customPropTypes.children(FeedEvent),
 
   /** Classes that will be added to the FeedEvent className. */
   className: PropTypes.string,
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index ada62603d8..ba4befb19a 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -52,10 +52,10 @@ FeedLabel.propTypes = {
   content: customPropTypes.shorthand,
 
   /** An event can contain icon label. Mutually exclusive with children. */
-  icon: customPropTypes.shorthand,
+  icon: customPropTypes.icon,
 
   /** An event can contain image label. Mutually exclusive with children. */
-  image: customPropTypes.shorthand,
+  image: customPropTypes.image,
 }
 
 export default FeedLabel
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 2bdff9797e..69d9378ffd 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -54,7 +54,7 @@ FeedLike.propTypes = {
   content: customPropTypes.shorthand,
 
   /** Shorthand for icon. Mutually exclusive with children. */
-  icon: customPropTypes.shorthand,
+  icon: customPropTypes.icon,
 }
 
 export default FeedLike
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 476e9b9afb..3cd87f33b4 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -38,7 +38,7 @@ FeedMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the FeedMeta. */
+  /** Primary content of the FeedMeta. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content', 'like']),
     PropTypes.node,
@@ -52,7 +52,6 @@ FeedMeta.propTypes = {
 
   /** Shorthand for the FeedLike component. Mutually exclusive with children. */
   like: FeedLike.propTypes.content,
-  /** Primary content of the FeedMeta. */
 }
 
 export default FeedMeta
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 8e3e4fc835..4cbbe76bdf 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -41,10 +41,7 @@ FeedSummary.propTypes = {
   as: customPropTypes.as,
 
   /** Primary content of the FeedSummary. */
-  children: customPropTypes.every([
-    customPropTypes.disallow(['content', 'date', 'user']),
-    PropTypes.node,
-  ]),
+  children: customPropTypes.children(FeedSummary),
 
   /** Classes that will be added to the FeedSummary className. */
   className: PropTypes.string,
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 1ed85ff0b8..aafcd59ca2 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -61,29 +61,32 @@ Item.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the Item. */
-  children: PropTypes.node,
+  /** Primary content of the Item. Mutually exclusive with all shorthand props. */
+  children: customPropTypes.every([
+    customPropTypes.disallow(['content', 'description', 'extra', 'image', 'header', 'meta']),
+    PropTypes.node,
+  ]),
 
   /** Classes that will be added to the Item className. */
   className: PropTypes.string,
 
-  /** Shorthand for ItemContent component. */
-  content: customPropTypes.shorthand,
+  /** Shorthand for ItemContent component. Mutually exclusive with content. */
+  content: ItemContent.propTypes.content,
 
-  /** Shorthand for ItemDescription component. */
-  description: customPropTypes.shorthand,
+  /** Shorthand for ItemDescription component. Mutually exclusive with content. */
+  description: ItemContent.propTypes.description,
 
-  /** Shorthand for ItemExtra component. */
-  extra: customPropTypes.shorthand,
+  /** Shorthand for ItemExtra component. Mutually exclusive with content. */
+  extra: ItemContent.propTypes.extra,
 
-  /** Shorthand for ItemImage component. */
-  image: customPropTypes.shorthand,
+  /** Shorthand for ItemImage component. Mutually exclusive with content. */
+  image: customPropTypes.image,
 
-  /** Shorthand for ItemHeader component. */
-  header: customPropTypes.shorthand,
+  /** Shorthand for ItemHeader component. Mutually exclusive with content. */
+  header: ItemContent.propTypes.header,
 
-  /** Shorthand for ItemMeta component. */
-  meta: customPropTypes.shorthand,
+  /** Shorthand for ItemMeta component. Mutually exclusive with content. */
+  meta: ItemContent.propTypes.meta,
 }
 
 export default Item
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 3a2467d022..9899511198 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -53,31 +53,31 @@ ItemContent.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemContent. */
+  /** Primary content of the ItemContent. Mutually exclusive with all shorthand props. */
   children: customPropTypes.every([
-    customPropTypes.disallow(['content']),
+    customPropTypes.disallow(['content', 'description', 'extra', 'header', 'meta']),
     PropTypes.node,
   ]),
 
   /** Classes that will be added to the ItemContent className. */
   className: PropTypes.string,
 
-  /** Primary content of the ItemContent. Mutually exclusive with the children prop. */
+  /** Shorthand for primary content of the ItemContent. Mutually exclusive with the children. */
   content: customPropTypes.shorthand,
 
-  /** Shorthand for of the ItemDescription. Mutually exclusive with the children prop. */
-  description: customPropTypes.shorthand,
+  /** Shorthand for of the ItemDescription. Mutually exclusive with the children. */
+  description: ItemDescription.propTypes.content,
 
-  /** Shorthand for ItemExtra component. Mutually exclusive with the children prop. */
-  extra: customPropTypes.shorthand,
+  /** Shorthand for ItemExtra component. Mutually exclusive with the children. */
+  extra: ItemExtra.propTypes.content,
 
-  /** Shorthand for ItemHeader component. Mutually exclusive with the children prop. */
-  header: customPropTypes.shorthand,
+  /** Shorthand for ItemHeader component. Mutually exclusive with the children. */
+  header: ItemHeader.propTypes.content,
 
-  /** Shorthand for ItemMeta component. Mutually exclusive with the children prop. */
-  meta: customPropTypes.shorthand,
+  /** Shorthand for the ItemMeta component. Mutually exclusive with the children. */
+  meta: ItemMeta.propTypes.content,
 
-  /** Content can specify its vertical alignment */
+  /** Content can specify its vertical alignment. */
   verticalAlign: PropTypes.oneOf(ItemContent._meta.props.verticalAlign),
 }
 
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index 3458bfa063..1b36380faa 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -30,7 +30,7 @@ ItemDescription.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemDescription. */
+  /** Primary content of the ItemDescription. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
@@ -39,7 +39,7 @@ ItemDescription.propTypes = {
   /** Classes that will be added to the ItemDescription className. */
   className: PropTypes.string,
 
-  /** Primary content of the ItemDescription. Mutually exclusive with the children prop. */
+  /** Shorthand for primary content of the ItemDescription. Mutually exclusive with the children. */
   content: customPropTypes.shorthand,
 }
 
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index cd937bb89f..948389dcea 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -30,7 +30,7 @@ ItemExtra.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemExtra. */
+  /** Primary content of the ItemExtra. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
@@ -39,7 +39,7 @@ ItemExtra.propTypes = {
   /** Classes that will be added to the ItemExtra className. */
   className: PropTypes.string,
 
-  /** Primary content of the ItemExtra. Mutually exclusive with the children prop. */
+  /** Shorthand for primary content of the ItemExtra. Mutually exclusive with the children. */
   content: customPropTypes.shorthand,
 }
 
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 540c959bac..0ef0ae2499 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -56,8 +56,11 @@ ItemGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemGroup. */
-  children: PropTypes.node,
+  /** Primary content of the ItemGroup. Mutually exclusive with items. */
+  children: customPropTypes.every([
+    customPropTypes.disallow(['items']),
+    PropTypes.node,
+  ]),
 
   /** Classes that will be added to the ItemGroup className. */
   className: PropTypes.string,
@@ -65,16 +68,14 @@ ItemGroup.propTypes = {
   /** Items can be divided to better distinguish between grouped content. */
   divided: PropTypes.bool,
 
-  /** Array of props for Item. */
+  /** Array of props for Item. Mutually exclusive with children. */
   items: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
-      childKey: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string,
-      ]),
-      // this object is spread on the Item
-      // allow it to validate props instead
+      childKey: customPropTypes.childKey,
+      // do not spread Item propTypes here
+      // it will be undefined due to circular imports
+      // allow the Item to validate the props it is sent
     })),
   ]),
 
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 3239c6ea54..cc686b5180 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -30,7 +30,7 @@ ItemHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemHeader. */
+  /** Primary content of the ItemHeader. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
@@ -39,7 +39,7 @@ ItemHeader.propTypes = {
   /** Classes that will be added to the ItemHeader className. */
   className: PropTypes.string,
 
-  /** Primary content of the ItemHeader. Mutually exclusive with the children prop. */
+  /** Shorthand for primary content of the ItemHeader. Mutually exclusive with the children. */
   content: customPropTypes.shorthand,
 }
 
diff --git a/src/views/Item/ItemImage.js b/src/views/Item/ItemImage.js
index a81eb84454..f93076e675 100644
--- a/src/views/Item/ItemImage.js
+++ b/src/views/Item/ItemImage.js
@@ -22,4 +22,6 @@ ItemImage._meta = {
   type: META.TYPES.VIEW,
 }
 
+ItemImage.propTypes = Image.propTypes
+
 export default ItemImage
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 6882d8d2c8..8d4ff30bac 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -30,7 +30,7 @@ ItemMeta.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the ItemMeta. */
+  /** Primary content of the ItemMeta. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
@@ -39,7 +39,7 @@ ItemMeta.propTypes = {
   /** Classes that will be added to the ItemMeta className. */
   className: PropTypes.string,
 
-  /** Primary content of the ItemMeta. Mutually exclusive with the children prop. */
+  /** Shorthand for primary content of the ItemMeta. Mutually exclusive with the children. */
   content: customPropTypes.shorthand,
 }
 
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index fa194a1d2d..4d3ffe6266 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -36,8 +36,8 @@ function Statistic(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      <StatisticValue text={text} value={value} />
-      <StatisticLabel label={label} />
+      <StatisticValue content={value} text={text} />
+      <StatisticLabel content={label} />
     </ElementType>
   )
 }
@@ -56,7 +56,7 @@ Statistic.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the Statistic. */
+  /** Primary content of the Statistic. Mutually exclusive with all shorthand props. */
   children: customPropTypes.every([
     customPropTypes.disallow(['label', 'value']),
     PropTypes.node,
@@ -77,7 +77,7 @@ Statistic.propTypes = {
   /** A statistic can be formatted to fit on a dark background. */
   inverted: PropTypes.bool,
 
-  /** Label content of the Statistic. Mutually exclusive with the children prop. */
+  /** Shorthand for the StatisticLabel component. Mutually exclusive with the children. */
   label: customPropTypes.shorthand,
 
   /** A statistic can vary in size. */
@@ -86,14 +86,8 @@ Statistic.propTypes = {
   /** Format the StatisticValue with smaller font size to fit nicely beside number values. */
   text: PropTypes.bool,
 
-  /** Value content of the Statistic. Mutually exclusive with the children prop. */
-  value: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  ]),
+  /** Shorthand for the StatisticValue component. Mutually exclusive with the children. */
+  value: customPropTypes.shorthand,
 }
 
 Statistic.Group = StatisticGroup
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index 03dd6c57ab..7c28e5f57b 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -49,9 +49,9 @@ StatisticGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the StatisticGroup. */
+  /** Primary content of the StatisticGroup. Mutually exclusive with items. */
   children: customPropTypes.every([
-    customPropTypes.disallow(['content']),
+    customPropTypes.disallow(['items']),
     PropTypes.node,
   ]),
 
@@ -61,13 +61,14 @@ StatisticGroup.propTypes = {
   /** A statistic can present its measurement horizontally. */
   horizontal: PropTypes.bool,
 
-  /** Array of props for Statistic. */
+  /** Array of props for Statistic. Mutually exclusive with children. */
   items: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
-      childKey: PropTypes.string,
-      // this object is spread on the Statistic
-      // allow it to validate props instead
+      childKey: customPropTypes.childKey,
+      // do not spread Statistic propTypes here
+      // it will be undefined due to circular imports
+      // allow the Statistic to validate the props it is sent
     })),
   ]),
 
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index 34742ad0e0..a5538401f6 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -9,12 +9,12 @@ import {
 } from '../../lib'
 
 function StatisticLabel(props) {
-  const { children, className, label } = props
+  const { children, className, content } = props
   const classes = cx(className, 'label')
   const rest = getUnhandledProps(StatisticLabel, props)
   const ElementType = getElementType(StatisticLabel, props)
 
-  return <ElementType {...rest} className={classes}>{children || label}</ElementType>
+  return <ElementType {...rest} className={classes}>{children || content}</ElementType>
 }
 
 StatisticLabel._meta = {
@@ -27,17 +27,17 @@ StatisticLabel.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the StatisticLabel. */
+  /** Primary content of the StatisticLabel. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
   ]),
 
+  /** Shorthand for primary content of the StatisticLabel. Mutually exclusive with the children. */
+  content: customPropTypes.shorthand,
+
   /** Classes that will be added to the StatisticLabel className. */
   className: PropTypes.string,
-
-  /** Primary content of the StatisticLabel. Mutually exclusive with the children prop. */
-  label: customPropTypes.shorthand,
 }
 
 export default StatisticLabel
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index deed6f8b31..3ec105e1ae 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -10,12 +10,12 @@ import {
 } from '../../lib'
 
 function StatisticValue(props) {
-  const { children, className, text, value } = props
+  const { children, className, content, text } = props
   const classes = cx(useKeyOnly(text, 'text'), className, 'value')
   const rest = getUnhandledProps(StatisticValue, props)
   const ElementType = getElementType(StatisticValue, props)
 
-  return <ElementType {...rest} className={classes}>{children || value}</ElementType>
+  return <ElementType {...rest} className={classes}>{children || content}</ElementType>
 }
 
 StatisticValue._meta = {
@@ -28,7 +28,7 @@ StatisticValue.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Primary content of the StatisticValue. */
+  /** Primary content of the StatisticValue. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
@@ -37,11 +37,11 @@ StatisticValue.propTypes = {
   /** Classes that will be added to the StatisticValue className. */
   className: PropTypes.string,
 
+  /** Shorthand for primary content of the StatisticValue. Mutually exclusive with the children. */
+  content: customPropTypes.shorthand,
+
   /** Format the value with smaller font size to fit nicely beside number values. */
   text: PropTypes.bool,
-
-  /** Primary content of the StatisticValue. Mutually exclusive with the children prop. */
-  value: customPropTypes.shorthand,
 }
 
 export default StatisticValue