From 8571f00fcb9f081fe31249325480638f999214b6 Mon Sep 17 00:00:00 2001
From: Will Bamford <w.bamford@gmail.com>
Date: Thu, 27 Apr 2017 11:49:56 +0100
Subject: [PATCH 1/3] Add placeholder segmented element and allow this to be
 specified

---
 lib/components/Elements/Segment.js         |  1 +
 lib/components/Elements/Segmented.js       | 80 ++++++++++++++++++++++
 lib/components/Elements/index.js           | 21 ++++++
 lib/components/Timeline/Tracks/Element.js  | 19 +++--
 src/components/Elements/Segmented.jsx      | 33 +++++++++
 src/components/Elements/index.js           |  7 ++
 src/components/Timeline/Tracks/Element.jsx | 41 ++++++-----
 7 files changed, 178 insertions(+), 24 deletions(-)
 create mode 100644 lib/components/Elements/Segment.js
 create mode 100644 lib/components/Elements/Segmented.js
 create mode 100644 lib/components/Elements/index.js
 create mode 100644 src/components/Elements/Segmented.jsx
 create mode 100644 src/components/Elements/index.js

diff --git a/lib/components/Elements/Segment.js b/lib/components/Elements/Segment.js
new file mode 100644
index 00000000..9a390c31
--- /dev/null
+++ b/lib/components/Elements/Segment.js
@@ -0,0 +1 @@
+"use strict";
\ No newline at end of file
diff --git a/lib/components/Elements/Segmented.js b/lib/components/Elements/Segmented.js
new file mode 100644
index 00000000..f3c3ea9c
--- /dev/null
+++ b/lib/components/Elements/Segmented.js
@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _formatDate = require('../../utils/formatDate');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Segmented = function Segmented(_ref) {
+  var title = _ref.title,
+      start = _ref.start,
+      end = _ref.end,
+      style = _ref.style,
+      tooltip = _ref.tooltip;
+  return _react2.default.createElement(
+    'div',
+    { className: 'element', style: style },
+    _react2.default.createElement(
+      'div',
+      { className: 'element__content', 'aria-hidden': 'true' },
+      'Segmented'
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'element__tooltip' },
+      tooltip ? _react2.default.createElement(
+        'div',
+        null,
+        tooltip
+      ) : _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          null,
+          'Segmented'
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'strong',
+            null,
+            'Start'
+          ),
+          ' ',
+          (0, _formatDate.getDayMonth)(start)
+        ),
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'strong',
+            null,
+            'End'
+          ),
+          ' ',
+          (0, _formatDate.getDayMonth)(end)
+        )
+      )
+    )
+  );
+};
+
+Segmented.propTypes = {
+  title: _react.PropTypes.string,
+  start: _react.PropTypes.instanceOf(Date),
+  end: _react.PropTypes.instanceOf(Date),
+  style: _react.PropTypes.shape({}),
+  tooltip: _react.PropTypes.string
+};
+
+exports.default = Segmented;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/lib/components/Elements/index.js b/lib/components/Elements/index.js
new file mode 100644
index 00000000..ab90b470
--- /dev/null
+++ b/lib/components/Elements/index.js
@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Basic = require('./Basic');
+
+var _Basic2 = _interopRequireDefault(_Basic);
+
+var _Segmented = require('./Segmented');
+
+var _Segmented2 = _interopRequireDefault(_Segmented);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  Basic: _Basic2.default,
+  Segmented: _Segmented2.default
+};
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/lib/components/Timeline/Tracks/Element.js b/lib/components/Timeline/Tracks/Element.js
index ff8387a3..2a4efb9e 100644
--- a/lib/components/Timeline/Tracks/Element.js
+++ b/lib/components/Timeline/Tracks/Element.js
@@ -12,20 +12,24 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Basic = require('../../Elements/Basic');
+var _Elements = require('../../Elements');
 
-var _Basic2 = _interopRequireDefault(_Basic);
+var _Elements2 = _interopRequireDefault(_Elements);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Element = function Element(_ref) {
-  var time = _ref.time,
+var TrackElement = function TrackElement(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === undefined ? 'Basic' : _ref$type,
+      time = _ref.time,
       style = _ref.style,
       id = _ref.id,
       title = _ref.title,
       start = _ref.start,
       end = _ref.end,
       tooltip = _ref.tooltip;
+
+  var Element = _Elements2.default[type];
   return _react2.default.createElement(
     'div',
     {
@@ -33,7 +37,7 @@ var Element = function Element(_ref) {
       className: 'track__element',
       style: time.toStyleLeftAndWidth(start, end)
     },
-    _react2.default.createElement(_Basic2.default, {
+    _react2.default.createElement(Element, {
       tooltip: tooltip,
       title: title,
       start: start,
@@ -43,7 +47,8 @@ var Element = function Element(_ref) {
   );
 };
 
-Element.propTypes = {
+TrackElement.propTypes = {
+  type: _react.PropTypes.string,
   time: _react.PropTypes.shape({}).isRequired,
   style: _react.PropTypes.shape({}),
   id: _react.PropTypes.string.isRequired,
@@ -53,5 +58,5 @@ Element.propTypes = {
   tooltip: _react.PropTypes.string
 };
 
-exports.default = Element;
+exports.default = TrackElement;
 module.exports = exports['default'];
\ No newline at end of file
diff --git a/src/components/Elements/Segmented.jsx b/src/components/Elements/Segmented.jsx
new file mode 100644
index 00000000..4c873fe9
--- /dev/null
+++ b/src/components/Elements/Segmented.jsx
@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react'
+
+import { getDayMonth } from '../../utils/formatDate'
+
+const Segmented = ({ title, start, end, style, tooltip }) =>
+  <div className="element" style={style}>
+    <div className="element__content" aria-hidden="true">
+      Segmented
+    </div>
+    <div className="element__tooltip">
+      {
+        tooltip
+        ? <div>{tooltip}</div>
+        : (
+          <div>
+            <div>Segmented</div>
+            <div><strong>Start</strong> {getDayMonth(start)}</div>
+            <div><strong>End</strong> {getDayMonth(end)}</div>
+          </div>
+        )
+      }
+    </div>
+  </div>
+
+Segmented.propTypes = {
+  title: PropTypes.string,
+  start: PropTypes.instanceOf(Date),
+  end: PropTypes.instanceOf(Date),
+  style: PropTypes.shape({}),
+  tooltip: PropTypes.string
+}
+
+export default Segmented
diff --git a/src/components/Elements/index.js b/src/components/Elements/index.js
new file mode 100644
index 00000000..f6fea4ff
--- /dev/null
+++ b/src/components/Elements/index.js
@@ -0,0 +1,7 @@
+import Basic from './Basic'
+import Segmented from './Segmented'
+
+export default {
+  Basic,
+  Segmented
+}
diff --git a/src/components/Timeline/Tracks/Element.jsx b/src/components/Timeline/Tracks/Element.jsx
index e16ad8cf..47ac478a 100644
--- a/src/components/Timeline/Tracks/Element.jsx
+++ b/src/components/Timeline/Tracks/Element.jsx
@@ -1,22 +1,29 @@
 import React, { PropTypes } from 'react'
-import BasicElement from '../../Elements/Basic'
+import elements from '../../Elements'
 
-const Element = ({ time, style, id, title, start, end, tooltip }) =>
-  <div
-    key={id}
-    className="track__element"
-    style={time.toStyleLeftAndWidth(start, end)}
-  >
-    <BasicElement
-      tooltip={tooltip}
-      title={title}
-      start={start}
-      end={end}
-      style={{ ...style }}
-    />
-  </div>
+const TrackElement = ({ type = 'Basic', time, style, id, title, start, end, tooltip }) => {
+  const Element = elements[type]
+  return (
+    <div
+      key={id}
+      className="track__element"
+      style={time.toStyleLeftAndWidth(start, end)}
+    >
+      {
+        <Element
+          tooltip={tooltip}
+          title={title}
+          start={start}
+          end={end}
+          style={{ ...style }}
+        />
+      }
+    </div>
+  )
+}
 
-Element.propTypes = {
+TrackElement.propTypes = {
+  type: PropTypes.string,
   time: PropTypes.shape({}).isRequired,
   style: PropTypes.shape({}),
   id: PropTypes.string.isRequired,
@@ -26,4 +33,4 @@ Element.propTypes = {
   tooltip: PropTypes.string
 }
 
-export default Element
+export default TrackElement

From a8d54d0578232ba17d336a4c0455a7a94682c2c2 Mon Sep 17 00:00:00 2001
From: Will Bamford <w.bamford@gmail.com>
Date: Thu, 27 Apr 2017 11:52:27 +0100
Subject: [PATCH 2/3] Fix linting

---
 lib/components/Elements/Segmented.js  | 1 +
 src/components/Elements/Segmented.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/components/Elements/Segmented.js b/lib/components/Elements/Segmented.js
index f3c3ea9c..440bb5f5 100644
--- a/lib/components/Elements/Segmented.js
+++ b/lib/components/Elements/Segmented.js
@@ -12,6 +12,7 @@ var _formatDate = require('../../utils/formatDate');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// eslint-disable-next-line no-unused-vars
 var Segmented = function Segmented(_ref) {
   var title = _ref.title,
       start = _ref.start,
diff --git a/src/components/Elements/Segmented.jsx b/src/components/Elements/Segmented.jsx
index 4c873fe9..228ed459 100644
--- a/src/components/Elements/Segmented.jsx
+++ b/src/components/Elements/Segmented.jsx
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 
 import { getDayMonth } from '../../utils/formatDate'
 
+// eslint-disable-next-line no-unused-vars
 const Segmented = ({ title, start, end, style, tooltip }) =>
   <div className="element" style={style}>
     <div className="element__content" aria-hidden="true">

From 4f8acdb03e9600a032c7950dde0019af504d4a9a Mon Sep 17 00:00:00 2001
From: Will Bamford <w.bamford@gmail.com>
Date: Tue, 2 May 2017 08:08:53 +0100
Subject: [PATCH 3/3] Allow element type to be passed

---
 lib/components/Elements/Basic.js             |   2 +-
 lib/components/Elements/Segment.js           |   1 -
 lib/components/Elements/Segmented.js         | 111 +++++++++----------
 lib/components/Timeline/Tracks/Element.js    |  36 ++----
 lib/css/style.css                            |  12 +-
 src/components/Elements/Basic.jsx            |   2 +-
 src/components/Elements/Segmented.jsx        |  59 +++++++---
 src/components/Timeline/Tracks/Element.jsx   |  20 +---
 src/scss/components/_element.scss            |  13 +--
 src/scss/components/_track-key.scss          |   3 -
 src/scss/components/elements/_segmented.scss |   6 +
 src/scss/style.scss                          |   8 ++
 12 files changed, 142 insertions(+), 131 deletions(-)
 delete mode 100644 lib/components/Elements/Segment.js
 create mode 100644 src/scss/components/elements/_segmented.scss

diff --git a/lib/components/Elements/Basic.js b/lib/components/Elements/Basic.js
index cbe8f2b2..51f2e24f 100644
--- a/lib/components/Elements/Basic.js
+++ b/lib/components/Elements/Basic.js
@@ -23,7 +23,7 @@ var Basic = function Basic(_ref) {
     { className: 'element', style: style },
     _react2.default.createElement(
       'div',
-      { className: 'element__content', 'aria-hidden': 'true' },
+      { className: 'element__title' },
       title
     ),
     _react2.default.createElement(
diff --git a/lib/components/Elements/Segment.js b/lib/components/Elements/Segment.js
deleted file mode 100644
index 9a390c31..00000000
--- a/lib/components/Elements/Segment.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";
\ No newline at end of file
diff --git a/lib/components/Elements/Segmented.js b/lib/components/Elements/Segmented.js
index 440bb5f5..eb5dfd02 100644
--- a/lib/components/Elements/Segmented.js
+++ b/lib/components/Elements/Segmented.js
@@ -1,81 +1,80 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _react = require('react');
+var _extends2 = require("babel-runtime/helpers/extends");
 
-var _react2 = _interopRequireDefault(_react);
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require("react");
 
-var _formatDate = require('../../utils/formatDate');
+var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line no-unused-vars
-var Segmented = function Segmented(_ref) {
-  var title = _ref.title,
+var Segment = function Segment(_ref) {
+  var time = _ref.time,
+      offsetX = _ref.offsetX,
       start = _ref.start,
       end = _ref.end,
-      style = _ref.style,
-      tooltip = _ref.tooltip;
+      style = _ref.style;
+
+  var left = time.toX(start) - offsetX;
+  var width = time.toX(end) - left - offsetX;
+  var segmentStyle = (0, _extends3.default)({}, style, {
+    left: left,
+    width: width
+  });
+  return _react2.default.createElement("div", { className: "segmented__segment", style: segmentStyle });
+};
+
+Segment.propTypes = {
+  time: _react.PropTypes.shape({}).isRequired,
+  offsetX: _react.PropTypes.number.isRequired,
+  start: _react.PropTypes.instanceOf(Date).isRequired,
+  end: _react.PropTypes.instanceOf(Date).isRequired,
+  style: _react.PropTypes.shape({})
+};
+
+// eslint-disable-next-line no-unused-vars
+var Segmented = function Segmented(_ref2) {
+  var time = _ref2.time,
+      title = _ref2.title,
+      start = _ref2.start,
+      end = _ref2.end,
+      tooltip = _ref2.tooltip,
+      segments = _ref2.segments;
+
+  var offsetX = time.toX(start);
   return _react2.default.createElement(
-    'div',
-    { className: 'element', style: style },
-    _react2.default.createElement(
-      'div',
-      { className: 'element__content', 'aria-hidden': 'true' },
-      'Segmented'
-    ),
+    "div",
+    { className: "element segmented" },
+    segments.map(function (segment) {
+      return _react2.default.createElement(Segment, (0, _extends3.default)({
+        key: segment.id
+      }, segment, {
+        offsetX: offsetX,
+        time: time
+      }));
+    }),
     _react2.default.createElement(
-      'div',
-      { className: 'element__tooltip' },
-      tooltip ? _react2.default.createElement(
-        'div',
-        null,
-        tooltip
-      ) : _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          null,
-          'Segmented'
-        ),
-        _react2.default.createElement(
-          'div',
-          null,
-          _react2.default.createElement(
-            'strong',
-            null,
-            'Start'
-          ),
-          ' ',
-          (0, _formatDate.getDayMonth)(start)
-        ),
-        _react2.default.createElement(
-          'div',
-          null,
-          _react2.default.createElement(
-            'strong',
-            null,
-            'End'
-          ),
-          ' ',
-          (0, _formatDate.getDayMonth)(end)
-        )
-      )
+      "div",
+      { className: "element__title" },
+      title
     )
   );
 };
 
 Segmented.propTypes = {
+  time: _react.PropTypes.shape({}).isRequired,
   title: _react.PropTypes.string,
   start: _react.PropTypes.instanceOf(Date),
   end: _react.PropTypes.instanceOf(Date),
-  style: _react.PropTypes.shape({}),
-  tooltip: _react.PropTypes.string
+  tooltip: _react.PropTypes.string,
+  segments: _react.PropTypes.arrayOf(_react.PropTypes.shape({ id: _react.PropTypes.string.isRequired })).isRequired
 };
 
 exports.default = Segmented;
-module.exports = exports['default'];
\ No newline at end of file
+module.exports = exports["default"];
\ No newline at end of file
diff --git a/lib/components/Timeline/Tracks/Element.js b/lib/components/Timeline/Tracks/Element.js
index 2a4efb9e..d9da7ab5 100644
--- a/lib/components/Timeline/Tracks/Element.js
+++ b/lib/components/Timeline/Tracks/Element.js
@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -18,16 +14,13 @@ var _Elements2 = _interopRequireDefault(_Elements);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var TrackElement = function TrackElement(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === undefined ? 'Basic' : _ref$type,
-      time = _ref.time,
-      style = _ref.style,
-      id = _ref.id,
-      title = _ref.title,
-      start = _ref.start,
-      end = _ref.end,
-      tooltip = _ref.tooltip;
+var TrackElement = function TrackElement(props) {
+  var _props$type = props.type,
+      type = _props$type === undefined ? 'Basic' : _props$type,
+      id = props.id,
+      start = props.start,
+      end = props.end,
+      time = props.time;
 
   var Element = _Elements2.default[type];
   return _react2.default.createElement(
@@ -37,25 +30,16 @@ var TrackElement = function TrackElement(_ref) {
       className: 'track__element',
       style: time.toStyleLeftAndWidth(start, end)
     },
-    _react2.default.createElement(Element, {
-      tooltip: tooltip,
-      title: title,
-      start: start,
-      end: end,
-      style: (0, _extends3.default)({}, style)
-    })
+    _react2.default.createElement(Element, props)
   );
 };
 
 TrackElement.propTypes = {
-  type: _react.PropTypes.string,
   time: _react.PropTypes.shape({}).isRequired,
-  style: _react.PropTypes.shape({}),
+  type: _react.PropTypes.string,
   id: _react.PropTypes.string.isRequired,
-  title: _react.PropTypes.string,
   start: _react.PropTypes.instanceOf(Date).isRequired,
-  end: _react.PropTypes.instanceOf(Date).isRequired,
-  tooltip: _react.PropTypes.string
+  end: _react.PropTypes.instanceOf(Date).isRequired
 };
 
 exports.default = TrackElement;
diff --git a/lib/css/style.css b/lib/css/style.css
index 23736cbe..8500094c 100644
--- a/lib/css/style.css
+++ b/lib/css/style.css
@@ -43,10 +43,11 @@
     position: relative;
     height: 40px;
     line-height: 40px;
-    background: #06f;
-    color: #fff;
+    background: "#000";
+    color: "#fff";
     text-align: center; }
-  .react-timeline .element__content {
+  .react-timeline .element__title {
+    position: relative;
     padding: 0 10px;
     overflow: hidden;
     white-space: nowrap;
@@ -246,3 +247,8 @@
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iOCIgdmlld0JveD0iMTYgMjQgMjQgOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMjRoMjR2OEgxNnoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); }
   .react-timeline .track-key__toggle--open::before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjE2IDE1IDI0IDI1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTMyIDE2djI0aC04VjE2eiIvPjxwYXRoIGQ9Ik0xNiAyNGgyNHY4SDE2eiIvPjwvZz48L3N2Zz4="); }
+  .react-timeline .segmented__segment {
+    position: absolute;
+    top: 0;
+    height: 40px;
+    line-height: 40px; }
diff --git a/src/components/Elements/Basic.jsx b/src/components/Elements/Basic.jsx
index 201b3863..bcd792cc 100644
--- a/src/components/Elements/Basic.jsx
+++ b/src/components/Elements/Basic.jsx
@@ -4,7 +4,7 @@ import { getDayMonth } from '../../utils/formatDate'
 
 const Basic = ({ title, start, end, style, tooltip }) =>
   <div className="element" style={style}>
-    <div className="element__content" aria-hidden="true">
+    <div className="element__title">
       { title }
     </div>
     <div className="element__tooltip">
diff --git a/src/components/Elements/Segmented.jsx b/src/components/Elements/Segmented.jsx
index 228ed459..2bc7ff18 100644
--- a/src/components/Elements/Segmented.jsx
+++ b/src/components/Elements/Segmented.jsx
@@ -1,34 +1,57 @@
 import React, { PropTypes } from 'react'
 
-import { getDayMonth } from '../../utils/formatDate'
+const Segment = ({ time, offsetX, start, end, style }) => {
+  const left = time.toX(start) - offsetX
+  const width = time.toX(end) - left - offsetX
+  const segmentStyle = {
+    ...style,
+    left,
+    width
+  }
+  return (
+    <div className="segmented__segment" style={segmentStyle} />
+  )
+}
+
+Segment.propTypes = {
+  time: PropTypes.shape({}).isRequired,
+  offsetX: PropTypes.number.isRequired,
+  start: PropTypes.instanceOf(Date).isRequired,
+  end: PropTypes.instanceOf(Date).isRequired,
+  style: PropTypes.shape({})
+}
 
 // eslint-disable-next-line no-unused-vars
-const Segmented = ({ title, start, end, style, tooltip }) =>
-  <div className="element" style={style}>
-    <div className="element__content" aria-hidden="true">
-      Segmented
-    </div>
-    <div className="element__tooltip">
+const Segmented = ({ time, title, start, end, tooltip, segments }) => {
+  const offsetX = time.toX(start)
+  return (
+    <div className="element segmented">
       {
-        tooltip
-        ? <div>{tooltip}</div>
-        : (
-          <div>
-            <div>Segmented</div>
-            <div><strong>Start</strong> {getDayMonth(start)}</div>
-            <div><strong>End</strong> {getDayMonth(end)}</div>
-          </div>
+        segments.map(segment =>
+          <Segment
+            key={segment.id}
+            {...segment}
+            offsetX={offsetX}
+            time={time}
+          />
         )
       }
+      <div className="element__title">
+        { title }
+      </div>
     </div>
-  </div>
+  )
+}
 
 Segmented.propTypes = {
+  time: PropTypes.shape({}).isRequired,
   title: PropTypes.string,
   start: PropTypes.instanceOf(Date),
   end: PropTypes.instanceOf(Date),
-  style: PropTypes.shape({}),
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string.isRequired })
+  ).isRequired
 }
 
 export default Segmented
diff --git a/src/components/Timeline/Tracks/Element.jsx b/src/components/Timeline/Tracks/Element.jsx
index 47ac478a..8e4dc31b 100644
--- a/src/components/Timeline/Tracks/Element.jsx
+++ b/src/components/Timeline/Tracks/Element.jsx
@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
 import elements from '../../Elements'
 
-const TrackElement = ({ type = 'Basic', time, style, id, title, start, end, tooltip }) => {
+const TrackElement = (props) => {
+  const { type = 'Basic', id, start, end, time } = props
   const Element = elements[type]
   return (
     <div
@@ -9,28 +10,17 @@ const TrackElement = ({ type = 'Basic', time, style, id, title, start, end, tool
       className="track__element"
       style={time.toStyleLeftAndWidth(start, end)}
     >
-      {
-        <Element
-          tooltip={tooltip}
-          title={title}
-          start={start}
-          end={end}
-          style={{ ...style }}
-        />
-      }
+      <Element {...props} />
     </div>
   )
 }
 
 TrackElement.propTypes = {
-  type: PropTypes.string,
   time: PropTypes.shape({}).isRequired,
-  style: PropTypes.shape({}),
+  type: PropTypes.string,
   id: PropTypes.string.isRequired,
-  title: PropTypes.string,
   start: PropTypes.instanceOf(Date).isRequired,
-  end: PropTypes.instanceOf(Date).isRequired,
-  tooltip: PropTypes.string
+  end: PropTypes.instanceOf(Date).isRequired
 }
 
 export default TrackElement
diff --git a/src/scss/components/_element.scss b/src/scss/components/_element.scss
index 6152ccf8..0c455049 100644
--- a/src/scss/components/_element.scss
+++ b/src/scss/components/_element.scss
@@ -1,15 +1,14 @@
 .element {
-  $height: $react-timeline-track-height - 2 * $react-timeline-element-spacing;
-
   position: relative;
-  height: $height;
-  line-height: $height;
-  background: #06f;
-  color: #fff;
+  height: $react-timeline-element-height;
+  line-height: $react-timeline-element-height;
+  background: $react-timeline-element-text-background-color;
+  color: $react-timeline-element-text-color;
   text-align: center;
 }
 
-.element__content {
+.element__title {
+  position: relative;
   padding: 0 10px;
   overflow: hidden;
   white-space: nowrap;
diff --git a/src/scss/components/_track-key.scss b/src/scss/components/_track-key.scss
index acc5193e..894b2881 100644
--- a/src/scss/components/_track-key.scss
+++ b/src/scss/components/_track-key.scss
@@ -1,7 +1,4 @@
 .track-key {
-  // height: $react-timeline-track-height;
-  // background: #999;
-  // color: #fff;
 }
 
 .track-key__entry {
diff --git a/src/scss/components/elements/_segmented.scss b/src/scss/components/elements/_segmented.scss
new file mode 100644
index 00000000..1d733d07
--- /dev/null
+++ b/src/scss/components/elements/_segmented.scss
@@ -0,0 +1,6 @@
+.segmented__segment {
+  position: absolute;
+  top: 0;
+  height: $react-timeline-element-height;
+  line-height: $react-timeline-element-height;
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index c40d6d8c..936d0a49 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -16,6 +16,10 @@ $react-timeline-sidebar-key-indent-width: 20px !default;
 // Track / Elements
 $react-timeline-track-height: 60px !default;
 $react-timeline-element-spacing: 10px !default;
+$react-timeline-element-text-color: '#fff' !default;
+$react-timeline-element-text-background-color: '#000' !default;
+$react-timeline-element-height: $react-timeline-track-height - 2 * $react-timeline-element-spacing;
+
 
 // Markers
 $react-timeline-marker-label-height: 50px !default;
@@ -35,6 +39,7 @@ $react-timeline-button-background-color-hover: #4c4c4c !default;
   font-family: $react-timeline-font-family;
   color: $react-timeline-text-color;
 
+  // Components
   @import 'components/controls';
   @import 'components/element';
   @import 'components/layout';
@@ -47,4 +52,7 @@ $react-timeline-button-background-color-hover: #4c4c4c !default;
   @import 'components/tracks';
   @import 'components/track-key';
   @import 'components/track-keys';
+
+  // Elements
+  @import 'components/elements/segmented';
 }