feat(card-skeleton): allow custom classname and extra props via sprea…

…d attr (#405)

* feat(card-skeleton): allow custom classname and extra props via spread attr

* fix(card-skeleton): remove brackets from proptypes import

src/components/Card/CardSkeleton/CardSkeleton.js

@@ -3,39 +3,54 @@
  * @copyright IBM Security 2019
  */
 
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { getComponentNamespace } from '../../../globals/namespace/index';
 
-import Card from '..';
+import Card from '../Card';
 import SkeletonText from '../../SkeletonText';
 
 const namespace = getComponentNamespace('card--skeleton');
 
-const WIDTHS = {
-  sm: '25%',
-  md: '50%',
-  lg: '75%',
-};
-
-const { sm, md, lg } = WIDTHS;
-
 /**
  * Card skeleton component.
  */
-const CardSkeleton = () => (
-  <Card className={namespace}>
-    <SkeletonText width={sm} />
-    <SkeletonText width={sm} heading />
-    <SkeletonText width={md} />
-    <SkeletonText width={md} />
-    <SkeletonText width={lg} />
-
-    <div className={`${namespace}__wrapper`}>
-      <SkeletonText className={`${namespace}__text--inline`} width={sm} />
+function CardSkeleton({ className, ...other }) {
+  const classes = classnames(namespace, className);
+
+  const widths = {
+    sm: '25%',
+    md: '50%',
+    lg: '75%',
+  };
+
+  const { sm, md, lg } = widths;
+
+  return (
+    <Card className={classes} {...other}>
       <SkeletonText width={sm} />
-    </div>
-  </Card>
-);
+      <SkeletonText width={sm} heading />
+      <SkeletonText width={md} />
+      <SkeletonText width={md} />
+      <SkeletonText width={lg} />
+
+      <div className={`${namespace}__wrapper`}>
+        <SkeletonText className={`${namespace}__text--inline`} width={sm} />
+        <SkeletonText width={sm} />
+      </div>
+    </Card>
+  );
+}
+
+CardSkeleton.propTypes = {
+  /** Extra classes to add. */
+  className: PropTypes.string,
+};
+
+CardSkeleton.defaultProps = {
+  className: null,
+};
 
 export default CardSkeleton;