sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/DownloadProgress.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Succeeded = exports.InProgress = exports.Failed = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DownloadProgress = _interopRequireDefault(require("./components/DownloadProgress"));
+var _default = exports.default = {
+  title: 'SAG BI/DownloadProgress',
+  component: _DownloadProgress.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title text ',
+      defaultValue: ''
+    },
+    succeededMessage: {
+      name: 'succeededMessage',
+      control: {
+        type: 'text'
+      },
+      description: 'succeededMessage text ',
+      defaultValue: ''
+    },
+    downloadStatus: {
+      name: 'downloadStatus',
+      control: {
+        type: 'radio'
+      },
+      options: ['inProgress', 'succeeded', 'failed'],
+      description: 'succeededMessage text '
+    },
+    showShadow: {
+      name: 'showShadow',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show Shadow  '
+    },
+    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'
+    },
+    onTryAgainClick: {
+      action: 'onTryAgainClick',
+      description: 'returns an event onTryAgainClick object when user clicks on a button'
+    },
+    className: {
+      name: 'className',
+      control: {
+        type: 'text'
+      },
+      description: 'title text ',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DownloadProgress.default, args);
+const InProgress = exports.InProgress = Template.bind({});
+InProgress.args = {
+  title: 'CPG presentation shopper marketing , supplier name ',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'inProgress',
+  showShadow: true,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17'
+};
+const Succeeded = exports.Succeeded = Template.bind({});
+Succeeded.args = {
+  title: 'CPG report shopper marketing, supplier name',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'succeeded',
+  showShadow: false,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17'
+};
+const Failed = exports.Failed = Template.bind({});
+Failed.args = {
+  title: 'CPG presentation shopper marketing , supplier name ',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'failed',
+  showShadow: false,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17'
+};

package/dist/stories/Dropdown.stories.js

@@ -0,0 +1,318 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UpDownArrowIcon = exports.SmallSquare = exports.SmallRound = exports.SearchIcon = exports.LargeSquareWithIcons = exports.LargeRoundWithoutIcons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Dropdown = require("./components/Dropdown");
+const options = [{
+  id: 0,
+  label: 'Shufersal'
+}, {
+  id: 1,
+  label: 'EPC'
+}, {
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}, {
+  id: 4,
+  label: 'Giant Food'
+}, {
+  id: 5,
+  label: 'The Giant Company'
+}, {
+  id: 6,
+  label: 'Stop&Shop'
+}, {
+  id: 7,
+  label: 'Price Chopper'
+}, {
+  id: 8,
+  label: 'South Eastern Grocers'
+}];
+const filterMultiSelectData1 = [{
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/Dropdown',
+  component: _Dropdown.Dropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field',
+      defaultValue: '300px'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'large'],
+      description: 'size: small/large'
+    },
+    text: {
+      name: 'text',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the input field',
+      defaultValue: 'Search...'
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      control: {
+        type: 'text'
+      },
+      description: 'notify the user how to type a text',
+      defaultValue: 'Type...'
+    },
+    multiSelect: {
+      name: 'multiSelect',
+      // control: { type: "boolean",
+      //            },
+      control: false,
+      description: 'true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)'
+    },
+    limitTagsOnMultiSelect: {
+      name: 'limitTagsOnMultiSelect',
+      control: {
+        type: 'number'
+      },
+      description: 'limit noumber displayed tags on multi select when not focused'
+    },
+    options: {
+      description: 'array [] of objects: {id: string1 , label: string2 } to fill dropdown options '
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    showPopupIcon: {
+      name: 'showPopupIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide popup (up/down arrow) icon'
+    },
+    showSearchIcon: {
+      name: 'showSearchIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide search icon '
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    onInputChange: {
+      action: 'onInputChange',
+      description: 'returns a value (string) displayed in the textbox'
+    },
+    labelColor: {
+      name: 'labelColor',
+      description: 'Sets label color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    required: {
+      name: 'required',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is required'
+    },
+    disableClearable: {
+      name: 'disableClearable',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable Clearable functionality'
+    },
+    defaultValue: {
+      name: 'defaultValue',
+      control: {
+        type: 'object'
+      },
+      description: 'default value to set on input field  '
+    },
+    reset: {
+      name: 'reset',
+      control: {
+        type: 'boolean'
+      },
+      description: 'reset component'
+    },
+    allowedInput: {
+      name: 'allowedInput',
+      control: {
+        type: 'radio'
+      },
+      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
+      description: 'allowed input characters: numbers, alphabet ot both'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    dropdownListfontSize: {
+      name: 'dropdownListfontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'dropdown List font Size'
+    },
+    placeHolderFontSize: {
+      name: 'placeHolderFontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'Place holder Font Size'
+    }
+
+    // filterOptionsMultiSelect: {
+    //   description:
+    //     "array [] of objects: {id: string1 , label: string2 } to fill dropdown filter - only for multiselect ",
+    // },
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, args);
+const SmallSquare = exports.SmallSquare = Template.bind({});
+SmallSquare.args = {
+  width: '300px',
+  size: 'small',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type...',
+  shape: 'square',
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options,
+  labelColor: '#1B30AA',
+  allowedInput: 'all',
+  disableClearable: false,
+  disabled: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};
+const SmallRound = exports.SmallRound = Template.bind({});
+SmallRound.args = {
+  width: '300px',
+  size: 'small',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options,
+  labelColor: '#1B30AA',
+  defaultValue: {
+    id: 2,
+    label: 'Food Lion'
+  },
+  allowedInput: 'all',
+  disableClearable: true,
+  disabled: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};
+const UpDownArrowIcon = exports.UpDownArrowIcon = Template.bind({});
+UpDownArrowIcon.args = {
+  width: '100%',
+  size: 'large',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  showSearchIcon: false,
+  options,
+  labelColor: '#066768',
+  required: true,
+  defaultValue: {
+    id: 2,
+    label: 'Food Lion'
+  },
+  allowedInput: 'alpha',
+  reset: false,
+  disabled: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};
+const SearchIcon = exports.SearchIcon = Template.bind({});
+SearchIcon.args = {
+  width: '300px',
+  size: 'small',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: false,
+  showSearchIcon: true,
+  options,
+  labelColor: '#1B30AA',
+  allowedInput: 'all',
+  disabled: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};
+const LargeRoundWithoutIcons = exports.LargeRoundWithoutIcons = Template.bind({});
+LargeRoundWithoutIcons.args = {
+  width: '400px',
+  size: 'large',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type part of name...',
+  shape: 'round',
+  showPopupIcon: false,
+  showSearchIcon: false,
+  options,
+  labelColor: '#066768',
+  allowedInput: 'all',
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};
+const LargeSquareWithIcons = exports.LargeSquareWithIcons = Template.bind({});
+LargeSquareWithIcons.args = {
+  width: '400px',
+  size: 'large',
+  text: 'Retailer',
+  multiSelect: false,
+  limitTagsOnMultiSelect: 0,
+  placeHolder: 'Type part of name...',
+  shape: 'square',
+  showPopupIcon: true,
+  showSearchIcon: true,
+  options,
+  labelColor: '#066768',
+  allowedInput: 'all',
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px'
+};

package/dist/stories/DropdownMulti.stories.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiSelectLarge = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DropdownMulti = require("./components/DropdownMulti");
+const options = [{
+  id: 0,
+  label: 'Shufersal'
+}, {
+  id: 1,
+  label: 'EPC'
+}, {
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}, {
+  id: 4,
+  label: 'Giant Food'
+}, {
+  id: 5,
+  label: 'The Giant Company'
+}, {
+  id: 6,
+  label: 'Stop&Shop'
+}, {
+  id: 7,
+  label: 'Price Chopper'
+}, {
+  id: 8,
+  label: 'South Eastern Grocers'
+}];
+const filterMultiSelectData1 = [{
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/DropdownMulti',
+  component: _DropdownMulti.DropdownMulti,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field',
+      defaultValue: '300px'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'large'],
+      description: 'size: small/large'
+    },
+    text: {
+      name: 'text',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the input field',
+      defaultValue: 'Search...'
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      control: {
+        type: 'text'
+      },
+      description: 'notify the user how to type a text',
+      defaultValue: 'Type...'
+    },
+    multiSelect: {
+      name: 'multiSelect',
+      // control: { type: "boolean",
+      //            },
+      control: false,
+      description: 'true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)'
+    },
+    limitTagsOnMultiSelect: {
+      name: 'limitTagsOnMultiSelect',
+      control: {
+        type: 'number'
+      },
+      description: 'limit noumber displayed tags on multi select when not focused'
+    },
+    options: {
+      description: 'array [] of objects: {id: string1 , label: string2 } to fill DropdownMulti options '
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    showPopupIcon: {
+      name: 'showPopupIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide popup (up/down arrow) icon'
+    },
+    showSearchIcon: {
+      name: 'showSearchIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide search icon '
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    onInputChange: {
+      action: 'onInputChange',
+      description: 'returns a value (string) displayed in the textbox'
+    },
+    labelColor: {
+      name: 'labelColor',
+      description: 'Sets label color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    required: {
+      name: 'required',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is required'
+    },
+    disableClearable: {
+      name: 'disableClearable',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable Clearable functionality'
+    },
+    reset: {
+      name: 'reset',
+      control: {
+        type: 'boolean'
+      },
+      description: 'reset component'
+    },
+    allowedInput: {
+      name: 'allowedInput',
+      control: {
+        type: 'radio'
+      },
+      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
+      description: 'allowed input characters: numbers, alphabet ot both'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    dropdownListfontSize: {
+      name: 'dropdownListfontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'DropdownMulti List font Size'
+    },
+    placeHolderFontSize: {
+      name: 'placeHolderFontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'Place holder Font Size'
+    },
+    // filterOptionsMultiSelect: {
+    //   description:
+    //     "array [] of objects: {id: string1 , label: string2 } to fill DropdownMulti filter - only for multiselect ",
+    // },
+
+    dropdownMultiMaxWidth: {
+      name: 'dropdownMultiMaxWidth',
+      control: {
+        type: 'text'
+      },
+      description: 'dropdownMulti Fixed Max Width'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownMulti, args);
+const MultiSelectLarge = exports.MultiSelectLarge = Template.bind({});
+MultiSelectLarge.args = {
+  name: 'MultiSelectLarge',
+  width: '500px',
+  size: 'large',
+  text: 'Retailer',
+  limitTagsOnMultiSelect: 2,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  showSearchIcon: false,
+  options,
+  labelColor: '#1B30AA',
+  required: true,
+  allowedInput: 'all',
+  reset: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px',
+  dropdownMultiMaxWidth: '300px'
+};