Merge pull request #295 from namespace-ee/fix/css-import-change

Removed scss import from library code.

Author: mcMickJuice

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 ### Breaking
 
 * removed `fixedHeader` prop in favor of using `position: sticky` by default
+* removed import of stylesheets in library code, put onus on user to handle this stylesheet
 
 ### Fixed
 

README.md

@@ -36,6 +36,8 @@ At the very minimum:
 
 ```jsx
 import Timeline from 'react-calendar-timeline'
+// make sure you include the timeline stylesheet or the timeline will not be styled
+import 'react-calender-timeline/lib/Timeline.css'
 import moment from 'moment'
 
 const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]
@@ -557,6 +559,10 @@ The children gets passed the following props:
 
 ## FAQ
 
+### My timeline is unstyled
+
+You need to include the `Timeline.css` file, either via static file reference or webpack stylesheet bundling. The file is located at `lib/Timeline.css`
+
 ### How can I have items with different colors?
 
 [Items](https://github.com/namespace-ee/react-calendar-timeline#items) have a "className" parameter. For example if you have "standard" items and "analysis" items, then you can just add an "analysis" class for your analysis items and then change the css backgroundColor property for them.

demo/index.js

@@ -1,14 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import 'react-calendar-timeline-css'
 import App from './app'
 
 import './index.html'
 
-const render = (AppToRender) => {
-  ReactDOM.render(
-    <AppToRender />,
-    document.getElementById('root')
-  )
+const render = AppToRender => {
+  ReactDOM.render(<AppToRender />, document.getElementById('root'))
 }
 
 render(App)

src/lib/Timeline.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import moment from 'moment'
-import './Timeline.scss'
 
 import Items from './items/Items'
 import InfoLabel from './layout/InfoLabel'

webpack.config.js

@@ -59,7 +59,11 @@ const config = {
     modules: [path.resolve('./demo'), 'node_modules'],
     alias: {
       '~': path.join(__dirname, './demo'),
-      'react-calendar-timeline': path.join(__dirname, './src')
+      'react-calendar-timeline': path.join(__dirname, './src'),
+      'react-calendar-timeline-css': path.join(
+        __dirname,
+        './src/lib/Timeline.scss'
+      )
     }
   },
   plugins: [