From aadcb1121689450baa4793970499bb7429ed6845 Mon Sep 17 00:00:00 2001
From: Edward Raffaele <eraffaele@gmail.com>
Date: Sun, 5 Mar 2017 09:21:56 -0800
Subject: [PATCH] feat(microcard): adds microcard

decomposed console box into new higher level microcard component
---
 src/assets/alert-white-bg.svg         | 15 ++++++
 src/assets/warning-yellow-whitebg.svg | 19 +++++++
 src/components/MicroCard.jsx          | 61 +++++++++++++++++++++
 src/styles/components/micro-card.css  | 77 +++++++++++++++++++++++++++
 stories/microcard.stories.js          | 53 ++++++++++++++++++
 5 files changed, 225 insertions(+)
 create mode 100644 src/assets/alert-white-bg.svg
 create mode 100644 src/assets/warning-yellow-whitebg.svg
 create mode 100644 src/components/MicroCard.jsx
 create mode 100644 src/styles/components/micro-card.css
 create mode 100644 stories/microcard.stories.js

diff --git a/src/assets/alert-white-bg.svg b/src/assets/alert-white-bg.svg
new file mode 100644
index 0000000..b6ea6bc
--- /dev/null
+++ b/src/assets/alert-white-bg.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <path d="M16,0 L16,0 C24.837,0 32,7.163 32,16 C32,24.837 24.837,32 16,32 C7.163,32 0,24.837 0,16 C0,7.163 7.163,0 16,0 Z" id="Combined-Shape" fill="#C94914"></path>
+            <path d="M16,3 C12.528,3 9.263,4.352 6.808,6.808 C4.353,9.264 3,12.528 3,16 C3,19.472 4.352,22.737 6.808,25.192 C9.264,27.647 12.528,29 16,29 C19.472,29 22.737,27.648 25.192,25.192 C27.647,22.736 29,19.472 29,16 C29,12.528 27.648,9.263 25.192,6.808 C22.736,4.353 19.472,3 16,3 Z" id="Path" fill="#FFFFFF"></path>
+            <polygon id="Shape" fill="#C94914" points="14 22 18 22 18 26 14 26"></polygon>
+            <polygon id="Shape" fill="#C94914" points="14 6 18 6 18 18 14 18"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/warning-yellow-whitebg.svg b/src/assets/warning-yellow-whitebg.svg
new file mode 100644
index 0000000..603ba8c
--- /dev/null
+++ b/src/assets/warning-yellow-whitebg.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>warning-yellow-whitebg</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="warning-yellow-whitebg" transform="translate(-1.000000, 0.000000)">
+            <g id="Page-1">
+                <g id="warning">
+                    <path d="M17,0 C16.31,0 15.621,0.465 15.097,1.395 L1.438,28.617 C0.392,30.477 1.282,32 3.416,32 L30.582,32 C32.716,32 33.607,30.478 32.56,28.617 L32.56,28.617 L18.901,1.395 C18.378,0.465 17.688,-4.4408921e-16 16.998,-4.4408921e-16 L16.998,-4.4408921e-16 L17,0 Z" id="Shape" fill="#E99A3A"></path>
+                    <polygon id="Shape-path" fill="#FFFFFF" points="17 2.899 30.409 29.625 3.59 29.625 16.999 2.899"></polygon>
+                    <path d="M19,26 C19,27.105 18.105,28 17,28 C15.895,28 15,27.105 15,26 C15,24.895 15.895,24 17,24 C18.105,24 19,24.895 19,26 Z" id="Shape" fill="#E99A3A"></path>
+                    <path d="M17,22 C15.895,22 15,21.105 15,20 L15,14 C15,12.895 15.895,12 17,12 C18.105,12 19,12.895 19,14 L19,20 C19,21.105 18.105,22 17,22 Z" id="Shape" fill="#E99A3A"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/MicroCard.jsx b/src/components/MicroCard.jsx
new file mode 100644
index 0000000..5d68ec4
--- /dev/null
+++ b/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
diff --git a/src/styles/components/micro-card.css b/src/styles/components/micro-card.css
new file mode 100644
index 0000000..119545f
--- /dev/null
+++ b/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;
+  
+}
diff --git a/stories/microcard.stories.js b/stories/microcard.stories.js
new file mode 100644
index 0000000..9a18fc7
--- /dev/null
+++ b/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>
+  ))