sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/ListBox.stories.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Retailers = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ListBox = require("./components/ListBox");
+const viewCreativeRetailersData1 = [{
+  label: 'Food Lion',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Stop&Shop',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Giant Food',
+  checked: true,
+  disabled: false
+}, {
+  label: 'The Giant Company',
+  checked: true,
+  disabled: false
+}, {
+  label: 'Hannaford',
+  checked: true,
+  disabled: false
+}];
+var _default = exports.default = {
+  title: 'SAG/ListBox',
+  component: _ListBox.ListBox,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'data',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill event Attributes buttons '
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px / %)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px / % )'
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'onClick event - returns an object of check box {true/false} '
+    },
+    borderColor: {
+      name: 'borderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets borderColor Color '
+      }
+    },
+    buttonsIconColor: {
+      name: 'buttonsIconColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets icons Color '
+      }
+    },
+    buttonsBorderColor: {
+      name: 'buttonsBorderColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets buttons border Color '
+      }
+    },
+    buttonsTextColorChecked: {
+      name: 'buttonsTextColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Checked Color '
+      }
+    },
+    buttonsTextColorUnchecked: {
+      name: 'buttonsTextColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text Unchecked Color '
+      }
+    },
+    buttonsBackgroundColorChecked: {
+      name: 'buttonsBackgroundColorChecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Checked Color '
+      }
+    },
+    buttonsBackgroundColorUnchecked: {
+      name: 'buttonsBackgroundColorUnchecked',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets text background Unchecked Color '
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, args);
+const Retailers = exports.Retailers = Template.bind({});
+Retailers.args = {
+  data: viewCreativeRetailersData1,
+  width: '180px',
+  height: '100%',
+  borderColor: '#B1B1B1',
+  buttonsIconColor: "#90CE9C",
+  buttonsBorderColor: "#90CE9C",
+  buttonsTextColorChecked: "#212121",
+  buttonsTextColorUnchecked: "#212121",
+  buttonsBackgroundColorChecked: "#E9F5EB",
+  buttonsBackgroundColorUnchecked: "#F2F2F2"
+};

package/dist/stories/MarketShareDescription.stories.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WeeklyTriers = exports.PercentHeightWidth = exports.MarketShare = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MarketShareDescription = require("./components/MarketShareDescription");
+// --------------------------------- market share ----------------------------------------------
+
+const marketShareInfoText1 = `      
+    <strong>Pringles Harvest Blend </strong>
+    <p1>market share </p1>
+    <strong>increased by 98% </strong>
+    <p1>following the event</p1>
+    `;
+const marketShareInfoText2 = `      
+<strong>Pringles </strong>
+<p1>market share </p1>
+<strong>increased by 8% </strong>
+<p1>following the event</p1>
+`;
+const marketShareDataColumn1 = [{
+  label: 'Pre-event',
+  value: 1.2,
+  textBefore: '',
+  textAfter: '%'
+}, {
+  label: 'Event',
+  value: 2,
+  textBefore: '',
+  textAfter: '%'
+}, {
+  label: 'Post-event',
+  value: 2.3,
+  textBefore: '',
+  textAfter: '%'
+}];
+const marketShareDataColumn2 = [{
+  label: 'Pre-event',
+  value: 2.8,
+  textBefore: '',
+  textAfter: '%'
+}, {
+  label: 'Event',
+  value: 3.5,
+  textBefore: '',
+  textAfter: '%'
+}, {
+  label: 'Post-event',
+  value: 3.05,
+  textBefore: '',
+  textAfter: '%'
+}];
+const marketShareData1 = [{
+  name: 'pringlesHarvestBlend',
+  rowTitle: 'Pringles Harvest Blend',
+  fieldsArray: marketShareDataColumn1,
+  rowFooter: marketShareInfoText1,
+  showBanner: false
+}, {
+  name: 'pringles',
+  rowTitle: 'Pringles',
+  fieldsArray: marketShareDataColumn2,
+  rowFooter: marketShareInfoText2,
+  showBanner: false
+}];
+
+// --------------------------------- weekly tiers ----------------------------------------------
+
+// The event drove 320% new Pringles Harvest Brand Crisp triers
+const weeklyTiersInfoText1 = `         
+    <p1>The event drove </p1>
+    <strong>320%  </strong>
+    <p1>new Pringles Harvest Brand Crisp triers</p1>
+    `;
+const weeklyTiersInfoText2 = '';
+const weeklyTiersDataColumn1 = [{
+  label: 'Pre-event',
+  value: 2040,
+  textBefore: '',
+  textAfter: ''
+}, {
+  label: 'Event',
+  value: 8250,
+  textBefore: '',
+  textAfter: ''
+}, {
+  label: 'Post-event',
+  value: 600,
+  textBefore: '',
+  textAfter: ''
+}];
+const weeklyTiersDataColumn2 = [{
+  label: 'Pre-event',
+  value: 100,
+  textBefore: '',
+  textAfter: ''
+}, {
+  label: 'Event',
+  value: 1500,
+  textBefore: '',
+  textAfter: ''
+}, {
+  label: 'Post-event',
+  value: 2400,
+  textBefore: '',
+  textAfter: ''
+}];
+const weeklyTiersData1 = [{
+  name: 'weeklyTriers',
+  rowTitle: 'Weekly Triers',
+  fieldsArray: weeklyTiersDataColumn1,
+  rowFooter: weeklyTiersInfoText1,
+  showBanner: true
+}, {
+  name: 'weeklyRepeaters',
+  rowTitle: 'Weekly Repeaters',
+  fieldsArray: weeklyTiersDataColumn2,
+  rowFooter: weeklyTiersInfoText2,
+  showBanner: true
+}];
+var _default = exports.default = {
+  title: 'SAG BI/MarketShareDescription',
+  component: _MarketShareDescription.MarketShareDescription,
+  tags: ['autodocs'],
+  argTypes: {
+    marketShareData: {
+      label: 'marketShareData',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill kpi columns and buttons '
+    },
+    width: {
+      label: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px / %)'
+    },
+    height: {
+      label: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px / % )'
+    },
+    iconColor: {
+      label: 'iconColor',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+        description: 'Sets icons Color '
+      }
+    },
+    onBannerClick: {
+      name: 'onBannerClick',
+      action: 'onClick',
+      description: 'Click onBannerClick event'
+    },
+    dotCut: {
+      name: 'dotCut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MarketShareDescription, args);
+const MarketShare = exports.MarketShare = Template.bind({});
+MarketShare.args = {
+  marketShareData: marketShareData1,
+  width: '700px',
+  height: '630px',
+  iconColor: '#229E38',
+  dotCut: false
+};
+const WeeklyTriers = exports.WeeklyTriers = Template.bind({});
+WeeklyTriers.args = {
+  marketShareData: weeklyTiersData1,
+  width: '700px',
+  height: '630px',
+  iconColor: '#1B30AA',
+  dotCut: true
+};
+const PercentHeightWidth = exports.PercentHeightWidth = Template.bind({});
+PercentHeightWidth.args = {
+  marketShareData: marketShareData1,
+  width: '100%',
+  height: '100%',
+  iconColor: '#229E38',
+  dotCut: false
+};

package/dist/stories/MonthPicker.stories.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InitialValue = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MonthPicker = _interopRequireDefault(require("./components/MonthPicker"));
+/* eslint-disable import/no-extraneous-dependencies */
+// Input.stories.js
+// Update the path based on your actual file structure
+var _default = exports.default = {
+  title: 'SAG/MonthPicker',
+  component: _MonthPicker.default,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      name: 'label',
+      type: {
+        name: 'string'
+      },
+      description: 'Label for the input',
+      defaultValue: {
+        summary: 'Input Label'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    value: {
+      name: 'value',
+      type: {
+        name: 'string'
+      },
+      description: 'Value of the input',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    onChange: {
+      name: 'onChange',
+      type: {
+        name: 'function'
+      },
+      description: 'Callback function for input change',
+      defaultValue: {
+        summary: '() => {}'
+      },
+      control: {
+        type: null
+      }
+    },
+    borderRadius: {
+      name: 'borderRadius',
+      type: {
+        name: 'string'
+      },
+      description: 'Border radius of the input',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    required: {
+      name: 'required',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the input is required',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    textColor: {
+      name: 'textColor',
+      description: 'Sets the text Color ',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    borderColor: {
+      name: 'borderColor',
+      description: 'Sets the border Color ',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    borderColorFocus: {
+      name: 'borderColorFocus',
+      description: 'Sets the border Color Focus ',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    }
+  }
+}; // Create a group of stories for Input component
+const Template = args => /*#__PURE__*/_react.default.createElement(_MonthPicker.default, args);
+
+// Story for the default state
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  label: 'Period',
+  borderRadius: '12px',
+  required: true,
+  width: '250px',
+  height: '60px',
+  placeholder: 'Select Period',
+  disabled: false,
+  borderColor: '#E7E7E7',
+  borderColorFocus: '#066768',
+  textColor: '#212121'
+};
+
+// Story for the InitialValue state
+const InitialValue = exports.InitialValue = Template.bind({});
+InitialValue.args = {
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  label: 'Period',
+  borderRadius: '12px',
+  required: true,
+  width: '250px',
+  height: '60px',
+  placeholder: 'Select Period',
+  disabled: false,
+  borderColor: '#E7E7E7',
+  borderColorFocus: '#066768',
+  textColor: '#212121',
+  selectedValue: 'February | 2024'
+};

package/dist/stories/NewInput.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _NewInput = _interopRequireDefault(require("./components/NewInput"));
+var _default = exports.default = {
+  title: 'SAG/NewInput',
+  component: _NewInput.default,
+  argTypes: {
+    labelText: {
+      name: 'Label Text',
+      control: {
+        type: 'text'
+      },
+      description: 'The Label text',
+      defaultValue: ''
+    },
+    inputType: {
+      name: 'inputType',
+      control: {
+        type: 'text'
+      },
+      description: 'inputType',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_NewInput.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  labelText: 'Enter Value',
+  inputType: 'search'
+};

package/dist/stories/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("./components/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 Template = args => /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, args);
+const NoDataFound = exports.NoDataFound = Template.bind({});
+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/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("./components/OneColumnContainer");
+var _TotalHorizontalCharts = require("./components/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'
+  }
+};