style(Feed): update typings and propTypes usage (#1285)

src/views/Feed/Feed.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -20,8 +20,19 @@ import FeedSummary from './FeedSummary'
 import FeedUser from './FeedUser'
 
 function Feed(props) {
-  const { children, className, events, size } = props
-  const classes = cx('ui', className, size, 'feed')
+  const {
+    children,
+    className,
+    events,
+    size,
+  } = props
+
+  const classes = cx(
+    'ui',
+    size,
+    'feed',
+    className,
+  )
   const rest = getUnhandledProps(Feed, props)
   const ElementType = getElementType(Feed, props)
 
@@ -50,9 +61,6 @@ function Feed(props) {
 Feed._meta = {
   name: 'Feed',
   type: META.TYPES.VIEW,
-  props: {
-    size: _.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive'),
-  },
 }
 
 Feed.propTypes = {
@@ -69,7 +77,7 @@ Feed.propTypes = {
   events: customPropTypes.collectionShorthand,
 
   /** A feed can have different sizes. */
-  size: PropTypes.oneOf(Feed._meta.props.size),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive')),
 }
 
 Feed.Content = FeedContent

src/views/Feed/FeedContent.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -15,8 +15,18 @@ import FeedMeta from './FeedMeta'
 import FeedSummary from './FeedSummary'
 
 function FeedContent(props) {
-  const { children, className, content, extraImages, extraText, date, meta, summary } = props
-  const classes = cx(className, 'content')
+  const {
+    children,
+    className,
+    content,
+    extraImages,
+    extraText,
+    date,
+    meta,
+    summary,
+  } = props
+
+  const classes = cx('content', className)
   const rest = getUnhandledProps(FeedContent, props)
   const ElementType = getElementType(FeedContent, props)
 

src/views/Feed/FeedDate.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -8,16 +8,21 @@ import {
   getUnhandledProps,
   META,
 } from '../../lib'
+
 /**
- * Show a feed date
+ * An event or an event summary can contain a date.
  */
 function FeedDate(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'date')
+  const classes = cx('date', className)
   const rest = getUnhandledProps(FeedDate, props)
   const ElementType = getElementType(FeedDate, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 FeedDate._meta = {

src/views/Feed/FeedEvent.js

@@ -11,9 +11,24 @@ import {
 import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
+/**
+ * A feed contains an event.
+ */
 function FeedEvent(props) {
-  const { content, children, className, date, extraImages, extraText, image, icon, meta, summary } = props
-  const classes = cx(className, 'event')
+  const {
+    content,
+    children,
+    className,
+    date,
+    extraImages,
+    extraText,
+    image,
+    icon,
+    meta,
+    summary,
+  } = props
+
+  const classes = cx('event', className)
   const rest = getUnhandledProps(FeedEvent, props)
   const ElementType = getElementType(FeedEvent, props)
 
@@ -47,16 +62,16 @@ FeedEvent.propTypes = {
   className: PropTypes.string,
 
   /** Shorthand for FeedContent. */
-  content: FeedContent.propTypes.content,
+  content: customPropTypes.itemShorthand,
 
   /** Shorthand for FeedDate. */
-  date: FeedContent.propTypes.date,
+  date: customPropTypes.itemShorthand,
 
   /** Shorthand for FeedExtra with images. */
-  extraImages: FeedContent.propTypes.extraImages,
+  extraImages: customPropTypes.itemShorthand,
 
   /** Shorthand for FeedExtra with content. */
-  extraText: FeedContent.propTypes.extraText,
+  extraText: customPropTypes.itemShorthand,
 
   /** An event can contain icon label. */
   icon: customPropTypes.itemShorthand,
@@ -65,10 +80,10 @@ FeedEvent.propTypes = {
   image: customPropTypes.itemShorthand,
 
   /** Shorthand for FeedMeta. */
-  meta: FeedContent.propTypes.meta,
+  meta: customPropTypes.itemShorthand,
 
   /** Shorthand for FeedSummary. */
-  summary: FeedContent.propTypes.summary,
+  summary: customPropTypes.itemShorthand,
 }
 
 export default FeedEvent

src/views/Feed/FeedExtra.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -11,13 +11,22 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A feed can contain an extra content.
+ */
 function FeedExtra(props) {
-  const { children, className, content, images, text } = props
-  const classes = cx(
+  const { children,
     className,
+    content,
+    images,
+    text,
+  } = props
+
+  const classes = cx(
     useKeyOnly(images, 'images'),
     useKeyOnly(content || text, 'text'),
-    'extra'
+    'extra',
+    className,
   )
   const rest = getUnhandledProps(FeedExtra, props)
   const ElementType = getElementType(FeedExtra, props)

src/views/Feed/FeedLabel.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -11,9 +11,19 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
+/**
+ * An event can contain an image or icon label.
+ */
 function FeedLabel(props) {
-  const { children, className, content, icon, image } = props
-  const classes = cx(className, 'label')
+  const {
+    children,
+    className,
+    content,
+    icon,
+    image,
+  } = props
+
+  const classes = cx('label', className)
   const rest = getUnhandledProps(FeedLabel, props)
   const ElementType = getElementType(FeedLabel, props)
 

src/views/Feed/FeedLike.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,9 +10,18 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
+/**
+ * A feed can contain a like element.
+ */
 function FeedLike(props) {
-  const { children, className, content, icon } = props
-  const classes = cx(className, 'like')
+  const {
+    children,
+    className,
+    content,
+    icon,
+  } = props
+
+  const classes = cx('like', className)
   const rest = getUnhandledProps(FeedLike, props)
   const ElementType = getElementType(FeedLike, props)
 

src/views/Feed/FeedMeta.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -11,9 +11,18 @@ import {
 } from '../../lib'
 import FeedLike from './FeedLike'
 
+/**
+ * A feed can contain a meta.
+ */
 function FeedMeta(props) {
-  const { children, className, content, like } = props
-  const classes = cx(className, 'meta')
+  const {
+    children,
+    className,
+    content,
+    like,
+  } = props
+
+  const classes = cx('meta', className)
   const rest = getUnhandledProps(FeedMeta, props)
   const ElementType = getElementType(FeedMeta, props)
 

src/views/Feed/FeedSummary.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -12,9 +12,19 @@ import {
 import FeedDate from './FeedDate'
 import FeedUser from './FeedUser'
 
+/**
+ * A feed can contain a summary.
+ */
 function FeedSummary(props) {
-  const { children, className, content, date, user } = props
-  const classes = cx(className, 'summary')
+  const {
+    children,
+    className,
+    content,
+    date,
+    user,
+  } = props
+
+  const classes = cx('summary', className)
   const rest = getUnhandledProps(FeedSummary, props)
   const ElementType = getElementType(FeedSummary, props)
 

src/views/Feed/FeedUser.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -9,13 +9,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A feed can contain a user element.
+ */
 function FeedUser(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'user')
+  const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
   const ElementType = getElementType(FeedUser, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 FeedUser._meta = {