style(Item): update typings and propTypes usage (#1294)

src/views/Item/Item.js

@@ -1,9 +1,8 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
-  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -18,11 +17,21 @@ import ItemImage from './ItemImage'
 import ItemMeta from './ItemMeta'
 
 /**
- * An item view presents large collections of site content for display
+ * An item view presents large collections of site content for display.
  */
 function Item(props) {
-  const { children, className, content, description, extra, header, image, meta } = props
-  const classes = cx(className, 'item')
+  const {
+    children,
+    className,
+    content,
+    description,
+    extra,
+    header,
+    image,
+    meta,
+  } = props
+
+  const classes = cx('item', className)
   const rest = getUnhandledProps(Item, props)
   const ElementType = getElementType(Item, props)
 
@@ -32,7 +41,7 @@ function Item(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {createShorthand(ItemImage, val => ({ src: val }), image)}
+      {ItemImage.create(image)}
 
       <ItemContent
         content={content}

src/views/Item/ItemContent.js

@@ -1,9 +1,8 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
-  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -17,14 +16,24 @@ import ItemExtra from './ItemExtra'
 import ItemMeta from './ItemMeta'
 
 /**
- * An item can contain content
+ * An item can contain content.
  */
 function ItemContent(props) {
-  const { children, className, content, description, extra, header, meta, verticalAlign } = props
-  const classes = cx(
+  const {
+    children,
     className,
+    content,
+    description,
+    extra,
+    header,
+    meta,
+    verticalAlign,
+  } = props
+
+  const classes = cx(
     useVerticalAlignProp(verticalAlign),
     'content',
+    className,
   )
   const rest = getUnhandledProps(ItemContent, props)
   const ElementType = getElementType(ItemContent, props)
@@ -35,10 +44,10 @@ function ItemContent(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {createShorthand(ItemHeader, val => ({ content: val }), header)}
-      {createShorthand(ItemMeta, val => ({ content: val }), meta)}
-      {createShorthand(ItemDescription, val => ({ content: val }), description)}
-      {createShorthand(ItemExtra, val => ({ content: val }), extra)}
+      {ItemHeader.create(header)}
+      {ItemMeta.create(meta)}
+      {ItemDescription.create(description)}
+      {ItemExtra.create(extra)}
       {content}
     </ElementType>
   )
@@ -48,9 +57,6 @@ ItemContent._meta = {
   name: 'ItemContent',
   parent: 'Item',
   type: META.TYPES.VIEW,
-  props: {
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 ItemContent.propTypes = {
@@ -78,8 +84,8 @@ ItemContent.propTypes = {
   /** Shorthand for ItemMeta component. */
   meta: customPropTypes.itemShorthand,
 
-  /** Content can specify its vertical alignment */
-  verticalAlign: PropTypes.oneOf(ItemContent._meta.props.verticalAlign),
+  /** Content can specify its vertical alignment. */
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 export default ItemContent

src/views/Item/ItemDescription.js

@@ -1,24 +1,29 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
 
 /**
- * An item can contain a description with a single or multiple paragraphs
+ * An item can contain a description with a single or multiple paragraphs.
  */
 function ItemDescription(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'description')
+  const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
   const ElementType = getElementType(ItemDescription, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ItemDescription._meta = {
@@ -41,4 +46,6 @@ ItemDescription.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
+ItemDescription.create = createShorthandFactory(ItemDescription, content => ({ content }))
+
 export default ItemDescription

src/views/Item/ItemExtra.js

@@ -1,24 +1,29 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
 
 /**
- * An item can contain extra content meant to be formatted separately from the main content
+ * An item can contain extra content meant to be formatted separately from the main content.
  */
 function ItemExtra(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'extra')
+  const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
   const ElementType = getElementType(ItemExtra, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ItemExtra._meta = {
@@ -41,4 +46,6 @@ ItemExtra.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
+ItemExtra.create = createShorthandFactory(ItemExtra, content => ({ content }))
+
 export default ItemExtra

src/views/Item/ItemGroup.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -13,17 +13,25 @@ import {
 import Item from './Item'
 
 /**
- * A group of items
+ * A group of items.
  */
 function ItemGroup(props) {
-  const { children, className, divided, items, link, relaxed } = props
+  const {
+    children,
+    className,
+    divided,
+    items,
+    link,
+    relaxed,
+  } = props
+
   const classes = cx(
     'ui',
-    className,
     useKeyOnly(divided, 'divided'),
     useKeyOnly(link, 'link'),
     useKeyOrValueAndKey(relaxed, 'relaxed'),
-    'items'
+    'items',
+    className,
   )
   const rest = getUnhandledProps(ItemGroup, props)
   const ElementType = getElementType(ItemGroup, props)
@@ -46,9 +54,6 @@ ItemGroup._meta = {
   name: 'ItemGroup',
   type: META.TYPES.VIEW,
   parent: 'Item',
-  props: {
-    relaxed: ['very'],
-  },
 }
 
 ItemGroup.propTypes = {
@@ -73,7 +78,7 @@ ItemGroup.propTypes = {
   /** A group of items can relax its padding to provide more negative space. */
   relaxed: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(ItemGroup._meta.props.relaxed),
+    PropTypes.oneOf(['very']),
   ]),
 }
 

src/views/Item/ItemHeader.js

@@ -1,24 +1,29 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
 
 /**
- * An item can contain a header
+ * An item can contain a header.
  */
 function ItemHeader(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'header')
+  const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
   const ElementType = getElementType(ItemHeader, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ItemHeader._meta = {
@@ -41,4 +46,6 @@ ItemHeader.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
+ItemHeader.create = createShorthandFactory(ItemHeader, content => ({ content }))
+
 export default ItemHeader

src/views/Item/ItemImage.js

@@ -1,13 +1,14 @@
 import React from 'react'
 
 import {
-  META,
+  createShorthandFactory,
   getUnhandledProps,
+  META,
 } from '../../lib'
 import Image from '../../elements/Image'
 
 /**
- * An item can contain an image
+ * An item can contain an image.
  */
 function ItemImage(props) {
   const { size } = props
@@ -23,8 +24,10 @@ ItemImage._meta = {
 }
 
 ItemImage.propTypes = {
-  /** An image may appear at different sizes */
+  /** An image may appear at different sizes. */
   size: Image.propTypes.size,
 }
 
+ItemImage.create = createShorthandFactory(ItemImage, src => ({ src }))
+
 export default ItemImage

src/views/Item/ItemMeta.js

@@ -1,8 +1,9 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -14,11 +15,15 @@ import {
  */
 function ItemMeta(props) {
   const { children, className, content } = props
-  const classes = cx(className, 'meta')
+  const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
   const ElementType = getElementType(ItemMeta, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ItemMeta._meta = {
@@ -41,4 +46,6 @@ ItemMeta.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
+ItemMeta.create = createShorthandFactory(ItemMeta, content => ({ content }))
+
 export default ItemMeta