sag_components 1.0.8 → 1.0.9

package/dist/stories/SegmentedButton.stories.js

@@ -0,0 +1,187 @@
+"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

@@ -0,0 +1,39 @@
+"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

@@ -0,0 +1,59 @@
+"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

@@ -0,0 +1,237 @@
+"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

@@ -0,0 +1,38 @@
+"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

@@ -0,0 +1,50 @@
+"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 = ["className", "ref", "width", "height", "infoText"];
+/**
+ * Primary UI component for user interaction
+ */
+var OneColumnContainer = function OneColumnContainer(_ref) {
+  var className = _ref.className,
+    ref = _ref.ref,
+    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, {
+    className: className,
+    ref: ref,
+    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;