feat(accordian): adds accordian component

includes drawer slide up down fragment and style cleanup

src/components/accordian/Accordian.jsx

@@ -5,6 +5,7 @@ import AccordianTitle from './AccordianTitle'
 import AccordianPrimaryAction from './AccordianPrimaryAction'
 import AccordianActionButton from './AccordianActionButton'
 import AccordianWidget from './AccordianWidget'
+import AccordianDrawer from './AccordianDrawer';
 import '../../styles/components/accordian.css'
 
 
@@ -18,23 +19,34 @@ class Accordian extends React.Component {
   static PrimaryAction = AccordianPrimaryAction
   static ActionButon = AccordianActionButton
   static Widget = AccordianWidget
+  static Drawer = AccordianDrawer
 
   render() {
+    let borderClass = '';
+    if (this.props.noBorder){
+      borderClass = 'noborder';
+    }
     return (
-      <Flexbox flexDirection="column" className="og__group og__row" key={this.props.data.id}>
+      <Flexbox flexDirection="column" className={`accordian__row ${borderClass}`} key={this.props.data.id}>
 
         {(this.props.folder) ? (
           <div className="topedge"></div>
         ) : ''
         }
-        <Flexbox flexDirection="row" flexGrow={3}>
+        <Flexbox flexDirection="row" flexGrow={3} className="primary-content">
         {this.props.children}
         </Flexbox>
+        {this.props.drawer}
       </Flexbox>
     )
   }
 }
+Accordian.defaultProps = {
+  folder: true,
+  noBorder: false
+}
 Accordian.propTypes = {
-  folder: React.PropTypes.bool
+  folder: React.PropTypes.bool,
+  noBorder: React.PropTypes.bool,
 }
 export default Accordian

src/components/accordian/AccordianActionButton.jsx

@@ -3,9 +3,9 @@ import Flexbox from 'flexbox-react'
 
 const AccordianActionButton = (props) => {
   return (
-    <Flexbox alignItems="center" flexGrow={3}>
-      <div onClick={props.onClick} className={`operation__group_list_manage ${props.ClassName}`} style={props.style}>
-          {props.children}
+    <Flexbox alignItems='center' flexGrow={3}>
+      <div onClick={props.onClick} className={`accordian__action_button ${props.ClassName}`} style={props.style}>
+        {props.children}
       </div>
     </Flexbox>
   )

src/components/accordian/AccordianDrawer.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import Icon from '../suir/icon/Icon'
+
+const AccordianDrawer = (props) => {
+  return (
+    <div>
+
+      {(!props.expanded) ? (
+        <Flexbox className='drawer' flexDirection='row' onClick={props.expandGroupToggle}>
+          <Flexbox className='drawer__side' flexGrow={3} />
+          <Flexbox className='drawer__center' width='150px' paddingLeft='1em' paddingRight='1em'>
+            <Flexbox alignItems='center' className='drawer__center_copy' flexGrow={2}>EXPAND</Flexbox>
+            <Flexbox><Icon className='ei arrow_carrot-down text-large' /></Flexbox>
+          </Flexbox>
+          <Flexbox className='drawer__side' flexGrow={3} />
+        </Flexbox>
+        ) : (
+          <div>
+            {props.children}
+            <Flexbox className='drawer' onClick={props.expandGroupToggle}>
+
+              <Flexbox className='drawer__center' width='100%' justifyContent='center' paddingLeft='1em' paddingRight='1em'>
+                <Flexbox alignItems='center' className='drawer__center_copy'>COLLAPSE</Flexbox>
+                <Flexbox><Icon className='ei arrow_carrot-up text-large' /></Flexbox>
+              </Flexbox>
+
+            </Flexbox>
+          </div>
+        )
+    }
+    </div>
+  )
+}
+
+AccordianDrawer.defaultProps = {
+  expanded: false
+}
+AccordianDrawer.propTypes = {
+  expanded: React.PropTypes.bool
+
+}
+export default AccordianDrawer

src/components/accordian/AccordianPrimaryAction.jsx

@@ -3,8 +3,8 @@ import Flexbox from 'flexbox-react'
 
 const AccordianPrimaryAction = (props) => {
   return (
-    <Flexbox alignItems="center" className={`og__groupBox_play ${props.className}`}>
-        {props.children}
+    <Flexbox alignItems='center' className={`accordian__primary_action ${props.className}`}>
+      {props.children}
     </Flexbox>
   )
 }

src/components/accordian/AccordianTitle.jsx

@@ -3,8 +3,8 @@ import Flexbox from 'flexbox-react'
 
 const AccordianTitle = (props) => {
   return (
-    <Flexbox alignItems="center" className="operation_group_list_item_name">
-        {props.children}
+    <Flexbox alignItems='center' className='accordian__title'>
+      {props.children}
     </Flexbox>
   )
 }

src/components/accordian/AccordianWidgetLabel.jsx

@@ -3,8 +3,8 @@ import Flexbox from 'flexbox-react'
 
 const AccordianWidgetLabel = (props) => {
   return (
-    <Flexbox alignItems="center" className={` ${props.className} og__title`} style={props.style}>
-        {props.children}
+    <Flexbox alignItems='center' className={` ${props.className} accordian__widget_label`} style={props.style}>
+      {props.children}
     </Flexbox>
   )
 }

src/components/accordian/AccordianWidgetValue.jsx

@@ -3,8 +3,8 @@ import Flexbox from 'flexbox-react'
 
 const AccordianWidgetValue = (props) => {
   return (
-    <Flexbox alignItems="center" className="operation__group_list_item_assets_value">
-        {props.children}
+    <Flexbox alignItems='center' className='accordian__widget_value'>
+      {props.children}
     </Flexbox>
   )
 }