test(mixed): add test for content prop, remove useless tests (#2144)

* breaking(Statistic): refactor Statistic to use factories, update content props

* test(mixed): add test for `content` prop, remove useless tests

* breaking(Step): refactor Step to use factories, update content props, add missing props

* test(mixed): add test for `content` prop, remove useless tests

* test(mixed): add test for `content` prop, remove useless tests

* style(mixed): remove TODOs, style fixes

src/collections/Form/FormField.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   HtmlLabelProps,
+  SemanticShorthandContent,
   SemanticShorthandItem,
   SemanticWIDTHS
 } from '../..';
@@ -17,6 +18,9 @@ export interface FormFieldProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /**
    * A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input').
    * Extra FormField props are passed to the control component.

src/collections/Form/FormField.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React, { createElement } from 'react'
 
 import {
+  childrenUtils,
   createHTMLLabel,
   customPropTypes,
   getElementType,
@@ -31,6 +32,7 @@ function FormField(props) {
   const {
     children,
     className,
+    content,
     control,
     disabled,
     error,
@@ -58,7 +60,13 @@ function FormField(props) {
   // ----------------------------------------
 
   if (_.isNil(control)) {
-    if (_.isNil(label)) return <ElementType {...rest} className={classes}>{children}</ElementType>
+    if (_.isNil(label)) {
+      return (
+        <ElementType {...rest} className={classes}>
+          {childrenUtils.isNil(children) ? content : children}
+        </ElementType>
+      )
+    }
 
     return <ElementType {...rest} className={classes}>{createHTMLLabel(label)}</ElementType>
   }
@@ -118,6 +126,9 @@ FormField.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
   /**
    * A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input').
    * Extra FormField props are passed to the control component.

src/collections/Menu/MenuItem.js

@@ -132,7 +132,7 @@ export default class MenuItem extends Component {
     return (
       <ElementType {...rest} className={classes} onClick={this.handleClick}>
         {Icon.create(icon)}
-        {content || _.startCase(name)}
+        {childrenUtils.isNil(content) ? _.startCase(name) : content}
       </ElementType>
     )
   }

src/collections/Menu/MenuMenu.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SemanticShorthandContent } from '../..';
 
 export interface MenuMenuProps {
   [key: string]: any;
@@ -12,6 +13,9 @@ export interface MenuMenuProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /** A sub menu can take left or right position. */
   position?: 'left' | 'right';
 }

src/collections/Menu/MenuMenu.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
+  childrenUtils,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -13,7 +14,7 @@ import {
  * A menu can contain a sub menu.
  */
 function MenuMenu(props) {
-  const { children, className, position } = props
+  const { children, className, content, position } = props
 
   const classes = cx(
     position,
@@ -23,7 +24,11 @@ function MenuMenu(props) {
   const rest = getUnhandledProps(MenuMenu, props)
   const ElementType = getElementType(MenuMenu, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 MenuMenu._meta = {
@@ -42,6 +47,9 @@ MenuMenu.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
   /** A sub menu can take left or right position. */
   position: PropTypes.oneOf(['left', 'right']),
 }

src/collections/Message/MessageContent.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SemanticShorthandContent } from '../..';
 
 export interface MessageContentProps {
   [key: string]: any;
@@ -11,6 +12,9 @@ export interface MessageContentProps {
 
   /** Additional classes. */
   className?: string;
+
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
 }
 
 declare const MessageContent: React.StatelessComponent<MessageContentProps>;

src/collections/Message/MessageContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
+  childrenUtils,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -13,12 +14,16 @@ import {
  * A message can contain a content.
  */
 function MessageContent(props) {
-  const { children, className } = props
+  const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageContent, props)
   const ElementType = getElementType(MessageContent, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 MessageContent._meta = {
@@ -36,6 +41,9 @@ MessageContent.propTypes = {
 
   /** Additional classes. */
   className: PropTypes.string,
+
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
 }
 
 export default MessageContent

src/collections/Table/TableHeader.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SemanticShorthandContent } from '../..';
 
 export interface TableHeaderProps {
   [key: string]: any;
@@ -12,6 +13,9 @@ export interface TableHeaderProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /** A definition table can have a full width header or footer, filling in the gap left by the first column. */
   fullWidth?: boolean;
 }

src/collections/Table/TableHeader.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
+  childrenUtils,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -14,15 +15,19 @@ import {
  * A table can have a header.
  */
 function TableHeader(props) {
-  const { children, className, fullWidth } = props
+  const { children, className, content, fullWidth } = props
   const classes = cx(
     useKeyOnly(fullWidth, 'full-width'),
     className,
   )
   const rest = getUnhandledProps(TableHeader, props)
   const ElementType = getElementType(TableHeader, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 TableHeader._meta = {
@@ -45,6 +50,9 @@ TableHeader.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
   /** A definition table can have a full width header or footer, filling in the gap left by the first column. */
   fullWidth: PropTypes.bool,
 }

src/elements/Button/ButtonContent.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SemanticShorthandContent } from '../..';
 
 export interface ButtonContentProps {
   [key: string]: any;
@@ -12,6 +13,9 @@ export interface ButtonContentProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /** Initially hidden, visible on hover. */
   hidden?: boolean;
 

src/elements/Button/ButtonContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
+  childrenUtils,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -17,6 +18,7 @@ function ButtonContent(props) {
   const {
     children,
     className,
+    content,
     hidden,
     visible,
   } = props
@@ -29,7 +31,11 @@ function ButtonContent(props) {
   const rest = getUnhandledProps(ButtonContent, props)
   const ElementType = getElementType(ButtonContent, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ButtonContent._meta = {
@@ -48,6 +54,9 @@ ButtonContent.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
   /** Initially hidden, visible on hover. */
   hidden: PropTypes.bool,
 

src/elements/Button/ButtonGroup.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   SemanticCOLORS,
   SemanticFLOATS,
+  SemanticShorthandContent,
   SemanticSIZES,
   SemanticWIDTHS
 } from '../..';
@@ -30,6 +31,9 @@ export interface ButtonGroupProps {
   /** Groups can reduce their padding to fit into tighter spaces. */
   compact?: boolean;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /** Groups can be aligned to the left or right of its container. */
   floated?: SemanticFLOATS;
 

src/elements/Button/ButtonGroup.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
+  childrenUtils,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -25,6 +26,7 @@ function ButtonGroup(props) {
     className,
     color,
     compact,
+    content,
     floated,
     fluid,
     icon,
@@ -65,7 +67,11 @@ function ButtonGroup(props) {
   const rest = getUnhandledProps(ButtonGroup, props)
   const ElementType = getElementType(ButtonGroup, props)
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenUtils.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 ButtonGroup._meta = {
@@ -99,6 +105,9 @@ ButtonGroup.propTypes = {
   /** Groups can reduce their padding to fit into tighter spaces. */
   compact: PropTypes.bool,
 
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
   /** Groups can be aligned to the left or right of its container. */
   floated: PropTypes.oneOf(SUI.FLOATS),
 

src/elements/Container/Container.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SemanticTEXTALIGNMENTS } from '../..';
+import { SemanticShorthandContent, SemanticTEXTALIGNMENTS } from '../..';
 
 export interface ContainerProps {
   [key: string]: any;
@@ -13,6 +13,9 @@ export interface ContainerProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: SemanticShorthandContent;
+
   /** Container has no maximum width. */
   fluid?: boolean;