fix($browser): Apply icon styling and icon color to bubble

#13
rcdexta · Sep 15, 2017 · 71dd6c0 · 71dd6c0
1 parent f37e7a7
commit 71dd6c0
Show file tree

Hide file tree

Showing 3 changed files with 231 additions and 167 deletions.
diff --git a/README.md b/README.md
@@ -77,8 +77,8 @@ Each event in the timeline will be represented by the `TimelineEvent` component.
 | title        | node   | The title of the event. Can be string or any DOM element node(s) |
 | createdAt    | node   | The time at which the event occurred. Can be datetime string or any DOM element node(s) |
 | icon         | node   | The icon to show as event lable. Can be a SVG or font icon |
-| iconColor    | string | CSS color code for icon                  |
-| iconStyle    | object   | Custom CSS for the icon                  |
+| bubbleColor    | string | CSS color code for bubble                  |
+| iconStyle    | object   | Custom CSS styling for the icon                  |
 | buttons      | node   | Action buttons to display to the right of the event content |
 | contentStyle | node   | Override content style                   |
 | container    | string | Optional value `card` will render event as a Card |
@@ -94,7 +94,7 @@ Use this component if your event is too small and can be described in a single l
 | title     | node   | The title of the event. Can be string or any DOM element node(s) |
 | icon      | node   | The icon to show as event lable. Can be a SVG or font icon |
 | iconColor | string | CSS color code for icon                  |
-| iconStyle | object   | Custom CSS for the icon                  |
+| iconStyle | object   | Custom CSS styling for the icon                  |
 | style     | object   | Override style for the entire event container |
 
 Refere to Condensed Timeline in Storybook for examples of using this component

diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
@@ -1,49 +1,69 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import s from './styles'
 
 class TimelineEvent extends Component {
-  mergeNotificationStyle(iconColor) {
-    return iconColor ? { ...s.eventType, ...{ color: iconColor, borderColor: iconColor } } : s.eventType
+  mergeNotificationStyle(iconColor, bubbleStyle) {
+    const iconColorStyle = iconColor ? {...s.eventType, ...{color: iconColor, borderColor: iconColor}} : s.eventType
+    return {...iconColorStyle, ...bubbleStyle}
   }
 
   mergeContentStyle(contentStyle) {
     const messageStyle = this.showAsCard() ? s.cardBody : s.message
-    return contentStyle ? { ...messageStyle, ...contentStyle } : messageStyle
+    return contentStyle ? {...messageStyle, ...contentStyle} : messageStyle
   }
 
   timeStyle() {
-    return this.showAsCard() ? s.time : { ...s.time, color: '#303e49' }
+    return this.showAsCard() ? s.time : {...s.time, color: '#303e49'}
   }
 
   showAsCard() {
-    const { container } = this.props
+    const {container} = this.props
     return container === 'card'
   }
 
   containerStyle() {
-    const { style } = this.props
-    const containerStyle = { ...s.eventContainer, ...style }
-    return this.showAsCard() ? { ...containerStyle, ...s.card } : containerStyle
+    const {style} = this.props
+    const containerStyle = {...s.eventContainer, ...style}
+    return this.showAsCard() ? {...containerStyle, ...s.card} : containerStyle
   }
 
   iconStyle(iconStyle) {
-    return { ...s.materialIcons, iconStyle }
+    return {...s.materialIcons, ...iconStyle}
   }
 
   render() {
-    const { createdAt, title, contentStyle, iconStyle, buttons, icon, iconColor, container, cardHeaderStyle, ...otherProps } = this.props
+    const {
+      createdAt,
+      title,
+      contentStyle,
+      iconStyle,
+      buttons,
+      icon,
+      iconColor,
+      container,
+      cardHeaderStyle,
+      ...otherProps
+    } = this.props
     return (
       <div style={s.event}>
-        <div style={this.mergeNotificationStyle(iconColor)}>
-          <span style={this.iconStyle(iconStyle)}>{icon}</span>
+        <div style={this.mergeNotificationStyle(iconColor, iconStyle)}>
+          <span style={s.materialIcons}>
+            {icon}
+          </span>
         </div>
         <div {...otherProps} style={this.containerStyle()}>
           <div style={s.eventContainerBefore} />
-          <div style={container === 'card' ? { ...s.cardTitle, ...cardHeaderStyle } : {}}>
-            <div style={this.timeStyle()}>{createdAt}</div>
-            <div>{title}</div>
-            <div style={s.actionButtons}>{buttons}</div>
+          <div style={container === 'card' ? {...s.cardTitle, ...cardHeaderStyle} : {}}>
+            <div style={this.timeStyle()}>
+              {createdAt}
+            </div>
+            <div>
+              {title}
+            </div>
+            <div style={s.actionButtons}>
+              {buttons}
+            </div>
           </div>
           {this.props.children &&
             <div style={this.mergeContentStyle(contentStyle)}>