fix(naming): better naming

changing naming to be more consistent

src/components/ThinCard/ThinCard.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Flexbox from 'flexbox-react'
+import ThinCardTitle from './ThinCardTitle'
+import ThinCardPrimaryAction from './ThinCardPrimaryAction'
+import ThinCardActionButton from './ThinCardActionButton'
+import ThinCardWidget from './ThinCardWidget'
+import ThinCardDrawer from './ThinCardDrawer';
+import '../../styles/components/thin-card.css'
+
+
+class ThinCard extends React.Component {
+  constructor(props) {
+    super(props)
+
+  }
+
+  static Title = ThinCardTitle
+  static PrimaryAction = ThinCardPrimaryAction
+  static ActionButon = ThinCardActionButton
+  static Widget = ThinCardWidget
+  static Drawer = ThinCardDrawer
+
+  render() {
+    let borderClass = '';
+    if (this.props.noBorder){
+      borderClass = 'thincard__noborder';
+    }
+    if (this.props.folder){
+      borderClass += ' thincard__folderpad'
+    }
+    return (
+      <Flexbox flexDirection="column" className={`thincard__row ${borderClass}`} key={this.props.data.id}>
+
+        {(this.props.folder) ? (
+          <div className="topedge"></div>
+        ) : ''
+        }
+        <Flexbox flexDirection="row" flexGrow={3} className="primary-content">
+        {this.props.children}
+        </Flexbox>
+        {this.props.drawer}
+      </Flexbox>
+    )
+  }
+}
+ThinCard.defaultProps = {
+  folder: true,
+  noBorder: false
+}
+ThinCard.propTypes = {
+  folder: React.PropTypes.bool,
+  noBorder: React.PropTypes.bool,
+}
+export default ThinCard

src/components/ThinCard/ThinCardActionButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const ThinCardActionButton = (props) => {
+  return (
+    <Flexbox alignItems='center' flexGrow={3}>
+      <div onClick={props.onClick} className={`thincard__action_button ${props.ClassName}`} style={props.style}>
+        {props.children}
+      </div>
+    </Flexbox>
+  )
+}
+
+ThinCardActionButton.defaultProps = {
+  style: {},
+  className: {}
+}
+
+ThinCardActionButton.propTypes = {
+  style: React.PropTypes.object,
+  className: React.PropTypes.object,
+  onClick: React.PropTypes.func
+}
+
+export default ThinCardActionButton

src/components/accordian/AccordianDrawer.jsx → src/components/ThinCard/ThinCardDrawer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Flexbox from 'flexbox-react'
 import Icon from '../suir/icon/Icon'
 
-const AccordianDrawer = (props) => {
+const ThinCardDrawer = (props) => {
   return (
     <div>
 
@@ -33,11 +33,12 @@ const AccordianDrawer = (props) => {
   )
 }
 
-AccordianDrawer.defaultProps = {
+ThinCardDrawer.defaultProps = {
   expanded: false
 }
-AccordianDrawer.propTypes = {
-  expanded: React.PropTypes.bool
+ThinCardDrawer.propTypes = {
+  expanded: React.PropTypes.bool,
+  onClick: React.PropTypes.func
 
 }
-export default AccordianDrawer
+export default ThinCardDrawer

src/components/ThinCard/ThinCardPrimaryAction.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const ThinCardPrimaryAction = (props) => {
+  return (
+    <Flexbox alignItems='center' className={`thincard__primary_action ${props.className}`} style={props.style}>
+      {props.children}
+    </Flexbox>
+  )
+}
+
+ThinCardPrimaryAction.defaultProps = {
+  style: {},
+  className: {}
+}
+
+ThinCardPrimaryAction.propTypes = {
+  style: React.PropTypes.object,
+  className: React.PropTypes.object
+}
+
+export default ThinCardPrimaryAction

src/components/ThinCard/ThinCardTitle.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const ThinCardTitle = (props) => {
+  return (
+    <Flexbox alignItems='center' className={`thincard__title ${props.className}`} style={props.style}>
+      {props.children}
+    </Flexbox>
+  )
+}
+
+ThinCardTitle.defaultProps = {
+  style: {},
+  className: {}
+}
+
+ThinCardTitle.propTypes = {
+  style: React.PropTypes.object,
+  className: React.PropTypes.object
+}
+
+export default ThinCardTitle

src/components/accordian/AccordianWidget.jsx → src/components/ThinCard/ThinCardWidget.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import Flexbox from 'flexbox-react'
-import AccordianWidgetLabel from './AccordianWidgetLabel'
-import AccordianWidgetValue from './AccordianWidgetValue'
+import ThinCardWidgetLabel from './ThinCardWidgetLabel'
+import ThinCardWidgetValue from './ThinCardWidgetValue'
 
-class AccordianWidget extends React.Component {
+class ThinCardWidget extends React.Component {
   constructor(props) {
     super(props)
 
   }
 
-  static Label = AccordianWidgetLabel
-  static Value = AccordianWidgetValue
+  static Label = ThinCardWidgetLabel
+  static Value = ThinCardWidgetValue
 
   render(){
     let borderClass = '';
@@ -29,14 +29,16 @@ class AccordianWidget extends React.Component {
   }
 }
 
-AccordianWidget.defaultProps = {
+ThinCardWidget.defaultProps = {
     borderLeft: false,
     borderRight: false,
 }
 
-AccordianWidget.propTypes = {
+ThinCardWidget.propTypes = {
     borderLeft: React.PropTypes.bool,
     borderRight: React.PropTypes.bool,
+    className: React.PropTypes.object,
+    onClick: React.PropTypes.func
 }
 
-export default AccordianWidget
+export default ThinCardWidget

src/components/ThinCard/ThinCardWidgetLabel.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const ThinCardWidgetLabel = (props) => {
+  return (
+    <Flexbox alignItems='center' className={` ${props.className} thincard__widget_label`} style={props.style}>
+      {props.children}
+    </Flexbox>
+  )
+}
+
+ThinCardWidgetLabel.defaultProps = {
+  style: {},
+  className: {}
+}
+
+ThinCardWidgetLabel.propTypes = {
+  style: React.PropTypes.object,
+  className: React.PropTypes.object
+}
+
+export default ThinCardWidgetLabel

src/components/ThinCard/ThinCardWidgetValue.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const ThinCardWidgetValue = (props) => {
+  return (
+    <Flexbox alignItems='center' className={` ${props.className} thincard__widget_value`} style={props.style}>
+      {props.children}
+    </Flexbox>
+  )
+}
+ThinCardWidgetValue.defaultProps = {
+  style: {},
+  className: {}
+}
+
+ThinCardWidgetValue.propTypes = {
+  style: React.PropTypes.object,
+  className: React.PropTypes.object
+}
+export default ThinCardWidgetValue