sag_components 1.0.46 → 1.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/stories/components/ArrowDownIcon.js +24 -0
  2. package/dist/stories/components/ArrowUpIcon.js +24 -0
  3. package/dist/stories/components/Benchmark.js +30 -4
  4. package/dist/stories/components/FilterContainer.js +2 -1
  5. package/dist/stories/components/TotalBenchmark.js +1 -0
  6. package/dist/stories/components/TotalBenchmarkArrows.js +91 -0
  7. package/dist/stories/components/TotalBenchmarkArrows.style.js +62 -0
  8. package/package.json +1 -1
  9. package/dist/stories/Button.style.js +0 -14
  10. package/dist/stories/Dropdown.style.js +0 -14
  11. package/dist/stories/OneColumnContainer.style.js +0 -28
  12. package/dist/stories/SegmentedButton.style.js +0 -39
  13. package/dist/stories/TotalDoughnutChart.style.js +0 -44
package/dist/stories/components/ArrowDownIcon.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.ArrowDownIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var ArrowDownIcon = function ArrowDownIcon(_ref) {
10
+ var clicked = _ref.clicked;
11
+ return /*#__PURE__*/_react.default.createElement("svg", {
12
+ width: "8",
13
+ height: "9",
14
+ viewBox: "0 0 8 9",
15
+ fill: "none",
16
+ xmlns: "http://www.w3.org/2000/svg"
17
+ }, /*#__PURE__*/_react.default.createElement("path", {
18
+ d: "M3.52935 8.81165C3.78967 9.06278 4.21242 9.06278 4.47273 8.81165L7.80476 5.59719C8.06508 5.34606 8.06508 4.93822 7.80476 4.68709C7.54445 4.43596 7.1217 4.43596 6.86138 4.68709L4.66641 6.80663L4.66641 0.642893C4.66641 0.287292 4.36861 -4.08657e-07 4 -4.40881e-07C3.63139 -4.73106e-07 3.33359 0.287292 3.33359 0.642893L3.33359 6.80663L1.13862 4.6891C0.878303 4.43797 0.455551 4.43797 0.195236 4.6891C-0.0650787 4.94023 -0.0650787 5.34807 0.195236 5.5992L3.52727 8.81366L3.52935 8.81165Z",
19
+ fill: "#F00021"
20
+ }));
21
+ };
22
+ exports.ArrowDownIcon = ArrowDownIcon;
23
+ var _default = ArrowDownIcon;
24
+ exports.default = _default;
package/dist/stories/components/ArrowUpIcon.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.ArrowUpIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var ArrowUpIcon = function ArrowUpIcon(_ref) {
10
+ var clicked = _ref.clicked;
11
+ return /*#__PURE__*/_react.default.createElement("svg", {
12
+ width: "8",
13
+ height: "9",
14
+ viewBox: "0 0 8 9",
15
+ fill: "none",
16
+ xmlns: "http://www.w3.org/2000/svg"
17
+ }, /*#__PURE__*/_react.default.createElement("path", {
18
+ d: "M4.47065 0.188348C4.21033 -0.0627825 3.78758 -0.0627825 3.52727 0.188348L0.195236 3.40281C-0.0650787 3.65394 -0.0650787 4.06178 0.195236 4.31291C0.455551 4.56404 0.878303 4.56404 1.13862 4.31291L3.33359 2.19337V8.35711C3.33359 8.71271 3.63139 9 4 9C4.36861 9 4.66641 8.71271 4.66641 8.35711V2.19337L6.86138 4.3109C7.1217 4.56203 7.54445 4.56203 7.80476 4.3109C8.06508 4.05977 8.06508 3.65193 7.80476 3.4008L4.47273 0.186338L4.47065 0.188348Z",
19
+ fill: "#5FCC70"
20
+ }));
21
+ };
22
+ exports.ArrowUpIcon = ArrowUpIcon;
23
+ var _default = ArrowUpIcon;
24
+ exports.default = _default;
package/dist/stories/components/Benchmark.js CHANGED
@@ -8,13 +8,14 @@ exports.default = exports.Benchmark = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _BenchmarkStyle = require("./Benchmark.style.js");
11
- var _excluded = ["totalValue", "currentValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
11
+ var _excluded = ["totalValue", "currentValue", "benchmarkValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
12
12
  /*Benchmark*/
13
13
  var Benchmark = function Benchmark(_ref) {
14
14
  var _ref$totalValue = _ref.totalValue,
15
15
  totalValue = _ref$totalValue === void 0 ? 100 : _ref$totalValue,
16
16
  _ref$currentValue = _ref.currentValue,
17
17
  currentValue = _ref$currentValue === void 0 ? 60 : _ref$currentValue,
18
+ benchmarkValue = _ref.benchmarkValue,
18
19
  _ref$width = _ref.width,
19
20
  width = _ref$width === void 0 ? 100 : _ref$width,
20
21
  _ref$height = _ref.height,
@@ -38,7 +39,15 @@ var Benchmark = function Benchmark(_ref) {
38
39
  var getUnderAvarageColor = function getUnderAvarageColor() {
39
40
  if (!totalValue) return backgroundColor;
40
41
  if (currentValue > totalValue) return color;
41
- if (currentValue / totalValue <= 0.5) {
42
+ var benchmarkCurrentValue;
43
+ if (!benchmarkValue) {
44
+ benchmarkCurrentValue = 0.5;
45
+ } else if (benchmarkValue > totalValue) {
46
+ benchmarkCurrentValue = 1;
47
+ } else {
48
+ benchmarkCurrentValue = benchmarkValue / totalValue;
49
+ }
50
+ if (currentValue / totalValue <= benchmarkCurrentValue) {
42
51
  return underAvarageColor;
43
52
  } else {
44
53
  return color;
@@ -47,12 +56,29 @@ var Benchmark = function Benchmark(_ref) {
47
56
  var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
48
57
  if (!totalValue) return backgroundColor;
49
58
  if (currentValue > totalValue) return linearGradientColor;
50
- if (currentValue / totalValue <= 0.5) {
59
+ var benchmarkCurrentValue;
60
+ if (!benchmarkValue) {
61
+ benchmarkCurrentValue = 0.5;
62
+ } else if (benchmarkValue > totalValue) {
63
+ benchmarkCurrentValue = 1;
64
+ } else {
65
+ benchmarkCurrentValue = benchmarkValue / totalValue;
66
+ }
67
+ if (currentValue / totalValue <= benchmarkCurrentValue) {
51
68
  return linearGradientUnderAvarageColor;
52
69
  } else {
53
70
  return linearGradientColor;
54
71
  }
55
72
  };
73
+ var getBenchmarkLeft = function getBenchmarkLeft() {
74
+ if (!benchmarkValue) {
75
+ return width / 2;
76
+ }
77
+ if (benchmarkValue > totalValue) {
78
+ return width;
79
+ }
80
+ return width * (benchmarkValue / totalValue);
81
+ };
56
82
  return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
57
83
  height: height,
58
84
  width: width
@@ -72,7 +98,7 @@ var Benchmark = function Benchmark(_ref) {
72
98
  height: height + 4,
73
99
  width: 0,
74
100
  top: -2,
75
- left: width / 2
101
+ left: getBenchmarkLeft()
76
102
  })));
77
103
  };
78
104
  exports.Benchmark = Benchmark;
package/dist/stories/components/FilterContainer.js CHANGED
@@ -10,6 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
10
10
  var _FilterContainer = require("./FilterContainer.style");
11
11
  var _react = _interopRequireDefault(require("react"));
12
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ require("./Filter.css");
13
14
  var _excluded = ["width", "nodeRef", "height"];
14
15
  var _templateObject;
15
16
  var Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
@@ -24,7 +25,7 @@ var FilterContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
24
25
  width: width,
25
26
  height: height
26
27
  }, /*#__PURE__*/_react.default.createElement("div", {
27
- className: props.className,
28
+ className: 'filter',
28
29
  ref: nodeRef
29
30
  }, props.children), /*#__PURE__*/_react.default.createElement(_FilterContainer.FilterFooterContent, null));
30
31
  });
package/dist/stories/components/TotalBenchmark.js CHANGED
@@ -40,6 +40,7 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
40
40
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
41
41
  totalValue: item.totalValue,
42
42
  currentValue: item.value,
43
+ benchmarkValue: item.benchmarkValue,
43
44
  height: 12,
44
45
  width: 100,
45
46
  color: "#79DB95",
package/dist/stories/components/TotalBenchmarkArrows.js ADDED
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.TotalBenchmarkArrows = void 0;
8
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _ArrowUpIcon = require("./ArrowUpIcon");
11
+ var _ArrowDownIcon = require("./ArrowDownIcon");
12
+ var _CommonFunctions = require("./CommonFunctions");
13
+ var _Benchmark = require("./Benchmark");
14
+ var _TotalBenchmarkArrowsStyle = require("./TotalBenchmarkArrows.style.js");
15
+ var _excluded = ["title", "value", "benchmarkTotalValue", "benchmarkValue", "detailsTitle", "detailsData", "dotCut", "width", "height", "textColor"];
16
+ /*TotalBenchmarkArrows*/
17
+ var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
18
+ var title = _ref.title,
19
+ value = _ref.value,
20
+ benchmarkTotalValue = _ref.benchmarkTotalValue,
21
+ benchmarkValue = _ref.benchmarkValue,
22
+ _ref$detailsTitle = _ref.detailsTitle,
23
+ detailsTitle = _ref$detailsTitle === void 0 ? "" : _ref$detailsTitle,
24
+ detailsData = _ref.detailsData,
25
+ _ref$dotCut = _ref.dotCut,
26
+ dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
27
+ _ref$width = _ref.width,
28
+ width = _ref$width === void 0 ? 260 : _ref$width,
29
+ _ref$height = _ref.height,
30
+ height = _ref$height === void 0 ? 350 : _ref$height,
31
+ _ref$textColor = _ref.textColor,
32
+ textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
+ var getArrowSign = function getArrowSign(value) {
35
+ if (!value) {
36
+ return "";
37
+ }
38
+ if (value >= 0) {
39
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
40
+ value: value
41
+ }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, null));
42
+ } else {
43
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
44
+ value: value
45
+ }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, null));
46
+ }
47
+ };
48
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ControlsContainer, {
49
+ height: height,
50
+ width: width,
51
+ textColor: textColor
52
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Controls, {
53
+ height: height,
54
+ width: width
55
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Title, {
56
+ width: width
57
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
58
+ width: width
59
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
60
+ width: width
61
+ }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
62
+ totalValue: benchmarkTotalValue,
63
+ currentValue: value,
64
+ benchmarkValue: benchmarkValue,
65
+ height: 12,
66
+ width: 100,
67
+ color: "#79DB95",
68
+ linearGradientColor: "#C3EFD0",
69
+ linearGradientUnderAvarageColor: "#FDB1B1",
70
+ underAvarageColor: "#FD5959",
71
+ backgroundColor: "#F2F2F2"
72
+ })) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
73
+ height: height,
74
+ width: width
75
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsTitle, {
76
+ height: height,
77
+ width: width
78
+ }, detailsTitle), detailsData.map(function (item, index) {
79
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowContainer, {
80
+ height: height,
81
+ width: width,
82
+ index: index
83
+ }, getArrowSign(item.value), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, null, item.value ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, null, " % "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
84
+ height: height,
85
+ width: width
86
+ }, item.title));
87
+ })), ";"));
88
+ };
89
+ exports.TotalBenchmarkArrows = TotalBenchmarkArrows;
90
+ var _default = TotalBenchmarkArrows;
91
+ exports.default = _default;
package/dist/stories/components/TotalBenchmarkArrows.style.js ADDED
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrow = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
11
+ var MIN_HEIGHT = 300;
12
+ var MIN_WIDTH = 260;
13
+ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
14
+ return props.textColor;
15
+ }, function (props) {
16
+ return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
17
+ }, function (props) {
18
+ return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
19
+ });
20
+ exports.ControlsContainer = ControlsContainer;
21
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 68px;\n left: 40px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
22
+ return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
+ }, function (props) {
24
+ return (props.height - MIN_HEIGHT <= 0 ? 230 : 230 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
25
+ });
26
+ exports.Controls = Controls;
27
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
28
+ return (props.width - MIN_WIDTH <= 0 ? 250 : 250 + (props.width - MIN_WIDTH)).toString().concat("", "px");
29
+ });
30
+ exports.Title = Title;
31
+ var FormattedValue = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
32
+ return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
+ });
34
+ exports.FormattedValue = FormattedValue;
35
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100px;\n height: 12px;\n left: ", ";\n top: 66px;\n //border: 1px solid red;\n"])), function (props) {
36
+ return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
37
+ });
38
+ exports.BenchmarkContainer = BenchmarkContainer;
39
+ var DetailsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", "; \n height: ", "; \n left: 0px;\n top: 150px;\n //border: 1px solid green;\n"])), function (props) {
40
+ return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
41
+ }, function (props) {
42
+ return (props.height - MIN_HEIGHT <= 0 ? 80 : 80 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
43
+ });
44
+ exports.DetailsContainer = DetailsContainer;
45
+ var DetailsTitle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])), function (props) {
46
+ return (props.width - MIN_WIDTH <= 0 ? 240 : 240 + (props.width - MIN_WIDTH)).toString().concat("", "px");
47
+ });
48
+ exports.DetailsTitle = DetailsTitle;
49
+ var DetailsRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: 35px;\n left: 0px;\n top: ", ";\n //border: 1px solid brown;\n"])), function (props) {
50
+ return (props.width - MIN_WIDTH <= 0 ? 220 : 220 + (props.width - MIN_WIDTH)).toString().concat("", "px");
51
+ }, function (props) {
52
+ return (35 + 35 * props.index).toString().concat("", "px");
53
+ });
54
+ exports.DetailsRowContainer = DetailsRowContainer;
55
+ var DetailsRowArrow = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 4px; \n height: 12px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
56
+ exports.DetailsRowArrow = DetailsRowArrow;
57
+ var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 5px;\n height: 19px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
58
+ exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
59
+ var DetailsRowPercentSign = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 5px;\n margin-top: 3px;\n margin-right: 10px;\n text-align: bottom;\n height: 16px;\n left: 32px;\n top: 5px;\n font-weight: 600;\n font-size: 12px;\n line-height: 14px;\n //border: 1px solid red;\n"])));
60
+ exports.DetailsRowPercentSign = DetailsRowPercentSign;
61
+ var DetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([" \n height: 19px;\n left: 50px;\n top: 0px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
62
+ exports.DetailsRowTitle = DetailsRowTitle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.46",
3
+ "version": "1.0.47",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/dist/stories/Button.style.js DELETED
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.DropdownContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject;
11
- var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n"])), function (props) {
12
- return props.width;
13
- });
14
- exports.DropdownContainer = DropdownContainer;
package/dist/stories/Dropdown.style.js DELETED
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.DropdownContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject;
11
- var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n"])), function (props) {
12
- return props.width;
13
- });
14
- exports.DropdownContainer = DropdownContainer;
package/dist/stories/OneColumnContainer.style.js DELETED
@@ -1,28 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.StyledContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
- var StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; \n display: flex;\n position: relative;\n border-radius: 10px;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n"])), function (props) {
12
- return props.width;
13
- }, function (props) {
14
- return props.height;
15
- });
16
- exports.StyledContainer = StyledContainer;
17
- var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n align-items: center;\n display: flex;\n visibility: ", ";\n text-align: center;\n justify-content: center;\n background: rgba(16, 16, 16, .6);\n"])), function (props) {
18
- return props.width;
19
- }, function (props) {
20
- return props.height;
21
- }, function (props) {
22
- return props.clicked ? 'visible' : 'hidden';
23
- });
24
- exports.InfoTextContainer = InfoTextContainer;
25
- var InfoTextLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n text-align: center;\n color: white;\n margin: 10px;\n justify-content: center;\n"])));
26
- exports.InfoTextLabel = InfoTextLabel;
27
- var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 15px;\n height: 15px;\n position: absolute;\n margin-top:10px;\n margin-right:10px;\n top: 0;\n right: 0;\n"])));
28
- exports.IconContainer = IconContainer;
package/dist/stories/SegmentedButton.style.js DELETED
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.ControlsContainer = exports.Controls = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
11
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n font: ", "; \n margin: 100px 0 25px;\n --highlight-width: auto;\n --highlight-x-pos: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n"])), function (props) {
12
- var _props$fontSize;
13
- return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat("", "px Lato, sans-serif");
14
- });
15
- exports.ControlsContainer = ControlsContainer;
16
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n justify-content: space-between; \n background: ", ";\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n border-radius: ", "; //12px\n // max-width: 500px; //use this to limit max lenght of the control \n padding: 6px; \n margin: auto;\n overflow: hidden;\n position: relative;\n &.controls::before {\n content: \"\";\n background: ", "; /* #3a9df9; #5465ff;*/\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n border-radius: ", "; //12px\n width: var(--highlight-width);\n transform: translateX(var(--highlight-x-pos));\n position: absolute;\n top: 6px;\n bottom: 6px;\n left: 0;\n z-index: 0;\n }\n &.controls.ready::before {\n transition: transform 0.3s ease, width 0.3s ease;\n }\n"])), function (props) {
17
- return props.backgroundColor;
18
- }, function (props) {
19
- return props.controlRadius.toString().concat("", "px");
20
- }, function (props) {
21
- return props.selectedSegmentColor;
22
- }, function (props) {
23
- return props.segmentRadius.toString().concat("", "px");
24
- });
25
- exports.Controls = Controls;
26
- var ControlsInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n opacity: 0;\n margin: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n width: 100%;\n cursor: pointer;\n height: 100%;\n"])));
27
- exports.ControlsInput = ControlsInput;
28
- var Segment = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n /* width: 100%; uncomment for each segment to have matching width */ \n min-width: ", "; //120px;\n position: relative;\n text-align: center;\n z-index: 1; \n"])), function (props) {
29
- return props.segmentWidth.toString().concat("", "px");
30
- });
31
- exports.Segment = Segment;
32
- var SegmentLabel = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n display: block;\n //font-weight: 550;\n padding: ", "; //10px;\n transition: color 0.5s ease;\n &.active {\n color: ", ";\n }\n &.inactive {\n color: ", ";\n }\n"])), function (props) {
33
- return props.segmentHeigth.toString().concat("", "px");
34
- }, function (props) {
35
- return props.selectedTextColor;
36
- }, function (props) {
37
- return props.unselectedTextColor;
38
- });
39
- exports.SegmentLabel = SegmentLabel;
package/dist/stories/TotalDoughnutChart.style.js DELETED
@@ -1,44 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
11
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
12
- return props.textColor;
13
- }, function (props) {
14
- return props.width.toString().concat("", "px");
15
- }, function (props) {
16
- return props.height.toString().concat("", "px");
17
- });
18
- exports.ControlsContainer = ControlsContainer;
19
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
20
- return props.width.toString().concat("", "px");
21
- }, function (props) {
22
- return props.height.toString().concat("", "px");
23
- });
24
- exports.Controls = Controls;
25
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 150px;\n height: 22px;\n left: 40px;\n top: 81px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
26
- exports.Title = Title;
27
- var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 22px;\n left: 42px;\n top: 135px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
28
- exports.CurrencySign = CurrencySign;
29
- var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 200px;\n height: 48px;\n left: 57px;\n top: 115px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])));
30
- exports.FormattedValue = FormattedValue;
31
- var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 95px;\n height: 95px;\n left: 40px;\n top: 221px;\n //border: 1px solid red;\n"])));
32
- exports.DoughnutChart = DoughnutChart;
33
- var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: 180px;\n height: 47px;\n left: 150px;\n top: 221px; \n background: #ffffff;\n //border: 1px solid blue;\n"])));
34
- exports.LegendControls = LegendControls;
35
- var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 16px;\n height: 16px;\n left: 14px;\n top: 14px;\n background: ", ";\n"])), function (props) {
36
- return props.color;
37
- });
38
- exports.LegendColorRectangle = LegendColorRectangle;
39
- var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 120px;\n height: 18px;\n left: 40px;\n top: 1px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
40
- exports.LegendTitle = LegendTitle;
41
- var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 19px;\n left: 42px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
42
- exports.LegendCurrencySign = LegendCurrencySign;
43
- var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100px;\n height: 19px;\n left: 52px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
44
- exports.LegendFormattedValue = LegendFormattedValue;