sag_components 1.0.581 → 1.0.583

package/dist/stories/components/BannersDropdown.js

@@ -21,38 +21,38 @@ const BannersDropdown = props => {
   const [processedBanners, setProcessedBanners] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     const formatedBanners = banners === null || banners === void 0 ? void 0 : banners.map(banner => {
-      if (banner.name === "StopAndShop") {
+      if (banner.name === 'StopAndShop') {
         return {
           icon: /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null),
-          name: "Stop&Shop",
+          name: 'Stop&Shop',
           checked: banner.checked
         };
       }
-      if (banner.name === "FoodLion") {
+      if (banner.name === 'FoodLion') {
         return {
           icon: /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null),
-          name: "Food lion",
+          name: 'Food lion',
           checked: banner.checked
         };
       }
-      if (banner.name === "GiantFood") {
+      if (banner.name === 'GiantFood') {
         return {
           icon: /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null),
-          name: "Giant Food",
+          name: 'Giant Food',
           checked: banner.checked
         };
       }
-      if (banner.name === "TheGiantCompany") {
+      if (banner.name === 'TheGiantCompany') {
         return {
           icon: /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null),
-          name: "The Giant Company",
+          name: 'The Giant Company',
           checked: banner.checked
         };
       }
-      if (banner.name === "Hannaford") {
+      if (banner.name === 'Hannaford') {
         return {
           icon: /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null),
-          name: "Hannaford",
+          name: 'Hannaford',
           checked: banner.checked
         };
       }
@@ -61,8 +61,8 @@ const BannersDropdown = props => {
     setProcessedBanners(formatedBanners);
   }, []);
   const [toggled, setToggled] = (0, _react.useState)(false);
-  const [bannerButtonText, setBannerButtonText] = (0, _react.useState)("All Banners");
-  const [bannerButtonArrow, setBannerButtonArrow] = (0, _react.useState)("#2D8DE7");
+  const [bannerButtonText, setBannerButtonText] = (0, _react.useState)('All Banners');
+  const [bannerButtonArrow, setBannerButtonArrow] = (0, _react.useState)('#2D8DE7');
   const choosenBanners = index => {
     const updatedBanners = [...processedBanners];
     updatedBanners[index].checked = !updatedBanners[index].checked;
@@ -72,23 +72,27 @@ const BannersDropdown = props => {
   (0, _react.useEffect)(() => {
     const selectedBanners = processedBanners.filter(banner => !banner.checked);
     if (selectedBanners.length < 1) {
-      setBannerButtonText("All Banners");
-      setBannerButtonArrow("#2D8DE7");
+      setBannerButtonText('All Banners');
+      setBannerButtonArrow('#2D8DE7');
     } else {
-      setBannerButtonText("Partial");
-      setBannerButtonArrow("#757575");
+      setBannerButtonText('Partial');
+      setBannerButtonArrow('#757575');
     }
   }, [processedBanners]);
   return /*#__PURE__*/_react.default.createElement(_BannersDropdown.MainContainer, null, /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggleBannersWrapper, null, /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggleBanners, {
-    className: bannerButtonText === "Partial" ? "partial" : "",
+    className: bannerButtonText === 'Partial' ? 'partial' : '',
     onClick: () => setToggled(!toggled)
   }, /*#__PURE__*/_react.default.createElement("span", null, bannerButtonText), /*#__PURE__*/_react.default.createElement(_BannersDropdown.ArrowWrap, {
-    className: toggled ? "opened" : "closed"
+    className: toggled ? 'opened' : 'closed'
   }, /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, {
     color: bannerButtonArrow
-  }))), toggled && /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdown, null, /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdownTitle, null, "Participating Banners"), /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdownList, null, processedBanners.map((banner, index) => /*#__PURE__*/_react.default.createElement("li", {
+  }))), toggled && /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdown, null, /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdownTitle, null, "Participating Banners"), /*#__PURE__*/_react.default.createElement(_BannersDropdown.ToggledDropdownList, null, processedBanners.map((banner, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+  _react.default.createElement("li", {
+    // eslint-disable-next-line react/no-array-index-key
     key: index,
-    className: !banner.checked ? "unchecked" : "",
+    className: !banner.checked ? 'unchecked' : '',
     onClick: () => choosenBanners(index)
   }, /*#__PURE__*/_react.default.createElement(_BannersDropdown.IconWrap, null, banner.icon), "|", /*#__PURE__*/_react.default.createElement("span", null, banner.name)))))));
 };
@@ -96,19 +100,20 @@ exports.BannersDropdown = BannersDropdown;
 var _default = exports.default = BannersDropdown;
 BannersDropdown.defaultProps = {
   banners: [{
-    name: "StopAndShop",
+    name: 'StopAndShop',
     checked: true
   }, {
-    name: "FoodLion",
+    name: 'FoodLion',
     checked: false
   }, {
-    name: "GiantFood",
+    name: 'GiantFood',
     checked: true
   }, {
-    name: "TheGiantCompany",
+    name: 'TheGiantCompany',
     checked: true
   }, {
-    name: "Hannaford",
+    name: 'Hannaford',
     checked: false
-  }]
+  }],
+  onClick: () => {}
 };

package/dist/stories/components/FilterButton.js

@@ -1,33 +1,29 @@
 "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.FilterButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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,
+    color: color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: activeState ? activeColor : color
+    color: color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ 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

@@ -8,5 +8,5 @@ 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 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 #B1B1B1;\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);
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/FilterPanel.js

@@ -23,29 +23,12 @@ const FilterPanel = props => {
     height
   } = props;
   const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
-
-  // const useFormMethods = useForm({ mode: "onChange" });
-
-  const divRef = (0, _react.useRef)(null);
-  const [divHeight, setDivHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (divRef.current) {
-      const {
-        top,
-        bottom
-      } = divRef.current.getBoundingClientRect();
-      const customHeight = bottom - top;
-      setDivHeight(customHeight);
-    }
-  }, [height]);
-  const onClickResetHandler = event => {
+  const onClickResetHandler = () => {
     const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
       ...itemField,
       selectedValue: null,
       selectedLabel: null
-      // value: null,
     }));
-
     setFieldsDataState(newFieldsDataState);
     onResetClick({
       eventName: 'onResetClick',
@@ -59,91 +42,102 @@ const FilterPanel = props => {
     }
     return null;
   };
-  const displayFields = function (data, height) {
-    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
-    if (data && data.length > 0) {
-      return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
-        id: "FieldsContainer",
-        height: height,
-        paddingBottom: paddingBottom
-      }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
-        id: "FieldContainer"
-      }, item.inputType === 'dropdown' ? /*#__PURE__*/_react.default.createElement(_Select.Select, {
-        id: "Select",
-        name: item.name,
-        value: item.selectedValue || undefined,
-        errorMessage: "",
-        label: item.label,
-        required: item.required,
-        placeHolder: item.placeHolder,
-        margin: "10px 0 0 0 ",
-        borderRadius: "12px",
-        borderColor: borderColor,
-        onChange: props => {
-          const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
-            ...itemField,
-            selectedValue: props.target.value,
-            selectedLabel: findOptionLabel(item.dropdownOptions, props.target.value)
-          } : itemField);
-          setFieldsDataState(newFieldsDataState);
-          onChange({
-            fieldsData: newFieldsDataState,
-            changedItem: {
-              name: item.name,
-              inputType: item.inputType,
-              value: props.target.value,
-              label: findOptionLabel(item.dropdownOptions, props.target.value)
-            }
-          });
-        },
-        options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
-        height: "52px",
-        width: "100%"
-      }) : item.inputType === 'datepicker' ? /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
-        id: "DatePickerContainer"
-      }, /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, {
-        id: "Datepicker",
-        name: item.name,
-        value: item.selectedValue || undefined,
-        required: item.required,
-        placeholder: item.placeHolder,
-        borderColor: borderColor,
-        format: "MM/DD/YYYY",
-        labelColor: borderColor,
-        onChange: props => {
-          const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
-            ...itemField,
-            selectedValue: props.newValue
-          } : itemField);
-          setFieldsDataState(newFieldsDataState);
-          onChange({
-            fieldsData: newFieldsDataState,
-            changedItem: {
-              name: item.name,
-              inputType: item.inputType,
-              value: props.newValue
-            }
-          });
-        },
-        shape: "round",
-        text: item.label,
-        height: "52px",
-        width: "100%"
-      })) : '')));
+  const displayField = item => {
+    let content;
+    switch (item.inputType) {
+      case 'dropdown':
+        content = /*#__PURE__*/_react.default.createElement(_Select.Select, {
+          id: "Select",
+          name: item.name,
+          value: item.selectedValue || undefined,
+          errorMessage: "",
+          label: item.label,
+          required: item.required,
+          placeHolder: item.placeHolder,
+          margin: "10px 0 0 0 ",
+          borderRadius: "12px",
+          borderColor: borderColor,
+          onChange: onChangeEvent => {
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => {
+              var _onChangeEvent$target, _onChangeEvent$target2;
+              return itemField.name === item.name ? {
+                ...itemField,
+                selectedValue: onChangeEvent === null || onChangeEvent === void 0 ? void 0 : (_onChangeEvent$target = onChangeEvent.target) === null || _onChangeEvent$target === void 0 ? void 0 : _onChangeEvent$target.value,
+                selectedLabel: findOptionLabel(item.dropdownOptions, onChangeEvent === null || onChangeEvent === void 0 ? void 0 : (_onChangeEvent$target2 = onChangeEvent.target) === null || _onChangeEvent$target2 === void 0 ? void 0 : _onChangeEvent$target2.value)
+              } : itemField;
+            });
+            setFieldsDataState(newFieldsDataState);
+            onChange({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                value: onChangeEvent.target.value,
+                label: findOptionLabel(item.dropdownOptions, onChangeEvent.target.value)
+              }
+            });
+          },
+          options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
+          height: "52px",
+          width: "100%"
+        });
+        break;
+      case 'datepicker':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+          id: "DatePickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, {
+          id: "Datepicker",
+          name: item.name,
+          value: item.selectedValue || undefined,
+          required: item.required,
+          placeholder: item.placeHolder,
+          borderColor: borderColor,
+          format: "MM/DD/YYYY",
+          labelColor: borderColor,
+          onChange: onChangeDatepickerEvent => {
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              selectedValue: onChangeDatepickerEvent.newValue
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onChange({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                value: onChangeDatepickerEvent.newValue
+              }
+            });
+          },
+          shape: "round",
+          text: item.label,
+          height: "52px",
+          width: "100%"
+        }));
+        break;
+      default:
+        content = '';
     }
+    return content;
   };
-  return /*#__PURE__*/_react.default.createElement(_FilterPanel.MainContainer, {
-    id: "MainContainer",
+  const displayFields = data => {
+    if (!data || data.length === 0) {
+      return '';
+    }
+    return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
+      id: "FieldsContainer"
+    }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
+      id: "FieldContainer"
+    }, displayField(item))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
+    id: "ControlsContainer",
+    className: "modal-content",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
-    id: "ControlsContainer",
-    ref: divRef,
-    className: "modal-content"
-    // onClick={(e) => e.stopPropagation()}
   }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
     id: "AllFieldsContainer"
-  }, displayFields(FieldsDataState, '160px', '20px')), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
+  }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
     id: "ButtonsContainer"
   }, /*#__PURE__*/_react.default.createElement(_SagButton.default, {
     textColor: "#ffffff",
@@ -157,7 +151,7 @@ const FilterPanel = props => {
     fontSize: "14px",
     fontWeight: "500",
     disabled: false,
-    onClick: e => onOkClick({
+    onClick: () => onOkClick({
       eventName: 'onOkClick',
       fieldsData: FieldsDataState
     })
@@ -174,14 +168,16 @@ const FilterPanel = props => {
     fontWeight: "500",
     disabled: false,
     onClick: e => onClickResetHandler(e)
-  }))));
+  })));
 };
 var _default = exports.default = FilterPanel;
 FilterPanel.defaultProps = {
+  fieldsData: [],
   width: '800px',
   height: '600px',
   okButtonBackgroundColor: '#229E38',
   borderColor: '#066768',
   onOkClick: () => {},
-  onResetClick: () => {}
+  onResetClick: () => {},
+  onChange: () => {}
 };

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

@@ -4,16 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PanelContainer = exports.MainContainer = exports.InputCommit = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
+exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = 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;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  width: ", ";\n"])), props => props.height, props => props.width);
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  background-color: #fefefe;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  flex-direction: row-reverse; \n  padding: 20px 20px 0 0;\n  gap: 20px;\n"])));
-const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;  \n  border:  ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  height: 40px;\n  width: 100px;\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n   \n   &:hover {\n    background-Color: #f1f1f1;\n  } \n"])), props => "1px solid ".concat(props.borderColor));
-const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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: 0 10px ;\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 AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n \n"])));
-const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n  width: 100%;\n  margin: 0;\n \n"])));
-const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  background-color: #fefefe;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  flex-direction: row-reverse; \n  padding: 20px 10px 0 0;\n  gap: 20px;\n"])));
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n"])));
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0;\n \n"])));
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));

package/dist/stories/components/OneColumnContainer.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
 var _InfoIcon = require("./icons/InfoIcon");
+var _ExportIcon = require("./icons/ExportIcon");
 var _OneColumnContainer = require("./OneColumnContainer.style");
 require("react-loading-skeleton/dist/skeleton.css");
 /**
@@ -31,7 +32,9 @@ const OneColumnContainer = props => {
     overflow,
     infoTitle,
     infoText,
-    disableInfo
+    disableInfo,
+    showViewByBannerButton,
+    onBannerClick
   } = props;
   const [hover, setHover] = (0, _react.useState)(false);
   const [offsetWidth, setOffsetWidth] = (0, _react.useState)(200);
@@ -46,19 +49,22 @@ const OneColumnContainer = props => {
     width: width,
     height: height,
     overflow: overflow
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.MainDiv, {
     id: "mainDiv",
-    className: props.className,
-    style: {
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-      width,
-      height,
-      display,
-      gridTemplateColumns
-    },
+    width: width,
+    height: height,
+    display: display,
+    gridTemplateColumns: gridTemplateColumns,
     ref: nodeRef
-  }, !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+  }, !isLoading && showViewByBannerButton && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.BannerContainer, {
+    id: "BannerContainer",
+    right: disableInfo ? '15px' : '50px'
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.OutBanner, {
+    id: "OutBanner",
+    onClick: () => onBannerClick({
+      eventName: 'onBannerClick'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "View By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
     id: "IconContainer",
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false)
@@ -109,6 +115,8 @@ OneColumnContainer.defaultProps = {
   overflow: 'hidden',
   infoTitle: '',
   infoText: '',
-  disableInfo: false
+  disableInfo: false,
+  showViewByBannerButton: false,
+  onBannerClick: () => {}
 };
 var _default = exports.default = OneColumnContainer;

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

@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mainDiv = exports.StyledContainer = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+exports.StyledContainer = exports.OutBanner = exports.MainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.BannerContainer = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  display: flex;\n  position: relative;\n  border-radius: 10px;\n  align-items: center;\n  justify-content: center;\n  overflow: ", ";\n  background-color: white;\n"])), props => props.width, props => props.height, props => props.overflow);
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 0px 30px 0px 30px;\n"])), props => props.width, props => props.height);
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 15px 20px 0px 20px;\n"])), props => props.width, props => props.height);
 const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 18px;\n  line-height: 32px;\n  overflow: hidden;\n"])));
 const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n  overflow: hidden;\n"])));
 const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n  height: 20px;\n  top: 10px;\n  right: 10px;\n  position: absolute;\n"])));
 const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 76%;\n  height: 65%;\n"])));
-const mainDiv = exports.mainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: \"flex-start\";\n  justify-content: \"center\";\n  background-color: white;\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  grid-template-columns: ", ";\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const MainDiv = exports.MainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: flex-start;\n  justify-content: center; \n  background-color: white;\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  grid-template-columns: ", ";\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 140px;\n  height: 20px;\n  top: 10px;\n  right: ", ";  \n  font-family: \"Poppins\", sans-serif;\n  user-select: none;\n"])), props => props.right);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["  \n  display: flex;\n  justify-content: flex-end;\n  align-items: center; \n  gap: 8px; \n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 13px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 13px;\n      height: 13px;\n    }\n    @media (max-width: 1366px) {\n      width: 12px;\n      height: 12px;\n    }\n  }\n"])), props => props.textColor);