style(Statistic): update typings and propTypes usage (Semantic-Org#1232)

* style(Statistic): update typings and propTypes usage

* style(Statistic): update typings and propTypes usage

Author: layershifter

src/views/Statistic/Statistic.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -16,26 +16,36 @@ import StatisticLabel from './StatisticLabel'
 import StatisticValue from './StatisticValue'
 
 /**
- * A statistic emphasizes the current value of an attribute
+ * A statistic emphasizes the current value of an attribute.
  */
 function Statistic(props) {
-  const { children, className, color, floated, horizontal, inverted, label, size, text, value } = props
+  const {
+    children,
+    className,
+    color,
+    floated,
+    horizontal,
+    inverted,
+    label,
+    size,
+    text,
+    value,
+  } = props
+
   const classes = cx(
     'ui',
     color,
+    size,
     useValueAndKey(floated, 'floated'),
     useKeyOnly(horizontal, 'horizontal'),
     useKeyOnly(inverted, 'inverted'),
-    size,
-    className,
     'statistic',
+    className,
   )
   const rest = getUnhandledProps(Statistic, props)
   const ElementType = getElementType(Statistic, props)
 
-  if (!_.isNil(children)) {
-    return <ElementType {...rest} className={classes}>{children}</ElementType>
-  }
+  if (!_.isNil(children)) return <ElementType {...rest} className={classes}>{children}</ElementType>
 
   return (
     <ElementType {...rest} className={classes}>
@@ -48,11 +58,6 @@ function Statistic(props) {
 Statistic._meta = {
   name: 'Statistic',
   type: META.TYPES.VIEW,
-  props: {
-    color: SUI.COLORS,
-    floated: SUI.FLOATS,
-    size: _.without(SUI.SIZES, 'big', 'massive', 'medium'),
-  },
 }
 
 Statistic.propTypes = {
@@ -66,10 +71,10 @@ Statistic.propTypes = {
   className: PropTypes.string,
 
   /** A statistic can be formatted to be different colors. */
-  color: PropTypes.oneOf(Statistic._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
 
   /** A statistic can sit to the left or right of other content. */
-  floated: PropTypes.oneOf(Statistic._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** A statistic can present its measurement horizontally. */
   horizontal: PropTypes.bool,
@@ -81,7 +86,7 @@ Statistic.propTypes = {
   label: customPropTypes.contentShorthand,
 
   /** A statistic can vary in size. */
-  size: PropTypes.oneOf(Statistic._meta.props.size),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'big', 'massive', 'medium')),
 
   /** Format the StatisticValue with smaller font size to fit nicely beside number values. */
   text: PropTypes.bool,

src/views/Statistic/StatisticGroup.js

@@ -13,24 +13,35 @@ import {
 } from '../../lib'
 import Statistic from './Statistic'
 
+/**
+ * A group of statistics.
+ */
 function StatisticGroup(props) {
-  const { children, className, color, horizontal, inverted, items, size, widths } = props
+  const {
+    children,
+    className,
+    color,
+    horizontal,
+    inverted,
+    items,
+    size,
+    widths,
+  } = props
+
   const classes = cx(
     'ui',
     color,
+    size,
     useKeyOnly(horizontal, 'horizontal'),
     useKeyOnly(inverted, 'inverted'),
     useWidthProp(widths),
-    size,
     'statistics',
     className,
   )
   const rest = getUnhandledProps(StatisticGroup, props)
   const ElementType = getElementType(StatisticGroup, props)
 
-  if (!_.isNil(children)) {
-    return <ElementType {...rest} className={classes}>{children}</ElementType>
-  }
+  if (!_.isNil(children)) return <ElementType {...rest} className={classes}>{children}</ElementType>
 
   const itemsJSX = _.map(items, item => (
     <Statistic key={item.childKey || [item.label, item.title].join('-')} {...item} />
@@ -43,11 +54,6 @@ StatisticGroup._meta = {
   name: 'StatisticGroup',
   type: META.TYPES.VIEW,
   parent: 'Statistic',
-  props: {
-    color: SUI.COLORS,
-    size: _.without(SUI.SIZES, 'big', 'massive', 'medium'),
-    widths: SUI.WIDTHS,
-  },
 }
 
 StatisticGroup.propTypes = {
@@ -61,7 +67,7 @@ StatisticGroup.propTypes = {
   className: PropTypes.string,
 
   /** A statistic group can be formatted to be different colors. */
-  color: PropTypes.oneOf(StatisticGroup._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
 
   /** A statistic group can present its measurement horizontally. */
   horizontal: PropTypes.bool,
@@ -73,10 +79,10 @@ StatisticGroup.propTypes = {
   items: customPropTypes.collectionShorthand,
 
   /** A statistic group can vary in size. */
-  size: PropTypes.oneOf(StatisticGroup._meta.props.size),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'big', 'massive', 'medium')),
 
   /** A statistic group can have its items divided evenly. */
-  widths: PropTypes.oneOf(StatisticGroup._meta.props.widths),
+  widths: PropTypes.oneOf(SUI.WIDTHS),
 }
 
 export default StatisticGroup

src/views/Statistic/StatisticLabel.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 statistic can contain a label to help provide context for the presented value.
+ */
 function StatisticLabel(props) {
   const { children, className, label } = props
-  const classes = cx(className, 'label')
+  const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
   const ElementType = getElementType(StatisticLabel, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? label : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? label : children}
+    </ElementType>
+  )
 }
 
 StatisticLabel._meta = {

src/views/Statistic/StatisticValue.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,30 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A statistic can contain a numeric, icon, image, or text value.
+ */
 function StatisticValue(props) {
-  const { children, className, text, value } = props
-  const classes = cx(useKeyOnly(text, 'text'), className, 'value')
+  const {
+    children,
+    className,
+    text,
+    value,
+  } = props
+
+  const classes = cx(
+    useKeyOnly(text, 'text'),
+    'value',
+    className,
+  )
   const rest = getUnhandledProps(StatisticValue, props)
   const ElementType = getElementType(StatisticValue, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? value : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? value : children}
+    </ElementType>
+  )
 }
 
 StatisticValue._meta = {

src/views/Statistic/index.d.ts

@@ -1,9 +1,15 @@
-import { Label } from '../../elements/Label';
-import { SemanticCOLORS, SemanticFLOATS, SemanticSIZES, SemanticWIDTHS } from '../..';
 import * as React from 'react';
+import {
+  SemanticCOLORS,
+  SemanticFLOATS,
+  SemanticWIDTHS
+} from '../..';
 
+type StatisticSizeProp = 'mini' | 'tiny' | 'small' | 'large' | 'huge';
 
 interface StatisticProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -29,7 +35,7 @@ interface StatisticProps {
   label?: any;
 
   /** A statistic can vary in size. */
-  size?: SemanticSIZES;
+  size?: StatisticSizeProp;
 
   /** Format the StatisticValue with smaller font size to fit nicely beside number values. */
   text?: boolean;
@@ -38,15 +44,17 @@ interface StatisticProps {
   value?: any;
 }
 
-interface StatisticClass extends React.ComponentClass<StatisticProps> {
+interface StatisticComponent extends React.StatelessComponent<StatisticProps> {
   Group: typeof StatisticGroup;
   Label: typeof StatisticLabel;
   Value: typeof StatisticValue;
 }
 
-export const Statistic: StatisticClass;
+export const Statistic: StatisticComponent;
 
 interface StatisticGroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -69,15 +77,17 @@ interface StatisticGroupProps {
   items?: any;
 
   /** A statistic group can vary in size. */
-  size?: SemanticSIZES;
+  size?: StatisticSizeProp;
 
   /** A statistic group can have its items divided evenly. */
   widths?: SemanticWIDTHS;
 }
 
-export const StatisticGroup: React.ComponentClass<StatisticGroupProps>;
+export const StatisticGroup: React.StatelessComponent<StatisticGroupProps>;
 
 interface StatisticLabelProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -88,12 +98,14 @@ interface StatisticLabelProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  label?: any;
+  label?: React.ReactNode;
 }
 
-export const StatisticLabel: React.ComponentClass<StatisticLabelProps>;
+export const StatisticLabel: React.StatelessComponent<StatisticLabelProps>;
 
 interface StatisticValueProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -107,7 +119,7 @@ interface StatisticValueProps {
   text?: boolean;
 
   /** Primary content of the StatisticValue. Mutually exclusive with the children prop. */
-  value?: any;
+  value?: React.ReactNode;
 }
 
-export const StatisticValue: React.ComponentClass<StatisticValueProps>;
+export const StatisticValue: React.StatelessComponent<StatisticValueProps>;

test/specs/views/Stastistic/StatisticLabel-test.js

@@ -1,8 +1,8 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
 import StatisticLabel from 'src/views/Statistic/StatisticLabel'
+import * as common from 'test/specs/commonTests'
 
 describe('StatisticLabel', () => {
   common.isConformant(StatisticLabel)

test/specs/views/Stastistic/StatisticValue-test.js

@@ -1,12 +1,13 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
 import StatisticValue from 'src/views/Statistic/StatisticValue'
+import * as common from 'test/specs/commonTests'
 
 describe('StatisticValue', () => {
   common.isConformant(StatisticValue)
   common.rendersChildren(StatisticValue)
+
   common.propKeyOnlyToClassName(StatisticValue, 'text')
 
   it('renders text with label prop', () => {