feat(microcard): adds microcard

decomposed console box into new higher level microcard component

src/components/MicroCard.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import FavoriteButton from './FavoriteButton'
+import { Icon } from 'semantic-ui-react'
+import '../styles/components/micro-card.css'
+
+const MicroCard = (props) => {
+  console.log(props)
+  return (
+    <Flexbox
+      flexDirection='row'
+      key={props.cardContent.id}
+      className={`microcard bordered`}
+      style={props.style}
+    >
+      {
+            (props.cardContent.gutter)
+            ? (
+              <Flexbox className='state__indicator' style={{backgroundColor: props.cardContent.gutter}} width='8px' />
+            )
+            : ''
+        }
+      <Flexbox flexDirection='column' paddingBottom='10px' paddingLeft='10px' paddingTop='5px'>
+        <Flexbox className='box__header'>{props.cardContent.title}</Flexbox>
+        <Flexbox flexGrow={2}>
+          {props.children}
+        </Flexbox>
+      </Flexbox>
+      <Flexbox flexGrow={2} justifyContent='flex-end'>
+        {props.cardContent.count
+        ? <Flexbox alignItems='flex-end' className='microcard__count'>{props.cardContent.count}</Flexbox>
+              : ''
+            }
+      </Flexbox>
+      <Flexbox>
+        <Flexbox className='microcard_favorite'>
+          <FavoriteButton isFavorited={props.cardContent.isFavorited} />
+        </Flexbox>
+        {
+            (props.cardContent.showArrow)
+            ? (
+              <Flexbox>
+                <Icon className='ei microcard__arrow-right arrow_carrot-right' />
+              </Flexbox>
+            ) : ''
+        }
+      </Flexbox>
+    </Flexbox>
+  )
+}
+
+MicroCard.defaultProps = {
+
+}
+
+MicroCard.propTypes = {
+  cardContent: React.PropTypes.object
+
+}
+
+export default MicroCard

src/styles/components/micro-card.css

@@ -0,0 +1,77 @@
+
+@import '../variables.css';
+
+
+
+.microcard {
+  cursor: pointer;
+  display: block;
+  float: left;
+  color: var(--darkgray);
+  width: 300px;
+  font-size: var(--small);
+  margin-bottom: 10px;
+  min-height: 86px;
+  position: relative;
+  & .text-uppercase {
+      text-transform: uppercase;
+  }
+  &.bordered {
+    /* border: 2px solid color(var(--yellow)); */
+    border: 2px solid color(var(--lightgray));
+  }  
+  & .box__header {
+    font-size: 1.2em;
+    color: var(--textGray);
+  }
+
+  & .microcard_favorite {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+
+  }
+  & .microcard__message {
+    display: block;
+
+
+    text-transform: uppercase;
+    & h3, & h4 {
+      margin: 0;
+    }
+    & h3 {
+      font-size: 17.5px;
+      font-weight: 400;
+    }
+    & h4 {
+      font-size: 12px;
+    }
+  }
+  & .microcard__stateIcon {
+
+    width: 25px;
+    height: 48px;
+
+  }
+  & .microcard__count {
+    bottom: 20px;
+    font-size: 2.65rem;
+    position: absolute;
+    right: 25px;
+    color: #A6A8AB;
+  }
+}
+
+
+.microcard__arrow-right {
+  bottom: 0;
+  padding: 5px 1px 5px 3px !important;
+  position: absolute;
+  right: 0;
+  height: 38px !important;
+  margin: 0px !important;
+  font-size: 28px !important;
+  text-align: center;
+  vertical-align: middle;
+
+}

stories/microcard.stories.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import { storiesOf } from '@kadira/storybook'
+import MicroCard from '../src/components/MicroCard'
+import colorPalette from '../src/components/colorPallete'
+
+const card = {
+  id: 0,
+  gutter: colorPalette.red,
+  isFavorited: true,
+  title: 'test',
+  showArrow: true
+}
+
+const cardSecond = {
+  id: 1,
+  isFavorited: false,
+  title: 'second test',
+  showArrow: true,
+  count: 28
+}
+
+const alertIconUri = require('../src/assets/alert-icon.svg')
+
+storiesOf('Micro Card', module)
+  .add('Micro Card', () => (
+    <div>
+      <MicroCard cardContent={card} style={{marginRight: '10px'}}>
+        <Flexbox flexDirection='row'>
+          <Flexbox marginRight='5px'>
+            <img className='microcard__stateIcon' src={alertIconUri} alt='icon' />
+          </Flexbox>
+          <Flexbox flexDirection='column' justifyContent='center' className='microcard__message'>
+            <h4>connection error</h4>
+            <h3>DATABASE</h3>
+          </Flexbox>
+        </Flexbox>
+      </MicroCard>
+
+      <MicroCard cardContent={cardSecond} >
+        <Flexbox flexDirection='row'>
+          <Flexbox marginRight='5px'>
+            <img className='microcard__stateIcon' src={alertIconUri} alt='icon' />
+          </Flexbox>
+          <Flexbox flexDirection='column' justifyContent='center' className='microcard__message'>
+            <h4>connection error</h4>
+            <h3>DATABASE</h3>
+          </Flexbox>
+        </Flexbox>
+      </MicroCard>
+
+    </div>
+  ))