refactor(Feed): use string shorthand props

docs/app/Examples/views/Feed/Content/AdditionalInformation.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { Feed } from 'stardust'
 
 const { Content, Event, Extra, Label, Summary } = Feed
-const imageElements = _.times(2, () => <img src='http://semantic-ui.com/images/wireframe/image.png' />)
+const imageElements = _.times(2, (i) => <img key={i} src='http://semantic-ui.com/images/wireframe/image.png' />)
 const imageSources = _.times(2, () => 'http://semantic-ui.com/images/wireframe/image.png')
 
 const AdditionalInformation = () => {

docs/app/Examples/views/Feed/Content/Date.js

@@ -39,7 +39,7 @@ const Date = () => {
         <Feed.Label image={imageSrc} />
         <Feed.Content
           date='3 days ago'
-          summary={<span>You added <a>Jenny Hess</a> to your <a>coworker</a> group.</span>}
+          summary='You added Jenny Hess to your coworker group.'
         />
       </Feed.Event>
     </Feed>

docs/app/Examples/views/Feed/Content/index.js

@@ -7,21 +7,21 @@ const FeedContentExamples = () => {
     <ExampleSection title='Content'>
       <ComponentExample
         title='Label'
-        description='An event can contain an image or icon label.'
+        description='An event can contain an image or icon label'
         examplePath='views/Feed/Content/LabelImage'
       />
       <ComponentExample examplePath='views/Feed/Content/LabelIcon' />
 
       <ComponentExample
         title='Date'
-        description='An event or an event summary can contain a date.'
+        description='An event or an event summary can contain a date'
         examplePath='views/Feed/Content/Date'
       />
       <ComponentExample examplePath='views/Feed/Content/DateSummary' />
 
       <ComponentExample
         title='Additional information'
-        description='An event can contain additional information like a set of images or text.'
+        description='An event can contain additional information like a set of images or text'
         examplePath='views/Feed/Content/AdditionalInformation'
       />
     </ExampleSection>

docs/app/Examples/views/Feed/Types/Props.js

@@ -5,30 +5,30 @@ const events = [
   {
     date: '1 Hour Ago',
     image: 'http://semantic-ui.com/images/avatar/small/elliot.jpg',
-    meta: <Feed.Like icon='like'>4 Likes</Feed.Like>,
-    summary: <div><Feed.User>Elliot Fu</Feed.User> added you as a friend</div>,
+    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: <Feed.Like>1 Like</Feed.Like>,
-    summary: <div><a>Helen Troy</a> added <a>2 new illustrations</a></div>,
+    meta: '1 Like',
+    summary: 'Helen Troy added 2 new illustrations',
     extraImages: [
-      <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>,
-      <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>,
+      '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: <Feed.Like>8 Likes</Feed.Like>,
-    summary: <div><Feed.User>Jenny Hess</Feed.User> added you as a friend</div>,
+    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: <Feed.Like>8 Likes</Feed.Like>,
-    summary: <div><a>Joe Henderson</a> posted on his page</div>,
+    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",
@@ -38,11 +38,11 @@ const events = [
   {
     date: '4 days ago',
     image: 'http://semantic-ui.com/images/avatar/small/justen.jpg',
-    meta: <Feed.Like>41 Likes</Feed.Like>,
-    summary: <div> <a>Justen Kitsune</a> added <a>2 new photos</a> of you</div>,
+    meta: '41 Likes',
+    summary: 'Justen Kitsune added 2 new photos of you',
     extraImages: [
-      <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>,
-      <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>,
+      'http://semantic-ui.com/images/wireframe/image.png',
+      'http://semantic-ui.com/images/wireframe/image.png',
     ],
   },
 ]

docs/app/Examples/views/Feed/Types/index.js

@@ -7,7 +7,7 @@ const FeedTypesExamples = () => {
     <ExampleSection title='Types'>
       <ComponentExample
         title='Feed'
-        description='A feed.'
+        description='A feed'
         examplePath='views/Feed/Types/Basic'
       />
       <ComponentExample examplePath='views/Feed/Types/Props' />

docs/app/Examples/views/Feed/Variations/index.js

@@ -7,7 +7,7 @@ const FeedVariationsExamples = () => {
     <ExampleSection title='Variations'>
       <ComponentExample
         title='Size'
-        description='A feed can have different sizes.'
+        description='A feed can have different sizes'
         examplePath='views/Feed/Variations/SizeSmall'
       />
       <ComponentExample examplePath='views/Feed/Variations/SizeLarge' />

src/views/Feed/Feed.js

@@ -54,7 +54,16 @@ Feed.propTypes = {
   /** Array of props for FeedEvent. */
   events: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children']),
-    PropTypes.array,
+    PropTypes.arrayOf(PropTypes.shape({
+      key: PropTypes.string,
+      date: PropTypes.string,
+      image: PropTypes.node,
+      icon: PropTypes.node,
+      meta: PropTypes.string,
+      summary: PropTypes.string,
+      extraText: PropTypes.string,
+      extraImages: PropTypes.arrayOf(PropTypes.node),
+    })),
   ]),
 
   /** A feed can have different sizes. */

src/views/Feed/FeedContent.js

@@ -52,16 +52,13 @@ FeedContent.propTypes = {
 
   /** Shorthand for FeedExtra with prop images. */
   extraImages: customPropTypes.all([
-    customPropTypes.mutuallyExclusive(['children', 'content', 'extraText']),
-    PropTypes.oneOf([
-      PropTypes.array,
-      PropTypes.node,
-    ]),
+    customPropTypes.mutuallyExclusive(['children', 'content']),
+    PropTypes.arrayOf(PropTypes.node),
   ]),
 
   /** Shorthand for FeedExtra with prop text. */
   extraText: customPropTypes.all([
-    customPropTypes.mutuallyExclusive(['children', 'content', 'extraImages']),
+    customPropTypes.mutuallyExclusive(['children', 'content']),
     PropTypes.node,
   ]),
 

src/views/Feed/FeedEvent.js

@@ -41,28 +41,25 @@ FeedEvent.propTypes = {
   /** Shorthand for FeedContent. */
   content: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children', 'date', 'extraImages', 'extraText', 'meta', 'summary']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 
   /** Shorthand for FeedDate. */
   date: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children', 'content']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 
   /** Shorthand for FeedExtra with prop images. */
   extraImages: customPropTypes.all([
-    customPropTypes.mutuallyExclusive(['children', 'content', 'extraText']),
-    PropTypes.oneOf([
-      PropTypes.array,
-      PropTypes.node,
-    ]),
+    customPropTypes.mutuallyExclusive(['children', 'content']),
+    PropTypes.arrayOf(PropTypes.node),
   ]),
 
   /** Shorthand for FeedExtra with prop text. */
   extraText: customPropTypes.all([
-    customPropTypes.mutuallyExclusive(['children', 'content', 'extraImages']),
-    PropTypes.node,
+    customPropTypes.mutuallyExclusive(['children', 'content']),
+    PropTypes.string,
   ]),
 
   /** An event can contain icon label. */
@@ -74,13 +71,13 @@ FeedEvent.propTypes = {
   /** Shorthand for FeedMeta. */
   meta: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children', 'content']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 
   /** Shorthand for FeedSummary. */
   summary: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children', 'content']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 }
 

src/views/Feed/FeedExtra.js

@@ -15,15 +15,15 @@ function FeedExtra(props) {
   )
   const rest = getUnhandledProps(FeedExtra, props)
 
-  if (!images || _.isBoolean(images)) {
-    return <div {...rest} className={classes}>{children || text}</div>
-  }
+  if (Array.isArray(images)) {
+    const imagesJSX = images.map((image, i) => {
+      return _.isString(image) ? <img key={i} src={image} /> : image
+    })
 
-  const imagesJSX = images.map(image => {
-    return _.isString(image) ? <img key={image} src={image} /> : image
-  })
+    return <div {...rest} className={classes}>{imagesJSX}</div>
+  }
 
-  return <div {...rest} className={classes}>{imagesJSX}</div>
+  return <div {...rest} className={classes}>{children || text}</div>
 }
 
 FeedExtra._meta = {
@@ -45,7 +45,6 @@ FeedExtra.propTypes = {
     PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.arrayOf(PropTypes.node),
-      PropTypes.arrayOf(PropTypes.string),
     ]),
   ]),
 

src/views/Feed/FeedSummary.js

@@ -35,11 +35,11 @@ FeedSummary.propTypes = {
   className: PropTypes.string,
 
   /** An event summary can contain a date. */
-  date: PropTypes.node,
+  date: PropTypes.string,
 
   summary: customPropTypes.all([
     customPropTypes.mutuallyExclusive(['children']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 }