@desynova-digital/components 8.19.63 → 9.0.0

package/molecules/graphCard/graphCard.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 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(['\n  height: 100%;\n  color: #cfcfcf;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n'], ['\n  height: 100%;\n  color: #cfcfcf;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\nborder-radius: 50%;\ndisplay: inline-block;\nposition: absolute;\nleft: 0px;\ntop: -3px;\n\n', '\n\n\n\n'], ['\nborder-radius: 50%;\ndisplay: inline-block;\nposition: absolute;\nleft: 0px;\ntop: -3px;\n\n', '\n\n\n\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n\n\n\n&.card-wrapper {\n  box-sizing: border-box;\n  padding: 20px 20px 10px;\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n\n\n.graph-details {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  text-align:center;\n}\n\n.graph {\n  position: relative;\n}\n\n.graph-data-block {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  margin-top: 40px;\n  margin-bottom: 17px;\n}\n\n.card-header {\n  text-align: left;\n  margin-bottom: 0px;\n}\n.card-header p {\n  font-family: \'SFUIText-Medium\';\n  font-size: 18px;\n  color: ', ' ;\n\n  text-align:center;\n}\n\n.details.data-text {\n  font-family: \'SFUIText-Regular\';\n  font-size: 10px;\n  text-transform: uppercase;\n  color: ', ' ;\n\n  &.top {\n    padding: 10px 0px 0px;\n    text-align: center;\n    min-height: 20px;\n  }\n}\n\n.details.data-type {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  color: ', ' ;\n  margin-top: 8px;\n  &.bottom{\n    text-align:center;\n    margin-top: 0px;\n    min-height: 18px;\n  }\n}\n\n.details.total-val {\n  font-family: SFUIText-Regular;\n  font-size: 18px;\n  color: ', ' ;\n  margin-top: 8px;\n}\n.legends {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  position:relative;\n  padding-left: 30px;\n}\n\n.graph-legends {\n  margin-top: 15px;\n}\n\n\n.details.legend-name {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-align: center;\n  color: ', ' ;\n}\n\n.details.legend-val {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-align: center;\n  color: ', ' ;\n}\n.video-player-block {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #f5f5f5;\n  z-index: 999;\n}\n'], ['\n\n\n\n&.card-wrapper {\n  box-sizing: border-box;\n  padding: 20px 20px 10px;\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n\n\n.graph-details {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  text-align:center;\n}\n\n.graph {\n  position: relative;\n}\n\n.graph-data-block {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  margin-top: 40px;\n  margin-bottom: 17px;\n}\n\n.card-header {\n  text-align: left;\n  margin-bottom: 0px;\n}\n.card-header p {\n  font-family: \'SFUIText-Medium\';\n  font-size: 18px;\n  color: ', ' ;\n\n  text-align:center;\n}\n\n.details.data-text {\n  font-family: \'SFUIText-Regular\';\n  font-size: 10px;\n  text-transform: uppercase;\n  color: ', ' ;\n\n  &.top {\n    padding: 10px 0px 0px;\n    text-align: center;\n    min-height: 20px;\n  }\n}\n\n.details.data-type {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  color: ', ' ;\n  margin-top: 8px;\n  &.bottom{\n    text-align:center;\n    margin-top: 0px;\n    min-height: 18px;\n  }\n}\n\n.details.total-val {\n  font-family: SFUIText-Regular;\n  font-size: 18px;\n  color: ', ' ;\n  margin-top: 8px;\n}\n.legends {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  position:relative;\n  padding-left: 30px;\n}\n\n.graph-legends {\n  margin-top: 15px;\n}\n\n\n.details.legend-name {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-align: center;\n  color: ', ' ;\n}\n\n.details.legend-val {\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-align: center;\n  color: ', ' ;\n}\n.video-player-block {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #f5f5f5;\n  z-index: 999;\n}\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  border-radius: 50%;\n  display: inline-block;\n  position: absolute;\n  left: 0px;\n  top: -3px;\n\n  ', '\n'], ['\n  border-radius: 50%;\n  display: inline-block;\n  position: absolute;\n  left: 0px;\n  top: -3px;\n\n  ', '\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  &.card-wrapper {\n    box-sizing: border-box;\n    padding: 20px 20px 10px;\n    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  }\n\n  .graph-details {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    text-align: center;\n  }\n\n  .graph {\n    position: relative;\n  }\n\n  .graph-data-block {\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n    margin-top: 40px;\n    margin-bottom: 17px;\n  }\n\n  .card-header {\n    text-align: left;\n    margin-bottom: 0px;\n  }\n  .card-header p {\n    font-family: \'SFUIText-Medium\';\n    font-size: 18px;\n    color: ', ';\n\n    text-align: center;\n  }\n\n  .details.data-text {\n    font-family: \'SFUIText-Regular\';\n    font-size: 10px;\n    text-transform: uppercase;\n    color: ', ';\n\n    &.top {\n      padding: 10px 0px 0px;\n      text-align: center;\n      min-height: 20px;\n    }\n  }\n\n  .details.data-type {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    color: ', ';\n    margin-top: 8px;\n    &.bottom {\n      text-align: center;\n      margin-top: 0px;\n      min-height: 18px;\n    }\n  }\n\n  .details.total-val {\n    font-family: SFUIText-Regular;\n    font-size: 18px;\n    color: ', ';\n    margin-top: 8px;\n  }\n  .legends {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n    position: relative;\n    padding-left: 30px;\n  }\n\n  .graph-legends {\n    margin-top: 15px;\n  }\n\n  .details.legend-name {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    text-align: center;\n    color: ', ';\n  }\n\n  .details.legend-val {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    text-align: center;\n    color: ', ';\n  }\n  .video-player-block {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: #f5f5f5;\n    z-index: 999;\n  }\n'], ['\n  &.card-wrapper {\n    box-sizing: border-box;\n    padding: 20px 20px 10px;\n    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  }\n\n  .graph-details {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    text-align: center;\n  }\n\n  .graph {\n    position: relative;\n  }\n\n  .graph-data-block {\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n    margin-top: 40px;\n    margin-bottom: 17px;\n  }\n\n  .card-header {\n    text-align: left;\n    margin-bottom: 0px;\n  }\n  .card-header p {\n    font-family: \'SFUIText-Medium\';\n    font-size: 18px;\n    color: ', ';\n\n    text-align: center;\n  }\n\n  .details.data-text {\n    font-family: \'SFUIText-Regular\';\n    font-size: 10px;\n    text-transform: uppercase;\n    color: ', ';\n\n    &.top {\n      padding: 10px 0px 0px;\n      text-align: center;\n      min-height: 20px;\n    }\n  }\n\n  .details.data-type {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    color: ', ';\n    margin-top: 8px;\n    &.bottom {\n      text-align: center;\n      margin-top: 0px;\n      min-height: 18px;\n    }\n  }\n\n  .details.total-val {\n    font-family: SFUIText-Regular;\n    font-size: 18px;\n    color: ', ';\n    margin-top: 8px;\n  }\n  .legends {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n    position: relative;\n    padding-left: 30px;\n  }\n\n  .graph-legends {\n    margin-top: 15px;\n  }\n\n  .details.legend-name {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    text-align: center;\n    color: ', ';\n  }\n\n  .details.legend-val {\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    text-align: center;\n    color: ', ';\n  }\n  .video-player-block {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: #f5f5f5;\n    z-index: 999;\n  }\n']);
 
 var _react = require('react');
 
@@ -22,7 +22,7 @@ var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _tokens = require('../../../tokens');
+var _tokens = require('@desynova-digital/tokens');
 
 var _pieChart = require('../../atoms/graphs/pieChart');
 
@@ -49,12 +49,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-//import { colors } from '@desynova-digital/tokens'
-
+// import { colors } from '../../../tokens'
 
 var components = {
-  'PieChart': _pieChart2.default,
-  'Circle': _circleGraph2.default
+  PieChart: _pieChart2.default,
+  Circle: _circleGraph2.default
 };
 
 var GraphComponent = ''; // = components[props.storyType];
@@ -70,13 +69,13 @@ var GraphCard = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, (GraphCard.__proto__ || Object.getPrototypeOf(GraphCard)).call(this, props));
 
     _this.markers = {
-      'PieChart': {
+      PieChart: {
         donutThin: 'circleBorder',
         donut: 'circleBorder',
         pie: 'circleFill',
         default: 'circleFill'
       },
-      'Circle': {
+      Circle: {
         circle: 'circleFill',
         default: 'circleFill'
       }
@@ -89,18 +88,16 @@ var GraphCard = function (_React$Component) {
     _this.state = {
       //graphData: props.data
       // GraphName: props.data && props.data.graph_name?components[props.data.graph_name]:components['PieChart']
-
     };
 
     GraphName = props.data && props.data.graph_name ? components[props.data.graph_name] : components['PieChart'];
-
     return _this;
   }
 
   _createClass(GraphCard, [{
     key: 'getColors',
     value: function getColors(idx) {
-      var arr = ["completed", "rejected", "pending", "failed"];
+      var arr = ['completed', 'rejected', 'pending', 'failed'];
       return arr[idx];
     }
   }, {
@@ -110,10 +107,16 @@ var GraphCard = function (_React$Component) {
 
       return _react2.default.createElement(
         _card2.default,
-        { onClick: this.props.onClickHandler, width: '100%', height: this.props.loading ? this.props.minHeight : "auto", styled: { 'minHeight': '300px' }, theme: this.props.theme },
+        {
+          onClick: this.props.onClickHandler,
+          width: '100%',
+          height: this.props.loading ? this.props.minHeight : 'auto',
+          styled: { minHeight: '300px' },
+          theme: this.props.theme
+        },
         this.props.loading ? _react2.default.createElement(
           GraphBoxLoading,
-          { className: "graph-loading-box" },
+          { className: 'graph-loading-box' },
           _react2.default.createElement(_loader2.default, { showDefaultText: false })
         ) : this.props.data ? _react2.default.createElement(
           GraphBox,
@@ -133,13 +136,19 @@ var GraphCard = function (_React$Component) {
             _react2.default.createElement(
               'p',
               { className: 'details data-text top' },
-              this.props.data.graph_type === "donut" || this.props.data.graph_type === "donutThin" || this.props.data.graph_name === "CircleChart" ? null : this.props.data.forPeriod
+              this.props.data.graph_type === 'donut' || this.props.data.graph_type === 'donutThin' || this.props.data.graph_name === 'CircleChart' ? null : this.props.data.forPeriod
             ),
             _react2.default.createElement(
               'div',
               { className: 'graph' },
-              _react2.default.createElement(GraphName, { type: this.props.data.graph_type, theme: this.props.theme, width: 200, height: 200, data: this.props.data.data }),
-              this.props.data.graph_type === "donut" || this.props.data.graph_type === "donutThin" || this.props.data.graph_name === "CircleChart" ? _react2.default.createElement(
+              _react2.default.createElement(GraphName, {
+                type: this.props.data.graph_type,
+                theme: this.props.theme,
+                width: 200,
+                height: 200,
+                data: this.props.data.data
+              }),
+              this.props.data.graph_type === 'donut' || this.props.data.graph_type === 'donutThin' || this.props.data.graph_name === 'CircleChart' ? _react2.default.createElement(
                 'div',
                 { className: 'graph-details' },
                 _react2.default.createElement(
@@ -162,7 +171,7 @@ var GraphCard = function (_React$Component) {
             _react2.default.createElement(
               'p',
               { className: 'details data-type bottom' },
-              this.props.data.graph_type === "donut" || this.props.data.graph_type === "donutThin" || this.props.data.graph_name === "CircleChart" ? null : _react2.default.createElement(
+              this.props.data.graph_type === 'donut' || this.props.data.graph_type === 'donutThin' || this.props.data.graph_name === 'CircleChart' ? null : _react2.default.createElement(
                 'span',
                 null,
                 _react2.default.createElement(
@@ -185,7 +194,10 @@ var GraphCard = function (_React$Component) {
                 return _react2.default.createElement(
                   'div',
                   { className: 'legends', key: index },
-                  _react2.default.createElement(LegendMarker, { markerType: _this2.getMarkerType(_this2.props.data.graph_name, _this2.props.data.graph_type), legendColor: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)] }),
+                  _react2.default.createElement(LegendMarker, {
+                    markerType: _this2.getMarkerType(_this2.props.data.graph_name, _this2.props.data.graph_type),
+                    legendColor: _tokens.colors[_this2.props.theme].graph[_this2.getColors(index)]
+                  }),
                   _react2.default.createElement(
                     'p',
                     { className: 'details legend-name' },
@@ -211,12 +223,10 @@ var GraphCard = function (_React$Component) {
 var GraphBoxLoading = _styledComponents2.default.div(_templateObject);
 
 var LegendMarker = _styledComponents2.default.div(_templateObject2, function (props) {
-
   if (props.markerType == 'circleBorder') {
-
-    return "height:14px;width:14px;border:2px solid " + props.legendColor + "";
+    return 'height:14px;width:14px;border:2px solid ' + props.legendColor + '';
   } else if (props.markerType == 'circleFill') {
-    return "border:7px solid " + props.legendColor + "";
+    return 'border:7px solid ' + props.legendColor + '';
   }
 });
 var GraphBox = _styledComponents2.default.div(_templateObject3, function (props) {
@@ -234,7 +244,7 @@ var GraphBox = _styledComponents2.default.div(_templateObject3, function (props)
 });
 
 GraphCard.defaultProps = {
-  theme: "light"
+  theme: 'light'
 };
 
 exports.default = GraphCard;

package/molecules/graphCard/graphCard.story.js

@@ -16,92 +16,179 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 console.log(_graphCard2.default);
 (0, _react3.storiesOf)('GraphCard').add('default', function () {
-    return _react2.default.createElement(
-        _storyHelpers.Example,
-        { title: 'default' },
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default' },
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        'div',
+        null,
         _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(
-                    'div',
-                    { style: { width: "25%", display: "inline-block" } },
-                    _react2.default.createElement(_graphCard2.default, {
-                        theme: "dark",
-                        loading: true,
-                        minHeight: '387',
-                        data: {
-                            "graphName": "PieChart",
-                            "graphType": "pie",
-                            "data": {
-                                "name": "Ingest",
-                                "total": 223,
-                                "values": [{
-                                    "name": "Completed",
-                                    "value": "completed",
-                                    "data": 120,
-                                    "index": 1
-                                }, {
-                                    "name": "Rejected",
-                                    "value": "rejected",
-                                    "data": 33,
-                                    "index": 2
-                                }, {
-                                    "name": "Pending",
-                                    "value": "pending",
-                                    "data": 70,
-                                    "index": 3
-                                }]
-                            },
+          'div',
+          { style: { width: '25%', display: 'inline-block' } },
+          _react2.default.createElement(_graphCard2.default, {
+            theme: 'dark',
+            loading: true,
+            minHeight: '387',
+            data: {
+              graphName: 'PieChart',
+              graphType: 'pie',
+              data: {
+                name: 'Ingest',
+                total: 223,
+                values: [{
+                  name: 'Completed',
+                  value: 'completed',
+                  data: 120,
+                  index: 1
+                }, {
+                  name: 'Rejected',
+                  value: 'rejected',
+                  data: 33,
+                  index: 2
+                }, {
+                  name: 'Pending',
+                  value: 'pending',
+                  data: 70,
+                  index: 3
+                }]
+              },
 
-                            forPeriod: "This Week",
-                            totalCaption: "Total Assets"
+              forPeriod: 'This Week',
+              totalCaption: 'Total Assets'
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '25%', display: 'inline-block' } },
+          _react2.default.createElement(_graphCard2.default, {
+            theme: 'dark',
+            loading: false,
+            onClickHandler: function onClickHandler(e) {
+              console.log('onClickHandler', e);
+            },
+            data: {
+              graph_name: 'PieChart',
+              graph_type: 'donut',
+              data: {
+                name: 'Ingest',
+                total: 223,
+                values: [{
+                  name: 'Completed',
+                  value: 'completed',
+                  data: 120,
+                  index: 1
+                }, {
+                  name: 'Rejected',
+                  value: 'rejected',
+                  data: 33,
+                  index: 2
+                }, {
+                  name: 'Pending',
+                  value: 'pending',
+                  data: 70,
+                  index: 3
+                }]
+              },
 
-                        }
-                    })
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { style: { width: "25%", display: "inline-block" } },
-                    _react2.default.createElement(_graphCard2.default, {
-                        theme: "dark",
-                        loading: false,
-                        onClickHandler: function onClickHandler(e) {
-                            console.log("onClickHandler", e);
-                        },
-                        data: {
-                            "graph_name": "PieChart",
-                            "graph_type": "donut",
-                            "data": {
-                                "name": "Ingest",
-                                "total": 223,
-                                "values": [{
-                                    "name": "Completed",
-                                    "value": "completed",
-                                    "data": 120,
-                                    "index": 1
-                                }, {
-                                    "name": "Rejected",
-                                    "value": "rejected",
-                                    "data": 33,
-                                    "index": 2
-                                }, {
-                                    "name": "Pending",
-                                    "value": "pending",
-                                    "data": 70,
-                                    "index": 3
-                                }]
-                            },
+              forPeriod: 'This Week',
+              totalCaption: 'Total Assets'
+            }
+          })
+        )
+      )
+    )
+  );
+});
 
-                            forPeriod: "This Week",
-                            totalCaption: "Total Assets"
+(0, _react3.storiesOf)('GraphCard').add('nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default' },
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          { style: { width: '25%', display: 'inline-block' } },
+          _react2.default.createElement(_graphCard2.default, {
+            theme: 'nexc',
+            loading: true,
+            minHeight: '387',
+            data: {
+              graphName: 'PieChart',
+              graphType: 'pie',
+              data: {
+                name: 'Ingest',
+                total: 223,
+                values: [{
+                  name: 'Completed',
+                  value: 'completed',
+                  data: 120,
+                  index: 1
+                }, {
+                  name: 'Rejected',
+                  value: 'rejected',
+                  data: 33,
+                  index: 2
+                }, {
+                  name: 'Pending',
+                  value: 'pending',
+                  data: 70,
+                  index: 3
+                }]
+              },
+
+              forPeriod: 'This Week',
+              totalCaption: 'Total Assets'
+            }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { width: '25%', display: 'inline-block' } },
+          _react2.default.createElement(_graphCard2.default, {
+            theme: 'nexc',
+            loading: false,
+            onClickHandler: function onClickHandler(e) {
+              console.log('onClickHandler', e);
+            },
+            data: {
+              graph_name: 'PieChart',
+              graph_type: 'donut',
+              data: {
+                name: 'Ingest',
+                total: 223,
+                values: [{
+                  name: 'Completed',
+                  value: 'completed',
+                  data: 120,
+                  index: 1
+                }, {
+                  name: 'Rejected',
+                  value: 'rejected',
+                  data: 33,
+                  index: 2
+                }, {
+                  name: 'Pending',
+                  value: 'pending',
+                  data: 70,
+                  index: 3
+                }]
+              },
 
-                        }
-                    })
-                )
-            )
+              forPeriod: 'This Week',
+              totalCaption: 'Total Assets'
+            }
+          })
         )
-    );
+      )
+    )
+  );
 });