sag_components 1.0.396 → 1.0.398

package/dist/stories/components/DropdownMulti.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DropdownMulti = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -17,72 +15,58 @@ var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/
 var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
 var _DropdownMulti = require("./DropdownMulti.style");
-var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });
-var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
   fontSize: "small"
 });
 
 /**
  *  SAG DropdownMulti
  */
-var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
-  var name = _ref.name,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "100%" : _ref$width,
-    size = _ref.size,
-    text = _ref.text,
-    shape = _ref.shape,
-    placeHolder = _ref.placeHolder,
-    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
-    showPopupIcon = _ref.showPopupIcon,
-    options = _ref.options,
-    onChange = _ref.onChange,
-    onInputChange = _ref.onInputChange,
-    _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
-    required = _ref.required,
-    inputRef = _ref.inputRef,
-    _ref$allowedInput = _ref.allowedInput,
-    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
-    _ref$reset = _ref.reset,
-    reset = _ref$reset === void 0 ? false : _ref$reset,
-    _ref$disableClearable = _ref.disableClearable,
-    disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$dropdownListfont = _ref.dropdownListfontSize,
-    dropdownListfontSize = _ref$dropdownListfont === void 0 ? "14px" : _ref$dropdownListfont,
-    _ref$placeHolderFontS = _ref.placeHolderFontSize,
-    placeHolderFontSize = _ref$placeHolderFontS === void 0 ? "14px" : _ref$placeHolderFontS;
+const DropdownMulti = _ref => {
+  let {
+    name,
+    width = "100%",
+    size,
+    text,
+    shape,
+    placeHolder,
+    limitTagsOnMultiSelect,
+    showPopupIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = "#1B30AA",
+    required,
+    inputRef,
+    allowedInput = "all",
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = "14px",
+    placeHolderFontSize = "14px"
+  } = _ref;
   /**
    *  SAG DropdownMulti
    */
 
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentInputValue = _useState2[0],
-    setCurrentInputValue = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selectedOptionsState = _useState4[0],
-    setSelectedOptionsState = _useState4[1];
-  (0, _react.useEffect)(function () {
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
     console.log("selectedOptionsState", selectedOptionsState);
   }, [selectedOptionsState]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setSelectedOptionsState([]);
   }, [reset]);
-  (0, _react.useEffect)(function () {
-    var delayDebounceFn = setTimeout(function () {
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
       onInputChange(currentInputValue);
     }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
+    return () => clearTimeout(delayDebounceFn);
   }, [currentInputValue]);
-  var theme = (0, _styles.createTheme)({
+  const theme = (0, _styles.createTheme)({
     components: {
       MuiFormLabel: {
         styleOverrides: {
@@ -95,7 +79,7 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
   });
 
   // ---------------------------- Multi Text Style -----------------------------------------
-  var getTextFieldStyleMulti = function getTextFieldStyleMulti() {
+  const getTextFieldStyleMulti = () => {
     if (shape === "round") {
       // round
       return {
@@ -147,23 +131,19 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
     // square
     return null;
   };
-  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
+  const onInputChangeHandler = (event, newInputValue) => {
     setCurrentInputValue({
       syntheticBaseEvent: event,
       inputValue: newInputValue
     });
   };
-  var onChangeHandler = function onChangeHandler(event, newValue) {
+  const onChangeHandler = (event, newValue) => {
     // const newSelectedOptionsSet = new Set(newValue?.map((item) => item) ?? []);
     // const newSelectedOptions = Array.from(newSelectedOptionsSet).map((item) => {
     //   return item;
     // });
 
-    var newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter(function (value, index, self) {
-      return index === self.findIndex(function (item) {
-        return item.id === value.id && item.label === value.label;
-      });
-    });
+    const newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
     console.log("onChangeHandler", newSelectedOptions);
     setSelectedOptionsState(newSelectedOptions);
     onChange({
@@ -171,10 +151,10 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
       newValue: newSelectedOptions
     });
   };
-  var isInputAllowed = function isInputAllowed(inputChar) {
-    var NUMERIC_REGEX = /^[0-9-]+$/;
-    var ALPHA_REGEX = /^[a-zA-Z]+$/;
-    var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
       case "all":
         return true;
@@ -193,94 +173,91 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
   };
 
   // --------------------------------------- DropdownMulti--------------------------------
-  var getAutocompleteMulti = function getAutocompleteMulti() {
-    return selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      class: name,
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      multiple: true,
-      limitTags: limitTagsOnMultiSelect,
-      id: "checkboxes-tags",
-      options: options,
-      value: selectedOptionsState,
-      disabled: disabled,
-      disableCloseOnSelect: true,
-      disableClearable: disableClearable,
-      getOptionLabel: function getOptionLabel(option) {
-        return option.label;
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
-        width: "0.5em",
-        height: "0.5em"
-      }) : null,
-      renderOption: function renderOption(props, option, _ref2) {
-        var selected = _ref2.selected;
-        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-          icon: icon,
-          checkedIcon: checkedIcon,
-          checked: isOptionChecked(option) //{selected} //
-        }), option.label);
-      },
-      renderInput: function renderInput(params) {
-        // console.log("params", params);
-        return (
-          /*#__PURE__*/
-          //showSearchIcon &&
-          _react.default.createElement(_TextField.default, Object.assign({}, params, {
-            variant: "outlined",
-            label: text,
-            size: size,
-            sx: getTextFieldStyleMulti(),
-            placeholder: placeHolder,
-            InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-              style: {
-                fontSize: placeHolderFontSize,
-                fontFamily: "Poppins"
-              }
+  const getAutocompleteMulti = () => selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    class: name,
+    onChange: (event, newValue) => {
+      onChangeHandler(event, newValue);
+    },
+    onInputChange: (event, newInputValue) => {
+      onInputChangeHandler(event, newInputValue);
+    },
+    multiple: true,
+    limitTags: limitTagsOnMultiSelect,
+    id: "checkboxes-tags",
+    options: options,
+    value: selectedOptionsState,
+    disabled: disabled,
+    disableCloseOnSelect: true,
+    disableClearable: disableClearable,
+    getOptionLabel: option => option.label,
+    popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+      width: "0.5em",
+      height: "0.5em"
+    }) : null,
+    renderOption: (props, option, _ref2) => {
+      let {
+        selected
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+        icon: icon,
+        checkedIcon: checkedIcon,
+        checked: isOptionChecked(option) //{selected} //
+      }), option.label);
+    },
+    renderInput: params => {
+      // console.log("params", params);
+      return (
+        /*#__PURE__*/
+        //showSearchIcon &&
+        _react.default.createElement(_TextField.default, Object.assign({}, params, {
+          variant: "outlined",
+          label: text,
+          size: size,
+          sx: getTextFieldStyleMulti(),
+          placeholder: placeHolder,
+          InputProps: {
+            ...params.InputProps,
+            style: {
+              fontSize: placeHolderFontSize,
+              fontFamily: "Poppins"
+            }
 
-              //   endAdornment: (
-              //     <>
-              //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
-              //         <span key={index} style={{ margin: '0 5px' }}>
-              //           {option.label}
-              //         </span>
-              //       ))}
-              //       {params.InputProps.endAdornment}
+            //   endAdornment: (
+            //     <>
+            //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
+            //         <span key={index} style={{ margin: '0 5px' }}>
+            //           {option.label}
+            //         </span>
+            //       ))}
+            //       {params.InputProps.endAdornment}
 
-              //     </>
-              //   ),
-            }),
+            //     </>
+            //   ),
+          },
 
-            onKeyDown: function onKeyDown(event) {
-              if (!isInputAllowed(event.key)) {
-                event.preventDefault();
-              }
-            },
-            inputRef: inputRef || null,
-            required: required
-          }))
-        );
-      },
-      ListboxProps: {
-        style: {
-          fontSize: dropdownListfontSize,
-          //default: 14px
-          fontFamily: "Poppins"
-        }
+          onKeyDown: event => {
+            if (!isInputAllowed(event.key)) {
+              event.preventDefault();
+            }
+          },
+          inputRef: inputRef || null,
+          required: required
+        }))
+      );
+    },
+    ListboxProps: {
+      style: {
+        fontSize: dropdownListfontSize,
+        //default: 14px
+        fontFamily: "Poppins"
       }
-    }));
-  };
-  var isOptionChecked = function isOptionChecked(option) {
+    }
+  }));
+  const isOptionChecked = option => {
     var _Object$values;
-    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(function (itemFilter) {
-      return itemFilter.label;
-    }).includes(option.label)) {
+    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(itemFilter => itemFilter.label).includes(option.label)) {
       return true;
     } else {
       return false;
@@ -292,4 +269,5 @@ var DropdownMulti = exports.DropdownMulti = function DropdownMulti(_ref) {
     width: width
   }, getAutocompleteMulti());
 };
+exports.DropdownMulti = DropdownMulti;
 var _default = exports.default = DropdownMulti;

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

@@ -10,6 +10,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 //import './font.css';
 
-var DropdownContainer = exports.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  font-family: Poppins;  \n  font-size: \"14px\";\n"])), function (props) {
-  return props.width;
-});
+const DropdownContainer = exports.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  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);

package/dist/stories/components/FilterContainer.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FilterContainer = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FilterContainer = require("./FilterContainer.style");
-var _excluded = ["itemClass", "nodeRef"];
 var _templateObject;
-var Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-var FilterContainer = exports.FilterContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var itemClass = _ref.itemClass,
-    nodeRef = _ref.nodeRef,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+const FilterContainer = exports.FilterContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    itemClass,
+    nodeRef,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_FilterContainer.FilterDivContainer, {
     className: itemClass,
     style: {

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

@@ -8,6 +8,6 @@ exports.FilterFooterContent = exports.FilterDivContent = exports.FilterDivContai
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background-color: white;\n"])));
-var FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div {\n        margin: 25px;\n    }\n"])));
-var FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 10%;\n"])));
+const FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background-color: white;\n"])));
+const FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div {\n        margin: 25px;\n    }\n"])));
+const FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 10%;\n"])));

package/dist/stories/components/IconButton.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.IconButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _DownloadIcon = require("./icons/DownloadIcon");
 var _DocumentIcon = require("./icons/DocumentIcon");
@@ -17,22 +15,43 @@ var _MaintenanceIcon = require("./icons/MaintenanceIcon");
 var _EyeIcon = require("./icons/EyeIcon");
 var _IconButton = require("./IconButton.style");
 /* IconButton */
-var IconButton = exports.IconButton = function IconButton(props) {
-  var contentColor = props.contentColor,
-    buttonText = props.buttonText,
-    backgroundColor = props.backgroundColor,
-    borderColor = props.borderColor,
-    borderRadius = props.borderRadius,
-    iconName = props.iconName,
-    iconWidth = props.iconWidth,
-    iconHeight = props.iconHeight,
-    disabled = props.disabled,
-    onClick = props.onClick;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    mouseDownPressed = _useState2[0],
-    setMouseDownPressed = _useState2[1];
-  var getIcon = function getIcon(icon) {
+const IconButton = props => {
+  const {
+    downloadStatus,
+    contentColor,
+    buttonText,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    iconName,
+    iconWidth,
+    iconHeight,
+    disabled,
+    inProgress,
+    onClick,
+    onCancelClick
+  } = props;
+  const [mouseDownPressed, setMouseDownPressed] = (0, _react.useState)(false);
+  const [progress, setProgress] = (0, _react.useState)(0);
+  const incrementProgress = () => {
+    if (downloadStatus === 'in progress' && progress <= 90) {
+      const interval = setInterval(() => {
+        setProgress(prevProgress => {
+          const newProgress = prevProgress + 1;
+          if (newProgress >= 90) {
+            clearInterval(interval);
+          }
+          return newProgress;
+        });
+      }, 500);
+    } else if (downloadStatus === 'success') {
+      setProgress(0);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    incrementProgress();
+  }, [downloadStatus]);
+  const getIcon = icon => {
     switch (icon) {
       case 'download':
         return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
@@ -80,29 +99,32 @@ var IconButton = exports.IconButton = function IconButton(props) {
         return '';
     }
   };
-  var onMouseDownHandler = function onMouseDownHandler() {
+  const onMouseDownHandler = () => {
     if (disabled) return;
     setMouseDownPressed(true);
   };
-  var onMouseUpHandler = function onMouseUpHandler() {
+  const onMouseUpHandler = () => {
     if (disabled) return;
     setMouseDownPressed(false);
   };
-  var onPointerOutHandler = function onPointerOutHandler() {
+  const onPointerOutHandler = () => {
     if (disabled) return;
     if (!mouseDownPressed) return;
     setMouseDownPressed(false);
   };
-  var getClassNameExtention = function getClassNameExtention() {
+  const getClassNameExtention = () => {
     if (disabled) return 'disabled';
     if (mouseDownPressed) return 'mouseDownPressed';
     return '';
   };
-  var onClickHandler = function onClickHandler(event) {
+  const onClickHandler = event => {
     if (disabled) return;
     onClick(event);
   };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
+  const onCancelClickHandler = event => {
+    onCancelClick(event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
     className: getClassNameExtention(),
     backgroundColor: backgroundColor,
     borderColor: borderColor,
@@ -111,13 +133,20 @@ var IconButton = exports.IconButton = function IconButton(props) {
     onMouseDown: onMouseDownHandler,
     onMouseUp: onMouseUpHandler,
     onPointerOut: onPointerOutHandler,
-    onClick: function onClick(event) {
+    inProgress: inProgress,
+    progress: progress,
+    onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText));
+  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), inProgress && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
+    onClick: event => onCancelClickHandler(event)
+  }, "Click here to cancel"));
 };
+exports.IconButton = IconButton;
 var _default = exports.default = IconButton;
 IconButton.defaultProps = {
+  // downloadStatus: 'fail',
+  downloadStatus: 'in progress',
   buttonText: '',
   iconName: 'eye',
   contentColor: '#212121',
@@ -127,5 +156,7 @@ IconButton.defaultProps = {
   iconHeight: 18,
   iconWidth: 18,
   disabled: false,
-  onClick: function onClick() {}
+  inProgress: false,
+  onClick: () => {},
+  onCancelClick: () => {}
 };

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

@@ -1,20 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpanText = exports.IconButtonContainer = void 0;
+exports.SpanText = exports.IconButtonContainer = exports.CancelClick = exports.ButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
-var IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;  \n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  transition: all .3s;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n  &.disabled {\n    background-color: #ccc;\n  }\n"])), function (props) {
-  return props.color;
-}, function (props) {
-  return props.borderRadius;
-}, function (props) {
-  return props.borderColor.toString();
-}, function (props) {
-  return props.backgroundColor.toString();
-});
-var SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  text-align: center;\n"])));
+const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  margin-bottom: 5px;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: 'In Progress';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.progress, props.progress + 1, props => props.borderRadius));
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n"])));