From 05e444a66163446a4cc2dd696f5e8fa22889f708 Mon Sep 17 00:00:00 2001
From: Riadh Habbachi <riadh.habbachi@gmail.com>
Date: Fri, 21 Jul 2017 17:15:54 +0100
Subject: [PATCH] Add an inner class to the Card Component

---
 src/components/BaseComponent.js |  2 +-
 src/components/Card.js          | 35 ++++++++++++++++++---------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/BaseComponent.js b/src/components/BaseComponent.js
index 0af87532..4364a5ea 100644
--- a/src/components/BaseComponent.js
+++ b/src/components/BaseComponent.js
@@ -9,7 +9,7 @@ import Registry from '../utils/Registry';
 import { makeKey } from '../utils/utils';
 import { qFromParams, getOwnQueryParams, getFID, objToQueryString } from '../utils/paramRouting';
 
-const CARD_VARS = ['header', 'footer', 'iconClass', 'cardStyle', 'cardClasses', 'subheader', 'topmatter', 'subheader2', 'topmatter2', 'footerHeader', 'footerSubheader', 'bottommatter', 'footerSubheader2', 'bottommatter2'];
+const CARD_VARS = ['header', 'footer', 'iconClass', 'cardStyle', 'cardClasses', 'cardInnerClasses', 'subheader', 'topmatter', 'subheader2', 'topmatter2', 'footerHeader', 'footerSubheader', 'bottommatter', 'footerSubheader2', 'bottommatter2'];
 
 export default class BaseComponent extends Component {
 
diff --git a/src/components/Card.js b/src/components/Card.js
index d4ab2a96..c8be072f 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -14,6 +14,7 @@ export default class Card extends Component {
     let style = props.style || {};
     let regions = {};
     let classNames = (props.cardClasses || []).join(' ') || '';
+    let classInnerNames = (props.cardInnerClasses || []).join(' ') || '';
 
     CARD_REGIONS.forEach(region => {
       if (props[region]) {
@@ -28,22 +29,24 @@ export default class Card extends Component {
 
     return (
       <div className={'card card-' + props.cardStyle + ' ' + classNames} style={style}>
-        <div className="card-top">
-          {regions.header}
-          {regions.subheader}
-          {regions.topmatter}
-          {regions.subheader2}
-          {regions.topmatter2}
-        </div>
-        <div className="card-content">
-          {props.children}
-        </div>
-        <div className="card-bottom">
-          {regions.footerHeader}
-          {regions.footerSubheader}
-          {regions.bottommatter}
-          {regions.footerSubheader2}
-          {regions.bottommatter2}
+        <div className={ 'card-inner ' + classInnerNames }>
+          <div className="card-top">
+            {regions.header}
+            {regions.subheader}
+            {regions.topmatter}
+            {regions.subheader2}
+            {regions.topmatter2}
+          </div>
+          <div className="card-content">
+            {props.children}
+          </div>
+          <div className="card-bottom">
+            {regions.footerHeader}
+            {regions.footerSubheader}
+            {regions.bottommatter}
+            {regions.footerSubheader2}
+            {regions.bottommatter2}
+          </div>
         </div>
       </div>
     )