sag_components 1.0.63 → 1.0.65

package/dist/stories/components/TotalBenchmark.js

@@ -17,9 +17,9 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
     _ref$dotCut = _ref.dotCut,
     dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
     _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 260 : _ref$width,
+    width = _ref$width === void 0 ? "260px" : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 350 : _ref$height,
+    height = _ref$height === void 0 ? "350px" : _ref$height,
     _ref$textColor = _ref.textColor,
     textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/stories/components/TotalBenchmark.style.js

@@ -10,12 +10,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var MIN_HEIGHT = 300;
 var MIN_WIDTH = 260;
-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  align-content: center;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"])), function (props) {
+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  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
   return props.textColor;
 }, function (props) {
-  return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
+  return props.width;
 }, function (props) {
-  return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
+  return props.height;
 });
 exports.ControlsContainer = ControlsContainer;
 var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 100%;\n  height: 100px;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/stories/Button.style.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-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) {
-  return props.width;
-});
-exports.DropdownContainer = DropdownContainer;

package/dist/stories/Dropdown.style.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-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) {
-  return props.width;
-});
-exports.DropdownContainer = DropdownContainer;

package/dist/stories/OneColumnContainer.style.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-exports.StyledContainer = StyledContainer;
-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) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, function (props) {
-  return props.clicked ? 'visible' : 'hidden';
-});
-exports.InfoTextContainer = InfoTextContainer;
-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"])));
-exports.InfoTextLabel = InfoTextLabel;
-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"])));
-exports.IconContainer = IconContainer;

package/dist/stories/SegmentedButton.style.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-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) {
-  var _props$fontSize;
-  return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat("", "px Lato, sans-serif");
-});
-exports.ControlsContainer = ControlsContainer;
-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) {
-  return props.backgroundColor;
-}, function (props) {
-  return props.controlRadius.toString().concat("", "px");
-}, function (props) {
-  return props.selectedSegmentColor;
-}, function (props) {
-  return props.segmentRadius.toString().concat("", "px");
-});
-exports.Controls = Controls;
-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"])));
-exports.ControlsInput = ControlsInput;
-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) {
-  return props.segmentWidth.toString().concat("", "px");
-});
-exports.Segment = Segment;
-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) {
-  return props.segmentHeigth.toString().concat("", "px");
-}, function (props) {
-  return props.selectedTextColor;
-}, function (props) {
-  return props.unselectedTextColor;
-});
-exports.SegmentLabel = SegmentLabel;

package/dist/stories/TotalDoughnutChart.style.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-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) {
-  return props.textColor;
-}, function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-});
-exports.ControlsContainer = ControlsContainer;
-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) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-});
-exports.Controls = Controls;
-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"])));
-exports.Title = Title;
-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"])));
-exports.CurrencySign = CurrencySign;
-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"])));
-exports.FormattedValue = FormattedValue;
-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"])));
-exports.DoughnutChart = DoughnutChart;
-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"])));
-exports.LegendControls = LegendControls;
-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) {
-  return props.color;
-});
-exports.LegendColorRectangle = LegendColorRectangle;
-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"])));
-exports.LegendTitle = LegendTitle;
-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"])));
-exports.LegendCurrencySign = LegendCurrencySign;
-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"])));
-exports.LegendFormattedValue = LegendFormattedValue;