Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/Timeline/TimelineMini.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import PropTypes from 'prop-types';
+
+import { 
+    Badge
+} from './../../../components';
+
+const TimelineMini = (props) => (
+    <React.Fragment>
+        { /* START TIMELINE Position */}
+        <div className="timeline">
+            {
+                props.showPillDate && (
+                    <React.Fragment>
+                        { /* START PILL Date */}
+                        <div className="timeline-date">
+                            <Badge pill>
+                                { props.pillDate }
+                            </Badge>
+                        </div>
+                        { /* END PILL Date */}
+                    </React.Fragment>
+                    )
+            }
+            { /* START POST Timeline */}
+            <div className="timeline-item">
+                { /* Icon */}    
+                <div className="timeline-icon">
+                    <i className={` fa fa-fw fa-${ props.icon } ${ props.iconClassName }`}></i>
+                </div>
+                <div className="timeline-item-head clearfix mb-0 pl-3">
+                    { /* Badge */}
+                    <div className="mb-2">
+                        <span className={`badge badge-${ props.badgeColor } `}>
+                            { props.badgeTitle }
+                        </span>
+                    </div>
+                    { /* Content */}
+                    <p className="text-inverse mb-1">
+                        { faker.company.catchPhrase() }
+                    </p>
+                    { /* Date */}
+                    <p>
+                        { faker.date.past().toString() }
+                    </p>
+                </div>
+            </div>
+            { /* END POST Timeline */}
+        </div>
+        { /* END Timeline Position */}
+    </React.Fragment>
+)
+
+TimelineMini.propTypes = {
+    showPillDate: PropTypes.bool,
+        pillDate: PropTypes.string,
+    icon: PropTypes.string,
+    iconClassName: PropTypes.string,
+    badgeColor: PropTypes.string,
+    badgeTitle: PropTypes.string
+};
+
+TimelineMini.defaultProps = {
+    showPillDate: false,
+        pillDate: "Waiting",
+    icon: "question-circle",
+    iconClassName: "text-secondary",
+    badgeColor: "secondary",
+    badgeTitle: "Waiting"
+};
+
+export { TimelineMini };