Merge pull request #331 from Kadinvanvalin/master

apply classnames to panel component

Author: joshhidley

packages/visual-stack/src/components/Panel.js

@@ -2,15 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Panel.css';
 import { deprecated } from 'prop-types-extra';
-
-export const Panel = ({ children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel vs-panel-default">
+import cn from 'classnames';
+export const Panel = ({ children, className, ...restProps }) => (
+  <div
+    {...restProps}
+    className={cn(className, 'cj-panel', 'panel', 'vs-panel-default')}
+  >
     {children}
   </div>
 );
 
-export const Footer = ({ children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel-footer">
+export const Footer = ({ children, className, ...restProps }) => (
+  <div {...restProps} className={cn(className, 'cj-panel', 'panel-footer')}>
     {children}
   </div>
 );
@@ -20,7 +23,13 @@ const paddingMapping = {
   large: 'wide',
 };
 
-export const Body = ({ children, paddingSize, padding, ...restProps }) => {
+export const Body = ({
+  children,
+  paddingSize,
+  padding,
+  className,
+  ...restProps
+}) => {
   const paddingSizeClass = paddingSize
     ? `cj-panel-body-padding-${paddingSize}`
     : '';
@@ -30,15 +39,21 @@ export const Body = ({ children, paddingSize, padding, ...restProps }) => {
   return (
     <div
       {...restProps}
-      className={`cj-panel panel-body ${paddingSizeClass} ${paddingClass}`}
+      className={cn(
+        className,
+        'cj-panel',
+        'panel-body',
+        paddingSizeClass,
+        paddingClass
+      )}
     >
       {children}
     </div>
   );
 };
 
-export const Header = ({ title, children, ...restProps }) => (
-  <div {...restProps} className="cj-panel panel-heading">
+export const Header = ({ title, children, className, ...restProps }) => (
+  <div {...restProps} className={cn(className, 'cj-panel', 'panel-heading')}>
     {title && <legend>{title}</legend>}
     {children}
   </div>