fix($browser): Add subtitle as a prop. titleStyle and subtitleStyle w…

…ill help override title and sub #9
rcdexta · Sep 25, 2017 · 31c9167 · 31c9167
1 parent b2c0a16
commit 31c9167
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -76,13 +76,16 @@ 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) |
+| subtitle     | node   | If you prefer having the title at the top and some caption below, omit createdAt and specify title and subtitle |
 | icon         | node   | The icon to show as event lable. Can be a SVG or font 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 |
 | style        | object   | Override style for the entire event container. Can be used to modify card appearance if container is selected as `card` |
+| titleStyle   | object   | Override style for the title content |
+| subtitleStyle | object | Override style for the subtitle content |
 | cardHeaderStyle | object | Override style for the card header if container is `card` |
 
 ### TimelineBlip

diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
@@ -36,13 +36,16 @@ class TimelineEvent extends Component {
     const {
       createdAt,
       title,
+      subtitle,
       contentStyle,
       iconStyle,
       buttons,
       icon,
       iconColor,
       container,
       cardHeaderStyle,
+      titleStyle,
+      subtitleStyle,
       ...otherProps
     } = this.props
     return (
@@ -55,12 +58,17 @@ class TimelineEvent extends Component {
         <div {...otherProps} style={this.containerStyle()}>
           <div style={s.eventContainerBefore} />
           <div style={container === 'card' ? {...s.cardTitle, ...cardHeaderStyle} : {}}>
-            <div style={this.timeStyle()}>
-              {createdAt}
-            </div>
-            <div>
+            {createdAt &&
+              <div style={this.timeStyle()}>
+                {createdAt}
+              </div>}
+            <div style={titleStyle}>
               {title}
             </div>
+            {subtitle &&
+              <div style={{...s.subtitle, ...subtitleStyle}}>
+                {subtitle}
+              </div>}
             <div style={s.actionButtons}>
               {buttons}
             </div>
@@ -79,7 +87,8 @@ class TimelineEvent extends Component {
 
 TimelineEvent.propTypes = {
   title: PropTypes.node.isRequired,
-  createdAt: PropTypes.node.isRequired,
+  subtitle: PropTypes.node,
+  createdAt: PropTypes.node,
   children: PropTypes.node,
   buttons: PropTypes.node,
   container: PropTypes.string,
@@ -88,15 +97,19 @@ TimelineEvent.propTypes = {
   iconStyle: PropTypes.object,
   contentStyle: PropTypes.object,
   cardHeaderStyle: PropTypes.object,
-  style: PropTypes.object
+  style: PropTypes.object,
+  titleStyle: PropTypes.object,
+  subtitleStyle: PropTypes.object
 }
 
 TimelineEvent.defaultProps = {
   createdAt: undefined,
   iconStyle: {},
   contentStyle: {},
   cardHeaderStyle: {},
-  style: {}
+  style: {},
+  titleStyle: {},
+  subtitleStyle: {}
 }
 
 export default TimelineEvent
diff --git a/components/styles.js b/components/styles.js
@@ -65,6 +65,11 @@ let style = {
   time: {
     marginBottom: 3
   },
+  subtitle: {
+    marginTop: 2,
+    fontSize: '85%',
+    color: '#777'
+  },
   message: {
     width: '98%',
     backgroundColor: '#ffffff',

diff --git a/stories/App.story.js b/stories/App.story.js
@@ -232,5 +232,32 @@ storiesOf('Timeline', module)
         }
       }
       return <DynamicTimeline />
-    })
-  )
+    }))
+    .add(
+        'Title and Subtitle styling',
+        withInfo('Add your own title and subtitle to events')(() =>
+            <Timeline>
+              <TimelineEvent
+                  title='John Doe sent a SMS'
+                  subtitle='☞ Needs RSVP'
+                  subtitleStyle={{color: '#2962FF'}}
+                  icon={<i className='material-icons md-18'>textsms</i>}
+                  iconColor='#6fba1c'
+              >
+                I received the payment for $543. Should be shipping the item within a couple of hours. Thanks for the order!
+              </TimelineEvent>
+              <TimelineEvent
+                  title='You sent an email to John Doe'
+                  titleStyle={{fontWeight: 'bold'}}
+                  subtitle='✔ Mail delivered'
+                  subtitleStyle={{color: 'green'}}
+                  icon={<i className='material-icons md-18'>email</i>}
+                  iconColor='#03a9f4'
+              >
+                  Like we talked, you said that you would share the shipment details? This is an urgent order and so I am
+                  losing patience. Can you expedite the process and pls do share the details asap. Consider this a gentle
+                  reminder if you are on track already!
+              </TimelineEvent>
+            </Timeline>
+        )
+    )