sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/CollapseData.stories.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallContainedStyle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CollapseData = require("./components/CollapseData");
+var _default = exports.default = {
+  title: 'SAG BI/CollapseData',
+  component: _CollapseData.CollapseData,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'value of the main title',
+      defaultValue: ''
+    },
+    tableData: {
+      name: 'tableData',
+      control: {
+        type: 'object'
+      }
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the component, minimum 400px'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the component'
+    },
+    noDataText: {
+      name: 'noDataText',
+      control: {
+        type: 'text'
+      },
+      description: 'message that will appears if there is no information to display'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_CollapseData.CollapseData, args);
+const SmallContainedStyle = exports.SmallContainedStyle = Template.bind({});
+SmallContainedStyle.args = {
+  title: 'Existing Repeaters (post event)',
+  height: '379px',
+  width: '455px',
+  tableData: [{
+    key: 0,
+    icon: 'Basket',
+    title: 'Basket (Units) Change',
+    value: 19.97,
+    valueType: '%',
+    table: [{
+      title: 'Food Lion',
+      value: -1.9
+    }, {
+      title: 'Hannaford',
+      value: null
+    }, {
+      title: 'Giant Food',
+      value: -2.03
+    }, {
+      title: 'The Giant Company',
+      value: 19.2
+    }, {
+      title: 'Stop&Shop',
+      value: 4.7
+    }]
+  }, {
+    key: 1,
+    icon: 'Basket',
+    title: 'Basket ($) Change',
+    value: 31.65,
+    valueType: '%',
+    table: [{
+      title: 'Food Lion',
+      value: 3.75
+    }, {
+      title: 'Hannaford',
+      value: null
+    }, {
+      title: 'Giant Food',
+      value: 7.643
+    }, {
+      title: 'The Giant Company',
+      value: 2.939
+    }, {
+      title: 'Stop&Shop',
+      value: 17.322
+    }]
+  }, {
+    key: 2,
+    icon: 'Visits',
+    title: 'Visits Change',
+    value: -58.57,
+    valueType: '%',
+    table: [{
+      title: 'Food Lion',
+      value: -6.05
+    }, {
+      title: 'Hannaford',
+      value: null
+    }, {
+      title: 'Giant Food',
+      value: -37.68
+    }, {
+      title: 'The Giant Company',
+      value: -10.369
+    }, {
+      title: 'Stop&Shop',
+      value: -4.48
+    }]
+  }]
+};

package/dist/stories/CollapseHeader.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LargeSellingEvent = exports.CrossRetailersEvent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CollapseHeader = require("./components/CollapseHeader");
+const viewCreativeRetailersData1 = [{
+  label: 'Food Lion'
+}, {
+  label: 'Stop&Shop'
+}, {
+  label: 'Giant Food'
+}, {
+  label: 'The Giant Company'
+}, {
+  label: 'Hannaford'
+}];
+const data = {
+  eventType: 'Large Selling Event',
+  retailer: 'The Giant Company',
+  eventDescription: 'Large Selling Event Description',
+  objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
+  eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
+  externalEventDescription: 'Large Selling Event P2 Description',
+  externalEventID: 'LSE2_23',
+  storeType: 'Total',
+  category: '',
+  supplier: '',
+  brand: ''
+};
+var _default = exports.default = {
+  title: 'SAG BI/CollapseHeader',
+  component: _CollapseHeader.CollapseHeader,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'data',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill title description '
+    },
+    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 / % )'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    showRetailerIcon: {
+      name: 'showRetailerIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Retailer Icon'
+    },
+    showViewCreativeButton: {
+      name: 'showViewCreativeButton',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show/Hide button'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    viewCreativeOnClick: {
+      action: 'viewCreativeOnClick',
+      description: 'viewCreativeOnClick event - returns an object of viewCreativeOnClick   '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_CollapseHeader.CollapseHeader, args);
+const LargeSellingEvent = exports.LargeSellingEvent = Template.bind({});
+LargeSellingEvent.args = {
+  showRetailerIcon: true,
+  showPeriodIcon: true,
+  viewCreativeRetailersData: null,
+  data,
+  width: '100%',
+  height: '100%',
+  showDraft: true,
+  showViewCreativeButton: true
+};
+const CrossRetailersEvent = exports.CrossRetailersEvent = Template.bind({});
+CrossRetailersEvent.args = {
+  showRetailerIcon: false,
+  showPeriodIcon: false,
+  viewCreativeRetailersData: viewCreativeRetailersData1,
+  data,
+  width: '100%',
+  height: '100%',
+  showViewCreativeButton: false
+};

package/dist/stories/CollapseMenuItem.stories.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductLines = exports.EventsList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CollapseMenuItem = _interopRequireDefault(require("./components/CollapseMenuItem"));
+var _EventList = _interopRequireDefault(require("./components/EventList"));
+var _ReportTable = _interopRequireDefault(require("./components/ReportTable"));
+var _default = exports.default = {
+  title: 'SAG BI/CollapseMenuItem',
+  component: _CollapseMenuItem.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title text ',
+      defaultValue: ''
+    },
+    subTitle: {
+      name: 'subTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'subTitle text ',
+      defaultValue: ''
+    },
+    showBorder: {
+      name: 'showBorder',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show Border  of component'
+    },
+    buttonAlignment: {
+      control: {
+        type: 'radio'
+      },
+      options: ['left', 'right'],
+      description: 'button Alignment'
+    }
+  }
+};
+const displayEventList = () =>
+/*#__PURE__*/
+// eslint-disable-next-line react/jsx-filename-extension
+_react.default.createElement(_EventList.default, {
+  eventsData: [{
+    eventName: 'Large Selling Event #10 POD3 Weeks 37 and 38 and #10 POD3 Weeks 39 and 40',
+    period: '12/06/2023 - 09/07/2023'
+  }, {
+    eventName: 'Small Selling Event #12 POD4 Weeks 37 and 38 and #10 POD3 Weeks 39 and 40',
+    period: '18/07/2023 - 09/07/2023'
+  }, {
+    eventName: 'NIC 11_23 Cycle 11',
+    period: '10/08/2023 - 09/08/2023'
+  }, {
+    eventName: 'Large Selling Event #10 POD3 Weeks 37 and 38 ',
+    period: '10/09/2023 - 29/09/2023'
+  }, {
+    eventName: 'Large Selling Event #37 and 38 ',
+    period: '13/09/2023 - 29/09/2023'
+  }, {
+    eventName: 'Large Selling Event 38 ',
+    period: '16/09/2023 - 29/09/2023'
+  }],
+  itemHeight: "100px",
+  itemWidth: "500px",
+  onClick: () => {}
+});
+const displayReportTable = () => /*#__PURE__*/_react.default.createElement(_ReportTable.default, {
+  disableInfo: true,
+  onSelectRowClick: () => {},
+  tableData: {
+    columnsHeadings: [{
+      key: 'eventName',
+      label: 'Event Name'
+    }, {
+      key: 'retailer',
+      label: 'Retailer'
+    }, {
+      key: 'totalCost',
+      label: 'Total Cost'
+    }, {
+      key: 'incBaselineSales',
+      label: 'Inc. Baseline Sales'
+    }],
+    rowsValues: [{
+      eventDescription: 'Food',
+      incBaselineSales: '20K',
+      retailer: 'Large Selling Event P2 2023',
+      totalCost: '$200K'
+    }, {
+      eventDescription: 'Food',
+      incBaselineSales: '50K',
+      retailer: 'Large Selling Event P2 2023',
+      totalCost: '$500K'
+    }, {
+      eventDescription: 'Food',
+      incBaselineSales: '70K',
+      retailer: 'Large Selling Event P2 2023',
+      totalCost: '$700K'
+    }, {
+      eventDescription: 'Food',
+      incBaselineSales: '60K',
+      retailer: 'Large Selling Event P2 2023',
+      totalCost: '$600K'
+    }]
+  },
+  title: "Existing Repeaters (post event)",
+  useColorLinearGradient: false,
+  useSelectButtons: true
+});
+const TemplateEventsList = args => /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.default, args, displayEventList());
+const EventsList = exports.EventsList = TemplateEventsList.bind({});
+EventsList.args = {
+  title: 'Events',
+  subTitle: '19 Events',
+  showBorder: false,
+  buttonAlignment: 'left'
+};
+const TemplateProductLines = args => /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.default, args, displayReportTable());
+const ProductLines = exports.ProductLines = TemplateProductLines.bind({});
+ProductLines.args = {
+  title: 'Product Lines',
+  subTitle: '20',
+  showBorder: true,
+  buttonAlignment: 'right'
+};

package/dist/stories/Datepicker.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallSquare = exports.RegularFormat = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Datepicker = require("./components/Datepicker");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: "SAG/Datepicker",
+  component: _Datepicker.Datepicker,
+  tags: ["autodocs"],
+  argTypes: {
+    width: {
+      control: {
+        type: "text"
+      },
+      description: "width of the input field",
+      defaultValue: "300px"
+    },
+    text: {
+      name: "text",
+      control: {
+        type: "text"
+      },
+      description: "text inside of the input field",
+      defaultValue: "Search..."
+    },
+    shape: {
+      control: {
+        type: "radio"
+      },
+      options: ["round", "square"],
+      description: "shape: round/square"
+    },
+    format: {
+      name: "format",
+      control: {
+        type: "text"
+      },
+      description: "valid date format "
+    },
+    onChange: {
+      action: "onChange",
+      description: "returns an option (object) selected by the user"
+    },
+    value: {
+      name: "value",
+      control: {
+        type: "text"
+      },
+      description: "set value (correct date format)"
+    },
+    disabled: {
+      name: "disabled",
+      control: {
+        type: "boolean"
+      },
+      description: "disable component"
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, args);
+const SmallSquare = exports.SmallSquare = Template.bind({});
+SmallSquare.args = {
+  width: "300px",
+  text: "From",
+  shape: "round",
+  format: "MMM DD, YYYY",
+  //value: "2023-08-16",
+  disabled: false,
+  labelColor: "#066768"
+};
+const RegularFormat = exports.RegularFormat = Template.bind({});
+RegularFormat.args = {
+  width: "100%",
+  text: "From",
+  shape: "round",
+  format: "YYYY-MM-DD",
+  value: "2023-08-16",
+  disabled: false,
+  labelColor: "#066768"
+};

package/dist/stories/DialogOverlay.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DialogOverlay = _interopRequireDefault(require("./components/DialogOverlay"));
+var _EventDetailsCard = _interopRequireDefault(require("./components/EventDetailsCard"));
+var _default = exports.default = {
+  title: 'SAG BI/DialogOverlay',
+  component: _DialogOverlay.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'Title',
+      control: 'text',
+      description: 'The title of the dialog'
+    },
+    children: {
+      name: 'Content',
+      control: 'text',
+      description: 'The content of the dialog'
+    },
+    onDialogClose: {
+      name: 'On Dialog Close',
+      action: 'onDialogClose',
+      description: 'The function to call when the dialog is closed'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DialogOverlay.default, args);
+const Modal = exports.Modal = Template.bind({});
+Modal.args = {
+  title: 'Title',
+  children: /*#__PURE__*/_react.default.createElement(_EventDetailsCard.default, null),
+  onDialogClose: () => {}
+};

package/dist/stories/DoublePanelDataRow.stories.js

@@ -0,0 +1,116 @@
+"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 _DoublePanelDataRow = require("./components/DoublePanelDataRow");
+const data = [{
+  title: 'Total Offer Targeted',
+  value: null,
+  sign: '',
+  isPercent: false
+}, {
+  title: 'Total Impressions',
+  value: 15000.6,
+  sign: '$',
+  isPercent: false
+}, {
+  title: 'Total Clipped',
+  value: undefined,
+  sign: '$',
+  isPercent: false
+}, {
+  title: 'Total Redemptions',
+  value: undefined,
+  sign: 'x',
+  isPercent: false
+}, {
+  title: 'Red’ Rate From Targeted',
+  value: 17.8,
+  sign: '',
+  isPercent: true
+}, {
+  title: 'Red’ Rate From Impressions',
+  value: 17.8,
+  sign: '',
+  isPercent: true
+}, {
+  title: 'Redemption Cost',
+  value: 100005,
+  sign: '$',
+  isPercent: false
+}, {
+  title: 'Incremental Sales',
+  value: 15002,
+  sign: '$',
+  isPercent: false
+}, {
+  title: 'Redeemers Sales',
+  value: 43900,
+  sign: '$',
+  isPercent: false
+}];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG BI/DoublePanelDataRow',
+  component: _DoublePanelDataRow.DoublePanelDataRow,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'Data',
+      control: {
+        type: 'object'
+      },
+      description: 'Data to be displayed in the control'
+    },
+    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 / %)'
+    },
+    backgroundColor: {
+      name: 'Background Color',
+      control: {
+        type: 'color'
+      },
+      description: 'Background color of the control'
+    },
+    customDataFormat: {
+      name: 'Custom Data Format',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Keep decimal points in the value'
+    },
+    showPercentChange: {
+      name: 'Show Percent Change',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Show the percentage change'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DoublePanelDataRow, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  data,
+  width: '100%',
+  height: 'auto',
+  backgroundColor: 'white',
+  customDataFormat: false,
+  showPercentChange: true
+};