From 3fdd610b68c1142d9bb207633625fc73e0aeda70 Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Mon, 21 May 2018 00:20:19 -0700
Subject: [PATCH] fix: Allow time "line" color to be customized

---
 components/Timeline.js | 8 +++++---
 stories/App.story.js   | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Timeline.js b/components/Timeline.js
index e4f7a59..744f02e 100644
--- a/components/Timeline.js
+++ b/components/Timeline.js
@@ -4,9 +4,10 @@ import s from './styles'
 
 class Timeline extends Component {
   render () {
-    const { orientation = 'left', children, style = {}, ...otherProps } = this.props
+    const { orientation = 'left', children, lineColor, style = {}, ...otherProps } = this.props
     const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { orientation }))
-    const leftOrRight = (orientation === 'right') ? {...s['containerBefore--right']} : {...s['containerBefore--left']}
+    let leftOrRight = (orientation === 'right') ? {...s['containerBefore--right']} : {...s['containerBefore--left']}
+    leftOrRight = lineColor ? {...leftOrRight, background: lineColor} : leftOrRight
     return (
       <div>
         <section style={{...s.container, ...style}} {...otherProps}>
@@ -22,7 +23,8 @@ class Timeline extends Component {
 Timeline.propTypes = {
   children: PropTypes.node.isRequired,
   orientation: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  lineColor: PropTypes.string
 }
 
 export default Timeline
diff --git a/stories/App.story.js b/stories/App.story.js
index 6ae706d..852f1e9 100644
--- a/stories/App.story.js
+++ b/stories/App.story.js
@@ -215,7 +215,7 @@ storiesOf('Timeline', module)
   .add(
     'Icon and Bubble Styling',
     withInfo('Modify the appearance of bubbles and containing icons')(() =>
-      <Timeline>
+      <Timeline lineColor='magenta'>
         <TimelineEvent
           title='John Doe sent a SMS'
           createdAt='2016-09-12 10:06 PM'