sag_components 1.0.1054 → 1.0.1055

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};

package/dist/stories/components/BannerEventBoxTest.js

@@ -0,0 +1,42 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BannerEventBoxTest = require("./BannerEventBoxTest.style");
+var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
+const BannerEventBoxTest = props => {
+  const {
+    width,
+    height
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.MainContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Stop&Shop"
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Hannaford",
+    data: [{
+      name: 'asdf',
+      items: ['coca', 'haim']
+    }, {
+      name: 'Brazxcvnds',
+      items: ['coca', 'bola', 'spring', 'cola']
+    }, {
+      name: 'xcvb Lines',
+      items: ['spring']
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Giant Food"
+  }));
+};
+BannerEventBoxTest.defaultProps = {
+  width: 'auto',
+  height: 'auto'
+};
+var _default = exports.default = BannerEventBoxTest;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    gap: 20px;\n"])), props => props.width, props => props.height);

package/dist/stories/components/FilterButton.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(!activeState);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: activeState ? activeColor : color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: activeState ? activeColor : color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/NewInput.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _NewInput = require("./NewInput.style");
+const NewInput = props => {
+  const {
+    labelText,
+    inputType,
+    onTyping
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+    onTyping(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldContainer, null, /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldInput, {
+    type: inputType,
+    value: inputValue,
+    onChange: handleInputChange
+    // placeholder={labelText}
+  }), /*#__PURE__*/_react.default.createElement(_NewInput.Label, null, labelText));
+};
+var _default = exports.default = NewInput;
+NewInput.defaultProps = {
+  labelText: '',
+  inputType: 'text',
+  onTyping: () => {}
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldInput = exports.TextFieldContainer = exports.Label = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  font-size: 16px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n\n  &:focus + label,\n  &:not(:placeholder-shown) + label {\n    top: -8px;\n    font-size: 12px;\n    color: #007bff;\n    background-color: white;\n  }\n"])));
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 12px;\n  left: 10px;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  font-size: 16px;\n  color: #555;\n"])));

package/dist/stories/components/PieChart.js

@@ -11,6 +11,10 @@ var _CommonFunctions = require("./CommonFunctions");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _PieChart = require("./PieChart.style");
 var _Benchmark = require("./Benchmark");
+/* eslint-disable no-shadow */
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/prop-types */
+
 const PieChart = props => {
   const {
     className,
@@ -52,7 +56,28 @@ const PieChart = props => {
     style: {
       fontWeight: itemsBoldedValues ? '700' : '400'
     }
-  }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
+  }, ' (', `${row.value / value * 100}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
+  const CustomTooltip = _ref => {
+    let {
+      active,
+      payload
+    } = _ref;
+    if (active && payload && payload.length) {
+      const {
+        name,
+        value
+      } = payload[0];
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          backgroundColor: '#fff',
+          border: '1px solid #ccc',
+          padding: '10px',
+          borderRadius: '5px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", null, name, ' ', value.toFixed(2), isPercent ? '%' : ''));
+    }
+    return null;
+  };
   return /*#__PURE__*/_react.default.createElement(_PieChart.ControlsContainer, {
     className: className,
     height: height,
@@ -90,7 +115,9 @@ const PieChart = props => {
   }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
     key: `cell-${row.name}`,
     fill: row.color
-  }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_PieChart.LegendContainer, null, legendData.map(row => /*#__PURE__*/_react.default.createElement(_PieChart.LegendControlsContainer, {
+  }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
+  })))), /*#__PURE__*/_react.default.createElement(_PieChart.LegendContainer, null, legendData.map(row => /*#__PURE__*/_react.default.createElement(_PieChart.LegendControlsContainer, {
     key: row.name
   }, /*#__PURE__*/_react.default.createElement(_PieChart.LegendColorRectangle, {
     color: row.color

package/dist/stories/components/ReportTable.js

@@ -36,18 +36,19 @@ const ReportTable = props => {
     useCheckBoxes,
     width,
     height,
+    sortKey,
     className,
     limit,
     currentPage,
     totalPages,
     totalTableResults,
     onPageChange,
-    isLoading,
-    onSortChangeCallback,
-    onSortReset
+    isLoading
   } = props;
   const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
   const [AllRowsChecked, setAllRowsChecked] = (0, _react.useState)(false);
+  const [activeSortColumn, setActiveSortColumn] = (0, _react.useState)();
+  // const [currentPage, setCurrentPage] = useState(page);
   const getPaginatedRows = () => {
     return FormattedTableData.rowsValues;
   };
@@ -102,6 +103,9 @@ const ReportTable = props => {
     newTableData.rowsValues = newRowValuesStep4;
     setFormattedTableData(newTableData);
   }, [tableData, useSelectButtons, useCheckBoxes]);
+  const handleButtonClick = index => {
+    setActiveSortColumn(prevState => prevState === index ? null : index);
+  };
   const columnsNumber = tableData.columnsHeadings.length;
   const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
   const handleSelectButtonRowClick = row => {
@@ -219,29 +223,6 @@ const ReportTable = props => {
     }
     return topFactor;
   };
-  const [activeSortState, setActiveSortState] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    if (activeSortState) {
-      Object.entries(activeSortState).forEach(_ref => {
-        let [key, value] = _ref;
-        if (value === "asc" || value === "desc") {
-          onSortChangeCallback(key, value);
-        } else {
-          onSortReset();
-        }
-      });
-    }
-  }, [activeSortState]);
-  const handleButtonClick = columnKey => {
-    setActiveSortState(prevState => {
-      const currentSortState = prevState[columnKey] || "none";
-      const nextSortState = currentSortState === "none" ? "asc" : currentSortState === "asc" ? "desc" : "none";
-      const newState = {
-        [columnKey]: nextSortState
-      };
-      return newState;
-    });
-  };
   return /*#__PURE__*/_react.default.createElement(_ReportTable.ReportTableWrapper, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
     width: width,
     height: height,
@@ -250,22 +231,36 @@ const ReportTable = props => {
     columnsNumber: columnsNumber
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
-    key: index
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, headline.label), headline.sortable && /*#__PURE__*/_react.default.createElement("button", {
-    style: {
-      border: "none",
-      background: "none",
-      boxShadow: "none",
-      padding: "0"
-    },
-    onClick: () => handleButtonClick(headline.key)
-  }, /*#__PURE__*/_react.default.createElement(_SortIcon.SortIcon, {
-    width: "16px",
-    height: "16px",
-    fillUpperArrow: activeSortState[headline.key] === "asc" ? "#229E38" : "#D0D0D0",
-    fillLowerArrow: activeSortState[headline.key] === "desc" ? "#229E38" : "#D0D0D0"
-  }))))))), /*#__PURE__*/_react.default.createElement("tbody", null, getPaginatedRows().map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+    className: "headerRow"
+  }, FormattedTableData.columnsHeadings.map((headline, index) => {
+    if (headline.label === "checkbox") {
+      return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+        key: index
+      }, displayCheckBox(headline, true));
+    }
+    if (headline.label === "button") {
+      return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+        key: index
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+      key: headline.key
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, headline.label), headline.sortable && /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        border: "none",
+        background: "none",
+        boxShadow: "none",
+        padding: "0"
+      },
+      onClick: () => {
+        sortKey(headline.key);
+        handleButtonClick(index);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_SortIcon.SortIcon, {
+      fill: activeSortColumn === index ? "#229E38" : "#D0D0D0"
+    }))));
+  }))), /*#__PURE__*/_react.default.createElement("tbody", null, getPaginatedRows().map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
     className: "row",
     key: index,
     enableHover: enableHover,
@@ -398,6 +393,7 @@ ReportTable.defaultProps = {
     }]
   },
   maxColumnsNumber: 4,
+  sortable: false,
   useColorLinearGradient: true,
   enableHover: false,
   enablePagination: true,
@@ -414,7 +410,5 @@ ReportTable.defaultProps = {
   currentPage: 1,
   totalPages: 25,
   totalTableResults: 250,
-  isLoading: false,
-  onSortChangeCallback: () => {},
-  onSortReset: () => {}
+  isLoading: false
 };

package/dist/stories/components/icons/SortIcon.js

@@ -10,26 +10,19 @@ const SortIcon = _ref => {
   let {
     width = "9",
     height = "13",
-    fillUpperArrow = "#D0D0D0",
-    fillLowerArrow = "#D0D0D0"
+    fill = "#D0D0D0"
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height,
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 9 13",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    id: "Sort"
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    id: "icon"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M7.30683 2.2666C7.61308 1.91113 8.14902 1.91113 8.45527 2.2666L11.7219 5.7666C11.9516 6.0127 12.0282 6.39551 11.9006 6.72363C11.773 7.05176 11.4922 7.27051 11.1605 7.27051H4.62715C4.29537 7.27051 3.98912 7.05176 3.86152 6.72363C3.73392 6.39551 3.81048 6.0127 4.04017 5.7666L7.30683 2.2666ZM7.30683 13.9971L4.04017 10.4971C3.81048 10.251 3.73392 9.86816 3.86152 9.54004C3.98912 9.21191 4.29537 8.99316 4.62715 8.99316H11.1605C11.4667 8.99316 11.773 9.21191 11.9006 9.54004C12.0282 9.86816 11.9516 10.251 11.7219 10.4971L8.45527 13.9971C8.14902 14.3525 7.61308 14.3525 7.30683 13.9971Z",
-    fill: fillLowerArrow
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M8.45527 2.2666L11.7219 5.7666C11.9516 6.0127 12.0282 6.39551 11.9006 6.72363C11.773 7.05176 11.4667 7.27051 11.1605 7.27051H4.62715C4.29537 7.27051 3.98912 7.05176 3.86152 6.72363C3.73392 6.39551 3.81048 6.0127 4.04017 5.7666L7.30683 2.2666C7.61308 1.91113 8.14902 1.91113 8.45527 2.2666Z",
-    fill: fillUpperArrow
-  }))));
+    id: "icon",
+    d: "M4.29633 0.266602C4.60258 -0.0888672 5.13852 -0.0888672 5.44477 0.266602L8.71144 3.7666C8.94113 4.0127 9.01769 4.39551 8.89008 4.72363C8.76248 5.05176 8.48175 5.27051 8.14998 5.27051H1.61665C1.28488 5.27051 0.978626 5.05176 0.851022 4.72363C0.723418 4.39551 0.79998 4.0127 1.02967 3.7666L4.29633 0.266602ZM4.29633 11.9971L1.02967 8.49707C0.79998 8.25098 0.723418 7.86816 0.851022 7.54004C0.978626 7.21191 1.28488 6.99316 1.61665 6.99316H8.14998C8.45623 6.99316 8.76248 7.21191 8.89008 7.54004C9.01769 7.86816 8.94113 8.25098 8.71144 8.49707L5.44477 11.9971C5.13852 12.3525 4.60258 12.3525 4.29633 11.9971Z",
+    fill: fill
+  }));
 };
 exports.SortIcon = SortIcon;
 var _default = exports.default = SortIcon;