sag_components 1.0.950 → 1.0.951

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoDataFound = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _NoDataFoundMessage = require("./NoDataFoundMessage");
+const arrLegendData = [{
+  name: "Package Cost",
+  value: 30000,
+  color: "#85A1D2"
+}, {
+  name: "Redemption Cost",
+  value: 6500,
+  color: "#9AE6FF"
+}];
+const arrLegendDat3rows = [{
+  name: "Package Cost",
+  value: 30000,
+  color: "#85A1D2"
+}, {
+  name: "Existing Redeemers",
+  value: 6500,
+  color: "#9AE6FF"
+}, {
+  name: "Others",
+  value: 20000,
+  color: "#FD5959"
+}
+// { name: "My test 2", value: 35000, color: "#79DB95"},
+];
+var _default = exports.default = {
+  title: "SAG BI/NoDataFoundMessage",
+  component: _NoDataFoundMessage.NoDataFoundMessage,
+  tags: ["autodocs"],
+  argTypes: {
+    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 / %)"
+    },
+    noDataText: {
+      name: "noDataText",
+      control: {
+        type: "text"
+      },
+      description: "text to display when no data found"
+    }
+  }
+};
+const NoDataFound = exports.NoDataFound = {
+  args: {
+    noDataText: "The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display."
+  }
+};

package/dist/stories/components/NoDataFoundMessage/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/NoDataFoundMessage.style.js

@@ -5,35 +5,9 @@ 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"));
-const NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-const NoDataFoundTitle = exports.NoDataFoundTitle = _styledComponents.default.h4`
-  font-weight: 600;
-  font-size: 18px;
-  margin: 0;
-  margin-top: 20px;
-  padding-right: 14px;
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const NoDataFoundText = exports.NoDataFoundText = _styledComponents.default.p`
-  font-weight: 400;
-  font-size: 16px;
-  margin: 0;
-  margin-top: 0.4rem;
-  text-align: center;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
+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.style.js

@@ -5,103 +5,16 @@ 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"));
-const StyledContainer = exports.StyledContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  overflow: ${props => props.overflow};
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background-color: white;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-`;
-const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div`
-  position: relative;
-  /* align-items: flex-start; */
-  justify-content: center;
-  background-color: white;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  display: ${props => props.display};
-  grid-template-columns: ${props => props.gridTemplateColumns};
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div`
-  background: white;
-  overflow: auto;
-  padding: 20px;
-  box-sizing: border-box;
-`;
-const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div`
-  font-weight: 600;
-  color: black;
-  margin: 0px 0px 10px 0px;
-  font-size: 18px;
-  line-height: 32px;
-`;
-const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div`
-  color: black;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-`;
-const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span`
-  color: black;
-  display: inline-block;
-  font-size: 20px;
-  font-weight: 500;
-  padding: 20px 20px 0;
-`;
-const IconContainer = exports.IconContainer = _styledComponents.default.div`
-  width: 20px;
-  height: 20px;
-  top: 10px;
-  right: 10px;
-  position: absolute;
-`;
-const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  gap: 10px;
-`;
-const BannerContainer = exports.BannerContainer = _styledComponents.default.div`
-  position: absolute;
-  z-index: 99;
-  top: 18px;
-  right: ${props => props.right};
-  user-select: none;
-`;
-const OutBanner = exports.OutBanner = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
-  @media (max-width: 1536px) {
-    font-size: 13px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 13px;
-      height: 13px;
-    }
-    @media (max-width: 1366px) {
-      width: 12px;
-      height: 12px;
-    }
-  }
-`;
+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"])));