sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/NoDataFoundMessage.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoDataFoundMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _NoDataFoundIcon = require("./icons/NoDataFoundIcon");
+var _NoDataFoundMessage = require("./NoDataFoundMessage.style");
+/* NoDataFoundMessage */
+const NoDataFoundMessage = props => {
+  const {
+    noDataText
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundContainer, {
+    id: "NoDataFoundContainer"
+  }, /*#__PURE__*/_react.default.createElement(_NoDataFoundIcon.NoDataFoundIcon, {
+    id: "NoDataFoundIcon"
+  }), /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundTitle, {
+    id: "NoDataFoundTitle"
+  }, "No Data"), /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundText, {
+    id: "NoDataFoundText"
+  }, noDataText));
+};
+exports.NoDataFoundMessage = NoDataFoundMessage;
+NoDataFoundMessage.defaultProps = {
+  noDataText: ''
+};
+var _default = exports.default = NoDataFoundMessage;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoDataFoundTitle = exports.NoDataFoundText = exports.NoDataFoundContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+const NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
+const NoDataFoundTitle = exports.NoDataFoundTitle = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 18px;\n  margin: 0;\n  margin-top: 20px;\n  padding-right: 14px;\n  @media (max-width: 1366px) {\n    font-size: 14px;\n  }\n"])));
+const NoDataFoundText = exports.NoDataFoundText = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n  margin: 0;\n  margin-top: 0.4rem;\n  text-align: center;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));

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

@@ -0,0 +1,121 @@
+"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.OneColumnContainer = void 0;
+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");
+const OneColumnContainer = props => {
+  const {
+    children,
+    display,
+    isLoading,
+    gridTemplateColumns,
+    itemClass,
+    divStyle,
+    overStyle,
+    draggingStyle,
+    droppedStyle,
+    width,
+    height,
+    overflow,
+    infoTitle,
+    infoText,
+    disableInfo,
+    showViewByBannerButton,
+    onBannerClick,
+    columnTitle
+  } = props;
+  const [hover, setHover] = (0, _react.useState)(false);
+  const [offsetWidth, setOffsetWidth] = (0, _react.useState)(200);
+  const nodeRef = (0, _react.useRef)(null);
+  const anotherRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    var _anotherRef$current;
+    setOffsetWidth(anotherRef === null || anotherRef === void 0 ? void 0 : (_anotherRef$current = anotherRef.current) === null || _anotherRef$current === void 0 ? void 0 : _anotherRef$current.offsetWidth);
+  }, [anotherRef]);
+  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
+    className: (0, _classnames.default)('OneColumnContainer', itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
+    width: width,
+    height: height,
+    overflow: overflow
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.OneColumnContainerMainDiv, {
+    className: "OneColumnContainerMainDiv",
+    width: width,
+    height: height,
+    display: display,
+    gridTemplateColumns: gridTemplateColumns,
+    ref: nodeRef
+  }, !isLoading && columnTitle && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.ColumnTitle, {
+    className: "ColumnTitle"
+  }, columnTitle), !isLoading && showViewByBannerButton && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.BannerContainer, {
+    className: "BannerContainer",
+    right: disableInfo ? '20px' : '45px'
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.OutBanner, {
+    className: "OutBanner",
+    onClick: () => onBannerClick({
+      eventName: 'onBannerClick'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+    className: "IconContainer",
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false)
+  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null)), hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+    className: "InfoTextContainer"
+  }, infoTitle && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
+    className: "InfoTitleLabel",
+    dangerouslySetInnerHTML: {
+      __html: infoTitle
+    }
+  }), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, {
+    className: "InfoTextLabel",
+    dangerouslySetInnerHTML: {
+      __html: infoText
+    }
+  }))), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
+    className: "loadingDiv"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "#EAEAEA"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
+    height: 45,
+    containerClassName: "avatar-skeleton"
+  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    count: 4,
+    width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
+    height: 10,
+    containerClassName: "avatar-skeleton"
+  })))));
+};
+exports.OneColumnContainer = OneColumnContainer;
+OneColumnContainer.defaultProps = {
+  children: '',
+  display: 'block',
+  isLoading: '',
+  gridTemplateColumns: '',
+  itemClass: '',
+  divStyle: '',
+  overStyle: '',
+  draggingStyle: '',
+  droppedStyle: '',
+  width: '300px',
+  height: '300px',
+  overflow: 'hidden',
+  infoTitle: '',
+  infoText: '',
+  disableInfo: false,
+  showViewByBannerButton: false,
+  onBannerClick: () => {},
+  columnTitle: ''
+};
+var _default = exports.default = OneColumnContainer;

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithBarComponent = exports.Skeleton = exports.ShowViewByBannerAndInfo = exports.ShowViewByBanner = exports.ShowOnlyInfo = exports.ShowColumnTitleAndInfo = exports.DisableInfo = void 0;
+var _OneColumnContainer = require("./OneColumnContainer");
+var _TotalHorizontalCharts = require("../TotalHorizontalCharts/TotalHorizontalCharts");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'Sag BI/OneColumnContainer',
+  component: _OneColumnContainer.OneColumnContainer,
+  tags: ['autodocs']
+}; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+const Skeleton = exports.Skeleton = {
+  args: {
+    isLoading: true,
+    infoTitle: '<i>Total Cost</i>',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
+    width: '300px',
+    height: '300px',
+    disableInfo: true,
+    showViewByBannerButton: false,
+    overflow: 'hidden'
+  }
+};
+const DisableInfo = exports.DisableInfo = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
+    width: '300px',
+    height: '300px',
+    disableInfo: true,
+    showViewByBannerButton: false,
+    overflow: 'hidden'
+  }
+};
+const ShowViewByBanner = exports.ShowViewByBanner = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
+    width: '300px',
+    height: '300px',
+    disableInfo: true,
+    showViewByBannerButton: true,
+    overflow: 'hidden'
+  }
+};
+const ShowViewByBannerAndInfo = exports.ShowViewByBannerAndInfo = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
+    width: '300px',
+    height: '300px',
+    disableInfo: false,
+    showViewByBannerButton: true,
+    overflow: 'hidden'
+  }
+};
+const ShowOnlyInfo = exports.ShowOnlyInfo = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.</p1></i> ',
+    width: '300px',
+    height: '300px',
+    disableInfo: false,
+    showViewByBannerButton: false,
+    overflow: 'hidden'
+  }
+};
+const ShowColumnTitleAndInfo = exports.ShowColumnTitleAndInfo = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.  </p1></i> ',
+    width: '500px',
+    height: '300px',
+    disableInfo: false,
+    showViewByBannerButton: false,
+    overflow: 'hidden',
+    columnTitle: 'Avg. Products Category Penetration'
+  }
+};
+const WithBarComponent = exports.WithBarComponent = {
+  args: {
+    isLoading: false,
+    infoTitle: 'Total Cost',
+    infoText: '<i><strong>Total Cost </strong><p1>is calculated by adding Redemption Cost and Package Costs/Participation Fees only.</p1> <br> <br> <strong>Please note!</strong> <p1>When selecting either “Ecomm” or “In-store” from the “Store Type” filter, the “Total Cost” will not change. The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.The Total Cost listed and shown in the pie chart, will be for the whole event, regardless of filtering to Ecomm or In-store.  </p1></i> ',
+    width: '500px',
+    height: '300px',
+    disableInfo: false,
+    showViewByBannerButton: false,
+    overflow: 'hidden',
+    children: /*#__PURE__*/React.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
+      chartsData: [{
+        name: 'MTN DEW GE-SODA',
+        value: 166898.22,
+        color: 'rgba(31, 118, 119, 0.6)'
+      }, {
+        name: 'CHEETOS GE-CHIPS, SNACKS',
+        value: 33380.98,
+        color: 'rgba(31, 118, 119, 0.9)'
+      }, {
+        name: 'CHEETOS SNACKING',
+        value: 12940.18,
+        color: 'rgba(31, 118, 119, 0.8)'
+      }, {
+        name: 'LAMB WESTON FF-POTATOES ONIONS',
+        value: -666828.24,
+        color: 'rgba(31, 118, 119, 0.7)'
+      }]
+    }),
+    columnTitle: 'Avg. Products Category Penetration'
+  }
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.ColumnTitle = 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, _templateObject8, _templateObject9, _templateObject10;
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  overflow: ", ";\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background-color: white;\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
+const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
+const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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"])));
+const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
+const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (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(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
+const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";\n  user-select: none;\n"])), props => props.right);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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  > 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);

package/dist/stories/components/OneColumnContainer.js

@@ -6,63 +6,116 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.OneColumnContainer = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _OneColumnContainer = require("./OneColumnContainer.style");
-var _InfoIcon = require("./InfoIcon");
-var _core = require("@dnd-kit/core");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["children", "display", "gridTemplateColumns", "nodeRef", "itemClass", "divStyle", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
-/**
- * Primary UI component for user interaction
- */
-var OneColumnContainer = function OneColumnContainer(_ref) {
-  var children = _ref.children,
-    display = _ref.display,
-    gridTemplateColumns = _ref.gridTemplateColumns,
-    nodeRef = _ref.nodeRef,
-    itemClass = _ref.itemClass,
-    divStyle = _ref.divStyle,
-    overStyle = _ref.overStyle,
-    draggingStyle = _ref.draggingStyle,
-    droppedStyle = _ref.droppedStyle,
-    refId = _ref.refId,
-    width = _ref.width,
-    height = _ref.height,
-    infoText = _ref.infoText,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
-  var onInfoClick = function onInfoClick() {
-    setClicked(!clicked);
-  };
+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");
+const OneColumnContainer = props => {
+  const {
+    children,
+    display,
+    isLoading,
+    gridTemplateColumns,
+    itemClass,
+    divStyle,
+    overStyle,
+    draggingStyle,
+    droppedStyle,
+    width,
+    height,
+    overflow,
+    infoTitle,
+    infoText,
+    disableInfo,
+    showViewByBannerButton,
+    onBannerClick,
+    columnTitle
+  } = props;
+  const [hover, setHover] = (0, _react.useState)(false);
+  const [offsetWidth, setOffsetWidth] = (0, _react.useState)(200);
+  const nodeRef = (0, _react.useRef)(null);
+  const anotherRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    var _anotherRef$current;
+    setOffsetWidth(anotherRef === null || anotherRef === void 0 ? void 0 : (_anotherRef$current = anotherRef.current) === null || _anotherRef$current === void 0 ? void 0 : _anotherRef$current.offsetWidth);
+  }, [anotherRef]);
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
-    className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
+    className: (0, _classnames.default)('OneColumnContainer', itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: props.className,
-    style: {
-      width: width,
-      height: height,
-      display: display,
-      gridTemplateColumns: gridTemplateColumns
-    },
-    ref: nodeRef
-  }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
-    clicked: clicked,
+    height: height,
+    overflow: overflow
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.OneColumnContainerMainDiv, {
+    className: "OneColumnContainerMainDiv",
     width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, null, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
-    onClick: onInfoClick
-  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-    clicked: clicked
-  }))));
+    height: height,
+    display: display,
+    gridTemplateColumns: gridTemplateColumns,
+    ref: nodeRef
+  }, !isLoading && columnTitle && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.ColumnTitle, {
+    className: "ColumnTitle"
+  }, columnTitle), !isLoading && showViewByBannerButton && !hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.BannerContainer, {
+    className: "BannerContainer",
+    right: disableInfo ? '20px' : '45px'
+  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.OutBanner, {
+    className: "OutBanner",
+    onClick: () => onBannerClick({
+      eventName: 'onBannerClick'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.ExportIcon, null), "By Banner")), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
+    className: "IconContainer",
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false)
+  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null)), hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+    className: "InfoTextContainer"
+  }, infoTitle && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
+    className: "InfoTitleLabel",
+    dangerouslySetInnerHTML: {
+      __html: infoTitle
+    }
+  }), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, {
+    className: "InfoTextLabel",
+    dangerouslySetInnerHTML: {
+      __html: infoText
+    }
+  }))), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
+    className: "loadingDiv"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "#EAEAEA"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
+    height: 45,
+    containerClassName: "avatar-skeleton"
+  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    count: 4,
+    width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
+    height: 10,
+    containerClassName: "avatar-skeleton"
+  })))));
 };
 exports.OneColumnContainer = OneColumnContainer;
-OneColumnContainer.defaultProps = {};
-var _default = OneColumnContainer;
-exports.default = _default;
+OneColumnContainer.defaultProps = {
+  children: '',
+  display: 'block',
+  isLoading: '',
+  gridTemplateColumns: '',
+  itemClass: '',
+  divStyle: '',
+  overStyle: '',
+  draggingStyle: '',
+  droppedStyle: '',
+  width: '300px',
+  height: '300px',
+  overflow: 'hidden',
+  infoTitle: '',
+  infoText: '',
+  disableInfo: false,
+  showViewByBannerButton: false,
+  onBannerClick: () => {},
+  columnTitle: ''
+};
+var _default = exports.default = OneColumnContainer;

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

@@ -4,25 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.ColumnTitle = exports.BannerContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var 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: hidden;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-});
-exports.StyledContainer = StyledContainer;
-var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  align-items: center;\n  display: flex;\n  visibility: ", ";\n  text-align: center;\n  justify-content: center;\n  background: rgba(16, 16, 16, .6);\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, function (props) {
-  return props.clicked ? 'visible' : 'hidden';
-});
-exports.InfoTextContainer = InfoTextContainer;
-var InfoTextLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  text-align: center;\n  color: white;\n  margin: 10px;\n  justify-content: center;\n"])));
-exports.InfoTextLabel = InfoTextLabel;
-var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top:10px;\n  margin-right:10px;\n  top: 0;\n  right: 0;\n"])));
-exports.IconContainer = IconContainer;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  height: ", ";\n  overflow: ", ";\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  background-color: white;\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
+const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
+const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  overflow: auto;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
+const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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"])));
+const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  display: inline-block;\n  font-size: 20px;\n  font-weight: 500;\n  padding: 20px 20px 0;\n"])));
+const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (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(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n"])));
+const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  z-index: 99;\n  top: 18px;\n  right: ", ";\n  user-select: none;\n"])), props => props.right);
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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  > 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);

package/dist/stories/components/PageFilterBar/PageFilterBar.js

@@ -0,0 +1,23 @@
+"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 _SagInput = _interopRequireDefault(require("../SagInput/SagInput"));
+var _PageFilterBar = require("./PageFilterBar.style");
+const PageFilterBar = props => {
+  const {
+    pageHeadline
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_PageFilterBar.BarContainer, null, /*#__PURE__*/_react.default.createElement(_PageFilterBar.Headline, null, pageHeadline), /*#__PURE__*/_react.default.createElement(_SagInput.default, {
+    inputType: "search"
+  }));
+};
+var _default = exports.default = PageFilterBar;
+PageFilterBar.defaultProps = {
+  pageHeadline: ''
+};

package/dist/stories/components/PageFilterBar/PageFilterBar.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OffersPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PageFilterBar = _interopRequireDefault(require("./PageFilterBar"));
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/PageFilterBar',
+  component: _PageFilterBar.default,
+  argTypes: {
+    pageHeadline: {
+      name: 'Headline Text',
+      control: {
+        type: 'text'
+      },
+      description: 'Headline text',
+      defaultValue: ''
+    }
+  }
+};
+const OffersPage = exports.OffersPage = {
+  args: {
+    pageHeadline: 'Offers'
+  }
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Headline = exports.BarContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const BarContainer = exports.BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  position: relative;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: white;\n"])));
+const Headline = exports.Headline = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 500;\n  margin: 0;\n"])));