feat(cards): large card fragments

adds additional card fragments
Tripwire · Mar 7, 2017 · fba4422 · fba4422
1 parent 3030ca7
commit fba4422
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 38 deletions.
diff --git a/src/components/LargeCard/LargeCard.jsx b/src/components/LargeCard/LargeCard.jsx
@@ -6,6 +6,9 @@ import Icon from '../suir/icon/Icon'
 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'
 
 
@@ -17,14 +20,14 @@ 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={`console__box__fullview  is-fullview-open-${this.props.showCard}`}>
-        <Flexbox flexDirection='row' className='console__box__fullview__container' height='275px'>
-
-
-        {this.props.children}
+      <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>
     )

diff --git a/src/components/LargeCard/LargeCardContent.jsx b/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
diff --git a/src/components/LargeCard/LargeCardKeyValue.jsx b/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
diff --git a/src/components/LargeCard/LargeCardRecentList.jsx b/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
diff --git a/src/components/StopStartButton.jsx b/src/components/StopStartButton.jsx
@@ -1,15 +1,16 @@
 import React from 'react'
+import Icon from './suir/icon/Icon';
 import '../styles/components/stop-start-button.css'
 
 const StopStartButton = (props) => {
   let iconClass = ''
   if (props.isStopped) {
-    iconClass = 'icon_pause_alt2 stop-start-button'
+    iconClass = 'ei icon_pause_alt2 stop-start-button'
   } else {
-    iconClass = 'arrow_triangle-right_alt2 stop-start-button'
+    iconClass = 'ei arrow_triangle-right_alt2 stop-start-button'
   }
   return (
-    <i className={` ${iconClass} ${props.className}`} style={props.style} onClick={props.onClick} />
+    <Icon className={` ${iconClass} ${props.className}`} style={props.style} onClick={props.onClick} />
   )
 }
 

diff --git a/src/styles/components/large-card.css b/src/styles/components/large-card.css
@@ -3,7 +3,7 @@
 .text-large{
   font-size: 20px !important;
 }
-.console__box__fullview {
+.large_card {
   background: #F0F0F1;
   left: 0;
   min-height: 100%;
@@ -37,13 +37,20 @@
 .star_gray{
   color: var(--buttonBorder) !important;
 }
-.console__box__fullview__container {
+.large_card__container {
   background: white;
   clear: fix;
   margin: 10px 20px 10px 20px;
   min-height: 94%;
   position: relative;
-
+  & .label {
+          display: block;
+          font-size: 10px;
+          color: rgb(166, 168, 171);
+          text-transform: uppercase;
+          text-align: left;
+          margin-bottom: 10px;
+      }
   & .close__fullview {
     cursor: pointer;
     position: absolute;
@@ -69,7 +76,7 @@
     @neat-span-columns 8;
     padding: 10px 0px;
   }
-  & .console__box__name{
+  & .title{
     font-size: 1.25em;
   }
   & .fullview__quickinfo__heading {
@@ -174,36 +181,24 @@
   & .header{
     margin-bottom: 20px !important;
   }
-  & .history__recent__activities {
-    @neat-span-columns 4 8;
-    & .recent__activity__heading {
-          display: block;
-    font-size: 11.2px;
-    font-size: 0.7rem;
-    color: rgb(166, 168, 171);
-    text-transform: uppercase;
-    text-align: left;
+
+  & .recent__activity__row {
     margin-bottom: 10px;
-
-    }
-    & .recent__activity__row {
-      margin-bottom: 10px;
-      & .activity__date {
-        margin-left: 20px;
-      }
+    & .activity__date {
+      margin-left: 20px;
     }
   }
+
 
 
-  & .summary__count {
+  & .summary_info {
     color: color(var(--gray));
     text-align: left;
     padding: 0 5px;
     @neat-span-columns 2 8;
     & .label {
         display: block;
-        font-size: 11.2px;
-        font-size: 0.7rem;
+        font-size: 10px;
         color: rgb(166, 168, 171);
         text-transform: uppercase;
         text-align: left;
@@ -213,7 +208,7 @@
       text-align: left;
       padding: 25px 0 15px 0;
       color: var(--twgray);
-      font-size: 2.75rem;
+      font-size: 38px;
       font-weight: 300;
     }
   }
@@ -280,10 +275,7 @@
     background-color: var(--blue);
     color: white;
   }
-  & .console__box__favorite {
-    cursor: pointer;
-
-    color: var(--yellow);
+  & .large_card__favorite {
     font-size: 1.3rem;
   }
 }
diff --git a/stories/card.stories.js b/stories/card.stories.js
@@ -3,6 +3,8 @@ import Flexbox from 'flexbox-react'
 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 { Icon } from 'semantic-ui-react'
 
 const card = {
   id: 0,
@@ -19,10 +21,19 @@ const alertIconUri = require('../src/assets/alert-icon.svg')
 function handleMe () {
   console.log('Handle the click action')
 }
-
+const items = [
+  {
+    id: 0,
+    state: 'normal',
+    name: 'text',
+    status: 'OPERATION COMPLETED',
+    date: '9/12/2016'
+  }
+]
 storiesOf('Cards', module)
   .add('Micro Card', () => (
     <div>
+      <Icon name='users' />
       <MicroCard cardContent={card} style={{marginRight: '10px'}} onClick={handleMe} >
         <MicroCard.Gutter color='critical' />
         <MicroCard.Content cardContent={card} />
@@ -53,6 +64,20 @@ storiesOf('Cards', module)
     <div>
       <LargeCard cardContent={largeCardContent} showCard>
         <LargeCard.Gutter color='critical' />
+        <LargeCard.Content style={{height: '200px'}}>
+          <Flexbox flexDirection='row' flexGrow={1} className={'large_card__heading'}>
+            <Flexbox flexGrow={1} className='title textGray'>Title</Flexbox>
+            <FavoriteButton className='large_card__favorite' isFavorited />
+          </Flexbox>
+          <Flexbox flexDirection='column' flexGrow={3}>
+            <Flexbox flexDirection='row'>
+              <LargeCard.KeyValue name='item' value={29} />
+              <LargeCard.KeyValue name='item' value={29} />
+              <LargeCard.KeyValue name='item' value={29} />
+            </Flexbox>
+            <LargeCard.RecentList items={items} />
+          </Flexbox>
+        </LargeCard.Content>
         <LargeCard.Close onClick={handleMe} />
         <LargeCard.Action label='test' onClick={handleMe} />
       </LargeCard>