sag_components 1.0.950 → 1.0.951

package/dist/stories/components/FilterPanel/FilterPanel.stories.js

@@ -0,0 +1,967 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PeriodPickerWithInitialValueYear = exports.PeriodPickerWithInitialValueQuarter = exports.PeriodPickerWithInitialValueMonth = exports.PeriodPickerWithInitialValueDaterange = exports.NoXClearOptionPage = exports.NewItemCenterEventsPage = exports.MultiDropdown = exports.FilterQuatertlyReport = exports.FilterPanelBlue = exports.DisableOKButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
+const NewItemCenterData = [{
+  name: 'Retailer',
+  label: 'Retailer',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: true,
+  inputType: 'dropdown',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }],
+  defaultValue: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event type',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38  Event #37 and 38',
+    label: 'Large Selling Event #37 and 38  Event #37 and 38'
+  }]
+  // defaultValue: { value: 'Large Selling Event #10 POD3', label: 'Large Selling Event #10 POD3' },
+}, {
+  name: 'DateRange',
+  label: 'Date Range',
+  labelEmptyValue: 'All Dates',
+  disabled: false,
+  required: true,
+  inputType: 'datepicker',
+  showInfo: true,
+  placeHolder: 'MM/DD/YYYY'
+}];
+const NewItemCenterMultiData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: true,
+  xIconShow: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }],
+  defaultValue: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38  Event #37 and 38',
+    label: 'Large Selling Event #37 and 38  Event #37 and 38'
+  }]
+}, {
+  name: 'DateRange',
+  label: 'Date Range',
+  labelEmptyValue: 'All Dates',
+  disabled: false,
+  required: true,
+  inputType: 'datepicker',
+  showInfo: true,
+  placeHolder: 'MM/DD/YYYY'
+}];
+const QuatertlyData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38',
+    label: 'Large Selling Event #37 and 38'
+  }]
+}, {
+  name: 'EventName',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Event Name 1',
+    label: 'Event Name 1'
+  }, {
+    value: 'Event Name 2',
+    label: 'Event Name 2'
+  }, {
+    value: 'Event Name 3',
+    label: 'Event Name 3'
+  }]
+}, {
+  name: 'EventTimeframe',
+  label: 'Select Event Timeframe',
+  labelEmptyValue: 'All Dates Types',
+  disabled: false,
+  required: false,
+  inputType: 'periodpicker',
+  placeHolder: 'Select Dates Types...',
+  dropdownOptions: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }, {
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'quarter',
+    label: 'Quarter'
+  }, {
+    value: 'year',
+    label: 'Year'
+  }],
+  availableQuarters: ['Q1-2024'],
+  availableMonths: ['Jan 2024'],
+  availableYears: ['2023'],
+  defaultValueYears: {
+    value: '2023',
+    label: '2023'
+  }
+}, {
+  name: 'Supplier',
+  label: 'Suppliers',
+  labelEmptyValue: 'All Suppliers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Supplier 1',
+    label: 'Supplier 1'
+  }, {
+    value: 'Supplier 2',
+    label: 'Supplier 2'
+  }, {
+    value: 'Supplier 3',
+    label: 'Supplier 3'
+  }]
+}];
+const PeriodPickerWithInitialDaterangeData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38',
+    label: 'Large Selling Event #37 and 38'
+  }]
+}, {
+  name: 'EventName',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Event Name 1',
+    label: 'Event Name 1'
+  }, {
+    value: 'Event Name 2',
+    label: 'Event Name 2'
+  }, {
+    value: 'Event Name 3',
+    label: 'Event Name 3'
+  }]
+}, {
+  name: 'Supplier',
+  label: 'Suppliers',
+  labelEmptyValue: 'All Suppliers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Supplier 1',
+    label: 'Supplier 1'
+  }, {
+    value: 'Supplier 2',
+    label: 'Supplier 2'
+  }, {
+    value: 'Supplier 3',
+    label: 'Supplier 3'
+  }]
+}, {
+  name: 'EventTimeframe',
+  label: 'Select Event Timeframe',
+  labelEmptyValue: 'All Dates Types',
+  disabled: false,
+  required: false,
+  inputType: 'periodpicker',
+  periodPickerSelectedValue: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }],
+  selectedValue: '06/08/2024 - 14/08/2024',
+  placeHolder: 'Select Dates Types...',
+  dropdownOptions: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }, {
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'quarter',
+    label: 'Quarter'
+  }, {
+    value: 'year',
+    label: 'Year'
+  }],
+  availableQuarters: ['Q1-2024', 'Q2-2024'],
+  availableMonths: ['Jan 2024'],
+  defaultValueYears: {
+    value: '2024',
+    label: '2024'
+  }
+}];
+const PeriodPickerWithInitialQuarterData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38',
+    label: 'Large Selling Event #37 and 38'
+  }]
+}, {
+  name: 'EventName',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Event Name 1',
+    label: 'Event Name 1'
+  }, {
+    value: 'Event Name 2',
+    label: 'Event Name 2'
+  }, {
+    value: 'Event Name 3',
+    label: 'Event Name 3'
+  }]
+}, {
+  name: 'Supplier',
+  label: 'Suppliers',
+  labelEmptyValue: 'All Suppliers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Supplier 1',
+    label: 'Supplier 1'
+  }, {
+    value: 'Supplier 2',
+    label: 'Supplier 2'
+  }, {
+    value: 'Supplier 3',
+    label: 'Supplier 3'
+  }]
+}, {
+  name: 'EventTimeframe',
+  label: 'Select Event Timeframe',
+  labelEmptyValue: 'All Dates Types',
+  disabled: false,
+  required: false,
+  inputType: 'periodpicker',
+  periodPickerSelectedValue: [{
+    value: 'quarter',
+    label: 'Event Quarter'
+  }],
+  selectedValue: 'Q2-2024',
+  placeHolder: 'Select Dates Types...',
+  dropdownOptions: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }, {
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'quarter',
+    label: 'Quarter'
+  }, {
+    value: 'year',
+    label: 'Year'
+  }],
+  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
+  availableMonths: ['Jan 2024'],
+  defaultValueYears: {
+    value: '2024',
+    label: '2024'
+  }
+}];
+const PeriodPickerWithInitialMonthData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38',
+    label: 'Large Selling Event #37 and 38'
+  }]
+}, {
+  name: 'EventName',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Event Name 1',
+    label: 'Event Name 1'
+  }, {
+    value: 'Event Name 2',
+    label: 'Event Name 2'
+  }, {
+    value: 'Event Name 3',
+    label: 'Event Name 3'
+  }]
+}, {
+  name: 'EventTimeframe',
+  label: 'Select Event Timeframe',
+  labelEmptyValue: 'All Dates Types',
+  disabled: false,
+  required: false,
+  inputType: 'periodpicker',
+  periodPickerSelectedValue: [{
+    value: 'month',
+    label: 'Event Month'
+  }],
+  selectedValue: 'January | 2024',
+  placeHolder: 'Select Dates Types...',
+  dropdownOptions: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }, {
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'quarter',
+    label: 'Quarter'
+  }, {
+    value: 'year',
+    label: 'Year'
+  }],
+  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  defaultValueYears: {
+    value: '2024',
+    label: '2024'
+  }
+}, {
+  name: 'Supplier',
+  label: 'Suppliers',
+  labelEmptyValue: 'All Suppliers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Supplier 1',
+    label: 'Supplier 1'
+  }, {
+    value: 'Supplier 2',
+    label: 'Supplier 2'
+  }, {
+    value: 'Supplier 3',
+    label: 'Supplier 3'
+  }]
+}];
+const PeriodPickerWithInitialYearData = [{
+  name: 'Retailer',
+  label: 'Retailers',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event types',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: 'Type ...',
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38',
+    label: 'Large Selling Event #37 and 38'
+  }]
+}, {
+  name: 'EventName',
+  label: 'Event Names',
+  labelEmptyValue: 'All Event Names',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Event Name 1',
+    label: 'Event Name 1'
+  }, {
+    value: 'Event Name 2',
+    label: 'Event Name 2'
+  }, {
+    value: 'Event Name 3',
+    label: 'Event Name 3'
+  }]
+}, {
+  name: 'Supplier',
+  label: 'Suppliers',
+  labelEmptyValue: 'All Suppliers',
+  disabled: false,
+  required: false,
+  inputType: 'dropdownMulti',
+  placeHolder: '',
+  dropdownOptions: [{
+    value: 'Supplier 1',
+    label: 'Supplier 1'
+  }, {
+    value: 'Supplier 2',
+    label: 'Supplier 2'
+  }, {
+    value: 'Supplier 3',
+    label: 'Supplier 3'
+  }]
+}, {
+  name: 'EventTimeframe',
+  label: 'Select Event Timeframe',
+  labelEmptyValue: 'All Dates Types',
+  disabled: false,
+  required: false,
+  inputType: 'periodpicker',
+  periodPickerSelectedValue: [{
+    value: 'year',
+    label: 'Event Year'
+  }],
+  selectedValue: '2024',
+  placeHolder: 'Select Dates Types...',
+  dropdownOptions: [{
+    value: 'daterange',
+    label: 'Event Start Date'
+  }, {
+    value: 'month',
+    label: 'Month'
+  }, {
+    value: 'quarter',
+    label: 'Quarter'
+  }, {
+    value: 'year',
+    label: 'Year'
+  }],
+  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  defaultValueYears: {
+    value: '2024',
+    label: '2024'
+  }
+}];
+const NewItemCenterNoShowXClearOptionData = [{
+  name: 'Retailer',
+  label: 'Retailer',
+  labelEmptyValue: 'All Retailers',
+  disabled: false,
+  required: true,
+  inputType: 'dropdown',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }, {
+    value: 'Hannaford',
+    label: 'Hannaford'
+  }, {
+    value: 'Giant Food',
+    label: 'Giant Food'
+  }, {
+    value: 'Stop&Shop',
+    label: 'Stop&Shop'
+  }, {
+    value: 'The Giant Company',
+    label: 'The Giant Company'
+  }],
+  defaultValue: [{
+    value: 'Food Lion',
+    label: 'Food Lion'
+  }]
+}, {
+  name: 'EventType',
+  label: 'Event type',
+  labelEmptyValue: 'All Event types',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  placeHolder: 'Type ...',
+  xIconShow: false,
+  dropdownOptions: [{
+    value: 'Large Selling Event #10 POD3',
+    label: 'Large Selling Event #10 POD3'
+  }, {
+    value: 'NIC 11_23 Cycle 11',
+    label: 'NIC 11_23 Cycle 11'
+  }, {
+    value: 'Large Selling Event #37 and 38  Event #37 and 38',
+    label: 'Large Selling Event #37 and 38  Event #37 and 38'
+  }]
+  // defaultValue: { value: 'Large Selling Event #10 POD3', label: 'Large Selling Event #10 POD3' },
+}, {
+  name: 'DateRange',
+  label: 'Date Range',
+  labelEmptyValue: 'All Dates',
+  disabled: false,
+  required: true,
+  inputType: 'datepicker',
+  showInfo: true,
+  placeHolder: 'MM/DD/YYYY'
+}];
+var _default = exports.default = {
+  title: 'SAG BI/FilterPanel',
+  component: _FilterPanel.default,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the form'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the form'
+    },
+    borderColor: {
+      name: 'borderColor',
+      description: 'Sets the border color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    okButtonBackgroundColor: {
+      name: 'okButtonBackgroundColor',
+      description: 'Sets the okButtonBackgroundColor color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    okButtonHoverColor: {
+      name: 'okButtonHoverColor',
+      description: 'Sets the ok Button Hover color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    resetButtonBackgroundColor: {
+      name: 'resetButtonBackgroundColor',
+      description: 'Sets the reset Button Background Color ',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    resetButtonHoverColor: {
+      name: 'resetButtonHoverColor',
+      description: 'Sets the reset Button Hover color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    onOkClick: {
+      name: 'onOkClick',
+      action: 'onOkClick',
+      description: 'Click on Ok event'
+    },
+    onResetClick: {
+      name: 'onResetClick',
+      action: 'onResetClick',
+      description: 'Click  onResetClick event'
+    },
+    onItemValueChanged: {
+      name: 'onItemValueChanged',
+      action: 'onItemValueChanged',
+      description: 'onChange event  '
+    },
+    fieldsData: {
+      description: 'array [] of objects: supported inputTypes: dropdown, dropdownMulti, "datepicker", periodpicker  '
+    },
+    disableOKButton: {
+      name: 'disableOKButton',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable OK Button'
+    },
+    className: {
+      name: 'className',
+      control: {
+        type: 'text'
+      },
+      description: 'name of the class'
+    },
+    showShadow: {
+      name: 'showShadow',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show or hide Shadow'
+    }
+  }
+};
+const DisableOKButton = exports.DisableOKButton = {
+  args: {
+    fieldsData: NewItemCenterData,
+    width: '300px',
+    height: '800px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: true
+  }
+};
+const MultiDropdown = exports.MultiDropdown = {
+  args: {
+    fieldsData: NewItemCenterMultiData,
+    width: '400px',
+    height: '800px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false
+  }
+};
+const FilterPanelBlue = exports.FilterPanelBlue = {
+  args: {
+    fieldsData: NewItemCenterData,
+    width: '50%',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: true
+  }
+};
+const NewItemCenterEventsPage = exports.NewItemCenterEventsPage = {
+  args: {
+    fieldsData: NewItemCenterData,
+    width: '400px',
+    height: '800px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false
+  }
+};
+const FilterQuatertlyReport = exports.FilterQuatertlyReport = {
+  args: {
+    fieldsData: QuatertlyData,
+    width: '300px',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false,
+    availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
+    availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024', 'Apr 2024', 'May 2024', 'Jun 2024', 'Jul 2024', 'Aug 2024', 'Sep 2024'],
+    availableYears: ['2024', '2025', '2026']
+  }
+};
+const NoXClearOptionPage = exports.NoXClearOptionPage = {
+  args: {
+    fieldsData: NewItemCenterNoShowXClearOptionData,
+    width: '400px',
+    height: '800px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false
+  }
+};
+const PeriodPickerWithInitialValueDaterange = exports.PeriodPickerWithInitialValueDaterange = {
+  args: {
+    fieldsData: PeriodPickerWithInitialDaterangeData,
+    width: '300px',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false,
+    useExternalFilterState: true
+  }
+};
+const PeriodPickerWithInitialValueQuarter = exports.PeriodPickerWithInitialValueQuarter = {
+  args: {
+    fieldsData: PeriodPickerWithInitialQuarterData,
+    width: '300px',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false,
+    useExternalFilterState: true
+  }
+};
+const PeriodPickerWithInitialValueMonth = exports.PeriodPickerWithInitialValueMonth = {
+  args: {
+    fieldsData: PeriodPickerWithInitialMonthData,
+    width: '300px',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false,
+    useExternalFilterState: true
+  }
+};
+const PeriodPickerWithInitialValueYear = exports.PeriodPickerWithInitialValueYear = {
+  args: {
+    fieldsData: PeriodPickerWithInitialYearData,
+    width: '300px',
+    height: '700px',
+    okButtonBackgroundColor: '#229E38',
+    okButtonHoverColor: '#92CF17',
+    resetButtonHoverColor: '#E8F5EB',
+    borderColor: '#066768',
+    disableOKButton: false,
+    useExternalFilterState: true,
+    showShadow: false
+  }
+};