sag_components 1.0.976 → 1.0.978

package/dist/Button.test.js

@@ -10,7 +10,7 @@ require("@testing-library/jest-dom");
 /* eslint-disable no-undef */
 
 test('Button Check text', () => {
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "test",
     type: "primary",
     size: "small",
@@ -24,7 +24,7 @@ test('Button Check text', () => {
 test('Button Check type functionality: when "primary" type selected then background color must be specified as "rgb(146, 207, 23)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -40,7 +40,7 @@ test('Button Check type functionality: when "primary" type selected then backgro
 test('Button Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "secondary",
     size: "small",
@@ -56,7 +56,7 @@ test('Button Check type functionality: when "secondary" type selected then backg
 test('Button Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -72,7 +72,7 @@ test('Button Check disabled functionality: when disabled prop is true, button te
 test('Button Check leftIcon functionality: when "Filter"  icons is specified as the leftIcon  props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -86,7 +86,7 @@ test('Button Check leftIcon functionality: when "Filter"  icons is specified as
 test('Button Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -100,7 +100,7 @@ test('Button Check rightIcon functionality: when "Exit" icons is specified as th
 test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -116,7 +116,7 @@ test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit
 test('Button Check small/medium functionality: when "small" the height must be "33px" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -132,7 +132,7 @@ test('Button Check small/medium functionality: when "small" the height must be "
 test('Button Check small/medium functionality: when "medium" the height must be "45px" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "medium",
@@ -146,7 +146,7 @@ test('Button Check small/medium functionality: when "medium" the height must be
 test('Button Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",

package/dist/LinkButton.test.js

@@ -10,7 +10,7 @@ require("@testing-library/jest-dom");
 /* eslint-disable no-undef */
 
 test('LinkButton Check text', () => {
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "test",
     type: "secondary",
     size: "small",
@@ -22,7 +22,7 @@ test('LinkButton Check text', () => {
 test('LinkButton Check type functionality: when "primary" type selected then text color must be specified as "rgb(146, 207, 23)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -36,7 +36,7 @@ test('LinkButton Check type functionality: when "primary" type selected then tex
 test('LinkButton Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "secondary",
     size: "small",
@@ -50,7 +50,7 @@ test('LinkButton Check type functionality: when "secondary" type selected then b
 test('LinkButton Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -64,7 +64,7 @@ test('LinkButton Check disabled functionality: when disabled prop is true, butto
 test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -80,7 +80,7 @@ test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "
 test('LinkButton Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -93,7 +93,7 @@ test('LinkButton Check rightIcon functionality: when "Exit" icons is specified a
 test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified as the leftIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -106,7 +106,7 @@ test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified
 test('LinkButton Check small/medium functionality: when "small" the font-size must be "14px" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -120,7 +120,7 @@ test('LinkButton Check small/medium functionality: when "small" the font-size mu
 test('LinkButton Check small/medium functionality: when "medium" the font-size must be "16px" ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "medium",
@@ -134,7 +134,7 @@ test('LinkButton Check small/medium functionality: when "medium" the font-size m
 test('LinkButton Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
   const {
     container
-  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",

package/dist/SingleBar.test.js

@@ -45,7 +45,7 @@ const legendData1 = [{
   title: 'Incremental Sales ROI'
 }];
 test('SingleBarLineCharts Check if title data is rendered', async () => {
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
     width: "100%",
     height: "100%",
     title: "Total Cost Sales",
@@ -82,7 +82,7 @@ test('SingleBarLineCharts Check if title data is rendered', async () => {
   expect(total2Element).toBeInTheDocument();
 });
 test('SingleBarLineCharts Check if legend data is rendered', async () => {
-  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
     width: "100%",
     height: "100%",
     title: "Total Cost Sales",

package/dist/index.js

@@ -8,7 +8,7 @@ var _App = _interopRequireDefault(require("./App"));
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 const root = _client.default.createRoot(document.getElementById('root'));
-root.render(/*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
+root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

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/BarChartsByWeeks.js

@@ -20,6 +20,7 @@ const BarChartsByWeeks = props => {
   const {
     className,
     title,
+    showHeaderTopValue,
     headerValueTopTitle,
     headerValueBottomTitle,
     headerValue,
@@ -171,6 +172,7 @@ const BarChartsByWeeks = props => {
   }, showTitle && /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, null, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
     title: headerValueTopTitle,
     subtitle: headerValueBottomTitle,
+    showTopValue: showHeaderTopValue,
     value: headerValue,
     currencyType: HeaderValueCurrencyType,
     isPercent: HeaderValueIsPercent,
@@ -237,6 +239,7 @@ var _default = exports.default = BarChartsByWeeks;
 BarChartsByWeeks.defaultProps = {
   className: '',
   title: '',
+  showHeaderTopValue: true,
   headerValueTopTitle: '',
   headerValueBottomTitle: '',
   headerValue: 0,

package/dist/stories/components/CommonFunctions.js

@@ -49,8 +49,7 @@ const getFormattedValue = num => {
   }
   const formatNumber = value => {
     const numValue = Number(value);
-    const fixedValue = numValue.toFixed(1);
-    return fixedValue.endsWith('.0') ? fixedValue.slice(0, -2) : fixedValue;
+    return numValue.toFixed(1);
   };
   if (Math.abs(num) >= 1000000000) {
     return formatNumber(num / 1000000000);

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/FormattedValue.js

@@ -8,12 +8,12 @@ exports.default = exports.FormattedValue = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CommonFunctions = require("./CommonFunctions");
 var _FormattedValue = require("./FormattedValue.style");
-/* FormattedValue */
 const FormattedValue = props => {
   const {
     className,
     title,
     subtitle,
+    showTopValue,
     value,
     dotCut,
     currencySign,
@@ -37,7 +37,7 @@ const FormattedValue = props => {
   }, title ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
     className: "Title",
     width: width
-  }, title) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignAndFormattedValueContainer, {
+  }, title) : '', showTopValue && /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignAndFormattedValueContainer, {
     className: "CurrencySignAndFormattedValueContainer"
   }, /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValueText, {
     className: "FormattedValueText",
@@ -57,6 +57,7 @@ FormattedValue.defaultProps = {
   className: 'FormattedValue_ControlsContainer',
   title: '',
   subtitle: '',
+  showTopValue: true,
   value: 0,
   dotCut: false,
   currencySign: false,