fix(): Remove container prop from getting injected into card div

#4
rcdexta · May 12, 2017 · 0aa4fdf · 0aa4fdf
1 parent ce3caae
commit 0aa4fdf
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,16 +1,21 @@
-import { configure } from '@kadira/storybook';
+import { configure, setAddon } from '@kadira/storybook';
 import { setOptions } from '@kadira/storybook-addon-options';
+import infoAddon, { setDefaults } from '@kadira/react-storybook-addon-info';
 
 setOptions({
   name: 'react event timeline',
   url: 'https://github.com/rcdexta/react-event-timeline',
   goFullScreen: false,
   showLeftPanel: true,
-  showDownPanel: true,
+  showDownPanel: false,
   showSearchBox: false,
   downPanelInRight: false
 });
 
+setDefaults({ header: false, inline: true, propTables: false });
+setAddon(infoAddon)
+
+
 function loadStories () {
   require('../stories/App.story');
 }

diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
@@ -27,12 +27,8 @@ class TimelineEvent extends Component {
     return this.showAsCard() ? {...s.eventContainer, ...s.card, ...userStyle} : s.eventContainer
   }
 
-  cardTitleStyle() {
-    return this.showAsCard() ? s.cardTitle : {}
-  }
-
   render() {
-    const {createdAt, title, contentStyle, buttons, icon, iconColor, ...otherProps} = this.props
+    const {createdAt, title, contentStyle, buttons, icon, iconColor, container, ...otherProps} = this.props
     return <div style={s.event}>
       <div style={this.mergeNotificationStyle(iconColor)}>
         <span style={s.materialIcons}>{icon}</span>
@@ -41,7 +37,7 @@ class TimelineEvent extends Component {
 
         <div style={s.eventContainerBefore} />
 
-        <div style={this.cardTitleStyle()}>
+        <div style={container === 'card' ? s.cardTitle : {}}>
           <div style={this.timeStyle()}>{createdAt}</div>
           <div>{title}</div>
           <div style={s.actionButtons}>{buttons}</div>

diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "test": "mocha --require tests/config/setup 'tests/**/*.test.js'",
     "test:watch": "mocha --require tests/config/setup 'tests/**/*.test.js' --watch",
     "test:cover": "istanbul cover -x *.test.js _mocha -- -R spec --require tests/config/setup 'tests/**/*.test.js'",
-    "test:report": "cat ./coverage/lcov.info | codecov && rm -rf ./coverage",
     "build": "babel components --out-dir dist",
     "docs": "build-storybook -o docs",
     "commit": "git cz",
@@ -40,6 +39,7 @@
   },
   "homepage": "https://github.com/rcdexta/react-event-timeline",
   "devDependencies": {
+    "@kadira/react-storybook-addon-info": "^3.3.0",
     "@kadira/storybook": "^2.24.0",
     "@kadira/storybook-addon-actions": "^1.1.1",
     "@kadira/storybook-addon-knobs": "^1.3.0",

diff --git a/stories/App.story.js b/stories/App.story.js
@@ -18,7 +18,7 @@ const container = (story) => (
 
 storiesOf('Timeline', module)
     .addDecorator(container)
-    .add('Default View', () => (
+    .addWithInfo('Default View', () => (
         <Timeline>
             <TimelineEvent title="John Doe sent a SMS"
                            createdAt="2016-09-12 10:06 PM"
@@ -43,7 +43,7 @@ storiesOf('Timeline', module)
 
         </Timeline>
     ))
-    .add('Action buttons', () => (
+    .addWithInfo('Action buttons', () => (
         <Timeline>
             <TimelineEvent title="You have sent a SMS"
                            createdAt="2016-10-02 08:02 AM"
@@ -54,7 +54,7 @@ storiesOf('Timeline', module)
             </TimelineEvent>
         </Timeline>
     ))
-    .add('Content with images', () => (
+    .addWithInfo('Content with images', () => (
         <Timeline>
             <TimelineEvent title="John Doe sent a SMS"
                            createdAt="2016-09-12 10:06 PM"
@@ -66,7 +66,7 @@ storiesOf('Timeline', module)
             </TimelineEvent>
         </Timeline>
     ))
-    .add('Card Appearance', () => {
+    .addWithInfo('Card Appearance', () => {
         return <Timeline>
             <TimelineEvent title="Introduction to Redux in React applications"
                            createdAt="2016-09-12 10:06 PM"
@@ -79,7 +79,7 @@ storiesOf('Timeline', module)
             </TimelineEvent>
         </Timeline>
     })
-    .add('Event handlers', () => {
+    .addWithInfo('Event handlers', () => {
         return <Timeline>
             <TimelineEvent title="John Doe sent you a click bomb"
                            createdAt="2016-09-12 10:06 PM"
@@ -90,7 +90,7 @@ storiesOf('Timeline', module)
             </TimelineEvent>
         </Timeline>
     })
-    .add('Custom Styling', () => (
+    .addWithInfo('Custom Styling', () => (
         <Timeline>
             <TimelineEvent title="John Doe sent a SMS"
                            createdAt="2016-09-12 10:06 PM"