sag_components 1.0.7 → 1.0.8

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/SegmentedButton.style.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  font: ", "; \n  margin: 100px 0 25px;\n  --highlight-width: auto;\n  --highlight-x-pos: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), function (props) {
-  var _props$fontSize;
-  return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat("", "px Lato, sans-serif");
-});
-exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  justify-content: space-between;  \n  background: ", ";\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius:  ", "; //12px\n  // max-width: 500px; //use this to limit max lenght of the control \n  padding: 6px;  \n  margin: auto;\n  overflow: hidden;\n  position: relative;\n  &.controls::before {\n    content: \"\";\n    background:  ", "; /* #3a9df9;  #5465ff;*/\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    border-radius:  ", "; //12px\n    width: var(--highlight-width);\n    transform: translateX(var(--highlight-x-pos));\n    position: absolute;\n    top: 6px;\n    bottom: 6px;\n    left: 0;\n    z-index: 0;\n  }\n  &.controls.ready::before {\n    transition: transform 0.3s ease, width 0.3s ease;\n  }\n"])), function (props) {
-  return props.backgroundColor;
-}, function (props) {
-  return props.controlRadius.toString().concat("", "px");
-}, function (props) {
-  return props.selectedSegmentColor;
-}, function (props) {
-  return props.segmentRadius.toString().concat("", "px");
-});
-exports.Controls = Controls;
-var ControlsInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 0;\n  margin: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n"])));
-exports.ControlsInput = ControlsInput;
-var Segment = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 100%; uncomment for each segment to have matching width */  \n  min-width: ", ";  //120px;\n  position: relative;\n  text-align: center;\n  z-index: 1;  \n"])), function (props) {
-  return props.segmentWidth.toString().concat("", "px");
-});
-exports.Segment = Segment;
-var SegmentLabel = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  //font-weight: 550;\n  padding: ", "; //10px;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.segmentHeigth.toString().concat("", "px");
-}, function (props) {
-  return props.selectedTextColor;
-}, function (props) {
-  return props.unselectedTextColor;
-});
-exports.SegmentLabel = SegmentLabel;

package/dist/stories/components/Button.js

@@ -1,59 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Button = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
-var _excluded = ["text", "shape", "size", "disabled", "radius", "textColor", "backgroundColor", "onClick"];
-var Button = function Button(_ref) {
-  var text = _ref.text,
-    shape = _ref.shape,
-    size = _ref.size,
-    disabled = _ref.disabled,
-    radius = _ref.radius,
-    textColor = _ref.textColor,
-    backgroundColor = _ref.backgroundColor,
-    _onClick = _ref.onClick,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var getTextColor = function getTextColor() {
-    if (!textColor || textColor == "" || textColor == "none") {
-      //default when parameter was not set
-      if (shape === "contained") {
-        return "white";
-      } else {
-        return "black";
-      }
-    } else {
-      return textColor;
-    }
-  };
-  return /*#__PURE__*/React.createElement(_Stack.default, {
-    direction: "row",
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(_Button.default, {
-    sx: {
-      textTransform: "none",
-      borderRadius: radius * 0.05,
-      color: getTextColor(),
-      //  shape === "contained" ? "white" : "black",
-      backgroundColor: {
-        backgroundColor: backgroundColor
-      }
-    },
-    variant: shape,
-    size: size,
-    disabled: disabled ? true : false,
-    onClick: function onClick(event) {
-      _onClick(event);
-    }
-  }, text));
-};
-exports.Button = Button;
-var _default = Button;
-exports.default = _default;

package/dist/stories/components/Dropdown.js

@@ -1,237 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Dropdown = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _DropdownStyle = require("../Dropdown.style.js");
-var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
-var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
-var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
-var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown.js"));
-//import PropTypes from "prop-types";
-
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
-var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
-  fontSize: "small"
-});
-var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
-  fontSize: "small"
-});
-
-/**
- *  SAG Dropdown
- */
-var Dropdown = function Dropdown(_ref) {
-  var width = _ref.width,
-    size = _ref.size,
-    text = _ref.text,
-    shape = _ref.shape,
-    placeHolder = _ref.placeHolder,
-    multiSelect = _ref.multiSelect,
-    limitTagsOnMultiSelect = _ref.limitTagsOnMultiSelect,
-    showPopupIcon = _ref.showPopupIcon,
-    showSearchIcon = _ref.showSearchIcon,
-    options = _ref.options,
-    onChange = _ref.onChange,
-    onInputChange = _ref.onInputChange;
-  /**
-   *  SAG Dropdown
-   */
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentInputValue = _useState2[0],
-    setCurrentInputValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    currentOption = _useState4[0],
-    setCurrentOption = _useState4[1];
-  (0, _react.useEffect)(function () {
-    var delayDebounceFn = setTimeout(function () {
-      onInputChange(currentInputValue);
-    }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
-  }, [currentInputValue]);
-
-  //defines shape: squire or round
-  var getTextFieldStyle = function getTextFieldStyle() {
-    if (shape === "round") {
-      // round
-      return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "50px",
-          legend: {
-            marginLeft: "30px"
-          }
-        },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "20px !important",
-          borderRadius: "50px"
-        },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "20px"
-        },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "20px",
-          paddingLeft: "10px",
-          paddingRight: 0,
-          background: "white"
-        }
-      };
-    } else {
-      //square
-      return null;
-    }
-  };
-  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
-    setCurrentInputValue({
-      syntheticBaseEvent: event,
-      inputValue: newInputValue
-    });
-  };
-  var onChangeHandler = function onChangeHandler(event, newValue) {
-    setCurrentOption(newValue);
-    onChange(event, newValue);
-  };
-  var getAutocompleteSingle = function getAutocompleteSingle() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      disablePortal: true,
-      id: "combo-box",
-      options: options,
-      sx: {
-        width: width
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
-      forcePopupIcon: "auto",
-      renderInput: function renderInput(params) {
-        return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            })) : null
-          })
-        }));
-      }
-    });
-  };
-  var getAutocompleteMulti = function getAutocompleteMulti() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-      onChange: function onChange(event, newValue) {
-        onChangeHandler(event, newValue);
-      },
-      onInputChange: function onInputChange(event, newInputValue) {
-        onInputChangeHandler(event, newInputValue);
-      },
-      multiple: true,
-      limitTags: limitTagsOnMultiSelect,
-      size: size,
-      id: "checkboxes-tags",
-      options: options,
-      disableCloseOnSelect: true,
-      getOptionLabel: function getOptionLabel(option) {
-        return option.label;
-      },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
-      renderOption: function renderOption(props, option, _ref2) {
-        var selected = _ref2.selected;
-        return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-          icon: icon,
-          checkedIcon: checkedIcon,
-          style: {
-            marginRight: 8
-          },
-          checked: selected
-        }), option.label);
-      },
-      style: {
-        width: width
-      },
-      renderInput: function renderInput(params) {
-        return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder,
-          InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
-            startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-              position: "start"
-            }, /*#__PURE__*/_react.default.createElement(_Search.default, {
-              fontSize: "medium"
-            }))
-          })
-        })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
-          label: text,
-          size: size,
-          sx: getTextFieldStyle(),
-          placeholder: placeHolder
-        }));
-      }
-    });
-  };
-  return /*#__PURE__*/_react.default.createElement(_DropdownStyle.DropdownContainer, {
-    width: width
-  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
-};
-
-// Dropdown.propTypes = {
-//   /**
-//    *  dropdown width
-//    */
-//   width: PropTypes.string,
-
-//   /**
-//    *  dropdown size: small/large
-//    */
-//   size: PropTypes.string,
-
-//   /**
-//    * dropdown initial input text
-//    */
-//   text: PropTypes.string,
-
-//   /**
-//    * arrayOf <T> - options array to load into dropdown
-//    */
-//   options: PropTypes.arrayOf,
-
-//   /**
-//    *  shape: round/square
-//    */
-//   shape: PropTypes.string,
-// };
-
-// Dropdown.defaultProps = {
-//   width: 300,
-//   size: "small",
-//   text: "Select retailer...",
-//   options: [],
-//   shape: "round",
-// };
-exports.Dropdown = Dropdown;
-var _default = Dropdown;
-exports.default = _default;

package/dist/stories/components/InfoIcon.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var InfoIcon = function InfoIcon(_ref) {
-  var clicked = _ref.clicked;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: clicked ? "white" : "black",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "feather feather-info"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12",
-    y2: "12"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "8"
-  }));
-};
-exports.InfoIcon = InfoIcon;
-var _default = InfoIcon;
-exports.default = _default;

package/dist/stories/components/OneColumnContainer.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OneColumnContainer = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _OneColumnContainer = require("../OneColumnContainer.style");
-var _InfoIcon = require("./InfoIcon");
-var _excluded = ["width", "height", "infoText"];
-/**
- * Primary UI component for user interaction
- */
-var OneColumnContainer = function OneColumnContainer(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    infoText = _ref.infoText,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
-  var onInfoClick = function onInfoClick() {
-    setClicked(!clicked);
-  };
-  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
-    clicked: clicked,
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextLabel, null, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
-    onClick: onInfoClick
-  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-    clicked: clicked
-  })));
-};
-exports.OneColumnContainer = OneColumnContainer;
-OneColumnContainer.defaultProps = {};
-var _default = OneColumnContainer;
-exports.default = _default;