sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/ProductsVariety.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThreeProducts = exports.FiveProducts = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ProductsVariety = _interopRequireDefault(require("./components/ProductsVariety"));
+const productsData1 = [{
+  value: '1',
+  label: 'Sweet Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '2',
+  label: 'Sweet Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}, {
+  value: '3',
+  label: 'Homestyle Ranch',
+  ShowSpotlightProductButton: true
+}];
+const productsData2 = [{
+  value: '1',
+  label: 'Sweet Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '2',
+  label: 'Sweet Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}, {
+  value: '3',
+  label: 'Homestyle Ranch',
+  ShowSpotlightProductButton: true
+}, {
+  value: '4',
+  label: 'Sweet BBQ Potato Sea Potat Smoky BBQ Crisps',
+  ShowSpotlightProductButton: true
+}, {
+  value: '5',
+  label: ' BBQ Crisps Potato Sea Salt Crisps',
+  ShowSpotlightProductButton: false
+}];
+var _default = exports.default = {
+  title: 'SAG BI/ProductsVariety',
+  component: _ProductsVariety.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title text ',
+      defaultValue: ''
+    },
+    subTitle: {
+      name: 'subTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'subTitle text ',
+      defaultValue: ''
+    },
+    productsData: {
+      description: 'array [] of objects: {value: string, label: string } to fill the product items. '
+    },
+    onSpotlightProductClick: {
+      action: 'onSpotlightProductClick',
+      description: 'returns an event onSpotlightProductClick object when user clicks on a button'
+    },
+    onClickBannersDropdown: {
+      action: 'onClickBannersDropdown',
+      description: 'returns an event onClickBannersDropdown object when user clicks on a button'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ProductsVariety.default, args);
+const ThreeProducts = exports.ThreeProducts = Template.bind({});
+ThreeProducts.args = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  productsData: productsData1
+};
+const FiveProducts = exports.FiveProducts = Template.bind({});
+FiveProducts.args = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  productsData: productsData2
+};

package/dist/stories/ProgressBar.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WideBlue = exports.SmallGreen = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+var _default = exports.default = {
+  title: 'SAG/ProgressBar',
+  component: _ProgressBar.default,
+  tags: ['autodocs'],
+  argTypes: {
+    progressPercent: {
+      name: 'progressPercent',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100
+      },
+      description: 'progressPercent - set this value to increase or decrease progress current value - in percent 0% - 100%. Allows control of the progressBar'
+    },
+    refreshInterval: {
+      name: 'refreshInterval',
+      control: {
+        type: 'number'
+      },
+      description: 'refreshInterval - in miliseconds - speed of progress bar'
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the progress bar'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the progress bar'
+    },
+    color: {
+      name: 'color',
+      description: 'Sets the color of bar',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ProgressBar.default, args);
+const SmallGreen = exports.SmallGreen = Template.bind({});
+SmallGreen.args = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '200px',
+  height: '9px',
+  color: '#92CF17'
+};
+const WideBlue = exports.WideBlue = Template.bind({});
+WideBlue.args = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '800px',
+  height: '9px',
+  color: '#1B30AA'
+};

package/dist/stories/QuarterPicker.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 _QuarterPicker = _interopRequireDefault(require("./components/QuarterPicker"));
+/* eslint-disable import/no-extraneous-dependencies */
+// Input.stories.js
+// Update the path based on your actual file structure
+var _default = exports.default = {
+  title: 'SAG/QuarterPicker',
+  component: _QuarterPicker.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(_QuarterPicker.default, args);
+
+// Story for the default state
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  availableQuarters: ['Q1-2024', 'Q2-2024'],
+  label: 'Quarter',
+  borderRadius: '12px',
+  required: true,
+  width: '250px',
+  height: '60px',
+  placeholder: 'Select Quarter',
+  disabled: false,
+  borderColor: '#E7E7E7',
+  borderColorFocus: '#066768',
+  textColor: '#212121'
+};
+
+// Story for the initial value state
+const InitialValue = exports.InitialValue = Template.bind({});
+InitialValue.args = {
+  availableQuarters: ['Q1-2024', 'Q2-2024'],
+  label: 'Quarter',
+  borderRadius: '12px',
+  required: true,
+  width: '250px',
+  height: '60px',
+  placeholder: 'Select Quarter',
+  disabled: false,
+  borderColor: '#E7E7E7',
+  borderColorFocus: '#066768',
+  textColor: '#212121',
+  selectedValue: 'Q2-2024'
+};

package/dist/stories/QuickFilter.stories.js

@@ -0,0 +1,275 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleDisabled = exports.Single = exports.MultiDisabled = exports.Multi = exports.InitSingle = exports.InitMulti = exports.ErrorMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _QuickFilter = _interopRequireDefault(require("./components/QuickFilter"));
+const optionsData = [{
+  value: "Multi Vendor Selling Event #2 Weeks 7 and 8 ",
+  label: "Multi Vendor Selling Event #2 Weeks 7 and 8 "
+}, {
+  value: "Small Theme #11 Bulk Size Week 32",
+  label: "Small Theme #11 Bulk Size Week 32"
+}, {
+  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"
+}, {
+  value: "Pick Up and Delivery #21 Kraft Heinz Week 21",
+  label: "Pick Up and Delivery #21 Kraft Heinz Week 21"
+}, {
+  value: "Large Selling Event #1 Digital Coupon Weeks 40 and 41",
+  label: "Large Selling Event #1 Digital Coupon Weeks 40 and 41"
+}, {
+  value: "Large Selling Event #12 POD 4 Weeks 44 and 45",
+  label: "Large Selling Event #12 POD 4 Weeks 44 and 45"
+}, {
+  value: "Large Selling Event #13 POD 1 Weeks 48 and 49",
+  label: "Large Selling Event #13 POD 1 Weeks 48 and 49"
+}, {
+  value: "Large Selling Event #3 POD1 Weeks 9 and 10",
+  label: "Large Selling Event #3 POD1 Weeks 9 and 10"
+}];
+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/QuickFilter",
+  component: _QuickFilter.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
+      }
+    },
+    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"
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_QuickFilter.default, args);
+const Single = exports.Single = Template.bind({});
+Single.args = {
+  multipleSelection: false,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: false,
+  error: false,
+  errorMessage: "",
+  xIconShow: false
+};
+const InitSingle = exports.InitSingle = Template.bind({});
+InitSingle.args = {
+  multipleSelection: false,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  selectedValue: selectedValueDataSingle,
+  width: "300px",
+  disabled: false,
+  error: false,
+  errorMessage: "",
+  xIconShow: false
+};
+const SingleDisabled = exports.SingleDisabled = Template.bind({});
+SingleDisabled.args = {
+  multipleSelection: false,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: true,
+  error: false,
+  errorMessage: "",
+  selectedValue: selectedValueDataSingle,
+  xIconShow: false
+};
+const Multi = exports.Multi = Template.bind({});
+Multi.args = {
+  multipleSelection: true,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: false,
+  error: false,
+  errorMessage: "",
+  selectedValue: null,
+  xIconShow: false
+};
+const InitMulti = exports.InitMulti = Template.bind({});
+InitMulti.args = {
+  multipleSelection: true,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: false,
+  error: false,
+  errorMessage: "",
+  selectedValue: selectedValueDataMulti,
+  xIconShow: false
+};
+const MultiDisabled = exports.MultiDisabled = Template.bind({});
+MultiDisabled.args = {
+  multipleSelection: true,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: true,
+  error: false,
+  errorMessage: "",
+  selectedValue: selectedValueDataMulti,
+  xIconShow: false
+};
+const ErrorMessage = exports.ErrorMessage = Template.bind({});
+ErrorMessage.args = {
+  multipleSelection: true,
+  placeHolder: "Select From List",
+  label: "Unit Type:",
+  labelColor: "#066768",
+  checkBoxColor: "#229E38",
+  options: optionsData,
+  width: "300px",
+  disabled: false,
+  error: true,
+  errorMessage: "Error example: Story for the multi dropdown state with error message ...",
+  selectedValue: null,
+  xIconShow: false
+};