style(Card): update typings and propTypes usage (Semantic-Org#1284)

Author: layershifter

src/views/Card/Card.js

@@ -11,23 +11,14 @@ import {
   useKeyOnly,
 } from '../../lib'
 import Image from '../../elements/Image'
-
 import CardContent from './CardContent'
 import CardDescription from './CardDescription'
 import CardGroup from './CardGroup'
 import CardHeader from './CardHeader'
 import CardMeta from './CardMeta'
 
-const _meta = {
-  name: 'Card',
-  type: META.TYPES.VIEW,
-  props: {
-    color: SUI.COLORS,
-  },
-}
-
 /**
- * A card displays site content in a manner similar to a playing card
+ * A card displays site content in a manner similar to a playing card.
  */
 export default class Card extends Component {
   static propTypes = {
@@ -44,7 +35,7 @@ export default class Card extends Component {
     className: PropTypes.string,
 
     /** A Card can be formatted to display different colors. */
-    color: PropTypes.oneOf(_meta.props.color),
+    color: PropTypes.oneOf(SUI.COLORS),
 
     /** Shorthand for CardDescription. */
     description: customPropTypes.itemShorthand,
@@ -80,7 +71,10 @@ export default class Card extends Component {
     raised: PropTypes.bool,
   }
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Card',
+    type: META.TYPES.VIEW,
+  }
 
   static Content = CardContent
   static Description = CardDescription

src/views/Card/CardContent.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -15,10 +15,18 @@ import CardHeader from './CardHeader'
 import CardMeta from './CardMeta'
 
 /**
- * A card can contain blocks of content or extra content meant to be formatted separately from the main content
+ * A card can contain blocks of content or extra content meant to be formatted separately from the main content.
  */
 function CardContent(props) {
-  const { children, className, description, extra, header, meta } = props
+  const {
+    children,
+    className,
+    description,
+    extra,
+    header,
+    meta,
+  } = props
+
   const classes = cx(
     className,
     useKeyOnly(extra, 'extra'),
@@ -59,7 +67,7 @@ CardContent.propTypes = {
   /** Shorthand for CardDescription. */
   description: customPropTypes.itemShorthand,
 
-  /** A card can contain extra content meant to be formatted separately from the main content */
+  /** A card can contain extra content meant to be formatted separately from the main content. */
   extra: PropTypes.bool,
 
   /** Shorthand for CardHeader. */

src/views/Card/CardDescription.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,15 +10,19 @@ import {
 } from '../../lib'
 
 /**
- * A card can contain a description with one or more paragraphs
+ * A card can contain a description with one or more paragraphs.
  */
 function CardDescription(props) {
   const { children, className, content } = props
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(CardDescription, props)
   const ElementType = getElementType(CardDescription, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 CardDescription._meta = {

src/views/Card/CardGroup.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -17,11 +17,19 @@ import Card from './Card'
  * A group of cards.
  */
 function CardGroup(props) {
-  const { children, className, doubling, items, itemsPerRow, stackable } = props
+  const {
+    children,
+    className,
+    doubling,
+    items,
+    itemsPerRow,
+    stackable,
+  } = props
+
   const classes = cx('ui',
-    useWidthProp(itemsPerRow),
     useKeyOnly(doubling, 'doubling'),
     useKeyOnly(stackable, 'stackable'),
+    useWidthProp(itemsPerRow),
     className,
     'cards',
   )
@@ -43,9 +51,6 @@ function CardGroup(props) {
 CardGroup._meta = {
   name: 'CardGroup',
   parent: 'Card',
-  props: {
-    itemsPerRow: SUI.WIDTHS,
-  },
   type: META.TYPES.VIEW,
 }
 
@@ -59,16 +64,16 @@ CardGroup.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
-  /** A group of cards can double its column width for mobile */
+  /** A group of cards can double its column width for mobile. */
   doubling: PropTypes.bool,
 
   /** Shorthand array of props for Card. */
   items: customPropTypes.collectionShorthand,
 
-  /** A group of cards can set how many cards should exist in a row */
-  itemsPerRow: PropTypes.oneOf(CardGroup._meta.props.itemsPerRow),
+  /** A group of cards can set how many cards should exist in a row. */
+  itemsPerRow: PropTypes.oneOf(SUI.WIDTHS),
 
-  /** A group of cards can automatically stack rows to a single columns on mobile devices */
+  /** A group of cards can automatically stack rows to a single columns on mobile devices. */
   stackable: PropTypes.bool,
 }
 

src/views/Card/CardHeader.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,15 +10,19 @@ import {
 } from '../../lib'
 
 /**
- * A card can contain a header
+ * A card can contain a header.
  */
 function CardHeader(props) {
   const { children, className, content } = props
   const classes = cx(className, 'header')
   const rest = getUnhandledProps(CardHeader, props)
   const ElementType = getElementType(CardHeader, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 CardHeader._meta = {

src/views/Card/CardMeta.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,15 +10,19 @@ import {
 } from '../../lib'
 
 /**
- * A card can contain content metadata
+ * A card can contain content metadata.
  */
 function CardMeta(props) {
   const { children, className, content } = props
   const classes = cx(className, 'meta')
   const rest = getUnhandledProps(CardMeta, props)
   const ElementType = getElementType(CardMeta, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 CardMeta._meta = {

src/views/Card/index.d.ts

@@ -1,7 +1,8 @@
-import { ReactMouseEvents, SemanticCOLORS, SemanticWIDTHS } from '../..';
 import * as React from 'react';
+import { SemanticCOLORS, SemanticWIDTHS } from '../..';
 
-interface CardProps extends ReactMouseEvents<HTMLElement> {
+interface CardProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -46,23 +47,25 @@ interface CardProps extends ReactMouseEvents<HTMLElement> {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClick?: React.MouseEventHandler<any>;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: CardProps) => void;
 
   /** A Card can be formatted to raise above the page. */
   raised?: boolean;
 }
 
-interface CardClass extends React.ComponentClass<CardProps> {
+interface CardComponent extends React.ComponentClass<CardProps> {
   Content: typeof CardContent;
   Description: typeof CardDescription;
   Group: typeof CardGroup;
   Header: typeof CardHeader;
   Meta: typeof CardMeta;
 }
 
-export const Card: CardClass;
+export const Card: CardComponent;
 
 interface CardContentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -75,7 +78,7 @@ interface CardContentProps {
   /** Shorthand for CardDescription. */
   description?: string;
 
-  /** A card can contain extra content meant to be formatted separately from the main content */
+  /** A card can contain extra content meant to be formatted separately from the main content. */
   extra?: boolean;
 
   /** Shorthand for CardHeader. */
@@ -85,9 +88,11 @@ interface CardContentProps {
   meta?: any;
 }
 
-export const CardContent: React.ComponentClass<CardContentProps>;
+export const CardContent: React.StatelessComponent<CardContentProps>;
 
 interface CardDescriptionProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -98,12 +103,14 @@ interface CardDescriptionProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const CardDescription: React.ComponentClass<CardDescriptionProps>;
+export const CardDescription: React.StatelessComponent<CardDescriptionProps>;
 
 interface CardGroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -113,22 +120,24 @@ interface CardGroupProps {
   /** Additional classes. */
   className?: string;
 
-  /** A group of cards can double its column width for mobile */
+  /** A group of cards can double its column width for mobile. */
   doubling?: boolean;
 
   /** Shorthand array of props for Card. */
   items?: Array<any>;
 
-  /** A group of cards can set how many cards should exist in a row */
+  /** A group of cards can set how many cards should exist in a row. */
   itemsPerRow?: SemanticWIDTHS;
 
-  /** A group of cards can automatically stack rows to a single columns on mobile devices */
+  /** A group of cards can automatically stack rows to a single columns on mobile devices. */
   stackable?: boolean;
 }
 
-export const CardGroup: React.ComponentClass<CardGroupProps>;
+export const CardGroup: React.StatelessComponent<CardGroupProps>;
 
 interface CardHeaderProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -139,12 +148,14 @@ interface CardHeaderProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const CardHeader: React.ComponentClass<CardHeaderProps>;
+export const CardHeader: React.StatelessComponent<CardHeaderProps>;
 
 interface CardMetaProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -155,7 +166,7 @@ interface CardMetaProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 }
 
-export const CardMeta: React.ComponentClass<CardMetaProps>;
+export const CardMeta: React.StatelessComponent<CardMetaProps>;

test/specs/views/Card/Card-test.js

@@ -1,23 +1,27 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
-import { sandbox } from 'test/utils'
+import { SUI } from 'src/lib'
 import Card from 'src/views/Card/Card'
 import CardContent from 'src/views/Card/CardContent'
 import CardDescription from 'src/views/Card/CardDescription'
 import CardGroup from 'src/views/Card/CardGroup'
 import CardHeader from 'src/views/Card/CardHeader'
 import CardMeta from 'src/views/Card/CardMeta'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 describe('Card', () => {
   common.isConformant(Card)
-  common.hasUIClassName(Card)
   common.hasSubComponents(Card, [CardContent, CardDescription, CardGroup, CardHeader, CardMeta])
+  common.hasUIClassName(Card)
+  common.rendersChildren(Card)
+
   common.propKeyOnlyToClassName(Card, 'centered')
   common.propKeyOnlyToClassName(Card, 'fluid')
   common.propKeyOnlyToClassName(Card, 'raised')
-  common.rendersChildren(Card)
+
+  common.propValueOnlyToClassName(Card, 'color', SUI.COLORS)
 
   it('renders a <div> by default', () => {
     shallow(<Card />).should.have.tagName('div')