sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/KpiFilter.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.KpiFilter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CheckBox = require("./CheckBox");
+var _CheckBoxButton = require("./CheckBoxButton");
+var _KpiFilter = require("./KpiFilter.style");
+/* KpiFilter */
+const KpiFilter = props => {
+  let {
+    height
+  } = props;
+  const {
+    width,
+    mainTitle,
+    periodTitle,
+    kpiData,
+    buttonsIconColor,
+    buttonsBorderColor,
+    buttonsTextColorChecked,
+    buttonsTextColorUnchecked,
+    buttonsBackgroundColorChecked,
+    buttonsBackgroundColorUnchecked,
+    onClick,
+    onClickPeriod,
+    selectAllIgnoreList
+  } = props;
+  const DEFAULT_PERIOD = {
+    weeks4: true,
+    weeks8: false,
+    weeks13: false
+  };
+  const [KpiDataState, setKpiDataState] = (0, _react.useState)(kpiData);
+  const [periodState, setPeriodState] = (0, _react.useState)(DEFAULT_PERIOD);
+
+  // ------------------------- CheckBox Buttons OnClick Handler - Begin ------------------
+  (0, _react.useEffect)(() => {
+    const kpiSelectedData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
+      var _itemColumn$buttonsAr;
+      return (_itemColumn$buttonsAr = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr === void 0 ? void 0 : _itemColumn$buttonsAr.filter(itemButton => itemButton.checked === true || itemButton.secondButtonChecked === true);
+    });
+    const kpiSelectedButtonsLabels = [];
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < (kpiSelectedData === null || kpiSelectedData === void 0 ? void 0 : kpiSelectedData.length); i++) {
+      // eslint-disable-next-line no-plusplus
+      for (let j = 0; j < ((_kpiSelectedData$i = kpiSelectedData[i]) === null || _kpiSelectedData$i === void 0 ? void 0 : _kpiSelectedData$i.length); j++) {
+        var _kpiSelectedData$i;
+        if (kpiSelectedData[i][j].label && kpiSelectedData[i][j].checked === true) {
+          kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
+        }
+        if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
+          kpiSelectedButtonsLabels.push(''.concat('', kpiSelectedData[i][j].label, ':', kpiSelectedData[i][j].secondButtonLabel));
+        }
+      }
+    }
+    onClick({
+      kpiSelectedButtonsLabels,
+      kpiData: KpiDataState
+    });
+  }, [KpiDataState]);
+  // ------------------------- Buttons OnClick Handler - End ------------------
+
+  // eslint-disable-next-line no-shadow
+  const dispalyColumnButtons = function (data, height) {
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
+    if (!data || data.length === 0) return;
+    if (data && data.length > 0) {
+      // eslint-disable-next-line consistent-return
+      return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
+        id: "ButtonsContainer",
+        height: height,
+        paddingBottom: paddingBottom
+      }, data === null || data === void 0 ? void 0 : data.map(item => {
+        var _item$marginBottom;
+        return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
+          id: "ButtonContainer",
+          className: item.marginBottom ? 'marginBottom' : '',
+          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : '0px'
+        }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
+          backgroundColorChecked: buttonsBackgroundColorChecked,
+          backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
+          borderColor: buttonsBorderColor,
+          borderRadius: "12px",
+          checked: item.checked,
+          disabled: item.disabled,
+          fontSize: "12px",
+          height: "29px",
+          iconColor: buttonsIconColor,
+          iconSize: "12px",
+          label: item.label,
+          onClick: buttonClicked => {
+            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
+              var _itemColumn$buttonsAr2;
+              return {
+                ...itemColumn,
+                buttonsArray: (_itemColumn$buttonsAr2 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr2 === void 0 ? void 0 : _itemColumn$buttonsAr2.map(itemButton => itemButton.label === buttonClicked.label ? {
+                  ...itemButton,
+                  checked: buttonClicked.checked
+                } : {
+                  ...itemButton
+                })
+              };
+            });
+            setKpiDataState(newDataKpi);
+          },
+          textColorChecked: buttonsTextColorChecked,
+          textColorUnchecked: buttonsTextColorUnchecked,
+          width: "100%"
+        }), item.secondButtonLabel ? /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
+          backgroundColorChecked: buttonsBackgroundColorChecked,
+          backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
+          borderColor: buttonsBorderColor,
+          borderRadius: "12px",
+          checked: item.secondButtonChecked,
+          disabled: item.secondButtonDisabled,
+          fontSize: "12px",
+          height: "29px",
+          iconColor: buttonsIconColor,
+          iconSize: "12px",
+          label: ''.concat('', item.label, ':', item.secondButtonLabel),
+          displayLabel: item.secondButtonLabel,
+          onClick: buttonClicked => {
+            const newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
+              var _itemColumn$buttonsAr3;
+              return {
+                ...itemColumn,
+                buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(itemButton => ''.concat('', itemButton.label, ':', itemButton.secondButtonLabel) === buttonClicked.label ? {
+                  ...itemButton,
+                  secondButtonChecked: buttonClicked.checked
+                } : {
+                  ...itemButton
+                })
+              };
+            });
+            setKpiDataState(newDataKpi);
+          },
+          textColorChecked: buttonsTextColorChecked,
+          textColorUnchecked: buttonsTextColorUnchecked,
+          width: "100%"
+        }) : '');
+      }));
+    }
+  };
+  const isIncludedInIgnoreList = label => {
+    if (selectAllIgnoreList && selectAllIgnoreList.length > 0) {
+      return selectAllIgnoreList.includes(label);
+    }
+    return false;
+  };
+  const displayMainTitle = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
+    id: "MainTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
+    id: "MainTitle"
+  }, mainTitle), /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxContainer, {
+    id: "CheckBoxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    checked: false,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "14px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    label: "Select All",
+    onClick: propsSelectAll => {
+      const newData = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(itemColumn => {
+        var _itemColumn$buttonsAr4;
+        return {
+          ...itemColumn,
+          buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(itemButton => ({
+            ...itemButton,
+            checked: !isIncludedInIgnoreList(itemButton.label) ? propsSelectAll.checked : itemButton.checked
+          }))
+        };
+      });
+      setKpiDataState(newData);
+    }
+  })));
+  const onClickPeriodHandler = checkBox => {
+    const {
+      label,
+      checked
+    } = checkBox;
+    let newPeriod;
+    const periodCheckedArray = [];
+    switch (label) {
+      case '4 weeks':
+        newPeriod = {
+          ...periodState,
+          weeks4: checked
+        };
+        break;
+      case '8 weeks':
+        newPeriod = {
+          ...periodState,
+          weeks8: checked
+        };
+        break;
+      case '13 weeks':
+        newPeriod = {
+          ...periodState,
+          weeks13: checked
+        };
+        break;
+      default:
+        newPeriod = {
+          ...periodState
+        };
+    }
+    setPeriodState(newPeriod);
+    if (newPeriod.weeks4) periodCheckedArray.push('4 weeks');
+    if (newPeriod.weeks8) periodCheckedArray.push('8 weeks');
+    if (newPeriod.weeks13) periodCheckedArray.push('13 weeks');
+    onClickPeriod({
+      periodChecked: periodCheckedArray
+    });
+  };
+  const displayPeriod = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.CheckBoxPeriodContainer, {
+    id: "CheckBoxPeriodContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "4 weeks",
+    checked: periodState.weeks4,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "14px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false,
+    onClick: checkBox4Weeks => {
+      onClickPeriodHandler(checkBox4Weeks);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "8 weeks",
+    checked: periodState.weeks8,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "12px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false,
+    onClick: checkBox8Weeks => {
+      onClickPeriodHandler(checkBox8Weeks);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
+    id: "CheckBox",
+    label: "13 weeks",
+    checked: periodState.weeks13,
+    colorChecked: buttonsIconColor,
+    colorUnchecked: buttonsIconColor,
+    fontSize: "12px",
+    height: "20px",
+    width: "100%",
+    iconSize: "14px",
+    disabled: false,
+    onClick: checkBox13Weeks => {
+      onClickPeriodHandler(checkBox13Weeks);
+    }
+  }));
+  const displayOneColumn = (item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleAndButtonsContainer, {
+    id: "ColumnTitleAndButtonsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
+    id: "ColumnContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
+    id: "ColumnTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
+    id: "ColumnTitle"
+  }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = '160px', '0px'), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : '', i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : '')), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnLineSeporatorContainer, {
+    id: "ColumnLineSeporatorContainer"
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnLineSeporator, {
+    id: "ColumnLineSeporator"
+  })) : '');
+  const displayColumns = () => {
+    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) {
+      return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
+        id: "AllColumnsContainer"
+      }, KpiDataState.map((item, i) => displayOneColumn(item, i)));
+    }
+    return '';
+  };
+
+  //= ======================================== MAIN RETURN ====================================
+  return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
+    id: "MainContainer",
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
+    id: "PanelContainer"
+  }, displayMainTitle(), displayColumns()));
+  //= ======================================== MAIN RETURN END====================================
+};
+exports.KpiFilter = KpiFilter;
+var _default = exports.default = KpiFilter;
+KpiFilter.defaultProps = {
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
+  kpiData: [],
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#1B30AA',
+  buttonsBorderColor: '#1B30AA',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F1FF',
+  buttonsBackgroundColorUnchecked: '#F2F2F2',
+  onClick: () => {},
+  // onClickIncludeBenchmark: () => {},
+  onClickPeriod: () => {},
+  selectAllIgnoreList: []
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PeriodColumnTitle = exports.PanelContainer = exports.MainTitleContainer = exports.MainTitle = exports.MainContainer = exports.ColumnTitleContainer = exports.ColumnTitleAndButtonsContainer = exports.ColumnTitle = exports.ColumnLineSeporatorContainer = exports.ColumnLineSeporator = exports.ColumnContainer = exports.CheckBoxPeriodContainer = exports.CheckBoxContainer = exports.ButtonsContainer = exports.ButtonContainer = exports.AllColumnsContainer = 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, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 0.3rem 1rem;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+const MainTitleContainer = exports.MainTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const MainTitle = exports.MainTitle = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const PeriodColumnTitle = exports.PeriodColumnTitle = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 50px 5px 5px 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const CheckBoxContainer = exports.CheckBoxContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n"])));
+const AllColumnsContainer = exports.AllColumnsContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+const ColumnTitleAndButtonsContainer = exports.ColumnTitleAndButtonsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 10px 0 0 0;\n  height: 100%;\n"])));
+const ColumnContainer = exports.ColumnContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+const ColumnLineSeporatorContainer = exports.ColumnLineSeporatorContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background-color: #b1b1b1;\n  align-items: center;\n  height: 90%;\n  margin: 15px 0;\n"])));
+const ColumnLineSeporator = exports.ColumnLineSeporator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.5px;\n"])));
+const ColumnTitleContainer = exports.ColumnTitleContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n"])));
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: nowrap;\n  padding-bottom: ", ";\n"])), props => props.paddingBottom);
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px;\n  gap: 10px;\n  &.marginBottom {\n    margin-bottom: ", ";\n  }\n"])), props => props.marginBottom);
+const CheckBoxPeriodContainer = exports.CheckBoxPeriodContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //gap: 20px;\n  margin: 5px;\n"])));

package/dist/stories/components/LinkButton/LinkButton.js

@@ -0,0 +1,207 @@
+"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.default = exports.LinkButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _LinkButton = require("./LinkButton.style");
+var _FilterIcon = require("../../icons/FilterIcon");
+var _OptionsIcon = require("../../icons/OptionsIcon");
+var _DownloadIcon = require("../../icons/DownloadIcon");
+var _DocumentIcon = require("../../icons/DocumentIcon");
+var _FlyIcon = require("../../icons/FlyIcon");
+var _BellIcon = require("../../icons/BellIcon");
+var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
+var _ExitIcon = require("../../icons/ExitIcon");
+var _EyeIcon = require("../../icons/EyeIcon");
+var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
+var _MenuItemRightIcon = require("../../icons/MenuItemRightIcon");
+var _ArrowSelectIcon = _interopRequireDefault(require("../../icons/ArrowSelectIcon"));
+var _InfoIcon = require("../../icons/InfoIcon");
+var _AttachedIcon = require("../../icons/AttachedIcon");
+const LinkButton = props => {
+  const {
+    text,
+    type,
+    size,
+    height,
+    width,
+    disabled,
+    textColor,
+    leftIcon,
+    rightIcon,
+    onClick
+  } = props;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const handleLinkButtonClick = () => {
+    setClicked(true);
+    onClick(text);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const getIcon = icon => {
+    const iconHeight = size === 'small' ? '12px' : '13px';
+    const iconWidth = size === 'small' ? '12px' : '13px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#229E38');
+    const color = disabled ? '#B1B1B1' : newTextColor;
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'arrowdown':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ArrowDownIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'arrowright':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ArrowRightIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MenuItemRightIcon.MenuItemRightIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "SelectRightIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'info':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "InfoIcon"
+        }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'attached':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "AttachedIcon"
+        }, /*#__PURE__*/_react.default.createElement(_AttachedIcon.AttachedIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
+    }
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonContainer, {
+    className: "LinkButtonContainer",
+    width: width || null,
+    height: height || '20px'
+  }, /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonItem, {
+    className: clicked ? 'LinkButtonItem-clicked' : 'LinkButtonItem',
+    onClick: !disabled ? handleLinkButtonClick : null,
+    width: width || null,
+    height: height || '20px',
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
+    font_size: size === 'small' ? '14px' : '16px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_LinkButton.Label, {
+    className: "Label",
+    disabled: disabled,
+    font_size: size === 'small' ? '14px' : '16px'
+  }, text), getRightIcon()));
+};
+exports.LinkButton = LinkButton;
+var _default = exports.default = LinkButton;
+LinkButton.defaultProps = {
+  text: '',
+  type: 'primary',
+  size: 'small',
+  height: '',
+  width: '',
+  disabled: false,
+  textColor: '',
+  onClick: () => {},
+  leftIcon: 'none',
+  rightIcon: 'none'
+};