test(Examples): assert no console errors (#645)

* test(Examples): assert no console errors

* docs(Feed): remove unused examples

* docs(Card): fix Feed.Content date usage

* docs(Menu): fix Input icon shorthand

* test(Examples): assert no console errors on mount

* wip shorthand collection keys

* fix(Header): remove unused import

* fix(Image-test): update implementsShorthandProp name

* fix(Table): restore tableData mapping logic

* refactor(Table): fix doc block

* refactor(factories): use arrow func over _.partial

* refactor(factories): merge item/collection factories

* fix(customPropTypes): allow array in itemShorthand

* refactor(factories): cleanup cruft

* fix(getUnhandledProps): always handle childKey

* refactor(commonTests): implementsShorthandItemProp -> implementsShorthandProp

* test(examples): assert no console messages

* fix(docs|src): fix all example errors

* fix(Introduction): fix icon name

* fix(Menu): add MenuItem.create() and generateKey

* fix(MessageList): add MessageItem.create() and generateKey

* fix(Message): add Header.create() and List.create()

* refactor(factories): one line if

* fix(Menu): removed unused import

* chore(karma): fix html-beautify module error

* refactor(factories): do not hash prop keys

* test(Menu): fix menu test

* test(Message): fix message test

* chore(webpack): remove unused html-beautify external

Author: levithomason

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -2,7 +2,7 @@ import * as Babel from 'babel-standalone'
 import _ from 'lodash'
 import React, { Component, createElement, isValidElement, PropTypes } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import html from 'html-beautify'
+import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL } from 'docs/app/utils'

docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js

@@ -10,7 +10,7 @@ const MenuExampleAttached = () => {
         <Dropdown as={Menu.Item} icon='wrench' simple>
           <Dropdown.Menu>
             <Dropdown.Item>
-              <Icon name='dropdown icon' />
+              <Icon name='dropdown' />
               <span className='text'>New</span>
 
               <Dropdown.Menu>

docs/app/Examples/collections/Menu/Types/MenuExampleTabularOnTop.js

@@ -16,7 +16,7 @@ export default class MenuExampleTabularOnTop extends Component {
           <Menu.Item name='photos' active={activeItem === 'photos'} onClick={this.handleItemClick} />
           <Menu.Menu position='right'>
             <Menu.Item>
-              <Input transparent icon={{ name: 'search', link: 'true' }} placeholder='Search users...' />
+              <Input transparent icon={{ name: 'search', link: true }} placeholder='Search users...' />
             </Menu.Item>
           </Menu.Menu>
         </Menu>

docs/app/Examples/collections/Table/States/TableExampleWarningShorthand.js

@@ -1,6 +1,13 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
+const tableData = [
+  { name: undefined, status: undefined, notes: undefined },
+  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+  { name: 'Jamie', status: undefined, notes: 'Hostile' },
+  { name: 'Jill', status: undefined, notes: undefined },
+]
+
 const headerRow = [
   'Name',
   'Status',
@@ -20,17 +27,13 @@ const renderBodyRow = ({ name, status, notes }) => ({
   ],
 })
 
-const tableData = [
-  { name: undefined, status: undefined, notes: undefined },
-  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
-  { name: 'Jamie', status: undefined, notes: 'Hostile' },
-  { name: 'Jill', status: undefined, notes: undefined },
-]
-
-const TableExampleWarningShorthand = () => {
-  return (
-    <Table celled headerRow={headerRow} renderBodyRow={renderBodyRow} tableData={tableData} />
-  )
-}
+const TableExampleWarningShorthand = () => (
+  <Table
+    celled
+    headerRow={headerRow}
+    renderBodyRow={renderBodyRow}
+    tableData={tableData}
+  />
+)
 
 export default TableExampleWarningShorthand

docs/app/Examples/elements/Button/Variations/ButtonExampleToggle.js

@@ -8,6 +8,7 @@ class ButtonExampleToggle extends Component {
 
   render() {
     const { active } = this.state
+
     return (
       <Button toggle active={active} onClick={this.handleClick}>
         Toggle

docs/app/Examples/elements/List/Content/ListExampleDescription.js

@@ -4,14 +4,14 @@ import { List } from 'semantic-ui-react'
 const ListExampleDescription = () => (
   <List>
     <List.Item>
-      <List.Icon name='map marker' />
+      <List.Icon name='marker' />
       <List.Content>
         <List.Header as='a'>Krowlewskie Jadlo</List.Header>
         <List.Description>An excellent polish restaurant, quick delivery and hearty, filling meals.</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
-      <List.Icon name='map marker' />
+      <List.Icon name='marker' />
       <List.Content>
         <List.Header as='a'>Xian Famous Foods</List.Header>
         <List.Description>
@@ -20,14 +20,14 @@ const ListExampleDescription = () => (
       </List.Content>
     </List.Item>
     <List.Item>
-      <List.Icon name='map marker' />
+      <List.Icon name='marker' />
       <List.Content>
         <List.Header as='a'>Sapporo Haru</List.Header>
         <List.Description>Greenpoint's best choice for quick and delicious sushi.</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
-      <List.Icon name='map marker' />
+      <List.Icon name='marker' />
       <List.Content>
         <List.Header as='a'>Enid's</List.Header>
         <List.Description>At night a bar, during the day a delicious brunch spot.</List.Description>

docs/app/Examples/views/Card/Content/CardExampleContentBlock.js

@@ -32,7 +32,8 @@ const CardExampleContentBlock = () => (
 
         <Feed.Event>
           <Feed.Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
-          <Feed.Content date='4 days ago'>
+          <Feed.Content>
+            <Feed.Date content='4 days ago' />
             <Feed.Summary>
               You added <a>Elliot Baker</a> to your <a>musicians</a> group.
             </Feed.Summary>

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

@@ -12,7 +12,7 @@ const ItemExampleExtraContent = () => (
         <Item.Header as='a'>Cute Dog</Item.Header>
         <Item.Description>{paragraph}</Item.Description>
         <Item.Extra>
-          <Icon name='green check' /> 121 Votes
+          <Icon color='green' name='check' /> 121 Votes
         </Item.Extra>
       </Item.Content>
     </Item>

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

@@ -156,12 +156,12 @@ const Introduction = () => (
         Semantic-UI-React is the official React integration for <a href={semanticUIDocsURL}>Semantic UI</a> .
       </p>
       <List>
-        <List.Item icon='check mark' content='jQuery Free' />
-        <List.Item icon='check mark' content='Declarative API' />
-        <List.Item icon='check mark' content='Augmentation' />
-        <List.Item icon='check mark' content='Shorthand Props' />
-        <List.Item icon='check mark' content='Sub Components' />
-        <List.Item icon='check mark' content='Auto Controlled State' />
+        <List.Item icon='mark' content='jQuery Free' />
+        <List.Item icon='mark' content='Declarative API' />
+        <List.Item icon='mark' content='Augmentation' />
+        <List.Item icon='mark' content='Shorthand Props' />
+        <List.Item icon='mark' content='Sub Components' />
+        <List.Item icon='mark' content='Auto Controlled State' />
       </List>
       <p>
         Installation instructions are provided in the <Link to='/usage'>Usage</Link> section.

docs/app/Examples/views/Item/Content/ItemExampleExtraContent.js

@@ -18,7 +18,7 @@ export const parentComponents = _.flow(
 /**
  * Get the Webpack Context for all doc site examples.
  */
-export const exampleContext = require.context('docs/app/Examples/', true, /\.js$/)
+export const exampleContext = require.context('docs/app/Examples/', true, /(\w+Example\w+|index)\.js$/)
 
 export const repoURL = 'https://github.com/Semantic-Org/Semantic-UI-React'
 export const semanticUIDocsURL = 'http://semantic-ui.com/'

docs/app/Views/Introduction.js

@@ -93,4 +93,4 @@ export default class BreadcrumbSection extends Component {
   }
 }
 
-BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, content => ({ content, link: true }))
+BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, content => ({ content, link: true }), true)

docs/app/utils.js

@@ -4,7 +4,6 @@ import React, { PropTypes } from 'react'
 
 import {
   AutoControlledComponent as Component,
-  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -159,14 +158,11 @@ class Menu extends Component {
     const { items } = this.props
     const { activeIndex } = this.state
 
-    return _.map(items, (item, index) => {
-      return createShorthand(MenuItem, val => ({ content: val, name: val }), item, {
-        active: activeIndex === index,
-        childKey: ({ content, name }) => [content, name].join('-'),
-        index,
-        onClick: this.handleItemClick,
-      })
-    })
+    return _.map(items, (item, index) => MenuItem.create(item, {
+      active: activeIndex === index,
+      index,
+      onClick: this.handleItemClick,
+    }))
   }
 
   render() {

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import React, { Component, PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -133,3 +134,5 @@ export default class MenuItem extends Component {
     )
   }
 }
+
+MenuItem.create = createShorthandFactory(MenuItem, val => ({ content: val, name: val }), true)

src/collections/Menu/Menu.js

@@ -86,8 +86,8 @@ function Message(props) {
       {Icon.create(icon)}
       {(header || content || list) && (
         <MessageContent>
-          {createShorthand(MessageHeader, val => ({ children: val }), header)}
-          {createShorthand(MessageList, val => ({ items: val }), list)}
+          {MessageHeader.create(header)}
+          {MessageList.create(list)}
           {createShorthand('p', val => ({ children: val }), content)}
         </MessageContent>
       )}
@@ -127,7 +127,7 @@ Message.propTypes = {
     customPropTypes.itemShorthand,
   ]),
 
-  /** Array of string items for the MessageList. Mutually exclusive with children. */
+  /** Array shorthand items for the MessageList. Mutually exclusive with children. */
   list: customPropTypes.collectionShorthand,
 
   /**

src/collections/Menu/MenuItem.js

@@ -2,19 +2,20 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
 
 function MessageHeader(props) {
-  const { children, className } = props
+  const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
   const ElementType = getElementType(MessageHeader, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return <ElementType {...rest} className={classes}>{children || content}</ElementType>
 }
 
 MessageHeader._meta = {
@@ -30,8 +31,13 @@ MessageHeader.propTypes = {
   /** Primary content. */
   children: PropTypes.node,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.itemShorthand,
+
   /** Additional classes. */
   className: PropTypes.string,
 }
 
+MessageHeader.create = createShorthandFactory(MessageHeader, val => ({ content: val }))
+
 export default MessageHeader

src/collections/Message/Message.js

@@ -2,19 +2,20 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
 
 function MessageItem(props) {
-  const { children, className } = props
+  const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageItem, props)
   const ElementType = getElementType(MessageItem, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return <ElementType {...rest} className={classes}>{content || children}</ElementType>
 }
 
 MessageItem._meta = {
@@ -30,6 +31,9 @@ MessageItem.propTypes = {
   /** Primary content. */
   children: PropTypes.node,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.itemShorthand,
+
   /** Additional classes. */
   className: PropTypes.string,
 }
@@ -38,4 +42,6 @@ MessageItem.defaultProps = {
   as: 'li',
 }
 
+MessageItem.create = createShorthandFactory(MessageItem, content => ({ content }), true)
+
 export default MessageItem