sag_components 1.0.2 → 1.0.4

package/dist/App.js

@@ -5,10 +5,13 @@ 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 _Button = require("./stories/Button");
-var _Dropdown = _interopRequireDefault(require("./stories/Dropdown"));
+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 onChangehandler = function onChangehandler(event, newValue) {
   console.log("Dropdown onChange event returned:");
   console.log(newValue);
@@ -46,6 +49,34 @@ function App() {
     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(_Dropdown.default, {
@@ -66,7 +97,24 @@ function App() {
     shape: "round",
     onChange: onChangehandler,
     onInputChange: onInputChangeHandler
-  }));
+  }), /*#__PURE__*/React.createElement(_SegmentedButton.default, {
+    name: "group1",
+    onClick: function onClick(val) {
+      return setSelectedValue1(val);
+    },
+    segments: segmentsArr1
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "selected-item"
+  }, "Selected: ", selectedValue1), /*#__PURE__*/React.createElement(_SegmentedButton.default, {
+    name: "group2",
+    onClick: function onClick(val) {
+      return setSelectedValue2(val);
+    },
+    defaultIndex: 1,
+    segments: segmentsArr2
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "selected-item"
+  }, "Selected: ", selectedValue2));
 }
 var _default = App;
 exports.default = _default;

package/dist/index.js

@@ -5,10 +5,10 @@ var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
 var _App = _interopRequireDefault(require("./App"));
-require("@fontsource/roboto/300.css");
-require("@fontsource/roboto/400.css");
-require("@fontsource/roboto/500.css");
-require("@fontsource/roboto/700.css");
+// import '@fontsource/roboto/300.css';
+// import '@fontsource/roboto/400.css';
+// import '@fontsource/roboto/500.css';
+// import '@fontsource/roboto/700.css';
 var root = _client.default.createRoot(document.getElementById('root'));
 root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 

package/dist/stories/Button.stories.js

@@ -9,7 +9,7 @@ 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 BI/Button",
+  title: "SAG/Button",
   component: _Button.Button,
   tags: ["autodocs"],
   argTypes: {
@@ -21,12 +21,20 @@ var _default = {
       description: "text inside of the button",
       defaultValue: ""
     },
-    style: {
+    shape: {
       control: {
         type: "radio"
       },
       options: ["contained", "outlined", "text"],
-      description: "style of the button"
+      description: "shape of the button"
+    },
+    radius: {
+      name: "radius",
+      control: {
+        type: "number"
+      },
+      description: "radius of the button",
+      defaultValue: 50
     },
     size: {
       control: {
@@ -43,6 +51,20 @@ var _default = {
       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"
@@ -57,8 +79,10 @@ var SmallContainedStyle = Template.bind({});
 exports.SmallContainedStyle = SmallContainedStyle;
 SmallContainedStyle.args = {
   text: "Confirm",
-  style: "contained",
+  shape: "contained",
+  radius: 50,
   size: "small",
+  textColor: "none",
   disabled: false
 };
 var DisabledContainedStyle = Template.bind({});
@@ -66,7 +90,9 @@ exports.DisabledContainedStyle = DisabledContainedStyle;
 DisabledContainedStyle.args = {
   size: "small",
   text: "Confirm",
-  style: "contained",
+  shape: "contained",
+  radius: 50,
+  textColor: "inherit",
   disabled: true
 };
 var MediumOutlinedStyle = Template.bind({});
@@ -74,7 +100,9 @@ exports.MediumOutlinedStyle = MediumOutlinedStyle;
 MediumOutlinedStyle.args = {
   text: "Confirm",
   size: "medium",
-  style: "outlined",
+  radius: 50,
+  shape: "outlined",
+  textColor: "",
   disabled: false
 };
 var LargeTextStyle = Template.bind({});
@@ -82,6 +110,8 @@ exports.LargeTextStyle = LargeTextStyle;
 LargeTextStyle.args = {
   text: "Confirm",
   size: "large",
-  style: "text",
+  radius: 50,
+  shape: "text",
+  textColor: "inherit",
   disabled: false
 };

package/dist/stories/Dropdown.stories.js

@@ -38,7 +38,7 @@ var options = [{
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 var _default = {
-  title: "SAG BI/Dropdown",
+  title: "SAG/Dropdown",
   component: _Dropdown.Dropdown,
   tags: ["autodocs"],
   argTypes: {

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: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  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: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  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: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  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

@@ -10,22 +10,43 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
-var _excluded = ["text", "style", "size", "disabled", "onClick"];
+var _excluded = ["text", "shape", "size", "disabled", "radius", "textColor", "backgroundColor", "onClick"];
 var Button = function Button(_ref) {
   var text = _ref.text,
-    style = _ref.style,
+    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'
+      textTransform: "none",
+      borderRadius: radius * 0.05,
+      color: getTextColor(),
+      //  shape === "contained" ? "white" : "black",
+      backgroundColor: {
+        backgroundColor: backgroundColor
+      }
     },
-    variant: style,
+    variant: shape,
     size: size,
     disabled: disabled ? true : false,
     onClick: function onClick(event) {

package/dist/stories/components/SegmentedButton.js

@@ -0,0 +1,120 @@
+"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.SegmentedButton = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _SegmentedButtonStyle = require("../SegmentedButton.style.js");
+var _excluded = ["name", "options", "segmentWidth", "segmentHeigth", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
+var SegmentedButton = function SegmentedButton(_ref) {
+  var name = _ref.name,
+    options = _ref.options,
+    _ref$segmentWidth = _ref.segmentWidth,
+    segmentWidth = _ref$segmentWidth === void 0 ? 120 : _ref$segmentWidth,
+    _ref$segmentHeigth = _ref.segmentHeigth,
+    segmentHeigth = _ref$segmentHeigth === void 0 ? 40 : _ref$segmentHeigth,
+    _ref$controlRadius = _ref.controlRadius,
+    controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
+    _ref$segmentRadius = _ref.segmentRadius,
+    segmentRadius = _ref$segmentRadius === void 0 ? 8 : _ref$segmentRadius,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 16 : _ref$fontSize,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? "rgb(232, 237, 247)" : _ref$backgroundColor,
+    _ref$selectedSegmentC = _ref.selectedSegmentColor,
+    selectedSegmentColor = _ref$selectedSegmentC === void 0 ? "#3a9df9" : _ref$selectedSegmentC,
+    _ref$selectedTextColo = _ref.selectedTextColor,
+    selectedTextColor = _ref$selectedTextColo === void 0 ? "white" : _ref$selectedTextColo,
+    _ref$unselectedTextCo = _ref.unselectedTextColor,
+    unselectedTextColor = _ref$unselectedTextCo === void 0 ? "black" : _ref$unselectedTextCo,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(defaultIndex),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var controlRef = (0, _react.useRef)();
+  var componentReady = (0, _react.useRef)();
+  var optionsRef = options.map(function (item, i) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      id: i,
+      ref: (0, _react.useRef)()
+    });
+  });
+
+  // Determine when the component is "ready"
+  (0, _react.useEffect)(function () {
+    componentReady.current = true;
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (defaultIndex >= 0 && defaultIndex < (options === null || options === void 0 ? void 0 : options.length)) {
+      setActiveIndex(defaultIndex);
+    }
+  }, [defaultIndex]);
+  (0, _react.useEffect)(function () {
+    var activeSegmentRef = optionsRef[activeIndex].ref;
+    var _activeSegmentRef$cur = activeSegmentRef.current,
+      offsetWidth = _activeSegmentRef$cur.offsetWidth,
+      offsetLeft = _activeSegmentRef$cur.offsetLeft;
+    var style = controlRef.current.style;
+    style.setProperty("--highlight-width", "".concat(offsetWidth, "px"));
+    style.setProperty("--highlight-x-pos", "".concat(offsetLeft, "px"));
+  }, [activeIndex, controlRef, optionsRef]);
+  var onInputChangeHandler = function onInputChangeHandler(value, index) {
+    setActiveIndex(index);
+    onClick({
+      index: index,
+      value: value
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsContainer, {
+    fontSize: fontSize,
+    ref: controlRef
+  }, /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.Controls, {
+    backgroundColor: backgroundColor,
+    selectedSegmentColor: selectedSegmentColor,
+    segmentRadius: segmentRadius,
+    controlRadius: controlRadius,
+    segmentHeigth: segmentHeigth / 4,
+    segmentWidth: segmentWidth,
+    className: "controls ".concat(componentReady.current ? "ready" : "idle")
+  }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map(function (item, i) {
+    return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.Segment, {
+      key: item.id,
+      backgroundColor: backgroundColor,
+      selectedSegmentColor: selectedSegmentColor,
+      segmentRadius: segmentRadius,
+      controlRadius: controlRadius,
+      segmentHeigth: segmentHeigth / 4,
+      segmentWidth: segmentWidth,
+      className: "".concat(activeIndex === i ? "active" : "inactive"),
+      ref: item.ref
+    }, /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsInput, {
+      type: "radio",
+      value: item.value,
+      id: item.id,
+      name: name,
+      onChange: function onChange() {
+        return onInputChangeHandler(item.value, item.id);
+      },
+      checked: i === activeIndex
+    }), /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.SegmentLabel, {
+      selectedTextColor: selectedTextColor,
+      unselectedTextColor: unselectedTextColor,
+      segmentHeigth: segmentHeigth / 4,
+      className: "".concat(activeIndex === i ? "active" : "inactive", " "),
+      htmlFor: item.value
+    }, item.value));
+  })));
+};
+exports.SegmentedButton = SegmentedButton;
+var _default = SegmentedButton;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "dist/index.js",                                    
   "scripts": {
@@ -21,6 +21,7 @@
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/addon-interactions": "^7.0.6",
     "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-storysource": "^7.0.7",
     "@storybook/blocks": "^7.0.6",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.6",
@@ -46,8 +47,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
-    "@mui/styled-engine-sc": "^5.12.0",
-    "@storybook/addon-storysource": "^7.0.7",
+    "@mui/styled-engine-sc": "^5.12.0",   
     "hoopy": "^0.1.4",
     "react-scripts": "5.0.1"
   },

package/src/App.css

@@ -1,7 +1,6 @@
 .App {  
    display: block;    
-   width: 300px;   
+   width: 600px;   
   padding-top: 5%;
   padding-left: 5%;
 }
-

package/src/App.js

@@ -1,7 +1,10 @@
 import logo from "./logo.svg";
 import "./App.css";
-import { Button } from "./stories/Button";
-import Dropdown from "./stories/Dropdown";
+import { useState } from "react";
+
+import Button from "./stories/components/Button";
+import Dropdown from "./stories/components/Dropdown";
+import SegmentedButton from "./stories/components/SegmentedButton";
 
 const onChangehandler = (event, newValue) => {
   console.log("Dropdown onChange event returned:");
@@ -25,6 +28,40 @@ function App() {
     { id: "8", label: "Price Chopper" },
     { id: "9", label: "South Eastern Grocers" },
   ];
+
+  const segmentsArr1=[
+    {
+      label: "Complete",
+      value: "complete",
+    },
+    {
+      label: "Incomplete",
+      value: "incomplete",
+    },
+    {
+      label: "Pending",
+      value: "pending",
+    },
+  ];
+
+  const segmentsArr2=[
+    {
+      label: "First",
+      value: "first",
+    },
+    {
+      label: "Second",
+      value: "second",
+    },
+    {
+      label: "Third",
+      value: "third",
+    },
+  ]
+
+  const [selectedValue1, setSelectedValue1] = useState("complete");
+  const [selectedValue2, setSelectedValue2] = useState("complete");
+
   return (
     <div className="App">
       <Dropdown
@@ -37,7 +74,6 @@ function App() {
         onChange={onChangehandler}
         onInputChange={onInputChangeHandler}
       />
-
       <Dropdown
         width={400}
         size="small"
@@ -48,8 +84,24 @@ function App() {
         onChange={onChangehandler}
         onInputChange={onInputChangeHandler}
       />
+
+      <SegmentedButton
+        name="group1"
+        onClick={(val) => setSelectedValue1(val)}
+        segments={segmentsArr1}
+      />
+      <p className="selected-item">Selected: {selectedValue1}</p>
+      <SegmentedButton
+        name="group2"
+        onClick={(val) => setSelectedValue2(val)}
+        defaultIndex={1}
+        segments={segmentsArr2}
+      />
+      <p className="selected-item">Selected: {selectedValue2}</p>
+
     </div>
   );
 }
 
+
 export default App;

package/src/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+// import '@fontsource/roboto/300.css';
+// import '@fontsource/roboto/400.css';
+// import '@fontsource/roboto/500.css';
+// import '@fontsource/roboto/700.css';
 
 
 

package/src/stories/Button.stories.js

@@ -3,7 +3,7 @@ import { Button } from "./components/Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: "SAG BI/Button",
+  title: "SAG/Button",
   component: Button,
   tags: ["autodocs"],
 
@@ -15,10 +15,17 @@ export default {
       defaultValue: "",
     },
 
-    style: {
+    shape: {
       control: { type: "radio" },
       options: ["contained", "outlined", "text"],
-      description: "style of the button",
+      description: "shape of the button",
+    },
+
+    radius: {
+      name: "radius",
+      control: { type: "number" },
+      description: "radius of the button",
+      defaultValue: 50,
     },
 
     size: {
@@ -34,6 +41,29 @@ export default {
       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",
@@ -46,17 +76,20 @@ const Template = (args) => <Button {...args} />;
 export const SmallContainedStyle = Template.bind({});
 SmallContainedStyle.args = {
   text: "Confirm",
-  style: "contained",
+  shape: "contained",
+  radius: 50,
   size: "small",
+  textColor: "none",
   disabled: false,
 };
 
-
 export const DisabledContainedStyle = Template.bind({});
 DisabledContainedStyle.args = {
   size: "small",
   text: "Confirm",
-  style: "contained",
+  shape: "contained",
+  radius: 50,
+  textColor: "inherit",
   disabled: true,
 };
 
@@ -64,16 +97,18 @@ export const MediumOutlinedStyle = Template.bind({});
 MediumOutlinedStyle.args = {
   text: "Confirm",
   size: "medium",
-  style: "outlined",
+  radius: 50,
+  shape: "outlined",
+  textColor: "",
   disabled: false,
 };
 
-
 export const LargeTextStyle = Template.bind({});
 LargeTextStyle.args = {
   text: "Confirm",
   size: "large",
-  style: "text",
+  radius: 50,
+  shape: "text",
+  textColor: "inherit",
   disabled: false,
 };
-

package/src/stories/Dropdown.stories.jsx

@@ -15,7 +15,7 @@ const options = [
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {
-  title: "SAG BI/Dropdown",
+  title: "SAG/Dropdown",
   component: Dropdown,
   tags: ["autodocs"],
 

package/src/stories/SegmentedButton.stories.js

@@ -0,0 +1,205 @@
+import React from "react";
+import { SegmentedButton } from "./components/SegmentedButton";
+
+
+
+
+const arrSegmentedFilters=[
+  {
+    value: "Total",   
+  },
+  {
+    value: "Ecommerce",  
+  },
+  {
+    value: "In Store",  
+  },
+];
+
+
+const arrDollarsOrUnits=[
+  {
+    value: "Dollars",   
+  },
+  {
+    value: "Units",  
+  },
+];
+
+
+
+const arrPeriod=[
+  {
+    value: "52 w",   
+  },
+  {
+    value: "26 w",  
+  },
+  {
+    value: "13 w",  
+  },
+];
+
+
+export default {
+  title: "SAG/SegmentedButton",
+  component: 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} ",
+    },
+  },
+};
+
+const Template = (args) => <SegmentedButton {...args} />;
+
+
+export const SegmentedFilter = Template.bind({});
+SegmentedFilter.args = {
+   
+  name: "segmentedFilter",
+  options: arrSegmentedFilters, 
+  defaultIndex: 0,
+  segmentWidth: 120, 
+  controlRadius: 8,
+  segmentRadius: 8,  
+  segmentHeigth: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  selectedSegmentColor: '#fcfcfc',
+  selectedTextColor: '#000000',
+  unselectedTextColor: '#000000',    
+
+};
+
+
+
+export const DollarsOrUnits = Template.bind({});
+DollarsOrUnits.args = {
+   
+  name: "segmentedDollarsOrUnits",
+  options: arrDollarsOrUnits,   
+  defaultIndex: 1,
+  segmentWidth: 100,
+  controlRadius: 8,
+  segmentRadius: 8, 
+  segmentHeigth: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
+  selectedTextColor: '#ffffff',
+  unselectedTextColor: '#000000',
+   
+};
+
+
+export const Period = Template.bind({});
+Period.args = {
+   
+  name: "period",
+  options: arrPeriod,   
+  defaultIndex: 1,
+  segmentWidth: 60,
+  controlRadius: 8,
+  segmentRadius: 8, 
+  segmentHeigth: 30,
+  fontSize: 16,
+  backgroundColor: "rgb(232, 237, 247)",
+  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
+  selectedTextColor: '#ffffff',
+  unselectedTextColor: '#000000',
+   
+};

package/src/stories/SegmentedButton.style.js

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+export const ControlsContainer = styled.div`
+  display: flex; 
+  font: ${(props) => { return props.fontSize?.toString().concat("", "px Lato, sans-serif")} }; 
+  margin: 100px 0 25px;
+  --highlight-width: auto;
+  --highlight-x-pos: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+`;
+
+export const Controls = styled.div`
+  display: inline-flex;
+  justify-content: space-between;  
+  background: ${(props) => props.backgroundColor};
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border-radius:  ${(props) => { return props.controlRadius.toString().concat("", "px")} }; //12px
+  // max-width: 500px; //use this to limit max lenght of the control 
+  padding: 6px;  
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  &.controls::before {
+    content: "";
+    background:  ${(props) => props.selectedSegmentColor}; /* #3a9df9;  #5465ff;*/
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    border-radius:  ${(props) => {return props.segmentRadius.toString().concat("", "px")} }; //12px
+    width: var(--highlight-width);
+    transform: translateX(var(--highlight-x-pos));
+    position: absolute;
+    top: 6px;
+    bottom: 6px;
+    left: 0;
+    z-index: 0;
+  }
+  &.controls.ready::before {
+    transition: transform 0.3s ease, width 0.3s ease;
+  }
+`;
+
+export const ControlsInput = styled.input`
+  opacity: 0;
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  cursor: pointer;
+  height: 100%;
+`;
+
+export const Segment = styled.div`
+  /* width: 100%; uncomment for each segment to have matching width */  
+  min-width: ${(props) => {return props.segmentWidth.toString().concat("", "px")} };  //120px;
+  position: relative;
+  text-align: center;
+  z-index: 1;  
+`;
+
+export const SegmentLabel = styled.label`
+  cursor: pointer;
+  display: block;
+  //font-weight: 550;
+  padding: ${(props) => {return props.segmentHeigth.toString().concat("", "px")} }; //10px;
+  transition: color 0.5s ease;
+  &.active {
+    color: ${(props) => props.selectedTextColor};
+  }
+  &.inactive {
+    color: ${(props) => props.unselectedTextColor};
+  }
+`;
+

package/src/stories/components/Button.jsx

@@ -2,13 +2,43 @@ import * as React from "react";
 import MUIButton from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
 
-export const Button = ({text, style, size, disabled, onClick, ...props}) => {
- 
+export const Button = ({
+  text,
+  shape,
+  size,
+  disabled,
+  radius,
+  textColor,
+  backgroundColor,
+  onClick,
+  ...props
+}) => {
+  const getTextColor = () => {
+   
+    if (!textColor || textColor == "" || textColor == "none") {
+      //default when parameter was not set
+      if (shape === "contained") {
+        return "white";
+      } else {
+        return "black";
+      }
+    }
+    else{
+      return textColor;
+    }
+  };
+
   return (
     <Stack direction="row" spacing={2}>
-      <MUIButton 
-        sx={{   textTransform: 'none'}}
-        variant={style}      
+      <MUIButton
+        sx={{
+          textTransform: "none",
+          borderRadius: radius * 0.05,
+          color: getTextColor(), //  shape === "contained" ? "white" : "black",
+          backgroundColor: { backgroundColor },
+        }}
+       
+        variant={shape}
         size={size}
         disabled={disabled ? true : false}
         onClick={(event) => {

package/src/stories/components/SegmentedButton.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+
+import {
+  ControlsContainer,
+  Controls,
+  ControlsInput,
+  Segment,
+  SegmentLabel,
+} from "../SegmentedButton.style.js";
+
+export const SegmentedButton = ({
+  name,
+  options,
+  segmentWidth = 120,  
+  segmentHeigth = 40,  
+  controlRadius = 8,
+  segmentRadius = 8,  
+  fontSize = 16,
+  backgroundColor = "rgb(232, 237, 247)",
+  selectedSegmentColor  = "#3a9df9",
+  selectedTextColor = "white",
+  unselectedTextColor = "black",
+  defaultIndex = 0,
+  onClick,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+    
+  const controlRef = useRef();
+  const componentReady = useRef();
+
+  const optionsRef = options.map((item, i) => {
+    return { ...item, id: i, ref: useRef() };
+  });
+
+  // Determine when the component is "ready"
+  useEffect(() => {
+    componentReady.current = true;
+  }, []);
+
+  useEffect(()=>{
+    if( defaultIndex >= 0 && defaultIndex < options?.length){
+      setActiveIndex(defaultIndex);
+    }
+   },[defaultIndex])
+
+  useEffect(() => {
+    const activeSegmentRef = optionsRef[activeIndex].ref;
+    const { offsetWidth, offsetLeft } = activeSegmentRef.current;
+    const { style } = controlRef.current;
+
+    style.setProperty("--highlight-width", `${offsetWidth}px`);
+    style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
+  }, [activeIndex, controlRef, optionsRef]);
+
+  const onInputChangeHandler = (value, index) => {
+    setActiveIndex(index);
+    onClick({index: index, value: value} );
+  };
+
+  return (
+    <ControlsContainer 
+        fontSize={fontSize} 
+        ref={controlRef}>
+      <Controls
+        backgroundColor={backgroundColor}
+        selectedSegmentColor={selectedSegmentColor}   
+        segmentRadius={segmentRadius} 
+        controlRadius={controlRadius}           
+        segmentHeigth={segmentHeigth/4}
+        segmentWidth={segmentWidth}       
+        className={`controls ${componentReady.current ? "ready" : "idle"}`}        
+      >
+        {optionsRef?.map((item, i) => (
+          <Segment
+            key={item.id}
+            backgroundColor={backgroundColor}
+            selectedSegmentColor={selectedSegmentColor}
+            segmentRadius={segmentRadius} 
+            controlRadius={controlRadius}           
+            segmentHeigth={segmentHeigth/4}
+            segmentWidth={segmentWidth}                    
+            className={`${activeIndex === i ? "active" : "inactive"}`}
+            ref={item.ref}
+          >
+            <ControlsInput
+              type="radio"
+              value={item.value}
+              id={item.id}
+              name={name}
+              onChange={() => onInputChangeHandler(item.value, item.id)}
+              checked={i === activeIndex}
+            />
+            <SegmentLabel              
+              selectedTextColor={selectedTextColor}
+              unselectedTextColor={unselectedTextColor}             
+              segmentHeigth={segmentHeigth/4}                   
+              className={`${activeIndex === i ? "active" : "inactive"} `}
+              htmlFor={item.value}
+            >
+              {item.value}
+            </SegmentLabel>
+          </Segment>
+        ))}
+      </Controls>
+    </ControlsContainer>
+  );
+};
+
+export default SegmentedButton;

package/src/index.d.ts

@@ -1,10 +0,0 @@
-export function Button({ text, style, size, disabled, onClick, ...props }: {
-    [x: string]: any;
-    text: any;
-    style: any;
-    size: any;
-    disabled: any;
-    onClick: any;
-}): any;
-export default Button;
-