From 1c6b29d95669a76fdef3b5baa21815cbb2a8a5d2 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Tue, 30 Aug 2016 12:57:50 -0700
Subject: [PATCH] refactor(Feed): wip customPropTypes

---
 .../views/Card/Content/ContentBlock.js        |   4 +-
 .../Feed/Content/AdditionalInformation.js     | 109 ++++++------
 docs/app/Examples/views/Feed/Content/Date.js  |  49 ------
 .../views/Feed/Content/DateContent.js         |  20 +++
 .../views/Feed/Content/DateContentProps.js    |  24 +++
 .../Examples/views/Feed/Content/DateProps.js  |  24 +++
 .../views/Feed/Content/DateSummary.js         |  53 ++----
 .../views/Feed/Content/DateSummaryProps.js    |  22 +++
 .../Examples/views/Feed/Content/LabelIcon.js  |  43 ++---
 .../views/Feed/Content/LabelIconProps.js      |  13 ++
 .../Examples/views/Feed/Content/LabelImage.js |  42 ++---
 .../views/Feed/Content/LabelImageProps.js     |  13 ++
 docs/app/Examples/views/Feed/Content/index.js |  38 ++++-
 docs/app/Examples/views/Feed/Types/Basic.js   |   6 +-
 .../Examples/views/Feed/Types/EventsProp.js   |  38 +++++
 docs/app/Examples/views/Feed/Types/Props.js   |  52 ------
 docs/app/Examples/views/Feed/Types/index.js   |   5 +-
 .../views/Feed/Variations/SizeLarge.js        |  71 ++++----
 src/lib/customPropTypes.js                    | 159 +++++++++++-------
 src/views/Card/CardGroup.js                   |  13 +-
 src/views/Feed/FeedContent.js                 |   7 +-
 src/views/Feed/FeedEvent.js                   |  16 +-
 src/views/Feed/FeedExtra.js                   |   7 +-
 src/views/Feed/FeedSummary.js                 |  14 +-
 src/views/Item/ItemGroup.js                   |   4 +-
 src/views/Statistic/StatisticGroup.js         |   4 +-
 test/specs/views/Feed/FeedDate-test.js        |   2 +-
 test/specs/views/Feed/FeedUser-test.js        |   2 +-
 28 files changed, 465 insertions(+), 389 deletions(-)
 delete mode 100644 docs/app/Examples/views/Feed/Content/Date.js
 create mode 100644 docs/app/Examples/views/Feed/Content/DateContent.js
 create mode 100644 docs/app/Examples/views/Feed/Content/DateContentProps.js
 create mode 100644 docs/app/Examples/views/Feed/Content/DateProps.js
 create mode 100644 docs/app/Examples/views/Feed/Content/DateSummaryProps.js
 create mode 100644 docs/app/Examples/views/Feed/Content/LabelIconProps.js
 create mode 100644 docs/app/Examples/views/Feed/Content/LabelImageProps.js
 create mode 100644 docs/app/Examples/views/Feed/Types/EventsProp.js
 delete mode 100644 docs/app/Examples/views/Feed/Types/Props.js

diff --git a/docs/app/Examples/views/Card/Content/ContentBlock.js b/docs/app/Examples/views/Card/Content/ContentBlock.js
index ccc9d7c22c..46c60352af 100644
--- a/docs/app/Examples/views/Card/Content/ContentBlock.js
+++ b/docs/app/Examples/views/Card/Content/ContentBlock.js
@@ -13,7 +13,7 @@ const ContentBlock = () => (
         <Feed.Event>
           <Feed.Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
           <Feed.Content>
-            <Feed.Date date='1 day ago' />
+            <Feed.Date content='1 day ago' />
             <Feed.Summary>
               You added <a>Jenny Hess</a> to your <a>coworker</a> group.
             </Feed.Summary>
@@ -23,7 +23,7 @@ const ContentBlock = () => (
         <Feed.Event>
           <Feed.Label image='http://semantic-ui.com/images/avatar2/small/molly.png' />
           <Feed.Content>
-            <Feed.Date date='3 days ago' />
+            <Feed.Date content='3 days ago' />
             <Feed.Summary>
               You added <a>Molly Malone</a> as a friend.
             </Feed.Summary>
diff --git a/docs/app/Examples/views/Feed/Content/AdditionalInformation.js b/docs/app/Examples/views/Feed/Content/AdditionalInformation.js
index 614b9420fa..310e85c659 100644
--- a/docs/app/Examples/views/Feed/Content/AdditionalInformation.js
+++ b/docs/app/Examples/views/Feed/Content/AdditionalInformation.js
@@ -2,79 +2,84 @@ import _ from 'lodash'
 import React from 'react'
 import { Feed } from 'stardust'
 
-const { Content, Event, Extra, Label, Summary } = Feed
 const images = _.times(2, () => 'http://semantic-ui.com/images/wireframe/image.png')
 
 const AdditionalInformation = () => {
   return (
     <Feed>
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Helen Troy</a> added 2 photos
-          </Summary>
-          <Extra images>
+          </Feed.Summary>
+          <Feed.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>
-        </Content>
-      </Event>
+          </Feed.Extra>
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Helen Troy</a> added 2 photos
-          </Summary>
-          <Extra images={images} />
-        </Content>
-      </Event>
+          </Feed.Summary>
+          <Feed.Extra images={images} />
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Helen Troy</a> added 2 photos
-          </Summary>
-          <Extra images={images} />
-        </Content>
-      </Event>
+          </Feed.Summary>
+          <Feed.Extra images={images} />
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Helen Troy</a> added 2 photos
-          </Summary>
-          <Extra images>
+          </Feed.Summary>
+          <Feed.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>
-        </Content>
-      </Event>
+          </Feed.Extra>
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Laura Faucet</a> created a post
-          </Summary>
-          <Extra text>
+          </Feed.Summary>
+          <Feed.Extra text>
             Have you seen what's going on in Israel? Can you believe it.
-          </Extra>
-        </Content>
-      </Event>
+          </Feed.Extra>
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
-        <Content date='3 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Laura Faucet</a> created a post
-          </Summary>
-          <Extra text="Have you seen what's going on in Israel? Can you believe it." />
-        </Content>
-      </Event>
+          </Feed.Summary>
+          <Feed.Extra text="Have you seen what's going on in Israel? Can you believe it." />
+        </Feed.Content>
+      </Feed.Event>
     </Feed>
   )
 }
diff --git a/docs/app/Examples/views/Feed/Content/Date.js b/docs/app/Examples/views/Feed/Content/Date.js
deleted file mode 100644
index 2e2dd0c387..0000000000
--- a/docs/app/Examples/views/Feed/Content/Date.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import { Feed } from 'stardust'
-
-const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
-
-const Date = () => {
-  return (
-    <Feed>
-      <Feed.Event>
-        <Feed.Label image={imageSrc} />
-        <Feed.Content>
-          <Feed.Date>3 days ago</Feed.Date>
-          <Feed.Summary>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-          </Feed.Summary>
-        </Feed.Content>
-      </Feed.Event>
-
-      <Feed.Event>
-        <Feed.Label image={imageSrc} />
-        <Feed.Content>
-          <Feed.Date date='3 days ago' />
-          <Feed.Summary>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-          </Feed.Summary>
-        </Feed.Content>
-      </Feed.Event>
-
-      <Feed.Event>
-        <Feed.Label image={imageSrc} />
-        <Feed.Content date='3 days ago'>
-          <Feed.Summary>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-          </Feed.Summary>
-        </Feed.Content>
-      </Feed.Event>
-
-      <Feed.Event>
-        <Feed.Label image={imageSrc} />
-        <Feed.Content
-          date='3 days ago'
-          summary='You added Jenny Hess to your coworker group.'
-        />
-      </Feed.Event>
-    </Feed>
-  )
-}
-
-export default Date
diff --git a/docs/app/Examples/views/Feed/Content/DateContent.js b/docs/app/Examples/views/Feed/Content/DateContent.js
new file mode 100644
index 0000000000..65be0648f4
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/DateContent.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+
+const DateContent = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label image={imageSrc} />
+      <Feed.Content>
+        <Feed.Date>3 days ago</Feed.Date>
+        <Feed.Summary>
+          You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+        </Feed.Summary>
+      </Feed.Content>
+    </Feed.Event>
+  </Feed>
+)
+
+export default DateContent
diff --git a/docs/app/Examples/views/Feed/Content/DateContentProps.js b/docs/app/Examples/views/Feed/Content/DateContentProps.js
new file mode 100644
index 0000000000..650fd17da0
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/DateContentProps.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+
+const DateContentProps = () => (
+  <Feed>
+    <Feed.Event
+      image={imageSrc}
+      date='3 days ago'
+      summary='You added Jenny Hess to your coworker group.'
+    />
+
+    <Feed.Event>
+      <Feed.Label image={imageSrc} />
+      <Feed.Content
+        date='3 days ago'
+        summary='You added Jenny Hess to your coworker group.'
+      />
+    </Feed.Event>
+  </Feed>
+)
+
+export default DateContentProps
diff --git a/docs/app/Examples/views/Feed/Content/DateProps.js b/docs/app/Examples/views/Feed/Content/DateProps.js
new file mode 100644
index 0000000000..1a27b4218a
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/DateProps.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+
+const DateProps = () => (
+  <Feed>
+    <Feed.Event
+      image={imageSrc}
+      date='3 days ago'
+      summary='You added Jenny Hess to your coworker group.'
+    />
+
+    <Feed.Event>
+      <Feed.Label image={imageSrc} />
+      <Feed.Content
+        date='3 days ago'
+        summary='You added Jenny Hess to your coworker group.'
+      />
+    </Feed.Event>
+  </Feed>
+)
+
+export default DateProps
diff --git a/docs/app/Examples/views/Feed/Content/DateSummary.js b/docs/app/Examples/views/Feed/Content/DateSummary.js
index ff00dbdb1f..ecb9f7766f 100644
--- a/docs/app/Examples/views/Feed/Content/DateSummary.js
+++ b/docs/app/Examples/views/Feed/Content/DateSummary.js
@@ -1,44 +1,21 @@
 import React from 'react'
 import { Feed } from 'stardust'
 
-const { Content, Date, Event, Label, Summary } = Feed
-const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+const DateSummary = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label>
+        <img src='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+      </Feed.Label>
+      <Feed.Content>
+        <Feed.Summary>
+          You added <a>Jenny Hess</a> to your <a>coworker</a> group.
 
-const DateSummary = () => {
-  return (
-    <Feed>
-      <Event>
-        <Label image={imageSrc} />
-        <Content>
-          <Summary>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-
-            <Date>3 days ago</Date>
-          </Summary>
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image={imageSrc} />
-        <Content>
-          <Summary>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-
-            <Date date='3 days ago' />
-          </Summary>
-        </Content>
-      </Event>
-
-      <Event>
-        <Label image={imageSrc} />
-        <Content>
-          <Summary date='3 days ago'>
-            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
-          </Summary>
-        </Content>
-      </Event>
-    </Feed>
-  )
-}
+          <Feed.Date>3 days ago</Feed.Date>
+        </Feed.Summary>
+      </Feed.Content>
+    </Feed.Event>
+  </Feed>
+)
 
 export default DateSummary
diff --git a/docs/app/Examples/views/Feed/Content/DateSummaryProps.js b/docs/app/Examples/views/Feed/Content/DateSummaryProps.js
new file mode 100644
index 0000000000..218d30b47a
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/DateSummaryProps.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const DateSummary = () => (
+  <Feed>
+    <Feed.Event
+      image='http://semantic-ui.com/images/avatar/small/jenny.jpg'
+      summary='You added Jenny Hess to your coworker group.'
+      date='3 days ago'
+    />
+
+    <Feed.Event>
+      <Feed.Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+      <Feed.Content
+        summary='You added Jenny Hess to your coworker group.'
+        date='3 days ago'
+      />
+    </Feed.Event>
+  </Feed>
+)
+
+export default DateSummary
diff --git a/docs/app/Examples/views/Feed/Content/LabelIcon.js b/docs/app/Examples/views/Feed/Content/LabelIcon.js
index 4b18d31acc..9da4a81f5c 100644
--- a/docs/app/Examples/views/Feed/Content/LabelIcon.js
+++ b/docs/app/Examples/views/Feed/Content/LabelIcon.js
@@ -1,29 +1,20 @@
 import React from 'react'
-import { Feed } from 'stardust'
+import { Feed, Icon } from 'stardust'
 
-const LabelImage = () => {
-  return (
-    <Feed>
-      <Feed.Event>
-        <Feed.Label icon='pencil' />
-        <Feed.Content>
-          <Feed.Summary>
-            You posted on your friend <a>Stevie Feliciano's</a> wall.
-            <Feed.Date>Today</Feed.Date>
-          </Feed.Summary>
-        </Feed.Content>
-      </Feed.Event>
+const LabelIcon = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label>
+        <Icon name='pencil' />
+      </Feed.Label>
+      <Feed.Content>
+        <Feed.Summary>
+          You posted on your friend <a>Stevie Feliciano's</a> wall.
+          <Feed.Date>Today</Feed.Date>
+        </Feed.Summary>
+      </Feed.Content>
+    </Feed.Event>
+  </Feed>
+)
 
-      <Feed.Event icon='pencil'>
-        <Feed.Content>
-          <Feed.Summary>
-            You posted on your friend <a>Stevie Feliciano's</a> wall.
-            <Feed.Date>Today</Feed.Date>
-          </Feed.Summary>
-        </Feed.Content>
-      </Feed.Event>
-    </Feed>
-  )
-}
-
-export default LabelImage
+export default LabelIcon
diff --git a/docs/app/Examples/views/Feed/Content/LabelIconProps.js b/docs/app/Examples/views/Feed/Content/LabelIconProps.js
new file mode 100644
index 0000000000..77fcb63adb
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/LabelIconProps.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const LabelIconProps = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label icon='pencil' />
+      <Feed.Content summary="You posted on your friend Stevie Feliciano's wall." date='Today' />
+    </Feed.Event>
+  </Feed>
+)
+
+export default LabelIconProps
diff --git a/docs/app/Examples/views/Feed/Content/LabelImage.js b/docs/app/Examples/views/Feed/Content/LabelImage.js
index b772252b8d..6e6ae499b6 100644
--- a/docs/app/Examples/views/Feed/Content/LabelImage.js
+++ b/docs/app/Examples/views/Feed/Content/LabelImage.js
@@ -1,35 +1,17 @@
 import React from 'react'
 import { Feed } from 'stardust'
 
-const image = <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
-
-const LabelImage = () => {
-  return (
-    <div>
-      <Feed>
-        <Feed.Event>
-          <Feed.Label>
-            <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
-          </Feed.Label>
-          <Feed.Content>
-            You added Elliot Fu to the group <a>Coworkers</a>
-          </Feed.Content>
-        </Feed.Event>
-
-        <Feed.Event image='http://semantic-ui.com/images/avatar/small/elliot.jpg'>
-          <Feed.Content>
-            You added Elliot Fu to the group <a>Coworkers</a>
-          </Feed.Content>
-        </Feed.Event>
-
-        <Feed.Event image={image}>
-          <Feed.Content>
-            You added Elliot Fu to the group <a>Coworkers</a>
-          </Feed.Content>
-        </Feed.Event>
-      </Feed>
-    </div>
-  )
-}
+const LabelImage = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label>
+        <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+      </Feed.Label>
+      <Feed.Content>
+        You added Elliot Fu to the group <a>Coworkers</a>
+      </Feed.Content>
+    </Feed.Event>
+  </Feed>
+)
 
 export default LabelImage
diff --git a/docs/app/Examples/views/Feed/Content/LabelImageProps.js b/docs/app/Examples/views/Feed/Content/LabelImageProps.js
new file mode 100644
index 0000000000..8105dd45c3
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Content/LabelImageProps.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const LabelImageProps = () => (
+  <Feed>
+    <Feed.Event>
+      <Feed.Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+      <Feed.Content content='You added Elliot Fu to the group Coworkers' />
+    </Feed.Event>
+  </Feed>
+)
+
+export default LabelImageProps
diff --git a/docs/app/Examples/views/Feed/Content/index.js b/docs/app/Examples/views/Feed/Content/index.js
index 3f58f56692..150453ec41 100644
--- a/docs/app/Examples/views/Feed/Content/index.js
+++ b/docs/app/Examples/views/Feed/Content/index.js
@@ -6,18 +6,42 @@ const FeedContentExamples = () => {
   return (
     <ExampleSection title='Content'>
       <ComponentExample
-        title='Label'
-        description='An event can contain an image or icon label'
+        title='Image Label'
+        description='An event can contain an image label'
         examplePath='views/Feed/Content/LabelImage'
       />
-      <ComponentExample examplePath='views/Feed/Content/LabelIcon' />
+      <ComponentExample
+        description='You can also configure an image label via props'
+        examplePath='views/Feed/Content/LabelImageProps'
+      />
+      <ComponentExample
+        title='Icon Label'
+        description='An event can contain an icon label'
+        examplePath='views/Feed/Content/LabelIcon'
+      />
+      <ComponentExample
+        description='You can also configure an icon label via props'
+        examplePath='views/Feed/Content/LabelIconProps'
+      />
 
       <ComponentExample
-        title='Date'
-        description='An event or an event summary can contain a date'
-        examplePath='views/Feed/Content/Date'
+        title='Content Date'
+        description='Event content can contain a date'
+        examplePath='views/Feed/Content/DateContent'
+      />
+      <ComponentExample
+        description='You can also configure a content date via props'
+        examplePath='views/Feed/Content/DateContentProps'
+      />
+      <ComponentExample
+        title='Summary Date'
+        description='An event summary can contain a date'
+        examplePath='views/Feed/Content/DateSummary'
+      />
+      <ComponentExample
+        description='You can also configure a summary date via props'
+        examplePath='views/Feed/Content/DateSummaryProps'
       />
-      <ComponentExample examplePath='views/Feed/Content/DateSummary' />
 
       <ComponentExample
         title='Additional information'
diff --git a/docs/app/Examples/views/Feed/Types/Basic.js b/docs/app/Examples/views/Feed/Types/Basic.js
index 97d607e748..b759266e53 100644
--- a/docs/app/Examples/views/Feed/Types/Basic.js
+++ b/docs/app/Examples/views/Feed/Types/Basic.js
@@ -49,7 +49,8 @@ const Basic = () => {
       <Event>
         <Label image='http://semantic-ui.com/images/avatar/small/joe.jpg' />
         <Content>
-          <Summary date='3 days ago'>
+          <Summary>
+            <Date>3 days ago</Date>
             <a>Joe Henderson</a> posted on his page
           </Summary>
           <Extra text>
@@ -64,7 +65,8 @@ const Basic = () => {
       <Event>
         <Label image='http://semantic-ui.com/images/avatar/small/justen.jpg' />
         <Content>
-          <Summary date='4 days ago'>
+          <Summary>
+            <Date>4 days ago</Date>
             <a>Justen Kitsune</a> added <a>2 new photos</a> of you
           </Summary>
           <Extra images>
diff --git a/docs/app/Examples/views/Feed/Types/EventsProp.js b/docs/app/Examples/views/Feed/Types/EventsProp.js
new file mode 100644
index 0000000000..eee071b8a3
--- /dev/null
+++ b/docs/app/Examples/views/Feed/Types/EventsProp.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const events = [{
+  date: '1 Hour Ago',
+  image: 'http://semantic-ui.com/images/avatar/small/elliot.jpg',
+  meta: '4 Likes',
+  summary: 'Elliot Fu added you as a friend',
+}, {
+  date: '4 days ago',
+  image: 'http://semantic-ui.com/images/avatar/small/helen.jpg',
+  meta: '1 Like',
+  summary: 'Helen Troy added 2 new illustrations',
+  extraImages: [
+    'http://semantic-ui.com/images/wireframe/image.png',
+    'http://semantic-ui.com/images/wireframe/image.png',
+  ],
+}, {
+  date: '3 days ago',
+  image: 'http://semantic-ui.com/images/avatar/small/joe.jpg',
+  meta: '8 Likes',
+  summary: 'Joe Henderson posted on his page',
+  extraText: "Ours is a life of constant reruns. We're always circling back to where we'd we started.",
+}, {
+  date: '4 days ago',
+  image: 'http://semantic-ui.com/images/avatar/small/justen.jpg',
+  meta: '41 Likes',
+  summary: 'Justen Kitsune added 2 new photos of you',
+  extraText: 'Look at these fun pics I found from a few years ago. Good times.',
+  extraImages: [
+    'http://semantic-ui.com/images/wireframe/image.png',
+    'http://semantic-ui.com/images/wireframe/image.png',
+  ],
+}]
+
+const EventsProp = () => <Feed events={events} />
+
+export default EventsProp
diff --git a/docs/app/Examples/views/Feed/Types/Props.js b/docs/app/Examples/views/Feed/Types/Props.js
deleted file mode 100644
index a1b2bd8d1b..0000000000
--- a/docs/app/Examples/views/Feed/Types/Props.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-import { Feed } from 'stardust'
-
-const events = [
-  {
-    date: '1 Hour Ago',
-    image: 'http://semantic-ui.com/images/avatar/small/elliot.jpg',
-    meta: '4 Likes',
-    summary: 'Elliot Fu added you as a friend',
-  },
-  {
-    date: '4 days ago',
-    image: 'http://semantic-ui.com/images/avatar/small/helen.jpg',
-    meta: '1 Like',
-    summary: 'Helen Troy added 2 new illustrations',
-    extraImages: [
-      'http://semantic-ui.com/images/wireframe/image.png',
-      'http://semantic-ui.com/images/wireframe/image.png',
-    ],
-  },
-  {
-    date: '2 Days Ago',
-    image: 'http://semantic-ui.com/images/avatar/small/jenny.jpg',
-    meta: '8 Likes',
-    summary: 'Jenny Hess added you as a friend',
-  },
-  {
-    date: '3 days ago',
-    image: 'http://semantic-ui.com/images/avatar/small/joe.jpg',
-    meta: '8 Likes',
-    summary: 'Joe Henderson posted on his page',
-    extraText: [
-      "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.',
-    ].join(' '),
-  },
-  {
-    date: '4 days ago',
-    image: 'http://semantic-ui.com/images/avatar/small/justen.jpg',
-    meta: '41 Likes',
-    summary: 'Justen Kitsune added 2 new photos of you',
-    extraImages: [
-      'http://semantic-ui.com/images/wireframe/image.png',
-      'http://semantic-ui.com/images/wireframe/image.png',
-    ],
-  },
-]
-
-const Props = () => <Feed events={events} />
-
-export default Props
diff --git a/docs/app/Examples/views/Feed/Types/index.js b/docs/app/Examples/views/Feed/Types/index.js
index 52e629938b..c88d1115ad 100644
--- a/docs/app/Examples/views/Feed/Types/index.js
+++ b/docs/app/Examples/views/Feed/Types/index.js
@@ -10,7 +10,10 @@ const FeedTypesExamples = () => {
         description='A feed'
         examplePath='views/Feed/Types/Basic'
       />
-      <ComponentExample examplePath='views/Feed/Types/Props' />
+      <ComponentExample
+        description='You can also pass an array of events to generate the markup'
+        examplePath='views/Feed/Types/EventsProp'
+      />
     </ExampleSection>
   )
 }
diff --git a/docs/app/Examples/views/Feed/Variations/SizeLarge.js b/docs/app/Examples/views/Feed/Variations/SizeLarge.js
index 9cb604e189..0977e8e2df 100644
--- a/docs/app/Examples/views/Feed/Variations/SizeLarge.js
+++ b/docs/app/Examples/views/Feed/Variations/SizeLarge.js
@@ -1,53 +1,54 @@
 import React from 'react'
 import { Feed } from 'stardust'
 
-const { Content, Event, Extra, Label, Like, Meta, Summary, User } = Feed
-
 const SizeLarge = () => {
   return (
     <Feed size='large'>
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
-        <Content>
-          <Summary date='1 Hour Ago'>
-            <User>Elliot Fu</User> added you as a friend
-          </Summary>
-          <Meta>
-            <Like icon='like'>4 Likes</Like>
-          </Meta>
-        </Content>
-      </Event>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+        <Feed.Content>
+          <Feed.Summary>
+            <Feed.Date>1 Hour Ago</Feed.Date>
+            <Feed.User>Elliot Fu</Feed.User> added you as a friend
+          </Feed.Summary>
+          <Feed.Meta>
+            <Feed.Like icon='like'>4 Likes</Feed.Like>
+          </Feed.Meta>
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label icon='pencil' />
-        <Content>
-          <Summary date='3 days ago'>
+      <Feed.Event>
+        <Feed.Label icon='pencil' />
+        <Feed.Content>
+          <Feed.Summary>
+            <Feed.Date>3 days ago</Feed.Date>
             You submitted a new post to the page
-          </Summary>
-          <Extra text>
+          </Feed.Summary>
+          <Feed.Extra text>
             I'm having a BBQ this weekend. Come by around 4pm if you can.
-          </Extra>
-          <Meta>
-            <Like>11 Likes</Like>
-          </Meta>
-        </Content>
-      </Event>
+          </Feed.Extra>
+          <Feed.Meta>
+            <Feed.Like>11 Likes</Feed.Like>
+          </Feed.Meta>
+        </Feed.Content>
+      </Feed.Event>
 
-      <Event>
-        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
-        <Content date='4 days ago'>
-          <Summary>
+      <Feed.Event>
+        <Feed.Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Feed.Content>
+          <Feed.Date>4 days ago</Feed.Date>
+          <Feed.Summary>
             <a>Helen Troy</a> added <a>2 new illustrations</a>
-          </Summary>
+          </Feed.Summary>
 
-          <Extra images>
+          <Feed.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>
+          </Feed.Extra>
 
-          <Meta like='1 Like' />
-        </Content>
-      </Event>
+          <Feed.Meta like='1 Like' />
+        </Feed.Content>
+      </Feed.Event>
     </Feed>
   )
 }
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index e5c2aa41cf..091e788987 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -1,5 +1,5 @@
 import { PropTypes, isValidElement } from 'react'
-import _ from 'lodash'
+import _ from 'lodash/fp'
 
 const typeOf = (...args) => Object.prototype.toString.call(...args)
 
@@ -12,15 +12,15 @@ export const elementOfType = (type) => {
   // propValue, key, componentName, location, propFullName
   // propValue then is the array/object
   return (props, propName, componentName) => {
-    if (!(_.isFunction(type) || _.isString(type))) {
+    if (!(typeof type === 'function' || typeof type === 'string')) {
       throw new Error([
         'Invalid argument supplied to elementOfType, expected a string or function.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(' '))
     }
     const propValue = props[propName]
-    const typeName = _.isString(type) ? type : _.get(type, '_meta.name', type.constructor.name)
-    const propType = _.isString(propValue) ? propValue : _.get(propValue, 'type')
+    const typeName = typeof type === 'string' ? type : _.get(type, '_meta.name', type.constructor.name)
+    const propType = typeof propValue === 'string' ? propValue : _.get(propValue, 'type')
 
     if (!isValidElement(propValue)) {
       return new Error(
@@ -28,7 +28,7 @@ export const elementOfType = (type) => {
       )
     }
 
-    if (typeOf(propValue) !== typeOf(type) || !_.isMatch(propValue, { type })) {
+    if (typeOf(propValue) !== typeOf(type) || !_.isMatch({ type }, propValue)) {
       return new Error(
         `\`${propName}\` prop in \`${componentName}\` must be of type \`${typeName}\`, got: ${typeOf(propValue)}.`,
       )
@@ -42,24 +42,29 @@ export const elementOfType = (type) => {
  */
 export const disallow = disallowedProps => {
   return (props, propName, componentName) => {
-    if (!_.isArray(disallowedProps)) {
+    if (!Array.isArray(disallowedProps)) {
       throw new Error([
         'Invalid argument supplied to disallow, expected an instance of array.'
           ` See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(''))
     }
 
-    // mutually exclusive
-    const disallowed = disallowedProps.reduce((acc, exclusive) => {
-      if (!_.isUndefined(props[propName]) && !_.isUndefined(props[exclusive])) {
-        return [...acc, exclusive]
+    // skip if prop is undefined
+    if (props[propName] === undefined) return
+
+    // find disallowed props with values
+    const disallowed = disallowedProps.reduce((acc, disallowedProp) => {
+      if (props[disallowedProp] !== undefined) {
+        return [...acc, disallowedProp]
       }
       return acc
     }, [])
 
-    if (!_.isEmpty(disallowed)) {
+
+    if (disallowed.length > 0) {
+      console.log(propName, props[propName], _.flattenDeep(_.zip(disallowed, _.map(d => props[d])(disallowed))))
       return new Error([
-        `\`${propName}\` prop in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`,
+        `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`,
         'They cannot be defined together, choose one or the other.',
       ].join(' '))
     }
@@ -72,21 +77,24 @@ export const disallow = disallowedProps => {
  */
 export const every = (validators) => {
   return (props, propName, componentName, ...rest) => {
-    if (!_.isArray(validators)) {
+    if (!Array.isArray(validators)) {
       throw new Error([
         'Invalid argument supplied to every, expected an instance of array.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(' '))
     }
 
-    const errors = _.compact(_.map(validators, validator => {
-      if (!_.isFunction(validator)) {
-        throw new Error(
-          `every() argument "validators" should contain functions, found: ${typeOf(validator)}.`
-        )
-      }
-      return validator(props, propName, componentName, ...rest)
-    }))
+    const errors = _.flow(
+      _.map(validator => {
+        if (typeof validator !== 'function') {
+          throw new Error(
+            `every() argument "validators" should contain functions, found: ${typeOf(validator)}.`
+          )
+        }
+        return validator(props, propName, componentName, ...rest)
+      }),
+      _.compact
+    )(validators)
 
     // we can only return one error at a time
     return errors[0]
@@ -99,25 +107,25 @@ export const every = (validators) => {
  */
 export const some = (validators) => {
   return (props, propName, componentName, ...rest) => {
-    if (!_.isArray(validators)) {
+    if (!Array.isArray(validators)) {
       throw new Error([
         'Invalid argument supplied to some, expected an instance of array.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(' '))
     }
 
-    const errors = _.map(validators, validator => {
-      if (!_.isFunction(validator)) {
+    const errors = _.map(validator => {
+      if (typeof validator !== 'function') {
         throw new Error(
           `some() argument "validators" should contain functions, found: ${typeOf(validator)}.`
         )
       }
       return validator(props, propName, componentName, ...rest)
-    })
+    })(validators)
 
     // if no validator passed return the first error found
-    if (!_.some(errors, _.overSome(_.isNull, _.isUndefined))) {
-      return _.find(errors, error => !_.isUndefined(error))
+    if (!_.some(error => error === null || error === undefined)(errors)) {
+      return _.find(error => error !== undefined)(errors)
     }
   }
 }
@@ -129,10 +137,12 @@ export const some = (validators) => {
  */
 export const givenProps = (propsShape, validator) => {
   return (props, propName, componentName, ...rest) => {
-    const shouldValidate = _.every(propsShape, (val, key) => {
+    throw new Error('TODO val, key is not supported in fp')
+    const shouldValidate = _.every((val, key) => {
+      console.log('givenProps', val, key)
       // require propShape validators to pass or prop values to match
-      return _.isFunction(val) ? !val(props, key, componentName, ...rest) : val === props[propName]
-    })
+      return typeof val === 'function' ? !val(props, key, componentName, ...rest) : val === props[propName]
+    })(propsShape)
 
     if (!shouldValidate) return
 
@@ -143,7 +153,7 @@ export const givenProps = (propsShape, validator) => {
       ].join(' '))
     }
 
-    if (!_.isFunction(validator)) {
+    if (typeof validator !== 'function') {
       throw new Error([
         'Invalid argument supplied to givenProps, expected a function.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
@@ -156,8 +166,8 @@ export const givenProps = (propsShape, validator) => {
       // poor mans shallow pretty print, prevents JSON circular reference errors
       const prettyProps = `{ ${_.map(_.pick(props, _.keys(propsShape)), (val, key) => {
         let value = val
-        if (_.isString(val)) value = `"${val}"`
-        else if (_.isArray(val)) value = `[${val.join(', ')}]`
+        if (typeof val === 'string') value = `"${val}"`
+        else if (Array.isArray(val)) value = `[${val.join(', ')}]`
         else if (_.isObject(val)) value = '{...}'
 
         return `${key}: ${value}`
@@ -175,18 +185,18 @@ export const givenProps = (propsShape, validator) => {
  */
 export const demand = (requiredProps) => {
   return (props, propName, componentName) => {
-    if (!_.isArray(requiredProps)) {
+    if (!Array.isArray(requiredProps)) {
       throw new Error([
         'Invalid `requiredProps` argument supplied to require, expected an instance of array.'
           ` See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(''))
     }
 
-    // do not require requiredProps if the prop does not exist in props
-    if (_.isUndefined(props, propName)) return
+    // skip if prop is undefined
+    if (props[propName] === undefined) return
 
-    const missingRequired = requiredProps.filter(required => _.isUndefined(props, required))
-    if (!_.isEmpty(missingRequired)) {
+    const missingRequired = requiredProps.filter(requiredProp => props[requiredProp] === undefined)
+    if (missingRequired.length > 0) {
       return new Error(
         `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join('`, `')}\`.`,
       )
@@ -201,33 +211,45 @@ 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}\`.`,
       ].join(' '))
     }
 
-    /* eslint-disable no-console */
-    console.error(`The \`${propName}\` prop in \`${componentName}\` is deprecated. ${help}`)
-    /* eslint-enable no-console */
-
-    if (validator && !_.isFunction(validator)) {
-      throw new Error([
-        'Invalid argument supplied to deprecate, expected a function.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
+    // skip if prop is undefined
+    if (props[propName] === undefined) return
+
+    // deprecation error and help
+    const error = new Error(`The \`${propName}\` prop in \`${componentName}\` is deprecated.`)
+    if (help) error.message += ` ${help}`
+
+    // add optional validation error message
+    if (validator) {
+      if (typeof validator === 'function') {
+        const validationError = validator(props, propName, componentName, ...args)
+        if (validationError) {
+          error.message = `${error.message} ${validationError.message}`
+        }
+      } else {
+        throw new Error([
+          'Invalid argument supplied to deprecate, expected a function.',
+          `See \`${propName}\` prop in \`${componentName}\`.`,
+        ].join(' '))
+      }
     }
 
-    validator(props, propName, componentName, ...args)
+    return error
   }
 }
 
+// ----------------------------------------
+// Prop specific types
+// ----------------------------------------
+
 /**
- * Ensure a component can render as a give prop value.
+ * Ensure a component can render as a given prop value.
  */
 export const as = (...args) => PropTypes.oneOfType([
   PropTypes.string,
@@ -246,18 +268,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/CardGroup.js b/src/views/Card/CardGroup.js
index c05fdf2e97..6a93d76585 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 {
@@ -24,15 +25,15 @@ function CardGroup(props) {
   const rest = getUnhandledProps(CardGroup, props)
   const ElementType = getElementType(CardGroup, props)
 
-  if(!items) {
+  if (children) {
     return <ElementType {...rest} className={classes}>{children}</ElementType>
   }
 
-  const itemsJSX = items.map(item => {
-    const {childKey, itemProps} = item
+  const itemsJSX = _.map(items, item => {
+    const { childKey, itemProps } = item
     const finalKey = childKey || [itemProps.header, itemProps.description].join('-')
 
-    return <Card {...itemProps} key={finalKey}  />
+    return <Card {...itemProps} key={finalKey} />
   })
 
   return <ElementType {...rest} className={classes}>{itemsJSX}</ElementType>
@@ -68,7 +69,9 @@ CardGroup.propTypes = {
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
       childKey: PropTypes.childKey,
-      ...Card.propTypes
+      // 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/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 472304369a..04e39d6c4c 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -13,7 +13,7 @@ import FeedMeta from './FeedMeta'
 import FeedSummary from './FeedSummary'
 
 function FeedContent(props) {
-  const { children, className, extraImages, extraText, date, meta, summary } = props
+  const { children, className, content, extraImages, extraText, date, meta, summary } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(FeedContent, props)
   const ElementType = getElementType(FeedContent, props)
@@ -26,6 +26,7 @@ function FeedContent(props) {
     <ElementType {...rest} className={classes}>
       {date && <FeedDate content={date} />}
       {summary && <FeedSummary content={summary} />}
+      {content}
       {extraText && <FeedExtra text={extraText} />}
       {extraImages && <FeedExtra images={extraImages} />}
       {meta && <FeedMeta content={meta} />}
@@ -58,8 +59,8 @@ FeedContent.propTypes = {
   /** Classes that will be added to the FeedContent className. */
   className: PropTypes.string,
 
-  /** Deprecated. Use date, extraText, extraImages, meta, and summary instead. */
-  content: customPropTypes.deprecate('Use date, extraText, extraImages, meta, and summary instead.'),
+  /** Shorthand for children. */
+  content: customPropTypes.shorthand,
 
   /** An event can contain a date. */
   date: FeedDate.propTypes.content,
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 2ab74dfe07..8d102c9b95 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -39,19 +39,7 @@ FeedEvent.propTypes = {
   as: customPropTypes.as,
 
   /** Primary content of the FeedEvent. Mutually exclusive with all shorthand props. */
-  children: customPropTypes.every([
-    customPropTypes.disallow([
-      'content',
-      '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,
@@ -78,6 +66,4 @@ FeedEvent.propTypes = {
   summary: FeedContent.propTypes.summary,
 }
 
-console.log(FeedEvent.propTypes)
-
 export default FeedEvent
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index 8d3f6b889d..7b32404a11 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
@@ -22,11 +23,7 @@ function FeedExtra(props) {
   const ElementType = getElementType(FeedExtra, props)
 
   if (Array.isArray(images)) {
-    const imagesJSX = images.map((image, index) => {
-      const key = [index, image].join('-')
-
-      return createImg(image, { key })
-    })
+    const imagesJSX = _.map(images, (image, i) => createImg(image, { key: `${i}-${image}` }))
 
     return <ElementType {...rest} className={classes}>{imagesJSX}</ElementType>
   }
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 6f1762572b..f9ae831b06 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -8,9 +8,10 @@ import {
   META,
 } from '../../lib'
 import FeedDate from './FeedDate'
+import FeedUser from './FeedUser'
 
 function FeedSummary(props) {
-  const { children, className, content, date } = props
+  const { children, className, content, date, user } = props
   const classes = cx(className, 'summary')
   const rest = getUnhandledProps(FeedSummary, props)
   const ElementType = getElementType(FeedSummary, props)
@@ -21,8 +22,9 @@ function FeedSummary(props) {
 
   return (
     <ElementType {...rest} className={classes}>
+      {user && <FeedUser content={user} />}
       {content}
-      {date && <FeedDate date={date} />}
+      {date && <FeedDate content={date} />}
     </ElementType>
   )
 }
@@ -38,10 +40,7 @@ FeedSummary.propTypes = {
   as: customPropTypes.as,
 
   /** Primary content of the FeedSummary. Mutually exclusive with content */
-  children: customPropTypes.every([
-    customPropTypes.disallow(['content']),
-    PropTypes.node,
-  ]),
+  children: customPropTypes.children(FeedSummary),
 
   /** Classes that will be added to the FeedSummary className. */
   className: PropTypes.string,
@@ -51,6 +50,9 @@ FeedSummary.propTypes = {
 
   /** Shorthand for the FeedDate component. Mutually exclusive with children. */
   date: customPropTypes.shorthand,
+
+  /** Shorthand for the FeedUser component. Mutually exclusive with children. */
+  user: customPropTypes.shorthand,
 }
 
 export default FeedSummary
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index e024932102..0ef0ae2499 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -73,7 +73,9 @@ ItemGroup.propTypes = {
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
       childKey: customPropTypes.childKey,
-      ...Item.propTypes
+      // 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/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index 9f5880660d..7c28e5f57b 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -66,7 +66,9 @@ StatisticGroup.propTypes = {
     customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
       childKey: customPropTypes.childKey,
-      ...Statistic.propTypes
+      // 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/test/specs/views/Feed/FeedDate-test.js b/test/specs/views/Feed/FeedDate-test.js
index e5d2ce3070..a4fb1e352e 100644
--- a/test/specs/views/Feed/FeedDate-test.js
+++ b/test/specs/views/Feed/FeedDate-test.js
@@ -11,6 +11,6 @@ describe('FeedDate', () => {
   it('renders text with date prop', () => {
     const text = faker.hacker.phrase()
 
-    shallow(<FeedDate date={text} />).should.contain.text(text)
+    shallow(<FeedDate content={text} />).should.contain.text(text)
   })
 })
diff --git a/test/specs/views/Feed/FeedUser-test.js b/test/specs/views/Feed/FeedUser-test.js
index 54e7f89122..965545f36e 100644
--- a/test/specs/views/Feed/FeedUser-test.js
+++ b/test/specs/views/Feed/FeedUser-test.js
@@ -11,6 +11,6 @@ describe('FeedUser', () => {
   it('renders text with user prop', () => {
     const text = faker.hacker.phrase()
 
-    shallow(<FeedUser user={text} />).should.contain.text(text)
+    shallow(<FeedUser content={text} />).should.contain.text(text)
   })
 })