sag_components 1.0.921 → 1.0.923

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,16 +5,103 @@ 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);
+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;
+    }
+  }
+`;

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"])));