@desynova-digital/components 8.19.63 → 9.0.1

package/molecules/graphDetailCard/graphDetailCard.js

@@ -1,15 +1,15 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\nheight: 350px;\nmin-width: 295px;\nborder-radius: 4px;\nbackground: #15212F;\nbox-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\ntransition: all 0.4s ease;\nposition: relative;\noverflow: hidden;\nborder-bottom: 0px solid #07D5CD;\nmax-width: 25%;\nwidth: 100%;\nmargin: 0px 10px;\n\n&.active{\n    height: 400px;\n    border-bottom: 2px solid #07D5CD;\n    .legend-value-box {\n        right: 10px;\n    }\n}\n    \n.legend-value {\n    font-size: 10px;\n    line-height: 10px;\n    text-transform: uppercase;\n    color: #FFFFFF;\n    font-family: \'SFUIText-Regular\';\n    margin-top: 10px;\n}\n\n.legend-value-box {\n    position: absolute;\n    right: -40px;\n    transition: all 0.4s ease;\n    top: 288px;\n}\n    .graph-title{\n        font-family: \'SFUIText-Regular\';\n        font-size: 16px;\n        line-height: 16px;\n        color: #AFB2BA;\n        padding:30px;\n        text-align:center;\n    }\n\n    .indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        \n        border-radius: 50%;\n        margin-right: 5px;\n        margin-bottom: -2px;\n    }\n\n    .legend-name {\n        font-family: SFProText;\n        font-size: 10px;\n        line-height: 10px;\n        text-transform: uppercase;\n        color: #FFFFFF;\n        font-family: \'SFUIText-Regular\';\n        display: inline-block;\n    }\n\n    .legends-box {\n        padding: 20px 10px;\n        transition: all 0.4s ease;\n        display: flex;\n        justify-content: space-evenly;\n        flex-wrap: wrap;\n        position: relative;\n\n        .legend-item{\n            transition: all 0.4s ease;\n            position: relative;\n            top: 0px;\n            left: 0px;\n        }\n    }\n    \n'], ['\nheight: 350px;\nmin-width: 295px;\nborder-radius: 4px;\nbackground: #15212F;\nbox-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\ntransition: all 0.4s ease;\nposition: relative;\noverflow: hidden;\nborder-bottom: 0px solid #07D5CD;\nmax-width: 25%;\nwidth: 100%;\nmargin: 0px 10px;\n\n&.active{\n    height: 400px;\n    border-bottom: 2px solid #07D5CD;\n    .legend-value-box {\n        right: 10px;\n    }\n}\n    \n.legend-value {\n    font-size: 10px;\n    line-height: 10px;\n    text-transform: uppercase;\n    color: #FFFFFF;\n    font-family: \'SFUIText-Regular\';\n    margin-top: 10px;\n}\n\n.legend-value-box {\n    position: absolute;\n    right: -40px;\n    transition: all 0.4s ease;\n    top: 288px;\n}\n    .graph-title{\n        font-family: \'SFUIText-Regular\';\n        font-size: 16px;\n        line-height: 16px;\n        color: #AFB2BA;\n        padding:30px;\n        text-align:center;\n    }\n\n    .indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        \n        border-radius: 50%;\n        margin-right: 5px;\n        margin-bottom: -2px;\n    }\n\n    .legend-name {\n        font-family: SFProText;\n        font-size: 10px;\n        line-height: 10px;\n        text-transform: uppercase;\n        color: #FFFFFF;\n        font-family: \'SFUIText-Regular\';\n        display: inline-block;\n    }\n\n    .legends-box {\n        padding: 20px 10px;\n        transition: all 0.4s ease;\n        display: flex;\n        justify-content: space-evenly;\n        flex-wrap: wrap;\n        position: relative;\n\n        .legend-item{\n            transition: all 0.4s ease;\n            position: relative;\n            top: 0px;\n            left: 0px;\n        }\n    }\n    \n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    display:flex;\n    justify-content: center;\n'], ['\n    display:flex;\n    justify-content: center;\n']);
+var _templateObject = _taggedTemplateLiteral(['\nheight: 350px;\nmin-width: 295px;\nborder-radius: 4px;\nbackground: #15212F;\nbox-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\ntransition: all 0.4s ease;\nposition: relative;\noverflow: hidden;\nborder-bottom: 0px solid ', '\nmax-width: 25%;\nwidth: 100%;\nmargin: 0px 10px;\n\n&.active{\n    height: 400px;\n    border-bottom: 2px solid ', '\n    .legend-value-box {\n        right: 10px;\n    }\n}\n    \n.legend-value {\n    font-size: 10px;\n    line-height: 10px;\n    text-transform: uppercase;\n    color: #FFFFFF;\n    font-family: \'SFUIText-Regular\';\n    margin-top: 10px;\n}\n\n.legend-value-box {\n    position: absolute;\n    right: -40px;\n    transition: all 0.4s ease;\n    top: 288px;\n}\n    .graph-title{\n        font-family: \'SFUIText-Regular\';\n        font-size: 16px;\n        line-height: 16px;\n        color: #AFB2BA;\n        padding:30px;\n        text-align:center;\n    }\n\n    .indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        \n        border-radius: 50%;\n        margin-right: 5px;\n        margin-bottom: -2px;\n    }\n\n    .legend-name {\n        font-family: SFProText;\n        font-size: 10px;\n        line-height: 10px;\n        text-transform: uppercase;\n        color: #FFFFFF;\n        font-family: \'SFUIText-Regular\';\n        display: inline-block;\n    }\n\n    .legends-box {\n        padding: 20px 10px;\n        transition: all 0.4s ease;\n        display: flex;\n        justify-content: space-evenly;\n        flex-wrap: wrap;\n        position: relative;\n\n        .legend-item{\n            transition: all 0.4s ease;\n            position: relative;\n            top: 0px;\n            left: 0px;\n        }\n    }\n    \n'], ['\nheight: 350px;\nmin-width: 295px;\nborder-radius: 4px;\nbackground: #15212F;\nbox-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\ntransition: all 0.4s ease;\nposition: relative;\noverflow: hidden;\nborder-bottom: 0px solid ', '\nmax-width: 25%;\nwidth: 100%;\nmargin: 0px 10px;\n\n&.active{\n    height: 400px;\n    border-bottom: 2px solid ', '\n    .legend-value-box {\n        right: 10px;\n    }\n}\n    \n.legend-value {\n    font-size: 10px;\n    line-height: 10px;\n    text-transform: uppercase;\n    color: #FFFFFF;\n    font-family: \'SFUIText-Regular\';\n    margin-top: 10px;\n}\n\n.legend-value-box {\n    position: absolute;\n    right: -40px;\n    transition: all 0.4s ease;\n    top: 288px;\n}\n    .graph-title{\n        font-family: \'SFUIText-Regular\';\n        font-size: 16px;\n        line-height: 16px;\n        color: #AFB2BA;\n        padding:30px;\n        text-align:center;\n    }\n\n    .indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        \n        border-radius: 50%;\n        margin-right: 5px;\n        margin-bottom: -2px;\n    }\n\n    .legend-name {\n        font-family: SFProText;\n        font-size: 10px;\n        line-height: 10px;\n        text-transform: uppercase;\n        color: #FFFFFF;\n        font-family: \'SFUIText-Regular\';\n        display: inline-block;\n    }\n\n    .legends-box {\n        padding: 20px 10px;\n        transition: all 0.4s ease;\n        display: flex;\n        justify-content: space-evenly;\n        flex-wrap: wrap;\n        position: relative;\n\n        .legend-item{\n            transition: all 0.4s ease;\n            position: relative;\n            top: 0px;\n            left: 0px;\n        }\n    }\n    \n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n'], ['\n  display: flex;\n  justify-content: center;\n']);
 
 var _react = require('react');
 
@@ -23,6 +23,8 @@ var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
+var _tokens = require('@desynova-digital/tokens');
+
 var _verticalBarGraph = require('../../atoms/graphs/verticalBarGraph');
 
 var _verticalBarGraph2 = _interopRequireDefault(_verticalBarGraph);
@@ -47,205 +49,228 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var propTypes = {};
 
-var StyledGraphDisplayComponent = _styledComponents2.default.div(_templateObject);
+var StyledGraphDisplayComponent = _styledComponents2.default.div(_templateObject, function (props) {
+  return _tokens.colors[props.theme].graph.borderColor;
+}, function (props) {
+  return _tokens.colors[props.theme].graph.borderColor;
+});
 
 var StyledVerticalBarGroup = _styledComponents2.default.div(_templateObject2);
 
 var graphColorsConst = [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#AFB2BA', '#303F51']];
 
 var GraphDetailCard = function (_Component) {
-    _inherits(GraphDetailCard, _Component);
-
-    function GraphDetailCard(props) {
-        _classCallCheck(this, GraphDetailCard);
-
-        var _this = _possibleConstructorReturn(this, (GraphDetailCard.__proto__ || Object.getPrototypeOf(GraphDetailCard)).call(this, props));
-
-        _this.componentDidMount = function () {
-
-            setTimeout(function () {
-                _this.animateActive = true;
-                if (_this.props.showLegends) {
-                    _this.showLegendsFunc();
-                }
-            }, 2000);
-        };
-
-        _this.cardClick = function (e) {
-            _this.props.onClickHandler(e);
-        };
+  _inherits(GraphDetailCard, _Component);
 
-        _this.showLegendsFunc = function () {
-            if (!_this.myRef || !_this.myRef.current) {
-                return;
-            }
-            var elements = _this.myRef.current.querySelectorAll('.legend-item');
-
-            var arrLegend = [];
-            if (elements && elements.length > 0) {
-                elements.forEach(function (ele, idx) {
-                    //console.log( ele.offsetLeft, ele.offsetTop );
-                    arrLegend.push({
-                        left: parseInt('-' + ele.offsetLeft) + 15
-                    });
-                });
-                _this.setState({
-                    cardViewExpand: _this.props.showLegends,
-                    arrLegend: arrLegend
-                });
-            } else if (_this.props.showLegends) {
-                setTimeout(function () {
-                    _this.showLegendsFunc();
-                }, 1000);
-            }
-        };
+  function GraphDetailCard(props) {
+    _classCallCheck(this, GraphDetailCard);
 
-        _this.getPosition = function (cardViewExpand, idx) {
+    var _this = _possibleConstructorReturn(this, (GraphDetailCard.__proto__ || Object.getPrototypeOf(GraphDetailCard)).call(this, props));
 
-            if (cardViewExpand && _this.state.arrLegend && _this.state.arrLegend[idx]) {
-                return {
-                    top: 20 * idx + 'px',
-                    left: _this.state.arrLegend[idx].left + 'px'
-                };
-            } else {
-                return {};
-            }
+    _this.componentDidMount = function () {
+      setTimeout(function () {
+        _this.animateActive = true;
+        if (_this.props.showLegends) {
+          _this.showLegendsFunc();
+        }
+      }, 2000);
+    };
+
+    _this.cardClick = function (e) {
+      _this.props.onClickHandler(e);
+    };
+
+    _this.showLegendsFunc = function () {
+      if (!_this.myRef || !_this.myRef.current) {
+        return;
+      }
+      var elements = _this.myRef.current.querySelectorAll('.legend-item');
+
+      var arrLegend = [];
+      if (elements && elements.length > 0) {
+        elements.forEach(function (ele, idx) {
+          //console.log( ele.offsetLeft, ele.offsetTop );
+          arrLegend.push({
+            left: parseInt('-' + ele.offsetLeft) + 15
+          });
+        });
+        _this.setState({
+          cardViewExpand: _this.props.showLegends,
+          arrLegend: arrLegend
+        });
+      } else if (_this.props.showLegends) {
+        setTimeout(function () {
+          _this.showLegendsFunc();
+        }, 1000);
+      }
+    };
+
+    _this.getPosition = function (cardViewExpand, idx) {
+      if (cardViewExpand && _this.state.arrLegend && _this.state.arrLegend[idx]) {
+        return {
+          top: 20 * idx + 'px',
+          left: _this.state.arrLegend[idx].left + 'px'
         };
-
-        _this.render = function () {
-            //return;
-            var cardViewExpand = _this.state.cardViewExpand;
-
-            var highestValue = 0;
-            if (!_this.props.data.loading && _this.props.data.data) {
-                var totalMatched = false;
-                _this.props.data.data.data.values.map(function (dataItem, idx) {
-                    if (idx === 0) {
-                        highestValue = dataItem.data;
-                    } else {
-                        highestValue = dataItem.data > highestValue ? dataItem.data : highestValue;
-                    }
-                    if (dataItem.data === _this.props.data.data.data.total) {
-                        totalMatched = true;
-                    }
-                });
-
-                highestValue = totalMatched ? _this.props.data.data.data.total : highestValue * 110 / 100;
-            }
-
-            var graphDataMain = _this.props.data.data;
-
-            var graphLoading = _this.props.data.loading;
-
-            var graphColors = _this.props.graphColors ? _this.props.graphColors : graphColorsConst;
-
-            var graphTitleName = _this.props.uniqueKey ? _this.props.uniqueKey : _this.props.data && _this.props.data.data && _this.props.data.data.data && _this.props.data.data.data.name ? _this.props.data.data.data.name : null;
+      } else {
+        return {};
+      }
+    };
+
+    _this.render = function () {
+      var theme = _this.props.theme;
+      var cardViewExpand = _this.state.cardViewExpand;
+
+      var highestValue = 0;
+      if (!_this.props.data.loading && _this.props.data.data) {
+        var totalMatched = false;
+        _this.props.data.data.data.values.map(function (dataItem, idx) {
+          if (idx === 0) {
+            highestValue = dataItem.data;
+          } else {
+            highestValue = dataItem.data > highestValue ? dataItem.data : highestValue;
+          }
+          if (dataItem.data === _this.props.data.data.data.total) {
+            totalMatched = true;
+          }
+        });
+
+        highestValue = totalMatched ? _this.props.data.data.data.total : highestValue * 110 / 100;
+      }
+
+      var graphDataMain = _this.props.data.data;
+
+      var graphLoading = _this.props.data.loading;
+
+      var graphColors = _this.props.graphColors ? _this.props.graphColors : graphColorsConst;
+
+      var graphTitleName = _this.props.uniqueKey ? _this.props.uniqueKey : _this.props.data && _this.props.data.data && _this.props.data.data.data && _this.props.data.data.data.name ? _this.props.data.data.data.name : null;
+
+      // console.log(colors.nexc.status.primary.background);
+      return _react2.default.createElement(
+        StyledGraphDisplayComponent,
+        _extends({
+          ref: _this.myRef,
+          key: graphTitleName + 'GraphDisplayComponent',
+          className: cardViewExpand ? 'graph-display-box active' : 'graph-display-box'
+        }, _this.props, {
+          onClick: function onClick(e) {
+            _this.cardClick(e);
+          },
+          theme: _this.props.theme
+        }),
+        _react2.default.createElement(
+          'div',
+          { className: 'graph-title' },
+          graphDataMain && graphDataMain.data ? graphDataMain.data.name : null
+        ),
+        graphDataMain && graphDataMain.data ? graphDataMain.graph_name === 'vertical-bar' ? _react2.default.createElement(
+          StyledVerticalBarGroup,
+          { className: 'vertical-bar-group-box' },
+          graphDataMain.data.values.map(function (dataItem, idx) {
+            return _react2.default.createElement(_verticalBarGraph2.default, _extends({}, graphTitleName ? { key: graphTitleName + idx } : null, {
+              value: (!highestValue > 0 ? 0 : dataItem.data / highestValue) * 100,
+              graphColors: graphColors[idx],
+              valueMain: dataItem.data,
+              valueSub: dataItem.name
+            }));
+          })
+        ) : graphDataMain.graph_name === 'circle-donut' && graphDataMain.graph_type === 'nested' ? _react2.default.createElement(_circleNested2.default, {
+          data: graphDataMain,
+          graphColors: graphColors,
+          valueSub: _this.props.valueSub,
+          graphPlaceholder: graphLoading
+        }) : graphDataMain.graph_name === 'circle-donut' ? _react2.default.createElement(_circleDonut2.default, {
+          data: graphDataMain,
+          graphColors: graphColors,
+          valueSub: _this.props.valueSub,
+          graphPlaceholder: graphLoading
+        }) : null : null,
+        _react2.default.createElement(
+          'div',
+          { className: 'legends-box' },
+          !graphLoading && _this.props.data.data.data.values.map(function (dataItem, idx) {
             return _react2.default.createElement(
-                StyledGraphDisplayComponent,
-                _extends({ ref: _this.myRef,
-                    key: graphTitleName + 'GraphDisplayComponent',
-                    className: cardViewExpand ? 'graph-display-box active' : 'graph-display-box'
-                }, _this.props, {
-                    onClick: function onClick(e) {
-                        _this.cardClick(e);
-                    }
-                }),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'graph-title' },
-                    graphDataMain && graphDataMain.data ? graphDataMain.data.name : null
-                ),
-                graphDataMain && graphDataMain.data ? graphDataMain.graph_name === 'vertical-bar' ? _react2.default.createElement(
-                    StyledVerticalBarGroup,
-                    { className: 'vertical-bar-group-box' },
-                    graphDataMain.data.values.map(function (dataItem, idx) {
-                        return _react2.default.createElement(_verticalBarGraph2.default, _extends({}, graphTitleName ? { key: graphTitleName + idx } : null, {
-                            value: (!highestValue > 0 ? 0 : dataItem.data / highestValue) * 100,
-                            graphColors: graphColors[idx],
-                            valueMain: dataItem.data,
-                            valueSub: dataItem.name }));
-                    })
-                ) : graphDataMain.graph_name === 'circle-donut' && graphDataMain.graph_type === 'nested' ? _react2.default.createElement(_circleNested2.default, { data: graphDataMain, graphColors: graphColors, valueSub: _this.props.valueSub, graphPlaceholder: graphLoading }) : graphDataMain.graph_name === 'circle-donut' ? _react2.default.createElement(_circleDonut2.default, { data: graphDataMain, graphColors: graphColors, valueSub: _this.props.valueSub, graphPlaceholder: graphLoading }) : null : null,
-                _react2.default.createElement(
-                    'div',
-                    { className: 'legends-box' },
-                    !graphLoading && _this.props.data.data.data.values.map(function (dataItem, idx) {
-                        return _react2.default.createElement(
-                            'div',
-                            { className: 'legend-item', key: graphTitleName + 'legend-item' + idx,
-                                style: _this.getPosition(cardViewExpand, idx)
-                            },
-                            _react2.default.createElement('span', { className: 'indicator', style: {
-                                    background: 'linear-gradient(0deg,' + graphColors[idx][1] + ' 0%,' + graphColors[idx][0] + ' 100%)'
-                                } }),
-                            _react2.default.createElement(
-                                'span',
-                                { className: 'legend-name' },
-                                dataItem.name
-                            )
-                        );
-                    })
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'legend-value-box' },
-                    !graphLoading && _this.props.data.data.data.values.map(function (dataItem, idx) {
-                        return _react2.default.createElement(
-                            'div',
-                            { className: 'legend-value', key: graphTitleName + 'legend-value' + idx,
-                                style: {}
-                            },
-                            dataItem.data
-                        );
-                    })
-                )
+              'div',
+              {
+                className: 'legend-item',
+                key: graphTitleName + 'legend-item' + idx,
+                style: _this.getPosition(cardViewExpand, idx)
+              },
+              _react2.default.createElement('span', {
+                className: 'indicator',
+                style: {
+                  background: 'linear-gradient(0deg,' + graphColors[idx][1] + ' 0%,' + graphColors[idx][0] + ' 100%)'
+                }
+              }),
+              _react2.default.createElement(
+                'span',
+                { className: 'legend-name' },
+                dataItem.name
+              )
             );
-        };
-
-        _this.state = {
-            cardViewExpand: false
-        };
-        _this.myRef = _react2.default.createRef();
-        _this.animateActive = false;
-
-        return _this;
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'legend-value-box' },
+          !graphLoading && _this.props.data.data.data.values.map(function (dataItem, idx) {
+            return _react2.default.createElement(
+              'div',
+              {
+                className: 'legend-value',
+                key: graphTitleName + 'legend-value' + idx,
+                style: {}
+              },
+              dataItem.data
+            );
+          })
+        )
+      );
+    };
+
+    _this.state = {
+      cardViewExpand: false
+    };
+    _this.myRef = _react2.default.createRef();
+    _this.animateActive = false;
+    return _this;
+  }
+
+  _createClass(GraphDetailCard, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.data && prevProps.data.data === null && this.props.data.data && this.props.data.data.data !== (prevProps.data.data ? prevProps.data.data.data : null) || this.props.showLegends !== prevProps.showLegends && this.animateActive) {
+        this.showLegendsFunc();
+      }
     }
+  }]);
 
-    _createClass(GraphDetailCard, [{
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate(prevProps) {
-            if (prevProps.data && prevProps.data.data === null && this.props.data.data && this.props.data.data.data !== (prevProps.data.data ? prevProps.data.data.data : null) || this.props.showLegends !== prevProps.showLegends && this.animateActive) {
-                this.showLegendsFunc();
-            }
-        }
-    }]);
-
-    return GraphDetailCard;
+  return GraphDetailCard;
 }(_react.Component);
 
 GraphDetailCard.propTypes = {
+  data: _propTypes2.default.shape({
+    loading: _propTypes2.default.bool,
     data: _propTypes2.default.shape({
-        loading: _propTypes2.default.bool,
-        data: _propTypes2.default.shape({
-            graph_name: _propTypes2.default.string,
-            graph_type: _propTypes2.default.string,
-            data: _propTypes2.default.shape({
-                total: _propTypes2.default.number.isRequired,
-                name: _propTypes2.default.string,
-                values: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-                    data: _propTypes2.default.number.isRequired
-                }).isRequired)
-            })
-        }).isRequired
-    }),
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    graphColors: _propTypes2.default.array,
-    valueSub: _propTypes2.default.string,
-    uniqueKey: _propTypes2.default.string
+      graph_name: _propTypes2.default.string,
+      graph_type: _propTypes2.default.string,
+      data: _propTypes2.default.shape({
+        total: _propTypes2.default.number.isRequired,
+        name: _propTypes2.default.string,
+        values: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+          data: _propTypes2.default.number.isRequired
+        }).isRequired)
+      })
+    }).isRequired
+  }),
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  graphColors: _propTypes2.default.array,
+  valueSub: _propTypes2.default.string,
+  uniqueKey: _propTypes2.default.string
 };
 
 GraphDetailCard.defaultProps = {
-    theme: 'light',
-    graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#AFB2BA', '#303F51']]
+  theme: 'light',
+  graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#AFB2BA', '#303F51']]
 };
 exports.default = GraphDetailCard;

package/molecules/pageHeader/pageHeader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledPageHeader = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['\n    display: flex;\n    width: 100%;\n    max-height: 50px;\n    align-items: center;\n    padding: 10px 20px;\n    background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item{\n      border-bottom: 1px solid ', ';\n\n      &.active{\n        border-bottom: 1px solid ', ';\n      }\n    }\n  }\n  .header-left{\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n'], ['\n    display: flex;\n    width: 100%;\n    max-height: 50px;\n    align-items: center;\n    padding: 10px 20px;\n    background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item{\n      border-bottom: 1px solid ', ';\n\n      &.active{\n        border-bottom: 1px solid ', ';\n      }\n    }\n  }\n  .header-left{\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  max-height: 50px;\n  align-items: center;\n  padding: 10px 20px;\n  background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item {\n      border-bottom: 1px solid\n        ', ';\n\n      &.active {\n        border-bottom: 1px solid\n          ', ';\n      }\n    }\n  }\n  .header-left {\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  max-height: 50px;\n  align-items: center;\n  padding: 10px 20px;\n  background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item {\n      border-bottom: 1px solid\n        ', ';\n\n      &.active {\n        border-bottom: 1px solid\n          ', ';\n      }\n    }\n  }\n  .header-left {\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n']);
 
 var _react = require('react');
 
@@ -56,6 +56,7 @@ var PageHeader = function PageHeader(props) {
           }
         },
         _react2.default.createElement(_button2.default, {
+          theme: props.theme,
           appearance: 'cta',
           icon: props.icon,
           iconWidth: 14,
@@ -88,7 +89,7 @@ PageHeader.propTypes = {
   title: _propTypes2.default.string.isRequired,
   subHeading: _propTypes2.default.string,
   icon: _propTypes2.default.string,
-  theme: _propTypes2.default.oneOf(['light', 'dark'])
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
 };
 
 PageHeader.defaultProps = {

package/molecules/pageHeader/pageHeader.story.js

@@ -27,25 +27,47 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // ))
 
 (0, _react3.storiesOf)('Page Header').add('page-header', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Page Header Appearence' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.PageHeader, { title: 'Dashboard', icon: 'dashboard', subHeading: 'Today (Jul 9 2018)' })
-        )
-    );
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Page Header Appearence' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.PageHeader, { title: 'Dashboard', icon: 'dashboard', subHeading: 'Today (Jul 9 2018)' })
+    )
+  );
 });
 
 (0, _react3.storiesOf)('Page Header').add('page-header-dark', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'Page Header Appearence', background: 'dark' },
-        _react2.default.createElement(
-            _storyHelpers.Stack,
-            null,
-            _react2.default.createElement(_components.PageHeader, { title: 'Dashboard', icon: 'dashboard', theme: 'dark', subHeading: 'Today (Jul 9 2018)' })
-        )
-    );
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Page Header Appearence', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.PageHeader, {
+        title: 'Dashboard',
+        icon: 'dashboard',
+        theme: 'dark',
+        subHeading: 'Today (Jul 9 2018)'
+      })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Page Header').add('page-header-nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'Page Header Appearence', background: 'dark' },
+    _react2.default.createElement(
+      _storyHelpers.Stack,
+      null,
+      _react2.default.createElement(_components.PageHeader, {
+        title: 'Dashboard',
+        icon: 'dashboard',
+        theme: 'nexc',
+        subHeading: 'Today (Jul 9 2018)'
+      })
+    )
+  );
 });