@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/graphs/pieChart/pieChart.story.js

@@ -1,179 +1,150 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../../_helpers/story-helpers');
-
-var _components = require('../../../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('PieChart').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances' },
-    _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          { style: { width: '500px' } },
-          _react2.default.createElement(_components.PieChart, {
-            width: 500,
-            height: 500,
-            data: {
-              name: 'Archieve',
-              total: 100,
-              values: [{
-                name: 'Archieved',
-                value: 'archieved',
-                data: 1,
-                index: 1
-              }, {
-                name: 'InProcess',
-                value: 'inprocess',
-                data: 1,
-                index: 2
-              }, {
-                name: 'Pending',
-                value: 'pending',
-                data: 95,
-                index: 3
-              }, {
-                name: 'Failed',
-                value: 'failed',
-                data: 3,
-                index: 4
-              }]
-            },
-            type: 'donutThin'
-          })
-        ),
-        _react2.default.createElement(
-          'div',
-          { style: { width: '500px' } },
-          _react2.default.createElement(_components.PieChart, {
-            width: 500,
-            height: 500,
-            data: {
-              name: 'Archieve',
-              total: 100,
-              values: [{
-                name: 'Archieved',
-                value: 'archieved',
-                data: 25,
-                index: 1
-              }, {
-                name: 'InProcess',
-                value: 'inprocess',
-                data: 25,
-                index: 2
-              }, {
-                name: 'Pending',
-                value: 'pending',
-                data: 25,
-                index: 3
-              }, {
-                name: 'Failed',
-                value: 'failed',
-                data: 25,
-                index: 4
-              }]
-            }
-          })
-        )
-      )
-    )
-  );
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../../_helpers/story-helpers");
+var _components = require("../../../../components");
+(0, _react2.storiesOf)('PieChart').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '500px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.PieChart, {
+    width: 500,
+    height: 500,
+    data: {
+      name: 'Archieve',
+      total: 100,
+      values: [{
+        name: 'Archieved',
+        value: 'archieved',
+        data: 1,
+        index: 1
+      }, {
+        name: 'InProcess',
+        value: 'inprocess',
+        data: 1,
+        index: 2
+      }, {
+        name: 'Pending',
+        value: 'pending',
+        data: 95,
+        index: 3
+      }, {
+        name: 'Failed',
+        value: 'failed',
+        data: 3,
+        index: 4
+      }]
+    },
+    type: "donutThin"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '500px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.PieChart, {
+    width: 500,
+    height: 500,
+    data: {
+      name: 'Archieve',
+      total: 100,
+      values: [{
+        name: 'Archieved',
+        value: 'archieved',
+        data: 25,
+        index: 1
+      }, {
+        name: 'InProcess',
+        value: 'inprocess',
+        data: 25,
+        index: 2
+      }, {
+        name: 'Pending',
+        value: 'pending',
+        data: 25,
+        index: 3
+      }, {
+        name: 'Failed',
+        value: 'failed',
+        data: 25,
+        index: 4
+      }]
+    }
+  })))));
 });
-
-(0, _react3.storiesOf)('PieChart').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Tag', background: 'dark' },
-    _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          { style: { width: '500px' } },
-          _react2.default.createElement(_components.PieChart, {
-            width: 500,
-            height: 500,
-            theme: 'dark',
-            data: {
-              name: 'Archieve',
-              total: 100,
-              values: [{
-                name: 'Archieved',
-                value: 'archieved',
-                data: 1,
-                index: 1
-              }, {
-                name: 'InProcess',
-                value: 'inprocess',
-                data: 1,
-                index: 2
-              }, {
-                name: 'Pending',
-                value: 'pending',
-                data: 95,
-                index: 3
-              }, {
-                name: 'Failed',
-                value: 'failed',
-                data: 3,
-                index: 4
-              }]
-            },
-            type: 'donutThin'
-          })
-        ),
-        _react2.default.createElement(
-          'div',
-          { style: { width: '500px' } },
-          _react2.default.createElement(_components.PieChart, {
-            theme: 'dark',
-            width: 500,
-            height: 500,
-            data: {
-              name: 'Archieve',
-              total: 100,
-              values: [{
-                name: 'Archieved',
-                value: 'archieved',
-                data: 25,
-                index: 1
-              }, {
-                name: 'InProcess',
-                value: 'inprocess',
-                data: 25,
-                index: 2
-              }, {
-                name: 'Pending',
-                value: 'pending',
-                data: 25,
-                index: 3
-              }, {
-                name: 'Failed',
-                value: 'failed',
-                data: 25,
-                index: 4
-              }]
-            }
-          })
-        )
-      )
-    )
-  );
+(0, _react2.storiesOf)('PieChart').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Tag",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '500px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.PieChart, {
+    width: 500,
+    height: 500,
+    theme: 'dark',
+    data: {
+      name: 'Archieve',
+      total: 100,
+      values: [{
+        name: 'Archieved',
+        value: 'archieved',
+        data: 1,
+        index: 1
+      }, {
+        name: 'InProcess',
+        value: 'inprocess',
+        data: 1,
+        index: 2
+      }, {
+        name: 'Pending',
+        value: 'pending',
+        data: 95,
+        index: 3
+      }, {
+        name: 'Failed',
+        value: 'failed',
+        data: 3,
+        index: 4
+      }]
+    },
+    type: "donutThin"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '500px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_components.PieChart, {
+    theme: 'dark',
+    width: 500,
+    height: 500,
+    data: {
+      name: 'Archieve',
+      total: 100,
+      values: [{
+        name: 'Archieved',
+        value: 'archieved',
+        data: 25,
+        index: 1
+      }, {
+        name: 'InProcess',
+        value: 'inprocess',
+        data: 25,
+        index: 2
+      }, {
+        name: 'Pending',
+        value: 'pending',
+        data: 25,
+        index: 3
+      }, {
+        name: 'Failed',
+        value: 'failed',
+        data: 25,
+        index: 4
+      }]
+    }
+  })))));
 });

package/atoms/graphs/verticalBarGraph/index.js

@@ -1,13 +1,9 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _verticalBarGraph = require('./verticalBarGraph');
-
-var _verticalBarGraph2 = _interopRequireDefault(_verticalBarGraph);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _verticalBarGraph2.default;
+exports["default"] = void 0;
+var _verticalBarGraph = _interopRequireDefault(require("./verticalBarGraph"));
+var _default = exports["default"] = _verticalBarGraph["default"];

package/atoms/graphs/verticalBarGraph/verticalBarGraph.js

@@ -1,109 +1,86 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 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 _templateObject = _taggedTemplateLiteral(['\n\n    height : 200px;\n    margin: 0px 12.5px;\n    position:relative;\n\n    &:hover {\n        .info-area{\n            opacity: 1;\n        }\n    }\n    .info-area{\n        position: absolute;\n        opacity: 0;\n        transition: all 0.4s ease;\n        text-align: center;\n        min-width: 40px;\n        .main{\n            font-size:20px;\n            color: #fff;\n            font-family: \'SFUIText-Regular\';\n            text-align: center;\n        }\n        .sub{\n            font-size:10px;\n            color: #AFB2BA;\n            font-family: \'SFUIText-Regular\';\n            width: max-content;\n            min-width: 40px;\n        }\n    }\n\n    .bar-box{\n        height: 100%;\n        width: 40px;\n        border-radius: 20px;\n        background: #121D29;\n        position:relative;\n        overflow: hidden;\n\n        .bar{\n            position: absolute;\n            height: 0%; // 100%;\n            width: 40px;\n            border-radius: 20px;\n            background: ', ';\n            bottom: 0; //-100%;\n            transition: all 2s ease;\n        }\n    }\n\n    \n\n    .move-up {\n        animation-duration: 2s;\n        animation-iteration-count: 1;\n        animation-name: move-up;\n        animation-timing-function: ease;\n        animation-fill-mode: forwards;\n      }\n      @keyframes move-up {\n          0%   {  }\n          100% { bottom: ', '%; }\n      }\n\n\n'], ['\n\n    height : 200px;\n    margin: 0px 12.5px;\n    position:relative;\n\n    &:hover {\n        .info-area{\n            opacity: 1;\n        }\n    }\n    .info-area{\n        position: absolute;\n        opacity: 0;\n        transition: all 0.4s ease;\n        text-align: center;\n        min-width: 40px;\n        .main{\n            font-size:20px;\n            color: #fff;\n            font-family: \'SFUIText-Regular\';\n            text-align: center;\n        }\n        .sub{\n            font-size:10px;\n            color: #AFB2BA;\n            font-family: \'SFUIText-Regular\';\n            width: max-content;\n            min-width: 40px;\n        }\n    }\n\n    .bar-box{\n        height: 100%;\n        width: 40px;\n        border-radius: 20px;\n        background: #121D29;\n        position:relative;\n        overflow: hidden;\n\n        .bar{\n            position: absolute;\n            height: 0%; // 100%;\n            width: 40px;\n            border-radius: 20px;\n            background: ', ';\n            bottom: 0; //-100%;\n            transition: all 2s ease;\n        }\n    }\n\n    \n\n    .move-up {\n        animation-duration: 2s;\n        animation-iteration-count: 1;\n        animation-name: move-up;\n        animation-timing-function: ease;\n        animation-fill-mode: forwards;\n      }\n      @keyframes move-up {\n          0%   {  }\n          100% { bottom: ', '%; }\n      }\n\n\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-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; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var propTypes = {};
-
-var StyledVerticalBarGraph = _styledComponents2.default.div(_templateObject, function (props) {
-    return 'linear-gradient(0deg,' + props.graphColors[0] + ' 0%,' + props.graphColors[1] + ' 100%)';
+var StyledVerticalBarGraph = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n\n    height : 200px;\n    margin: 0px 12.5px;\n    position:relative;\n\n    &:hover {\n        .info-area{\n            opacity: 1;\n        }\n    }\n    .info-area{\n        position: absolute;\n        opacity: 0;\n        transition: all 0.4s ease;\n        text-align: center;\n        min-width: 40px;\n        .main{\n            font-size:20px;\n            color: #fff;\n            font-family: 'SFUIText-Regular';\n            text-align: center;\n        }\n        .sub{\n            font-size:10px;\n            color: #AFB2BA;\n            font-family: 'SFUIText-Regular';\n            width: max-content;\n            min-width: 40px;\n        }\n    }\n\n    .bar-box{\n        height: 100%;\n        width: 40px;\n        border-radius: 20px;\n        background: #121D29;\n        position:relative;\n        overflow: hidden;\n\n        .bar{\n            position: absolute;\n            height: 0%; // 100%;\n            width: 40px;\n            border-radius: 20px;\n            background: ", ";\n            bottom: 0; //-100%;\n            transition: all 2s ease;\n        }\n    }\n\n    \n\n    .move-up {\n        animation-duration: 2s;\n        animation-iteration-count: 1;\n        animation-name: move-up;\n        animation-timing-function: ease;\n        animation-fill-mode: forwards;\n      }\n      @keyframes move-up {\n          0%   {  }\n          100% { bottom: ", "%; }\n      }\n\n\n"])), function (props) {
+  return 'linear-gradient(0deg,' + props.graphColors[0] + ' 0%,' + props.graphColors[1] + ' 100%)';
 }, function (props) {
-    return props.value - 100;
+  return props.value - 100;
 });
-
-var VerticalBarGraph = function (_Component) {
-    _inherits(VerticalBarGraph, _Component);
-
-    function VerticalBarGraph(props) {
-        _classCallCheck(this, VerticalBarGraph);
-
-        var _this = _possibleConstructorReturn(this, (VerticalBarGraph.__proto__ || Object.getPrototypeOf(VerticalBarGraph)).call(this, props));
-
-        _this.componentDidMount = function () {
-            setTimeout(function () {
-                _this.setState({
-                    animate: true
-                });
-            }, 1000);
-        };
-
-        _this.render = function () {
-
-            return _react2.default.createElement(
-                StyledVerticalBarGraph,
-                _extends({}, _this.props, { className: 'vertical-bar' }),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'bar-box' },
-                    _react2.default.createElement('div', { className: 'bar'
-                        //style={{bottom: this.state.animate? (this.props.value-100) +'%': '-100%'}}
-                        , style: { height: _this.state.animate ? _this.props.value + '%' : '0%' }
-                    })
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'info-area', style: { top: 82 - _this.props.value + '%' } },
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'main', style: {
-                                color: _this.props.graphColors[0]
-                            } },
-                        _this.props.valueMain
-                    ),
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'sub' },
-                        _this.props.valueSub
-                    )
-                )
-            );
-        };
-
-        _this.state = {};
-        return _this;
-    }
-
-    return VerticalBarGraph;
+var VerticalBarGraph = /*#__PURE__*/function (_Component) {
+  function VerticalBarGraph(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, VerticalBarGraph);
+    _this = _callSuper(this, VerticalBarGraph, [props]);
+    (0, _defineProperty2["default"])(_this, "componentDidMount", function () {
+      setTimeout(function () {
+        _this.setState({
+          animate: true
+        });
+      }, 1000);
+    });
+    (0, _defineProperty2["default"])(_this, "render", function () {
+      return /*#__PURE__*/_react["default"].createElement(StyledVerticalBarGraph, (0, _extends2["default"])({}, _this.props, {
+        className: "vertical-bar"
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bar-box"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bar"
+        //style={{bottom: this.state.animate? (this.props.value-100) +'%': '-100%'}}
+        ,
+        style: {
+          height: _this.state.animate ? _this.props.value + '%' : '0%'
+        }
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "info-area",
+        style: {
+          top: 82 - _this.props.value + '%'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "main",
+        style: {
+          color: _this.props.graphColors[0]
+        }
+      }, _this.props.valueMain), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sub"
+      }, _this.props.valueSub)));
+    });
+    _this.state = {};
+    return _this;
+  }
+  (0, _inherits2["default"])(VerticalBarGraph, _Component);
+  return (0, _createClass2["default"])(VerticalBarGraph);
 }(_react.Component);
-
 VerticalBarGraph.propTypes = {
-    value: _propTypes2.default.number.isRequired,
-    theme: _propTypes2.default.oneOf(['light', 'dark']),
-    graphColors: _propTypes2.default.array,
-    valueMain: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-    valueSub: _propTypes2.default.string
+  value: _propTypes["default"].number.isRequired,
+  theme: _propTypes["default"].oneOf(['light', 'dark']),
+  graphColors: _propTypes["default"].array,
+  valueMain: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  valueSub: _propTypes["default"].string
 };
-
 VerticalBarGraph.defaultProps = {
-    theme: 'light',
-    graphColors: ['#FFF', '#FFF']
+  theme: 'light',
+  graphColors: ['#FFF', '#FFF']
 };
-
-exports.default = VerticalBarGraph;
+var _default = exports["default"] = VerticalBarGraph;

package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js

@@ -1,47 +1,28 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../../_helpers/story-helpers');
-
-var _components = require('../../../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('VerticalBarGraph').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.VerticalBarGraph, {
-        value: 60,
-        graphColors: ['#00C8E7', '#00E6B9'],
-        valueMain: 60,
-        valueSub: 'Assets'
-      })
-    )
-  );
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../../_helpers/story-helpers");
+var _components = require("../../../../components");
+(0, _react2.storiesOf)('VerticalBarGraph').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.VerticalBarGraph, {
+    value: 60,
+    graphColors: ['#00C8E7', '#00E6B9'],
+    valueMain: 60,
+    valueSub: 'Assets'
+  })));
 });
-
-(0, _react3.storiesOf)('VerticalBarGraph').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Tag', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.VerticalBarGraph, {
-        value: 60,
-        graphColors: ['#00C8E7', '#00E6B9'],
-        valueMain: '60%',
-        valueSub: 'Assets'
-      })
-    )
-  );
+(0, _react2.storiesOf)('VerticalBarGraph').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Tag",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.VerticalBarGraph, {
+    value: 60,
+    graphColors: ['#00C8E7', '#00E6B9'],
+    valueMain: '60%',
+    valueSub: 'Assets'
+  })));
 });