chore(Card): add doc blocks to all Card component props

src/views/Card/Card.js

@@ -22,6 +22,7 @@ function Card(props) {
     className,
     color,
     description,
+    extra,
     fluid,
     header,
     href,
@@ -46,15 +47,21 @@ function Card(props) {
   }
   const CardComponent = href || onClick ? 'a' : 'div'
 
+  if (children) {
+    return (
+      <CardComponent {...rest} className={classes} href={href} onClick={handleClick}>
+        {children}
+      </CardComponent>
+    )
+  }
+
   return (
-    <CardComponent
-      {...rest}
-      className={classes}
-      href={href}
-      onClick={handleClick}
-    >
+    <CardComponent {...rest} className={classes} href={href} onClick={handleClick}>
       {createImage(image)}
-      {children || <CardContent description={description} header={header} meta={meta} />}
+      {(description || header || meta) && (
+        <CardContent description={description} header={header} meta={meta} />
+      )}
+      {extra && <CardContent extra>{extra}</CardContent>}
     </CardComponent>
   )
 }
@@ -89,6 +96,12 @@ Card.propTypes = {
     PropTypes.node,
   ]),
 
+  /** Shorthand prop for CardContent containing extra prop. Mutually exclusive with children. */
+  extra: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.node,
+  ]),
+
   /** A Card can be formatted to take up the width of its container. */
   fluid: PropTypes.bool,
 
@@ -101,7 +114,7 @@ Card.propTypes = {
   /** Render as an `a` tag instead of a `div` and adds the href attribute. */
   href: PropTypes.string,
 
-  /** An card can contain image. */
+  /** A card can contain an Image component. */
   image: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.node,

src/views/Card/CardContent.js

@@ -40,26 +40,37 @@ CardContent._meta = {
 }
 
 CardContent.propTypes = {
-  className: PropTypes.string,
+  /** Primary content of the CardContent. Mutually exclusive with all shorthand props. */
   children: customPropTypes.every([
     customPropTypes.disallow(['description', 'header', 'meta']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the CardContent className */
+  className: PropTypes.string,
+
+  /** Shorthand prop for CardDescription. Mutually exclusive with children. */
   description: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
     ]),
   ]),
+
+  /** A card can contain extra content meant to be formatted separately from the main content */
   extra: PropTypes.bool,
+
+  /** Shorthand prop for CardHeader. Mutually exclusive with children. */
   header: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
     ]),
   ]),
+
+  /** Shorthand prop for CardMeta. Mutually exclusive with children. */
   meta: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([

src/views/Card/CardDescription.js

@@ -22,11 +22,16 @@ CardDescription._meta = {
 }
 
 CardDescription.propTypes = {
-  className: PropTypes.string,
+  /** Primary content of the CardDescription. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the CardDescription className. */
+  className: PropTypes.string,
+
+  /** Primary content of the CardDescription. Mutually exclusive with children. */
   content: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([

src/views/Card/CardGroup.js

@@ -40,24 +40,34 @@ CardGroup._meta = {
 }
 
 CardGroup.propTypes = {
-  className: PropTypes.string,
+  /** A group of Card components. Mutually exclusive with items. */
   children: customPropTypes.every([
     customPropTypes.disallow(['items']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the CardGroup className */
+  className: PropTypes.string,
+
+  /** A group of cards can double its column width for mobile */
   doubling: PropTypes.bool,
+
+  /** Shorthand prop for children. Mutually exclusive with children. */
   items: customPropTypes.every([
-    customPropTypes.disallow(['description', 'header']),
+    customPropTypes.disallow(['children']),
     PropTypes.arrayOf(PropTypes.shape({
       description: PropTypes.node,
       meta: PropTypes.node,
       key: PropTypes.string,
       header: PropTypes.node,
     })),
   ]),
+
+  /** A group of cards can set how many cards should exist in a row */
   itemsPerRow: PropTypes.oneOf(CardGroup._meta.props.width),
+
+  /** A group of cards can automatically stack rows to a single columns on mobile devices */
   stackable: PropTypes.bool,
-  width: PropTypes.oneOf(CardGroup._meta.props.width),
 }
 
 export default CardGroup

src/views/Card/CardHeader.js

@@ -22,11 +22,14 @@ CardHeader._meta = {
 }
 
 CardHeader.propTypes = {
-  className: PropTypes.string,
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the CardHeader className */
+  className: PropTypes.string,
+
   content: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([

src/views/Card/CardMeta.js

@@ -22,11 +22,16 @@ CardMeta._meta = {
 }
 
 CardMeta.propTypes = {
-  className: PropTypes.string,
+  /** Primary content of the CardMeta. Mutually exclusive with content. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the CardMeta className */
+  className: PropTypes.string,
+
+  /** Primary content of the CardMeta. Mutually exclusive with children. */
   content: customPropTypes.every([
     customPropTypes.disallow(['children']),
     PropTypes.oneOfType([