fix: Allow time "line" color to be customized

rcdexta · May 21, 2018 · 3fdd610 · 3fdd610
1 parent a683147
commit 3fdd610
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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'