sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/DropdownNew.stories.js

@@ -0,0 +1,407 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleRequired = exports.SingleDisabled = exports.Single = exports.NoLabelOnTopSingle = exports.NoLabelOnTopMulti = exports.MultiReqiered = exports.MultiDisabled = exports.Multi = exports.InitSingle = exports.InitMulti = exports.ErrorMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DropdownNew = _interopRequireDefault(require("./components/DropdownNew"));
+/* eslint-disable import/no-extraneous-dependencies */
+
+// Update the path based on your actual file structure
+
+const optionsData = [{
+  value: 'Multi Vendor Selling Event #2 Weeks 7 and 8 ',
+  label: 'Multi Vendor Selling Event #2 Weeks 7 and 8 ',
+  element: "23-01-2021"
+}, {
+  value: 'Small Theme #11 Bulk Size Week 32',
+  label: 'Small Theme #11 Bulk Size Week 32',
+  element: "20-01-2025"
+}, {
+  value: 'Pick Up and Delivery #17 Kraft Heinz Week 17',
+  label: 'Pick Up and Delivery #17 Kraft Heinz Week 17',
+  element: "14-01-2024"
+}, {
+  value: 'Small Theme #1 Healthy Week 2',
+  label: 'Small Theme #1 Healthy Week 2',
+  element: "19-11-2024"
+}, {
+  value: 'Pick Up and Delivery #21 Kraft Heinz Week 21',
+  label: 'Pick Up and Delivery #21 Kraft Heinz Week 21',
+  element: "01-01-2024"
+}, {
+  value: 'Large Selling Event #1 Digital Coupon Weeks 40 and 41',
+  label: 'Large Selling Event #1 Digital Coupon Weeks 40 and 41',
+  element: "20-08-2024"
+}, {
+  value: 'Large Selling Event #12 POD 4 Weeks 44 and 45',
+  label: 'Large Selling Event #12 POD 4 Weeks 44 and 45',
+  element: "15-05-2022"
+}, {
+  value: 'Large Selling Event #13 POD 1 Weeks 48 and 49',
+  label: 'Large Selling Event #13 POD 1 Weeks 48 and 49',
+  element: "20-01-2019"
+}, {
+  value: 'Large Selling Event #3 POD1 Weeks 9 and 10',
+  label: 'Large Selling Event #3 POD1 Weeks 9 and 10',
+  element: "20-01-2020"
+}];
+const selectedValueDataSingle = [{
+  value: 'Pick Up and Delivery #17 Kraft Heinz Week 17',
+  label: 'Pick Up and Delivery #17 Kraft Heinz Week 17'
+}];
+const selectedValueDataMulti = [{
+  value: 'Pick Up and Delivery #17 Kraft Heinz Week 17',
+  label: 'Pick Up and Delivery #17 Kraft Heinz Week 17'
+}, {
+  value: 'Small Theme #1 Healthy Week 2',
+  label: 'Small Theme #1 Healthy Week 2'
+}];
+var _default = exports.default = {
+  title: 'SAG/DropdownNew',
+  component: _DropdownNew.default,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      name: 'label',
+      type: {
+        name: 'string'
+      },
+      description: 'Label for the select',
+      defaultValue: {
+        summary: 'Dropdown Label'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    options: {
+      name: 'options',
+      description: 'options to init the dropdown options, example: [{ value: "Pick Up and Delivery", label: "Pick Up and Delivery"},{ value: "Small Delivery", label: "Small Delivery"}]'
+    },
+    selectedValue: {
+      name: 'selectedValue',
+      description: 'selectedValue to init or reset the dropdown, example of multiple selected value: [{ value: "Pick Up and Delivery", label: "Pick Up and Delivery"},{ value: "Small Delivery", label: "Small Delivery"}]'
+    },
+    onChange: {
+      name: 'onChange',
+      type: {
+        name: 'function'
+      },
+      description: 'Callback function for select change',
+      defaultValue: {
+        summary: '() => {}'
+      },
+      control: {
+        type: null
+      }
+    },
+    required: {
+      name: 'required',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the select is required',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    labelColor: {
+      name: 'labelColor',
+      description: 'Indicates for label font color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    checkBoxColor: {
+      name: 'checkBoxColor',
+      description: 'Indicates for check Box Color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    disabled: {
+      name: 'disabled',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if the select is disabled',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    width: {
+      name: 'width',
+      type: {
+        name: 'string'
+      },
+      description: 'Width of the select',
+      defaultValue: {
+        summary: '200px'
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    error: {
+      name: 'error',
+      type: {
+        name: 'boolean'
+      },
+      description: 'Indicates if there is an error',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      type: {
+        name: 'string'
+      },
+      description: 'Error message to display',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      type: {
+        name: 'string'
+      },
+      description: 'Error message to display',
+      defaultValue: {
+        summary: ''
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    showLabelOnTop: {
+      name: 'showLabelOnTop',
+      type: {
+        name: 'boolean'
+      },
+      description: 'show Label On Top, Please note: label parameter should be empty to disapear label on top',
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+}; // Create a group of stories for Dropdown component
+const Template = args => /*#__PURE__*/_react.default.createElement(_DropdownNew.default, args);
+
+// Story for the single dropdown
+const Single = exports.Single = Template.bind({});
+Single.args = {
+  isMulti: false,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: ''
+};
+
+// Story for the single dropdown
+const SingleRequired = exports.SingleRequired = Template.bind({});
+SingleRequired.args = {
+  isMulti: false,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: true,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: ''
+};
+
+// Story for the single dropdown state with init selected data
+const InitSingle = exports.InitSingle = Template.bind({});
+InitSingle.args = {
+  isMulti: false,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  selectedValue: selectedValueDataSingle,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: ''
+};
+
+// Story for the Single Disable dropdown
+const SingleDisabled = exports.SingleDisabled = Template.bind({});
+SingleDisabled.args = {
+  isMulti: false,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: true,
+  error: false,
+  errorMessage: '',
+  selectedValue: selectedValueDataSingle
+};
+
+// Story for the multi dropdown
+const Multi = exports.Multi = Template.bind({});
+Multi.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  selectedValue: null
+};
+
+// Story for the multi dropdown
+const MultiReqiered = exports.MultiReqiered = Template.bind({});
+MultiReqiered.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: true,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  selectedValue: null
+};
+
+// Story for the multi dropdown state with init selected data
+const InitMulti = exports.InitMulti = Template.bind({});
+InitMulti.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  selectedValue: selectedValueDataMulti
+};
+
+// Story for the multi dropdown
+const MultiDisabled = exports.MultiDisabled = Template.bind({});
+MultiDisabled.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: true,
+  error: false,
+  errorMessage: '',
+  selectedValue: selectedValueDataMulti
+};
+
+// Story for the multi dropdown state with error message
+const ErrorMessage = exports.ErrorMessage = Template.bind({});
+ErrorMessage.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: false,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: true,
+  errorMessage: 'Error example: Story for the multi dropdown state with error message ...',
+  selectedValue: null
+};
+
+// Story for the single dropdown when label disappears on top
+const NoLabelOnTopSingle = exports.NoLabelOnTopSingle = Template.bind({});
+NoLabelOnTopSingle.args = {
+  isMulti: false,
+  placeHolder: 'Type...',
+  label: '',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: true,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  showLabelOnTop: false
+};
+
+// Story for the multi dropdown when label disappears on top
+const NoLabelOnTopMulti = exports.NoLabelOnTopMulti = Template.bind({});
+NoLabelOnTopMulti.args = {
+  isMulti: true,
+  placeHolder: 'Type...',
+  label: '',
+  labelEmptyValue: 'All Event Names',
+  labelColor: '#066768',
+  checkBoxColor: '#229E38',
+  required: true,
+  options: optionsData,
+  width: '300px',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  selectedValue: null,
+  showLabelOnTop: false
+};

package/dist/stories/EventDetailsCard.stories.js

@@ -0,0 +1,122 @@
+"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 _EventDetailsCard = _interopRequireDefault(require("./components/EventDetailsCard"));
+var _default = exports.default = {
+  title: 'SAG BI/EventDetailsCard',
+  component: _EventDetailsCard.default,
+  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 / %)'
+    },
+    title: {
+      name: 'Title',
+      control: {
+        type: 'text'
+      },
+      description: 'Title of the card'
+    },
+    banners: {
+      name: 'Banners',
+      control: {
+        type: 'array'
+      },
+      description: 'List of banners'
+    },
+    count: {
+      name: 'Count',
+      control: {
+        type: 'number'
+      },
+      description: 'Count of products in variety'
+    },
+    data: {
+      name: 'Data',
+      control: {
+        type: 'array'
+      },
+      description: 'List of data to be displayed'
+    },
+    displayBannersDropdown: {
+      name: 'Display Banners Dropdown',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Display Banners Dropdown'
+    },
+    disableViewDetailsButton: {
+      name: 'Disable View Details Button',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Changes View Details Button to be enabled/disabled',
+      defaultValue: ''
+    },
+    buttonText: {
+      name: 'Button Text',
+      control: {
+        type: 'text'
+      },
+      description: 'Text to be displayed on the button'
+    },
+    buttonTextColor: {
+      name: 'Button Text Color',
+      control: {
+        type: 'color'
+      },
+      description: 'Button Text Color'
+    },
+    onBannersDropdownClick: {
+      name: 'onBannersDropdownClick',
+      action: 'onClick',
+      description: 'onBannersDropdownClick event - returns an object of banners'
+    },
+    onViewButtonClick: {
+      name: 'onViewButtonClick',
+      action: 'onClick',
+      description: 'onViewButtonClick event - returns an object of click'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_EventDetailsCard.default, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: '368px',
+  height: '346px',
+  title: 'Event Details',
+  banners: ['Banner 1', 'Banner 2', 'Banner 3'],
+  count: 3,
+  data: [{
+    label: 'Incremental sales',
+    value: '$25K'
+  }, {
+    label: 'Package cost',
+    value: '$97K'
+  }, {
+    label: 'ROI',
+    value: 'x3.5'
+  }],
+  disableViewDetailsButton: true,
+  displayBannersDropdown: false,
+  buttonText: 'View Details',
+  buttonTextColor: '#229E38',
+  onBannersDropdownClick: () => {},
+  onViewButtonClick: () => {}
+};

package/dist/stories/EventList.stories.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExampleEventList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EventList = _interopRequireDefault(require("./components/EventList"));
+const eventsData1 = [{
+  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'
+}];
+var _default = exports.default = {
+  title: 'SAG BI/EventList',
+  component: _EventList.default,
+  tags: ['autodocs'],
+  argTypes: {
+    eventsData: {
+      name: 'eventsData',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill data '
+    },
+    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 / % )'
+    },
+    itemHeight: {
+      name: 'itemHeight',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the event item (in px / % )'
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'onClick event - returns an object of check box {true/false} '
+    },
+    selectTextColor: {
+      name: 'selectTextColor',
+      description: 'Sets the select buttons color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_EventList.default, args);
+const ExampleEventList = exports.ExampleEventList = Template.bind({});
+ExampleEventList.args = {
+  eventsData: eventsData1,
+  width: '100%',
+  height: '100%',
+  itemHeight: '160px',
+  selectTextColor: '#229E38'
+};

package/dist/stories/EventListItem.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExampleEventListItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EventListItem = require("./components/EventListItem");
+var _default = exports.default = {
+  title: 'SAG BI/EventListItem',
+  component: _EventListItem.EventListItem,
+  tags: ['autodocs'],
+  argTypes: {
+    eventName: {
+      name: 'eventName',
+      control: {
+        type: 'text'
+      },
+      description: ''
+    },
+    period: {
+      name: 'period',
+      control: {
+        type: 'text'
+      },
+      description: 'With this format DD.MM.YYYY'
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px or %)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px or %)'
+    },
+    selectTextColor: {
+      name: 'selectTextColor',
+      description: 'Sets the select TextColor ',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'returns an event click object when user clicks on a button'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItem, args);
+const ExampleEventListItem = exports.ExampleEventListItem = Template.bind({});
+ExampleEventListItem.args = {
+  eventName: 'Large Selling Event #10 POD3 Weeks 37 and 38 and #10 POD3 Weeks 39 and 40',
+  period: '10.08.2023 - 09.09.2023',
+  selectTextColor: '#229E38',
+  width: '400px',
+  height: '160px'
+};