InfoCard component.

Also added index files where it was missing.

demo/demoApp.jsx

@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
 import {DragDropContext} from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 
+
 import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
 import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
 import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
@@ -14,7 +15,7 @@ import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/dem
 import DemoModalSpinner from '../src/components/ModalSpinner/demo';
 import DemoContainmentCanvas from '../src/components/ContainmentCanvas/demo';
 import DemoSingleConnectedNode from '../src/components/SingleConnectedNode/demo';
-
+import DemoInfoCard from '../src/components/InfoCard//demo';
 
 
 class demoApp extends Component {
@@ -49,28 +50,34 @@ class demoApp extends Component {
             {
                 component: <DemoContainmentCanvas/>,
                 title: 'ContainmentCanvas',
+                height: 400
             },
             {
                 component: <DemoSingleConnectedNode/>,
                 title: 'SingleConnectedNode',
             },
+            {
+                component: <DemoInfoCard/>,
+                title: 'InfoCard',
+                height: 200
+            },
         ];
 
         return (
-                <div>
-                    {DEMOS.map((info) => {
-                        return (
-                            <ExpansionPanel defaultExpanded key={info.title}>
-                                <ExpansionPanelSummary>
-                                    <Typography variant="headline" color="textSecondary">{info.title}</Typography>
-                                </ExpansionPanelSummary>
-                                <div style={{padding: 20}}>
-                                    {info.component}
-                                </div>
-                            </ExpansionPanel>
-                        )
-                    })}
-                </div>);
+            <div>
+                {DEMOS.map((info) => {
+                    return (
+                        <ExpansionPanel defaultExpanded key={info.title}>
+                            <ExpansionPanelSummary>
+                                <Typography variant="headline" color="textSecondary">{info.title}</Typography>
+                            </ExpansionPanelSummary>
+                            <div style={{padding: 20, height: info.height}}>
+                                {info.component}
+                            </div>
+                        </ExpansionPanel>
+                    )
+                })}
+            </div>);
     };
 };
 

src/components/BasicEventManager/index.jsx

+export {default} from './BasicEventManager';
\ No newline at end of file

src/components/ConnectionManager/index.jsx

+import BasicConnectingComponent from './BasicConnectingComponent';
+import ConnectionManager from './ConnectionManager';
+
+export {ConnectionManager,BasicConnectingComponent};
\ No newline at end of file

src/components/ContainmentCanvas/demo.jsx

 import React, {Component} from 'react';
-import ContainmentCanvas from './ContainmentCanvas';
+import ContainmentCanvas from './index';
 
 export default class DemoContainmentCanvas extends Component {
     constructor(props) {

src/components/InfoCard/InfoCard.jsx

+import React from 'react';
+
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const InfoCard = (title, content, link) => {
+    let button = link == null ? null : (
+        <a href={link.target || 'https://www.google.com/'}
+           target="_blank"
+           rel="noopener noreferrer"
+           key="infoBtn"
+           style={{textDecoration: 'none'}}
+        >
+            <Button
+                size="small"
+                color="primary"
+            >
+                Learn More
+            </Button>
+        </a>
+    );
+
+    return (
+        <Card style={{
+            position: 'absolute',
+            maxWidth: 600,
+            left: 'calc(50% - 300px)',
+            top: '20%',
+        }}
+        >
+            <CardContent>
+                <Typography style={{marginBottom: 20}} variant="headline" component="h2">
+                    {title || 'An information card'}
+                </Typography>
+                <Typography component="p">
+                    {content || 'You can describe your content and put onto the screen with a useful link.'}
+                </Typography>
+            </CardContent>
+            <CardActions>
+                {button}
+            </CardActions>
+        </Card>
+    );
+};
+
+export default InfoCard;
\ No newline at end of file

src/components/InfoCard/demo.jsx

+import React, {Component} from 'react';
+import InfoCard from './index';
+
+export default class DemoInfoCard extends Component {
+    render() {
+        const content = (<span>add any thing you desire <br/><br/> and what you want </span>);
+        let card = InfoCard('Exmaple Info Card', content, {target: 'https://www.google.com/', title: 'Go search'});
+        return (
+            <div>
+                {card}
+            </div>
+        );
+    }
+}
\ No newline at end of file

src/components/InfoCard/index.jsx

+export {default} from './InfoCard';
\ No newline at end of file

src/components/ModalSpinner/demo.jsx

 import React, {Component} from 'react';
-import ModalSpinner from './ModalSpinner';
+import ModalSpinner from './index';
 import Button from '@material-ui/core/Button';
 
 export default class DemoContainmentCanvas extends Component {

src/components/ModalSpinner/index.jsx

+export {default} from './ModalSpinner';
\ No newline at end of file

src/components/SingleConnectedNode/index.jsx

+export {default} from './SingleConnectedNode';
\ No newline at end of file