From 4a8f96f03662c9267888147ad7d31d83dde08035 Mon Sep 17 00:00:00 2001
From: Edward Raffaele <eraffaele@gmail.com>
Date: Thu, 9 Mar 2017 09:23:23 -0800
Subject: [PATCH] fix(naming): better naming

changing naming to be more consistent
---
 src/components/ThinCard/ThinCard.jsx          | 55 +++++++++++++++++++
 .../ThinCard/ThinCardActionButton.jsx         | 25 +++++++++
 .../ThinCardDrawer.jsx}                       | 11 ++--
 .../ThinCard/ThinCardPrimaryAction.jsx        | 22 ++++++++
 src/components/ThinCard/ThinCardTitle.jsx     | 22 ++++++++
 .../ThinCardWidget.jsx}                       | 18 +++---
 .../ThinCard/ThinCardWidgetLabel.jsx          | 22 ++++++++
 .../ThinCard/ThinCardWidgetValue.jsx          | 20 +++++++
 src/components/accordian/Accordian.jsx        | 55 -------------------
 .../accordian/AccordianActionButton.jsx       | 22 --------
 .../accordian/AccordianPrimaryAction.jsx      | 20 -------
 src/components/accordian/AccordianTitle.jsx   | 20 -------
 .../accordian/AccordianWidgetLabel.jsx        | 20 -------
 .../accordian/AccordianWidgetValue.jsx        | 20 -------
 .../{accordian.css => thin-card.css}          | 18 +++---
 stories/card.stories.js                       | 49 +++++++++--------
 16 files changed, 216 insertions(+), 203 deletions(-)
 create mode 100644 src/components/ThinCard/ThinCard.jsx
 create mode 100644 src/components/ThinCard/ThinCardActionButton.jsx
 rename src/components/{accordian/AccordianDrawer.jsx => ThinCard/ThinCardDrawer.jsx} (86%)
 create mode 100644 src/components/ThinCard/ThinCardPrimaryAction.jsx
 create mode 100644 src/components/ThinCard/ThinCardTitle.jsx
 rename src/components/{accordian/AccordianWidget.jsx => ThinCard/ThinCardWidget.jsx} (64%)
 create mode 100644 src/components/ThinCard/ThinCardWidgetLabel.jsx
 create mode 100644 src/components/ThinCard/ThinCardWidgetValue.jsx
 delete mode 100644 src/components/accordian/Accordian.jsx
 delete mode 100644 src/components/accordian/AccordianActionButton.jsx
 delete mode 100644 src/components/accordian/AccordianPrimaryAction.jsx
 delete mode 100644 src/components/accordian/AccordianTitle.jsx
 delete mode 100644 src/components/accordian/AccordianWidgetLabel.jsx
 delete mode 100644 src/components/accordian/AccordianWidgetValue.jsx
 rename src/styles/components/{accordian.css => thin-card.css} (88%)

diff --git a/src/components/ThinCard/ThinCard.jsx b/src/components/ThinCard/ThinCard.jsx
new file mode 100644
index 0000000..41a0290
--- /dev/null
+++ b/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
diff --git a/src/components/ThinCard/ThinCardActionButton.jsx b/src/components/ThinCard/ThinCardActionButton.jsx
new file mode 100644
index 0000000..4f75f3a
--- /dev/null
+++ b/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
diff --git a/src/components/accordian/AccordianDrawer.jsx b/src/components/ThinCard/ThinCardDrawer.jsx
similarity index 86%
rename from src/components/accordian/AccordianDrawer.jsx
rename to src/components/ThinCard/ThinCardDrawer.jsx
index b6f65bc..77325eb 100644
--- a/src/components/accordian/AccordianDrawer.jsx
+++ b/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
diff --git a/src/components/ThinCard/ThinCardPrimaryAction.jsx b/src/components/ThinCard/ThinCardPrimaryAction.jsx
new file mode 100644
index 0000000..81b530a
--- /dev/null
+++ b/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
diff --git a/src/components/ThinCard/ThinCardTitle.jsx b/src/components/ThinCard/ThinCardTitle.jsx
new file mode 100644
index 0000000..56dec6b
--- /dev/null
+++ b/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
diff --git a/src/components/accordian/AccordianWidget.jsx b/src/components/ThinCard/ThinCardWidget.jsx
similarity index 64%
rename from src/components/accordian/AccordianWidget.jsx
rename to src/components/ThinCard/ThinCardWidget.jsx
index 810e4ac..71b435f 100644
--- a/src/components/accordian/AccordianWidget.jsx
+++ b/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
diff --git a/src/components/ThinCard/ThinCardWidgetLabel.jsx b/src/components/ThinCard/ThinCardWidgetLabel.jsx
new file mode 100644
index 0000000..dcae83d
--- /dev/null
+++ b/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
diff --git a/src/components/ThinCard/ThinCardWidgetValue.jsx b/src/components/ThinCard/ThinCardWidgetValue.jsx
new file mode 100644
index 0000000..d287af9
--- /dev/null
+++ b/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
diff --git a/src/components/accordian/Accordian.jsx b/src/components/accordian/Accordian.jsx
deleted file mode 100644
index d9dd417..0000000
--- a/src/components/accordian/Accordian.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Flexbox from 'flexbox-react'
-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'
-
-
-class Accordian extends React.Component {
-  constructor(props) {
-    super(props)
-
-  }
-
-  static Title = AccordianTitle
-  static PrimaryAction = AccordianPrimaryAction
-  static ActionButon = AccordianActionButton
-  static Widget = AccordianWidget
-  static Drawer = AccordianDrawer
-
-  render() {
-    let borderClass = '';
-    if (this.props.noBorder){
-      borderClass = 'accordian__noborder';
-    }
-    if (this.props.folder){
-      borderClass += ' accordian__folderpad'
-    }
-    return (
-      <Flexbox flexDirection="column" className={`accordian__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>
-    )
-  }
-}
-Accordian.defaultProps = {
-  folder: true,
-  noBorder: false
-}
-Accordian.propTypes = {
-  folder: React.PropTypes.bool,
-  noBorder: React.PropTypes.bool,
-}
-export default Accordian
diff --git a/src/components/accordian/AccordianActionButton.jsx b/src/components/accordian/AccordianActionButton.jsx
deleted file mode 100644
index 749da47..0000000
--- a/src/components/accordian/AccordianActionButton.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-
-const AccordianActionButton = (props) => {
-  return (
-    <Flexbox alignItems='center' flexGrow={3}>
-      <div onClick={props.onClick} className={`accordian__action_button ${props.ClassName}`} style={props.style}>
-        {props.children}
-      </div>
-    </Flexbox>
-  )
-}
-
-AccordianActionButton.defaultProps = {
-
-}
-
-AccordianActionButton.propTypes = {
-
-}
-
-export default AccordianActionButton
diff --git a/src/components/accordian/AccordianPrimaryAction.jsx b/src/components/accordian/AccordianPrimaryAction.jsx
deleted file mode 100644
index 311bb15..0000000
--- a/src/components/accordian/AccordianPrimaryAction.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-
-const AccordianPrimaryAction = (props) => {
-  return (
-    <Flexbox alignItems='center' className={`accordian__primary_action ${props.className}`}>
-      {props.children}
-    </Flexbox>
-  )
-}
-
-AccordianPrimaryAction.defaultProps = {
-
-}
-
-AccordianPrimaryAction.propTypes = {
-
-}
-
-export default AccordianPrimaryAction
diff --git a/src/components/accordian/AccordianTitle.jsx b/src/components/accordian/AccordianTitle.jsx
deleted file mode 100644
index c3fd952..0000000
--- a/src/components/accordian/AccordianTitle.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-
-const AccordianTitle = (props) => {
-  return (
-    <Flexbox alignItems='center' className='accordian__title'>
-      {props.children}
-    </Flexbox>
-  )
-}
-
-AccordianTitle.defaultProps = {
-
-}
-
-AccordianTitle.propTypes = {
-
-}
-
-export default AccordianTitle
diff --git a/src/components/accordian/AccordianWidgetLabel.jsx b/src/components/accordian/AccordianWidgetLabel.jsx
deleted file mode 100644
index 9ad8513..0000000
--- a/src/components/accordian/AccordianWidgetLabel.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-
-const AccordianWidgetLabel = (props) => {
-  return (
-    <Flexbox alignItems='center' className={` ${props.className} accordian__widget_label`} style={props.style}>
-      {props.children}
-    </Flexbox>
-  )
-}
-
-AccordianWidgetLabel.defaultProps = {
-
-}
-
-AccordianWidgetLabel.propTypes = {
-
-}
-
-export default AccordianWidgetLabel
diff --git a/src/components/accordian/AccordianWidgetValue.jsx b/src/components/accordian/AccordianWidgetValue.jsx
deleted file mode 100644
index d6fdf6f..0000000
--- a/src/components/accordian/AccordianWidgetValue.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import Flexbox from 'flexbox-react'
-
-const AccordianWidgetValue = (props) => {
-  return (
-    <Flexbox alignItems='center' className='accordian__widget_value'>
-      {props.children}
-    </Flexbox>
-  )
-}
-
-AccordianWidgetValue.defaultProps = {
-
-}
-
-AccordianWidgetValue.propTypes = {
-
-}
-
-export default AccordianWidgetValue
diff --git a/src/styles/components/accordian.css b/src/styles/components/thin-card.css
similarity index 88%
rename from src/styles/components/accordian.css
rename to src/styles/components/thin-card.css
index 5b6a0d5..6809944 100644
--- a/src/styles/components/accordian.css
+++ b/src/styles/components/thin-card.css
@@ -1,13 +1,13 @@
 @import '../variables.css';
 
-.accordian__noborder{
+.thincard__noborder{
   border: 0px !important;
 }
-.accordian__folderpad{
+.thincard__folderpad{
   margin-top: 10px;
 }
 
-.accordian__row{
+.thincard__row{
   border: 1px solid #D0D2D3;
   background-color: white;
   position: relative;
@@ -35,7 +35,7 @@
       border-right: 10px solid transparent;
   } 
 
-  & .accordian__primary_action{
+  & .thincard__primary_action{
     font-size: 32px;
     padding-left: 15px;
     padding-right: 15px;
@@ -43,7 +43,7 @@
     cursor: pointer;
     border-right: 1px solid #D0D2D3;
   }
-  & .accordian__title{
+  & .thincard__title{
     font-weight: 300;
     vertical-align: center;
     margin-left: 10px;
@@ -51,12 +51,12 @@
     margin-right: 1em;
     color: var(--twgray);
   }
-  & .accordian__widget_label{
+  & .thincard__widget_label{
       display: block;
       color: var(--twgray);
       text-transform: uppercase;
   }
-  & .accordian__widget_value{
+  & .thincard__widget_value{
     font-size: 24px;
     color: var(--twgray);
     font-weight: 300;
@@ -64,7 +64,7 @@
   & .primary-content{
   min-height: 58px;
   }
-  & .accordian__action_button{
+  & .thincard__action_button{
     font-size: 11.2px;
     padding-left: 4px;
     padding-right: 4px;
@@ -73,7 +73,7 @@
     cursor: pointer;
     border: 1px solid #dedede;
   }
-  & .accordian__action_button:hover{
+  & .thincard__action_button:hover{
     background-color: #dedede;
   }
   & .borderLeft{
diff --git a/stories/card.stories.js b/stories/card.stories.js
index 3f3878a..8be1fe9 100644
--- a/stories/card.stories.js
+++ b/stories/card.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@kadira/storybook'
 import MicroCard from '../src/components/MicroCard/MicroCard'
 import LargeCard from '../src/components/LargeCard/LargeCard'
 import FavoriteButton from '../src/components/FavoriteButton'
-import Accordian from '../src/components/accordian/Accordian'
+import ThinCard from '../src/components/ThinCard/ThinCard'
 import StopStartButton from '../src/components/StopStartButton'
 import { Icon } from 'semantic-ui-react'
 
@@ -32,7 +32,7 @@ const items = [
     date: '9/12/2016'
   }
 ]
-const drawer = <Accordian.Drawer expandGroupToggle={handleMe}>test</Accordian.Drawer>
+const drawer = <ThinCard.Drawer expandGroupToggle={handleMe}>test</ThinCard.Drawer>
 storiesOf('Cards', module)
   .add('Micro Card', () => (
     <div>
@@ -87,32 +87,33 @@ storiesOf('Cards', module)
 
     </div>
   ))
-  .add('Accordian', () => (
+  .add('ThinCard', () => (
     <div>
-      <Accordian data={{id: 0}} folder drawer={drawer}>
-        <Accordian.PrimaryAction><StopStartButton /></Accordian.PrimaryAction>
-        <Accordian.Title>I'm ready to go!</Accordian.Title>
-        <Accordian.ActionButon>MANAGE</Accordian.ActionButon>
-        <Accordian.Widget borderLeft>
-          <Accordian.Widget.Label style={{marginRight: '30px'}}>
+      <ThinCard data={{id: 0}} folder drawer={drawer}>
+        <ThinCard.PrimaryAction><StopStartButton /></ThinCard.PrimaryAction>
+        <ThinCard.Title>I'm ready to go!</ThinCard.Title>
+        <ThinCard.ActionButon>MANAGE</ThinCard.ActionButon>
+        <ThinCard.Widget borderLeft>
+          <ThinCard.Widget.Label style={{marginRight: '30px'}}>
             LABEL
-          </Accordian.Widget.Label>
-          <Accordian.Widget.Value>
+          </ThinCard.Widget.Label>
+          <ThinCard.Widget.Value>
             1234
-          </Accordian.Widget.Value>
-        </Accordian.Widget>
-        <Accordian.Widget borderLeft>
-          <Accordian.Widget.Label style={{marginRight: '30px'}}>
+          </ThinCard.Widget.Value>
+        </ThinCard.Widget>
+        <ThinCard.Widget borderLeft>
+          <ThinCard.Widget.Label style={{marginRight: '30px'}}>
             FOO
-          </Accordian.Widget.Label>
-          <Accordian.Widget.Value>
+          </ThinCard.Widget.Label>
+          <ThinCard.Widget.Value>
             BAR
-          </Accordian.Widget.Value>
-        </Accordian.Widget>
-      </Accordian>
-      <Accordian data={{id: 0}} folder={false}>
-        <Accordian.PrimaryAction><StopStartButton isStopped /></Accordian.PrimaryAction>
-        <Accordian.Title>I'm stopped</Accordian.Title>
-      </Accordian>
+          </ThinCard.Widget.Value>
+        </ThinCard.Widget>
+      </ThinCard>
+      <br />
+      <ThinCard data={{id: 0}} folder={false}>
+        <ThinCard.PrimaryAction><StopStartButton isStopped /></ThinCard.PrimaryAction>
+        <ThinCard.Title>I'm stopped</ThinCard.Title>
+      </ThinCard>
     </div>
   ))