sag_components 1.0.30 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/App.js

@@ -1,111 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _logo = _interopRequireDefault(require("./logo.svg"));
-require("./App.css");
-var _react = require("react");
-var _Button = _interopRequireDefault(require("./stories/components/Button"));
-var _Dropdown = _interopRequireDefault(require("./stories/components/Dropdown"));
-var _SegmentedButton = _interopRequireDefault(require("./stories/components/SegmentedButton"));
-var _TotalDoughnutChart = _interopRequireDefault(require("./stories/components/TotalDoughnutChart"));
-var _OneColumnContainer = _interopRequireDefault(require("./stories/components/OneColumnContainer"));
-var onChangehandler = function onChangehandler(event, newValue) {
-  console.log("Dropdown onChange event returned:");
-  console.log(newValue);
-};
-var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
-  console.log("Dropdown onInputChange event returned:");
-  console.log(newInputValue);
-};
-function App() {
-  var options = [{
-    id: "1",
-    label: "Shufersal"
-  }, {
-    id: "2",
-    label: "EPC"
-  }, {
-    id: "3",
-    label: "Food Lion"
-  }, {
-    id: "4",
-    label: "Hannaford"
-  }, {
-    id: "5",
-    label: "Giant Food"
-  }, {
-    id: "6",
-    label: "The Giant Company"
-  }, {
-    id: "7",
-    label: "Stop&Shop"
-  }, {
-    id: "8",
-    label: "Price Chopper"
-  }, {
-    id: "9",
-    label: "South Eastern Grocers"
-  }];
-  var segmentsArr1 = [{
-    label: "Complete",
-    value: "complete"
-  }, {
-    label: "Incomplete",
-    value: "incomplete"
-  }, {
-    label: "Pending",
-    value: "pending"
-  }];
-  var segmentsArr2 = [{
-    label: "First",
-    value: "first"
-  }, {
-    label: "Second",
-    value: "second"
-  }, {
-    label: "Third",
-    value: "third"
-  }];
-  var _useState = (0, _react.useState)("complete"),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedValue1 = _useState2[0],
-    setSelectedValue1 = _useState2[1];
-  var _useState3 = (0, _react.useState)("complete"),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selectedValue2 = _useState4[0],
-    setSelectedValue2 = _useState4[1];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "App"
-  }, /*#__PURE__*/React.createElement(_OneColumnContainer.default, {
-    height: "250px",
-    infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
-    width: "250px"
-  }), /*#__PURE__*/React.createElement(_TotalDoughnutChart.default, {
-    currency: true,
-    currencyType: "USD",
-    dotCut: true,
-    height: 374,
-    legendData: [{
-      color: "#85A1D2",
-      currency: "USD",
-      name: "Package Cost",
-      value: 30000
-    }, {
-      color: "#9AE6FF",
-      currency: "USD",
-      name: "Redemption Cost",
-      value: 6500
-    }],
-    textColor: "#212121",
-    title: "Total Cost",
-    value: 36500,
-    width: 336
-  }));
-}
-var _default = App;
-exports.default = _default;

package/dist/App.test.js

@@ -1,10 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
-var _App = _interopRequireDefault(require("./App"));
-test('renders learn react link', function () {
-  (0, _react.render)( /*#__PURE__*/React.createElement(_App.default, null));
-  var linkElement = _react.screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

package/dist/stories/Benchmark.stories.js

@@ -1,122 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LessAvarage = exports.GreaterAvarage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Benchmark = require("./components/Benchmark");
-var _default = {
-  title: "SAG BI/Benchmark",
-  component: _Benchmark.Benchmark,
-  tags: ["autodocs"],
-  argTypes: {
-    currentValue: {
-      name: "currentValue",
-      control: {
-        type: "number",
-        min: 0,
-        max: 100000000000000
-      },
-      description: "curent value (<=100%) "
-    },
-    totalValue: {
-      name: "totalValue",
-      control: {
-        type: "number",
-        min: 0,
-        max: 100000000000000
-      },
-      description: "total value (100%) "
-    },
-    width: {
-      name: "width",
-      control: {
-        type: "number",
-        min: 0,
-        max: 600
-      },
-      description: "width of the control (in px)"
-    },
-    height: {
-      name: "height",
-      control: {
-        type: "number",
-        min: 0,
-        max: 600
-      },
-      description: "height of the control (in px)"
-    },
-    color: {
-      name: "color",
-      description: "Sets the color of current value when it is greater then 50% of total value",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    linearGradientColor: {
-      name: "linearGradientColor",
-      description: "Sets the linear-Gradient color of current value when it is greater then 50% of total value",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    underAvarageColor: {
-      name: "underAvarageColor",
-      description: "Sets the color of current value when it is under 50% of total value",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    linearGradientUnderAvarageColor: {
-      name: "linearGradientUnderAvarageColor",
-      description: "Sets the linear-Gradient color of current value when it is under 50% of total value",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    backgroundColor: {
-      name: "backgroundColor",
-      description: "Sets the background color of the control",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, args);
-};
-var GreaterAvarage = Template.bind({});
-exports.GreaterAvarage = GreaterAvarage;
-GreaterAvarage.args = {
-  totalValue: 100000,
-  currentValue: 60000,
-  width: 100,
-  height: 12,
-  color: "#79DB95",
-  linearGradientColor: "#C3EFD0",
-  underAvarageColor: "#FD5959",
-  linearGradientUnderAvarageColor: "#FDB1B1",
-  backgroundColor: "#F2F2F2"
-};
-var LessAvarage = Template.bind({});
-exports.LessAvarage = LessAvarage;
-LessAvarage.args = {
-  totalValue: 1000,
-  currentValue: 400,
-  width: 100,
-  height: 12,
-  color: "#79DB95",
-  linearGradientColor: "#C3EFD0",
-  underAvarageColor: "#FD5959",
-  linearGradientUnderAvarageColor: "#FDB1B1",
-  backgroundColor: "#F2F2F2"
-};

package/dist/stories/Button.stories.js

@@ -1,117 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SmallContainedStyle = exports.MediumOutlinedStyle = exports.LargeTextStyle = exports.DisabledContainedStyle = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Button = require("./components/Button");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = {
-  title: "SAG/Button",
-  component: _Button.Button,
-  tags: ["autodocs"],
-  argTypes: {
-    text: {
-      name: "text",
-      control: {
-        type: "text"
-      },
-      description: "text inside of the button",
-      defaultValue: ""
-    },
-    shape: {
-      control: {
-        type: "radio"
-      },
-      options: ["contained", "outlined", "text"],
-      description: "shape of the button"
-    },
-    radius: {
-      name: "radius",
-      control: {
-        type: "number"
-      },
-      description: "radius of the button",
-      defaultValue: 50
-    },
-    size: {
-      control: {
-        type: "radio"
-      },
-      options: ["small", "medium", "large"],
-      description: "size of the button"
-    },
-    disabled: {
-      name: "disabled",
-      control: {
-        type: "boolean"
-      },
-      description: "changes the button to be enabled/disabled",
-      defaultValue: ""
-    },
-    backgroundColor: {
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
-        description: "Sets Background Color"
-      }
-    },
-    textColor: {
-      control: {
-        type: "select"
-      },
-      options: ["none", "inherit", "black", "green", "red", "yellow", "blue", "white"],
-      description: "text color of the button"
-    },
-    onClick: {
-      action: "onClick",
-      description: "returns an event click object when user clicks on a button"
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Button.Button, args);
-};
-var SmallContainedStyle = Template.bind({});
-exports.SmallContainedStyle = SmallContainedStyle;
-SmallContainedStyle.args = {
-  text: "Confirm",
-  shape: "contained",
-  radius: 50,
-  size: "small",
-  textColor: "none",
-  disabled: false
-};
-var DisabledContainedStyle = Template.bind({});
-exports.DisabledContainedStyle = DisabledContainedStyle;
-DisabledContainedStyle.args = {
-  size: "small",
-  text: "Confirm",
-  shape: "contained",
-  radius: 50,
-  textColor: "inherit",
-  disabled: true
-};
-var MediumOutlinedStyle = Template.bind({});
-exports.MediumOutlinedStyle = MediumOutlinedStyle;
-MediumOutlinedStyle.args = {
-  text: "Confirm",
-  size: "medium",
-  radius: 50,
-  shape: "outlined",
-  textColor: "",
-  disabled: false
-};
-var LargeTextStyle = Template.bind({});
-exports.LargeTextStyle = LargeTextStyle;
-LargeTextStyle.args = {
-  text: "Confirm",
-  size: "large",
-  radius: 50,
-  shape: "text",
-  textColor: "inherit",
-  disabled: false
-};

package/dist/stories/Dropdown.stories.js

@@ -1,252 +0,0 @@
-"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.MultiSelectWithIcons = exports.MultiSelectSmall = exports.MultiSelectLarge = exports.LargeSquareWithIcons = exports.LargeRoundWithoutIcons = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Dropdown = require("./components/Dropdown");
-var 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"
-}];
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = {
-  title: "SAG/Dropdown",
-  component: _Dropdown.Dropdown,
-  tags: ["autodocs"],
-  argTypes: {
-    width: {
-      control: {
-        type: "number"
-      },
-      description: "width of the input field",
-      defaultValue: 300
-    },
-    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"
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, args);
-};
-var SmallSquare = Template.bind({});
-exports.SmallSquare = SmallSquare;
-SmallSquare.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options
-};
-var SmallRound = Template.bind({});
-exports.SmallRound = SmallRound;
-SmallRound.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options
-};
-var UpDownArrowIcon = Template.bind({});
-exports.UpDownArrowIcon = UpDownArrowIcon;
-UpDownArrowIcon.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: true,
-  showSearchIcon: false,
-  options: options
-};
-var SearchIcon = Template.bind({});
-exports.SearchIcon = SearchIcon;
-SearchIcon.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: true,
-  options: options
-};
-var MultiSelectSmall = Template.bind({});
-exports.MultiSelectSmall = MultiSelectSmall;
-MultiSelectSmall.args = {
-  width: 400,
-  size: "small",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options
-};
-var MultiSelectLarge = Template.bind({});
-exports.MultiSelectLarge = MultiSelectLarge;
-MultiSelectLarge.args = {
-  width: 500,
-  size: "large",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options
-};
-var MultiSelectWithIcons = Template.bind({});
-exports.MultiSelectWithIcons = MultiSelectWithIcons;
-MultiSelectWithIcons.args = {
-  width: 500,
-  size: "large",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: true,
-  showSearchIcon: true,
-  options: options
-};
-var LargeRoundWithoutIcons = Template.bind({});
-exports.LargeRoundWithoutIcons = LargeRoundWithoutIcons;
-LargeRoundWithoutIcons.args = {
-  width: 400,
-  size: "large",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type part of name...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options
-};
-var LargeSquareWithIcons = Template.bind({});
-exports.LargeSquareWithIcons = LargeSquareWithIcons;
-LargeSquareWithIcons.args = {
-  width: 400,
-  size: "large",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type part of name...",
-  shape: "square",
-  showPopupIcon: true,
-  showSearchIcon: true,
-  options: options
-};

package/dist/stories/OneColumnContainer.stories.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Primary = void 0;
-var _OneColumnContainer = require("./components/OneColumnContainer");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = {
-  title: 'Sag BI/OneColumnContainer',
-  component: _OneColumnContainer.OneColumnContainer,
-  tags: ['autodocs']
-}; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-exports.default = _default;
-var Primary = {
-  args: {
-    infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
-    width: "250px",
-    height: "250px"
-  }
-};
-exports.Primary = Primary;

package/dist/stories/SegmentedButton.stories.js

@@ -1,187 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SegmentedFilter = exports.Period = exports.DollarsOrUnits = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SegmentedButton = require("./components/SegmentedButton");
-var arrSegmentedFilters = [{
-  value: "Total"
-}, {
-  value: "Ecommerce"
-}, {
-  value: "In Store"
-}];
-var arrDollarsOrUnits = [{
-  value: "Dollars"
-}, {
-  value: "Units"
-}];
-var arrPeriod = [{
-  value: "52 w"
-}, {
-  value: "26 w"
-}, {
-  value: "13 w"
-}];
-var _default = {
-  title: "SAG/SegmentedButton",
-  component: _SegmentedButton.SegmentedButton,
-  tags: ["autodocs"],
-  argTypes: {
-    name: {
-      name: "name",
-      control: {
-        type: "text"
-      },
-      description: "name of the object"
-    },
-    backgroundColor: {
-      name: "backgroundColor",
-      description: "Sets Background Color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    selectedSegmentColor: {
-      name: "selectedSegmentColor",
-      description: "Sets selected Segment Color Color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    selectedTextColor: {
-      name: "selectedTextColor",
-      description: "Sets selected text Color",
-      control: {
-        type: "color",
-        presetColors: ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    unselectedTextColor: {
-      name: "unselectedTextColor",
-      description: "Sets unselected text Color",
-      control: {
-        type: "color",
-        presetColors: ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    defaultIndex: {
-      name: "defaultIndex",
-      control: {
-        type: "number",
-        min: 0,
-        max: 20
-      },
-      description: "set default index to init segmented button component (in px)"
-    },
-    segmentWidth: {
-      name: "segmentWidth",
-      control: {
-        type: "number",
-        min: 0,
-        max: 300
-      },
-      description: "width of the segment in the control (in px)"
-    },
-    controlRadius: {
-      name: "controlRadius",
-      control: {
-        type: "number",
-        min: 0,
-        max: 40
-      },
-      description: "radius of the control corners (in px) "
-    },
-    segmentRadius: {
-      name: "segmentRadius",
-      control: {
-        type: "number",
-        min: 0,
-        max: 40
-      },
-      description: "radius of the selected segment corners (in px)"
-    },
-    segmentHeigth: {
-      name: "segmentHeigth",
-      control: {
-        type: "number",
-        min: 0,
-        max: 100
-      },
-      description: "height of the segments "
-    },
-    fontSize: {
-      name: "fontSize",
-      control: {
-        type: "number",
-        min: 9,
-        max: 40
-      },
-      description: "font size (in px)"
-    },
-    options: {
-      description: "array [] of objects: {value: string } to fill segmented buttons "
-    },
-    onClick: {
-      action: "onClick",
-      description: "onClick event - returns an object of selected button {index: number, value: string} "
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, args);
-};
-var SegmentedFilter = Template.bind({});
-exports.SegmentedFilter = SegmentedFilter;
-SegmentedFilter.args = {
-  name: "segmentedFilter",
-  options: arrSegmentedFilters,
-  defaultIndex: 0,
-  segmentWidth: 120,
-  controlRadius: 8,
-  segmentRadius: 8,
-  segmentHeigth: 40,
-  fontSize: 14,
-  backgroundColor: "#ECF0FF",
-  selectedSegmentColor: '#fcfcfc',
-  selectedTextColor: '#000000',
-  unselectedTextColor: '#000000'
-};
-var DollarsOrUnits = Template.bind({});
-exports.DollarsOrUnits = DollarsOrUnits;
-DollarsOrUnits.args = {
-  name: "segmentedDollarsOrUnits",
-  options: arrDollarsOrUnits,
-  defaultIndex: 1,
-  segmentWidth: 100,
-  controlRadius: 8,
-  segmentRadius: 8,
-  segmentHeigth: 40,
-  fontSize: 14,
-  backgroundColor: "#ECF0FF",
-  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
-  selectedTextColor: '#ffffff',
-  unselectedTextColor: '#000000'
-};
-var Period = Template.bind({});
-exports.Period = Period;
-Period.args = {
-  name: "period",
-  options: arrPeriod,
-  defaultIndex: 1,
-  segmentWidth: 60,
-  controlRadius: 8,
-  segmentRadius: 8,
-  segmentHeigth: 41,
-  fontSize: 14,
-  backgroundColor: "#ECF0FF",
-  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
-  selectedTextColor: '#ffffff',
-  unselectedTextColor: '#000000'
-};

package/dist/stories/TotalDoughnutChart.stories.js

@@ -1,136 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TotalCost3rows = exports.TotalCost = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TotalDoughnutChart = require("./components/TotalDoughnutChart");
-var arrLegendData = [{
-  name: "Package Cost",
-  value: 30000,
-  color: "#85A1D2"
-}, {
-  name: "Redemption Cost",
-  value: 6500,
-  color: "#9AE6FF"
-}];
-var arrLegendDat3rows = [{
-  name: "Package Cost",
-  value: 30000,
-  color: "#85A1D2"
-}, {
-  name: "Existing Redeemers",
-  value: 6500,
-  color: "#9AE6FF"
-}, {
-  name: "Others",
-  value: 20000,
-  color: "#FD5959"
-}
-// { name: "My test 2", value: 35000, color: "#79DB95"},
-];
-var _default = {
-  title: "SAG BI/TotalDoughnutChart",
-  component: _TotalDoughnutChart.TotalDoughnutChart,
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      name: "title",
-      control: {
-        type: "text"
-      },
-      description: "title on top of the component"
-    },
-    value: {
-      name: "value",
-      control: {
-        type: "number",
-        min: 0,
-        max: 100000000000000
-      },
-      description: "value (total) "
-    },
-    dotCut: {
-      name: "dotCut",
-      control: {
-        type: "boolean"
-      },
-      description: "true/false - format total value with dot cut"
-    },
-    currency: {
-      name: "currency",
-      control: {
-        type: "boolean"
-      },
-      description: "true/false - show/hide currency before total value"
-    },
-    currencyType: {
-      name: "currencyType",
-      options: ["USD", "EUR", "ILS", "GBP", "JPY"],
-      control: {
-        type: "select"
-      }
-    },
-    width: {
-      name: "width",
-      control: {
-        type: "number",
-        min: 0,
-        max: 600
-      },
-      description: "width of the control (in px)"
-    },
-    height: {
-      name: "height",
-      control: {
-        type: "number",
-        min: 0,
-        max: 600
-      },
-      description: "height of the control (in px)"
-    },
-    textColor: {
-      name: "textColor",
-      description: "Sets the text color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    },
-    legendData: {
-      description: "array [] of objects: {displayName: string, value:number} to fill the pie chart "
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, args);
-};
-var TotalCost = Template.bind({});
-exports.TotalCost = TotalCost;
-TotalCost.args = {
-  title: "Total Cost",
-  value: 36500,
-  dotCut: true,
-  currency: true,
-  currencyType: "USD",
-  legendData: arrLegendData,
-  width: 260,
-  height: 350,
-  textColor: "#212121"
-};
-var TotalCost3rows = Template.bind({});
-exports.TotalCost3rows = TotalCost3rows;
-TotalCost3rows.args = {
-  title: "Total Cost",
-  value: 56500,
-  dotCut: true,
-  currency: true,
-  currencyType: "USD",
-  legendData: arrLegendDat3rows,
-  width: 260,
-  height: 350,
-  textColor: "#212121"
-};