style(Checkbox|Flag|Image|Radio): propTypes cleanups and typings upda…

…te (#1155)

* style(Checkbox|Flag|Image|Radio): propTypes cleanups

* chore(commonTest): remove obsolete assertions

* fix(EmbedTest): fix lint issue

* test(commonTest): update commonTests

* style(EmbedTest): fix lint issue

src/addons/Radio/Radio.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 
 import { getUnhandledProps, META } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
@@ -23,20 +23,17 @@ function Radio(props) {
 Radio._meta = {
   name: 'Radio',
   type: META.TYPES.ADDON,
-  props: {
-    type: Checkbox._meta.props.type,
-  },
 }
 
 Radio.propTypes = {
-  /** Format to emphasize the current selection state */
+  /** Format to emphasize the current selection state. */
   slider: Checkbox.propTypes.slider,
 
-  /** Format to show an on or off choice */
+  /** Format to show an on or off choice. */
   toggle: Checkbox.propTypes.toggle,
 
   /** HTML input type, either checkbox or radio. */
-  type: PropTypes.oneOf(Radio._meta.props.type),
+  type: Checkbox.propTypes.type,
 }
 
 Radio.defaultProps = {

src/addons/Radio/index.d.ts

@@ -1,4 +1,16 @@
-import { CheckboxProps } from '../../modules/Checkbox/index';
 import * as React from 'react';
 
-export const Radio: React.ComponentClass<CheckboxProps>;
+interface RadioProps {
+  [key: string]: any;
+
+  /** Format to emphasize the current selection state. */
+  slider?: boolean;
+
+  /** Format to show an on or off choice. */
+  toggle?: boolean;
+
+  /** HTML input type, either checkbox or radio. */
+  type?: 'checkbox' | 'radio';
+}
+
+export const Radio: React.StatelessComponent<RadioProps>;

src/collections/Menu/Menu.js

@@ -35,7 +35,7 @@ const _meta = {
 
 /**
  * A menu displays grouped navigation actions.
- **/
+ */
 class Menu extends Component {
   static propTypes = {
     /** An element type to render as (string or function). */

src/elements/Flag/Flag.js

@@ -53,9 +53,12 @@ const names = [
   'ye', 'yemen', 'yt', 'mayotte', 'za', 'south africa', 'zm', 'zambia', 'zw', 'zimbabwe',
 ]
 
+/**
+ * A flag is is used to represent a political state.
+ */
 function Flag(props) {
   const { className, name } = props
-  const classes = cx(name, className, 'flag')
+  const classes = cx(name, 'flag', className)
   const rest = getUnhandledProps(Flag, props)
   const ElementType = getElementType(Flag, props)
 
@@ -65,9 +68,6 @@ function Flag(props) {
 Flag._meta = {
   name: 'Flag',
   type: META.TYPES.ELEMENT,
-  props: {
-    name: names,
-  },
 }
 
 Flag.propTypes = {
@@ -77,8 +77,8 @@ Flag.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
-  /** Flag name, can use the two digit country code, the full name, or a common alias */
-  name: customPropTypes.suggest(Flag._meta.props.name),
+  /** Flag name, can use the two digit country code, the full name, or a common alias. */
+  name: customPropTypes.suggest(names),
 }
 
 Flag.defaultProps = {
@@ -88,4 +88,3 @@ Flag.defaultProps = {
 Flag.create = createShorthandFactory(Flag, value => ({ name: value }))
 
 export default Flag
-

src/elements/Flag/index.d.ts

@@ -1,19 +1,17 @@
-import { ReactMouseEvents, SemanticCOUNTRY } from '../..';
 import * as React from 'react';
+import { SemanticCOUNTRY } from '../..';
 
-// Flag
-// ----------------------------------
-interface FlagProps extends ReactMouseEvents<any> {
+interface FlagProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
   /** Additional classes. */
   className?: string;
 
-  /** Flag name, can use the two digit country code, the full name, or a common alias */
+  /** Flag name, can use the two digit country code, the full name, or a common alias. */
   name: SemanticCOUNTRY,
 }
 
-export class Flag extends React.Component<FlagProps, void> {
-}
+export const Flag : React.StatelessComponent<FlagProps>;

src/elements/Image/Image.js

@@ -95,13 +95,6 @@ Image.Group = ImageGroup
 Image._meta = {
   name: 'Image',
   type: META.TYPES.ELEMENT,
-  props: {
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-    floated: SUI.FLOATS,
-    shape: ['rounded', 'circular'],
-    size: SUI.SIZES,
-    spaced: ['left', 'right'],
-  },
 }
 
 Image.propTypes = {
@@ -133,7 +126,7 @@ Image.propTypes = {
   dimmer: customPropTypes.itemShorthand,
 
   /** An image can sit to the left or right of other content. */
-  floated: PropTypes.oneOf(Image._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** An image can take up the width of its container. */
   fluid: customPropTypes.every([
@@ -160,15 +153,15 @@ Image.propTypes = {
   label: customPropTypes.itemShorthand,
 
   /** An image may appear rounded or circular. */
-  shape: PropTypes.oneOf(Image._meta.props.shape),
+  shape: PropTypes.oneOf(['rounded', 'circular']),
 
   /** An image may appear at different sizes. */
-  size: PropTypes.oneOf(Image._meta.props.size),
+  size: PropTypes.oneOf(SUI.SIZES),
 
   /** An image can specify that it needs an additional spacing to separate it from nearby content. */
   spaced: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Image._meta.props.spaced),
+    PropTypes.oneOf(['left', 'right']),
   ]),
 
   /** Specifies the URL of the image. */
@@ -177,16 +170,16 @@ Image.propTypes = {
   /** Whether or not to add the ui className. */
   ui: PropTypes.bool,
 
-  /** An image can specify its vertical alignment */
-  verticalAlign: PropTypes.oneOf(Image._meta.props.verticalAlign),
+  /** An image can specify its vertical alignment. */
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 
-  /** The img element width attribute */
+  /** The img element width attribute. */
   width: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
 
-  /** An image can render wrapped in a `div.ui.image` as alternative HTML markup */
+  /** An image can render wrapped in a `div.ui.image` as alternative HTML markup. */
   wrapped: customPropTypes.every([
     PropTypes.bool,
     // these props wrap the image in an a tag already

src/elements/Image/ImageGroup.js

@@ -10,7 +10,7 @@ import {
 } from '../../lib'
 
 /**
- * A group of images
+ * A group of images.
  */
 function ImageGroup(props) {
   const { children, className, size } = props
@@ -25,9 +25,6 @@ ImageGroup._meta = {
   name: 'ImageGroup',
   parent: 'Image',
   type: META.TYPES.ELEMENT,
-  props: {
-    size: SUI.SIZES,
-  },
 }
 
 ImageGroup.propTypes = {
@@ -41,7 +38,7 @@ ImageGroup.propTypes = {
   className: PropTypes.string,
 
   /** A group of images can be formatted to have the same size. */
-  size: PropTypes.oneOf(ImageGroup._meta.props.size),
+  size: PropTypes.oneOf(SUI.SIZES),
 }
 
 export default ImageGroup

src/elements/Image/index.d.ts

@@ -1,6 +1,5 @@
 import { LabelProps } from '../Label';
 import {
-    ReactMouseEvents,
     SemanticFLOATS,
     SemanticSIZES,
     SemanticVERTICALALIGNMENTS,
@@ -9,10 +8,8 @@ import {
 } from '../..';
 import * as React from 'react';
 
-
-// Image
-// ----------------------------------
-export interface ImageProps extends ReactMouseEvents<any> {
+export interface ImageProps {
+  [key: string]: any;
 
   /** Alternate text for the image specified. */
   alt?: string;
@@ -36,7 +33,7 @@ export interface ImageProps extends ReactMouseEvents<any> {
   disabled?: boolean;
 
   /** Shorthand for Dimmer. */
-  dimmer?:any;
+  dimmer?: any;
 
   /** An image can sit to the left or right of other content. */
   floated?: SemanticFLOATS;
@@ -54,10 +51,10 @@ export interface ImageProps extends ReactMouseEvents<any> {
   inline?: boolean;
 
   /** Shorthand for Label. */
-  label?: LabelProps;
+  label?: any | LabelProps;
 
   /** An image may appear rounded or circular. */
-  shape?: boolean |'rounded'|'circular';
+  shape?: 'rounded'|'circular';
 
   /** An image may appear at different sizes. */
   size?: SemanticSIZES;
@@ -71,24 +68,25 @@ export interface ImageProps extends ReactMouseEvents<any> {
   /** Whether or not to add the ui className. */
   ui?: boolean;
 
-  /** An image can specify its vertical alignment */
+  /** An image can specify its vertical alignment. */
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 
-  /** The img element width attribute */
+  /** The img element width attribute. */
   width?: number|SemanticWIDTHSSTRING| SemanticWIDTHSNUMBER;
 
-  /** An image can render wrapped in a `div.ui.image` as alternative HTML markup */
-  wrapped?: any;
+  /** An image can render wrapped in a `div.ui.image` as alternative HTML markup. */
+  wrapped?: boolean;
 }
 
-interface ImageClass extends React.ComponentClass<ImageProps> {
+interface ImageComponent extends React.StatelessComponent<ImageProps> {
   Group: typeof ImageGroup;
 }
 
-export const Image: ImageClass;
+export const Image: ImageComponent;
 
 interface ImageGroupProps {
-
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -101,4 +99,4 @@ interface ImageGroupProps {
   /** A group of images can be formatted to have the same size. */
   size?: SemanticSIZES;
 }
-export const ImageGroup: React.ComponentClass<ImageGroupProps>;
+export const ImageGroup: React.StatelessComponent<ImageGroupProps>;

src/elements/List/List.js

@@ -22,7 +22,7 @@ import ListList from './ListList'
 
 /**
  * A list groups related content
- **/
+ */
 function List(props) {
   const {
     animated,

src/modules/Checkbox/Checkbox.js

@@ -14,19 +14,8 @@ import {
 } from '../../lib'
 const debug = makeDebugger('checkbox')
 
-const _meta = {
-  name: 'Checkbox',
-  type: META.TYPES.MODULE,
-  props: {
-    type: [
-      'checkbox',
-      'radio',
-    ],
-  },
-}
-
 /**
- * A checkbox allows a user to select a value from a small set of options, often binary
+ * A checkbox allows a user to select a value from a small set of options, often binary.
  * @see Form
  * @see Radio
  */
@@ -78,29 +67,29 @@ export default class Checkbox extends Component {
      */
     onClick: PropTypes.func,
 
-    /** Format as a radio element. This means it is an exclusive option.*/
+    /** Format as a radio element. This means it is an exclusive option. */
     radio: customPropTypes.every([
       PropTypes.bool,
       customPropTypes.disallow(['slider', 'toggle']),
     ]),
 
-    /** A checkbox can be read-only and unable to change states */
+    /** A checkbox can be read-only and unable to change states. */
     readOnly: PropTypes.bool,
 
-    /** Format to emphasize the current selection state */
+    /** Format to emphasize the current selection state. */
     slider: customPropTypes.every([
       PropTypes.bool,
       customPropTypes.disallow(['radio', 'toggle']),
     ]),
 
-    /** Format to show an on or off choice */
+    /** Format to show an on or off choice. */
     toggle: customPropTypes.every([
       PropTypes.bool,
       customPropTypes.disallow(['radio', 'slider']),
     ]),
 
     /** HTML input type, either checkbox or radio. */
-    type: PropTypes.oneOf(_meta.props.type),
+    type: PropTypes.oneOf(['checkbox', 'radio']),
 
     /** The HTML input value. */
     value: PropTypes.string,
@@ -121,7 +110,10 @@ export default class Checkbox extends Component {
     'indeterminate',
   ]
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Checkbox',
+    type: META.TYPES.MODULE,
+  }
 
   state = {}