Merge pull request #39 from Tripwire/accordian

Thin Card

package.json

@@ -10,6 +10,7 @@
     "@semantic-release/release-notes-generator": "^2.0.0",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
+    "babel-eslint": "^7.1.1",
     "babel-jest": "^19.0.0",
     "babel-loader": "^6.2.7",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -78,7 +79,8 @@
       "lib",
       "semantic",
       "styleguide"
-    ]
+    ],
+    "parser": "babel-eslint"
   },
   "ripcord": {
     "rules": [

src/components/LargeCard/LargeCard.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import LargeCardAction from './LargeCardAction'
+import LargeCardClose from './LargeCardClose'
+import LargeCardGutter from './LargeCardGutter'
+import LargeCardContent from './LargeCardContent'
+import LargeCardKeyValue from './LargeCardKeyValue'
+import LargeCardRecentList from './LargeCardRecentList'
+import '../../styles/components/large-card.css'
+
+class LargeCard extends React.Component {
+  static Action = LargeCardAction;
+  static Close = LargeCardClose;
+  static Gutter = LargeCardGutter;
+  static Content = LargeCardContent;
+  static KeyValue = LargeCardKeyValue;
+  static RecentList = LargeCardRecentList;
+  render () {
+    return (
+      <div className={`large_card  is-fullview-open-${this.props.showCard} ${this.props.className} `} style={this.props.style}>
+        <Flexbox flexDirection='row' className='large_card__container'>
+          {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 '../suir/icon/Icon'
+
+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/LargeCardContent.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+
+const LargeCardContent = (props) => {
+  return (
+    <Flexbox flexDirection='row' flexGrow={3} className={` ${props.className}`} style={props.style}>
+      {props.children}
+    </Flexbox>
+  )
+}
+
+LargeCardContent.defaultProps = {
+
+}
+
+LargeCardContent.propTypes = {
+
+}
+
+export default LargeCardContent

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/LargeCard/LargeCardKeyValue.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const LargeCardKeyValue = (props) => {
+  return (
+    <div className={`summary_info ${props.className}`} onClick={props.onClick}>
+      <span className='label'>{props.name}</span>
+      <span className='count'>{props.value}</span>
+    </div>
+  )
+}
+
+LargeCardKeyValue.defaultProps = {
+
+}
+
+LargeCardKeyValue.propTypes = {
+
+}
+
+export default LargeCardKeyValue

src/components/LargeCard/LargeCardRecentList.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import Icon from '../suir/icon/Icon'
+import Flexbox from 'flexbox-react'
+
+const LargeCardRecentList = (props) => {
+  return (
+    <Flexbox flexDirection='column' flexGrow={1} className={props.className}>
+
+      <h4 className='label'>Recent</h4>
+      {props.items.map((item) => {
+        let icon = ''
+        switch (item.state) {
+          case 'warning':
+            icon = 'icon_error-triangle_alt'
+            break
+          case 'critical':
+            icon = 'icon_error-circle_alt'
+            break
+          default:
+            icon = 'icon_check_alt2'
+        }
+        return (
+          <Flexbox key={item.id} flexDirection='row' className={`state__body-${item.state} recent__activity__row`}>
+            <Flexbox className={`state__body-${item.state}`} alignItems='center' marginRight='20px'>
+              <Icon className={`text-uppercase text-small ei ${icon} text-large`} />
+            </Flexbox>
+            <Flexbox className={`text-uppercase text-small state__body-${item.state}`} alignItems='center'marginRight='20px'>
+              {item.status}
+            </Flexbox>
+            <Flexbox className={`text-uppercase text-small state__body-${item.state}`} alignItems='center'>
+              {item.date}
+            </Flexbox>
+          </Flexbox>
+        )
+      })
+                }
+
+    </Flexbox>
+  )
+}
+
+LargeCardRecentList.defaultProps = {
+
+}
+
+LargeCardRecentList.propTypes = {
+  items: React.PropTypes.array
+}
+
+export default LargeCardRecentList

src/components/MicroCard/MicroCard.jsx

@@ -0,0 +1,36 @@
+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 '../../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 '../suir/icon/Icon'
+
+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