sag_components 1.0.0 → 1.0.2

package/azure-static-web-apps-delightful-cliff-010f39003.yml

@@ -0,0 +1,32 @@
+name: Azure Static Web Apps CI/CD
+
+pr:
+  branches:
+    include:
+      - Task-9085-Create-basic-dropdown
+trigger:
+  branches:
+    include:
+      - Task-9085-Create-basic-dropdown
+
+jobs:
+- job: build_and_deploy_job
+  displayName: Build and Deploy Job
+  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
+  pool:
+    vmImage: ubuntu-latest
+  variables:
+  - group: Azure-Static-Web-Apps-delightful-cliff-010f39003-variable-group
+  steps:
+  - checkout: self
+    submodules: true
+  - task: AzureStaticWebApp@0
+    inputs:
+      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_CLIFF_010F39003)
+###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+      app_location: "/" # App source code path
+      api_location: "" # Api source code path - optional
+      output_location: "build" # Built app content directory - optional
+###### End of Repository/Build Configurations ######
+

package/dist/App.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _logo = _interopRequireDefault(require("./logo.svg"));
+require("./App.css");
+var _Button = require("./stories/Button");
+var _Dropdown = _interopRequireDefault(require("./stories/Dropdown"));
+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"
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "App"
+  }, /*#__PURE__*/React.createElement(_Dropdown.default, {
+    width: "300",
+    size: "small",
+    text: "Select retailer......",
+    multiSelect: false,
+    options: options,
+    shape: "round",
+    onChange: onChangehandler,
+    onInputChange: onInputChangeHandler
+  }), /*#__PURE__*/React.createElement(_Dropdown.default, {
+    width: 400,
+    size: "small",
+    text: "Select retailer......",
+    multiSelect: true,
+    options: options,
+    shape: "round",
+    onChange: onChangehandler,
+    onInputChange: onInputChangeHandler
+  }));
+}
+var _default = App;
+exports.default = _default;

package/dist/App.test.js

@@ -0,0 +1,10 @@
+"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/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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");
+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)));
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/dist/stories/Button.stories.js

@@ -0,0 +1,87 @@
+"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 BI/Button",
+  component: _Button.Button,
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      name: "text",
+      control: {
+        type: "text"
+      },
+      description: "text inside of the button",
+      defaultValue: ""
+    },
+    style: {
+      control: {
+        type: "radio"
+      },
+      options: ["contained", "outlined", "text"],
+      description: "style of the button"
+    },
+    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: ""
+    },
+    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",
+  style: "contained",
+  size: "small",
+  disabled: false
+};
+var DisabledContainedStyle = Template.bind({});
+exports.DisabledContainedStyle = DisabledContainedStyle;
+DisabledContainedStyle.args = {
+  size: "small",
+  text: "Confirm",
+  style: "contained",
+  disabled: true
+};
+var MediumOutlinedStyle = Template.bind({});
+exports.MediumOutlinedStyle = MediumOutlinedStyle;
+MediumOutlinedStyle.args = {
+  text: "Confirm",
+  size: "medium",
+  style: "outlined",
+  disabled: false
+};
+var LargeTextStyle = Template.bind({});
+exports.LargeTextStyle = LargeTextStyle;
+LargeTextStyle.args = {
+  text: "Confirm",
+  size: "large",
+  style: "text",
+  disabled: false
+};

package/dist/stories/Button.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+  return props.width;
+});
+exports.DropdownContainer = DropdownContainer;

package/dist/stories/Dropdown.stories.js

@@ -0,0 +1,252 @@
+"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 BI/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/Dropdown.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+  return props.width;
+});
+exports.DropdownContainer = DropdownContainer;

package/dist/stories/InfoIcon.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoIcon = void 0;
+var InfoIcon = function InfoIcon(_ref) {
+  var clicked = _ref.clicked;
+  return /*#__PURE__*/React.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.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "16",
+    x2: "12",
+    y2: "12"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12",
+    y2: "8"
+  }));
+};
+exports.InfoIcon = InfoIcon;

package/dist/stories/OneColumnContainer.stories.js

@@ -0,0 +1,22 @@
+"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/OneColumnContainer.style.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContainer = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; \n  display: flex;\n  position: relative;\n  border-radius: 10px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+exports.StyledContainer = StyledContainer;
+var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  align-items: center;\n  display: flex;\n  visibility: ", ";\n  text-align: center;\n  justify-content: center;\n  background: rgba(16, 16, 16, .6);\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, function (props) {
+  return props.clicked ? 'visible' : 'hidden';
+});
+exports.InfoTextContainer = InfoTextContainer;
+var InfoTextLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  text-align: center;\n  color: white;\n  margin: 10px;\n  justify-content: center;\n"])));
+exports.InfoTextLabel = InfoTextLabel;
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top:10px;\n  margin-right:10px;\n  top: 0;\n  right: 0;\n"])));
+exports.IconContainer = IconContainer;

package/dist/stories/components/Button.js

@@ -0,0 +1,38 @@
+"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", "style", "size", "disabled", "onClick"];
+var Button = function Button(_ref) {
+  var text = _ref.text,
+    style = _ref.style,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    _onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_Stack.default, {
+    direction: "row",
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(_Button.default, {
+    sx: {
+      textTransform: 'none'
+    },
+    variant: style,
+    size: size,
+    disabled: disabled ? true : false,
+    onClick: function onClick(event) {
+      _onClick(event);
+    }
+  }, text));
+};
+exports.Button = Button;
+var _default = Button;
+exports.default = _default;

package/dist/{OneColumnContainer.js → stories/components/OneColumnContainer.js}

@@ -5,12 +5,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OneColumnContainer = void 0;
+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 _OneColumnContainer = require("../OneColumnContainer.style");
+var _InfoIcon = require("../InfoIcon");
 var _excluded = ["width", "height", "infoText"];
 /**
  * Primary UI component for user interaction
@@ -41,4 +41,6 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
   })));
 };
 exports.OneColumnContainer = OneColumnContainer;
-OneColumnContainer.defaultProps = {};
+OneColumnContainer.defaultProps = {};
+var _default = OneColumnContainer;
+exports.default = _default;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "sag_components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
-  "main": "dist/index.js",  
+  "main": "dist/index.js",                                    
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env BABEL_ENV=production babel src -d dist",

package/src/index.d.ts

@@ -0,0 +1,10 @@
+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;
+

package/src/stories/Button.stories.js

@@ -0,0 +1,79 @@
+import React from "react";
+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",
+  component: Button,
+  tags: ["autodocs"],
+
+  argTypes: {
+    text: {
+      name: "text",
+      control: { type: "text" },
+      description: "text inside of the button",
+      defaultValue: "",
+    },
+
+    style: {
+      control: { type: "radio" },
+      options: ["contained", "outlined", "text"],
+      description: "style of the button",
+    },
+
+    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: "",
+    },
+
+    onClick: {
+      action: "onClick",
+      description: "returns an event click object when user clicks on a button",
+    },
+  },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const SmallContainedStyle = Template.bind({});
+SmallContainedStyle.args = {
+  text: "Confirm",
+  style: "contained",
+  size: "small",
+  disabled: false,
+};
+
+
+export const DisabledContainedStyle = Template.bind({});
+DisabledContainedStyle.args = {
+  size: "small",
+  text: "Confirm",
+  style: "contained",
+  disabled: true,
+};
+
+export const MediumOutlinedStyle = Template.bind({});
+MediumOutlinedStyle.args = {
+  text: "Confirm",
+  size: "medium",
+  style: "outlined",
+  disabled: false,
+};
+
+
+export const LargeTextStyle = Template.bind({});
+LargeTextStyle.args = {
+  text: "Confirm",
+  size: "large",
+  style: "text",
+  disabled: false,
+};
+

package/src/stories/OneColumnContainer.stories.js

@@ -1,4 +1,4 @@
-import { OneColumnContainer } from './OneColumnContainer';
+import { OneColumnContainer } from './components/OneColumnContainer';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {

package/src/stories/components/Button.jsx

@@ -0,0 +1,24 @@
+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}) => {
+ 
+  return (
+    <Stack direction="row" spacing={2}>
+      <MUIButton 
+        sx={{   textTransform: 'none'}}
+        variant={style}      
+        size={size}
+        disabled={disabled ? true : false}
+        onClick={(event) => {
+          onClick(event);
+        }}
+      >
+        {text}
+      </MUIButton>
+    </Stack>
+  );
+};
+
+export default Button;

package/src/stories/components/OneColumnContainer.jsx

@@ -1,6 +1,6 @@
 import React,{useState} from 'react';
-import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from './OneColumnContainer.style'
-import { InfoIcon } from "./InfoIcon";
+import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '../OneColumnContainer.style'
+import { InfoIcon } from "../InfoIcon";
 
 /**
  * Primary UI component for user interaction
@@ -31,3 +31,5 @@ OneColumnContainer.propTypes = {
 OneColumnContainer.defaultProps = {
 
 };
+
+ export default OneColumnContainer;

package/src/stories/ButtonText.jsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-// import {Button as MuiButton}  from "@mui/material/Button" ;
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-
-export const ButtonText = (text, size, disabled, onClick) => {
-  const myText = "Ok";
-  return (
-    <Stack direction="row" spacing={2}>
-      {/* <Button variant="contained"
-       >        
-        {myText}
-        </Button> */}
-      <Button
-        variant="contained"        
-        // size={size}
-        // disabled={disabled ? true : false}
-        // onClick={(event) => {
-        //   onClick(event);
-        // }}
-      >
-        {myText}
-      </Button>
-    </Stack>
-  );
-};
-
-export default ButtonText;

package/src/stories/ButtonText.stories.js

@@ -1,65 +0,0 @@
-import React from "react";
-import { ButtonText } from "./ButtonText";
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
-  title: "SAG BI/Button",
-  component: ButtonText,
-  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 button",
-      defaultValue: "",
-    },
-
-    // shape: {
-    //   control: { type: "radio" },
-    //   options: ["round", "square"],
-    //   description: "shape: round/square",
-    // },
-
-    onClick: {
-      action: "onClick",
-      description: "returns an event click object when user clicks on a button",
-    },
-  },
-};
-
-const Template = (args) => <ButtonText {...args} />;
-
-export const Small = Template.bind({});
-Small.args = {
-  // width: 300,
-  size: "small",
-  text: "Yes",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  // width: 300,
-  size: "small",
-  text: "No",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  // width: 300,
-  size: "small",
-  text: "Ok",
-  disabled: true,
-};