feat(cards): component approach

includes approach for abstracting higher level components

src/components/LargeCard/LargeCard.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import ReactDOM from 'react-dom'
+import Flexbox from 'flexbox-react'
+import { Icon } from 'semantic-ui-react'
+import LargeCardAction from './LargeCardAction'
+import LargeCardClose from './LargeCardClose'
+import LargeCardGutter from './LargeCardGutter'
+import '../../styles/components/large-card.css'
+
+
+class LargeCard extends React.Component {
+  constructor (props) {
+    super(props)
+
+  }
+  static Action = LargeCardAction;
+  static Close = LargeCardClose;
+  static Gutter = LargeCardGutter;
+
+  render () {
+    return (
+      <div className={`console__box__fullview  is-fullview-open-${this.props.showCard}`}>
+        <Flexbox flexDirection='row' className='console__box__fullview__container' height='275px'>
+
+
+        {this.props.children}
+        </Flexbox>
+      </div>
+    )
+  }
+}
+LargeCard.propTypes = {
+    cardContent: React.PropTypes.object,
+}
+export default LargeCard

src/components/LargeCard/LargeCardAction.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const LargeCardAction = (props) => {
+  return (
+    <a className={'fullview__goto__button button buttton-rect'} onClick={props.onClick}>
+        {props.label}
+        {props.children}
+    </a>
+  )
+}
+
+LargeCardAction.defaultProps = {
+
+}
+
+LargeCardAction.propTypes = {
+
+}
+
+export default LargeCardAction

src/components/LargeCard/LargeCardClose.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const LargeCardClose = (props) => {
+  return (
+    <span className='close__fullview' onClick={props.onClick}>
+        <Icon className='ei icon_close' aria-hidden='true' />
+    </span>
+  )
+}
+
+LargeCardClose.defaultProps = {
+
+}
+
+LargeCardClose.propTypes = {
+
+}
+
+export default LargeCardClose

src/components/LargeCard/LargeCardGutter.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import colorPallete from '../colorPallete'
+import Flexbox from 'flexbox-react'
+
+const LargeCardGutter = (props) => {
+  let color = ''
+  switch(props.color) {
+    case 'critical':
+      color = colorPallete.red
+      break;
+    case 'warning':
+      color = colorPallete.yellow
+      break;
+    case 'normal':
+      color = colorPallete.blue
+      break;
+    case 'blue':
+      color = colorPallete.blue
+      break;
+    default:
+      color = props.color;
+  }
+  return (
+    <Flexbox className='fullview__left_border' width='9px' style={{backgroundColor: color}} />
+  )
+}
+
+LargeCardGutter.defaultProps = {
+
+}
+
+LargeCardGutter.propTypes = {
+
+}
+
+export default LargeCardGutter

src/components/MicroCard/MicroCard.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import MicroCardGutter from './MicroCardGutter'
+import MicroCardAction from './MicroCardAction'
+import MicroCardFavorite from './MicroCardFavorite'
+import MicroCardContent from './MicroCardContent'
+import MicroCardCount from './MicroCardCount'
+import { Icon } from 'semantic-ui-react'
+import '../../styles/components/micro-card.css'
+
+class MicroCard extends React.Component {
+  static Gutter = MicroCardGutter;
+  static Action = MicroCardAction;
+  static Favorite = MicroCardFavorite;
+  static Content = MicroCardContent;
+  static Count = MicroCardCount;
+  render () {
+    return (
+      <Flexbox
+        flexDirection='row'
+        key={this.props.cardContent.id}
+        className={`microcard bordered ${this.props.className}`}
+        style={this.props.style}
+        onClick={this.props.onClick}
+    >
+        {this.props.children}
+
+      </Flexbox>
+    )
+  }
+}
+
+MicroCard.propTypes = {
+  cardContent: React.PropTypes.object
+}
+
+export default MicroCard

src/components/MicroCard/MicroCardAction.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const MicroCardAction = (props) => {
+  return (
+    <Icon onClick={props.onClick} className='ei microcard__arrow-right arrow_carrot-right' />
+  )
+}
+
+MicroCardAction.defaultProps = {
+
+}
+
+MicroCardAction.propTypes = {
+
+}
+
+export default MicroCardAction

src/components/MicroCard/MicroCardContent.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const MicroCardContent = (props) => {
+  return (
+    <Flexbox flexDirection='column' paddingBottom='10px' paddingLeft='10px' paddingTop='5px'>
+      {(props.cardContent.title) ? <Flexbox className='box__header'>{props.cardContent.title}</Flexbox> : '' }
+      <Flexbox flexGrow={2}>
+        {props.children}
+      </Flexbox>
+    </Flexbox>
+  )
+}
+
+MicroCardContent.defaultProps = {
+
+}
+
+MicroCardContent.propTypes = {
+  isFavorited: React.PropTypes.bool
+}
+
+export default MicroCardContent

src/components/MicroCard/MicroCardCount.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const MicroCardCount = (props) => {
+  return (
+    <Flexbox className='microcard__count'>{props.value}</Flexbox>
+  )
+}
+
+MicroCardCount.defaultProps = {
+  color: '#FFFFFF'
+}
+
+MicroCardCount.propTypes = {
+  color: React.PropTypes.string
+
+}
+
+export default MicroCardCount

src/components/MicroCard/MicroCardFavorite.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import FavoriteButton from '../FavoriteButton'
+
+const MicroCardFavorite = (props) => {
+  return (
+    <div className='microcard_favorite'>
+      <FavoriteButton isFavorited={props.isFavorited} />
+    </div>
+  )
+}
+
+MicroCardFavorite.defaultProps = {
+
+}
+
+MicroCardFavorite.propTypes = {
+  isFavorited: React.PropTypes.bool
+}
+
+export default MicroCardFavorite

src/components/MicroCard/MicroCardGutter.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import colorPallete from '../colorPallete'
+
+const MicroCardGutter = (props) => {
+  let color = ''
+  switch(props.color) {
+    case 'critical':
+      color = colorPallete.red
+      break;
+    case 'warning':
+      color = colorPallete.yellow
+      break;
+    case 'normal':
+      color = colorPallete.blue
+      break;
+    case 'blue':
+      color = colorPallete.blue
+      break;
+    default:
+      color = props.color;
+  }
+
+  return (
+    <Flexbox className='microcard state__indicator' style={{backgroundColor: color}} width='8px' />
+  )
+}
+
+MicroCardGutter.defaultProps = {
+  color: '#FFFFFF'
+}
+
+MicroCardGutter.propTypes = {
+  color: React.PropTypes.string
+
+}
+
+export default MicroCardGutter