sag_components 2.0.0-beta30 → 2.0.0-beta300

package/dist/stories/components/TabMenu.js

@@ -1,241 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MarketShareDescription = _interopRequireDefault(require("./MarketShareDescription"));
-var _Button = _interopRequireDefault(require("./Button"));
-var _TabMenu = require("./TabMenu.style");
-var _SagIconButton = _interopRequireDefault(require("./SagIconButton"));
-const TabMenu = props => {
-  const {
-    activeColor,
-    children,
-    className,
-    color,
-    currentTab,
-    headlineInsteadTabs,
-    headlineText,
-    inputWidth,
-    onFilterButtonClick,
-    onSearchFieldTyping,
-    onTabChange,
-    panelIsOpen,
-    setBackground,
-    showActions,
-    showFilterButton,
-    showLabel,
-    showSearchInput,
-    showViewOptionsButton,
-    setTopRightButton,
-    buttonHoverColor,
-    disabledButton,
-    rightButtonText,
-    rightButtonIcon,
-    onTopButtonClick,
-    tabs
-  } = props;
-  const [activeTab, setActiveTab] = (0, _react.useState)(currentTab);
-  const handleTabChange = index => {
-    onTabChange(index);
-    setActiveTab(index);
-  };
-  (0, _react.useEffect)(() => {
-    setActiveTab(currentTab);
-  }, [currentTab]);
-  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_TabMenu.TopRow, null, showFilterButton && /*#__PURE__*/_react.default.createElement(_TabMenu.SagIconButtonWrap, {
-    id: "filterButton",
-    iconName: "Filter",
-    buttonText: "",
-    openState: panelIsOpen,
-    activeColor: activeColor,
-    onButtonClick: onFilterButtonClick
-  }), headlineInsteadTabs ? /*#__PURE__*/_react.default.createElement(_TabMenu.Headline, null, headlineText) : /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, {
-    className: "Nav"
-  }, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, {
-    className: "Tabs"
-  }, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
-    key: tab.title.replace(/\s/g, ''),
-    isActive: index === activeTab,
-    className: `tab ${index === activeTab ? 'active' : ''}`,
-    color: color,
-    onClick: () => handleTabChange(index)
-  }, tab.title)) : /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
-    isActive: activeTab === 0,
-    className: `tab ${activeTab === 0 ? 'active' : ''}`,
-    color: color,
-    onClick: () => handleTabChange(0)
-  }, tabs[0].title), /*#__PURE__*/_react.default.createElement(_TabMenu.PresentationSlider, {
-    className: "PresentationSlider",
-    activeTab: activeTab,
-    color: color,
-    width: `${100 / tabs.length}%`,
-    role: "presentation"
-  }))), setTopRightButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    text: rightButtonText,
-    rightIcon: rightButtonIcon,
-    size: "small",
-    disabled: disabledButton,
-    onClick: () => onTopButtonClick(),
-    backgroundColor: activeColor,
-    borderColor: activeColor,
-    hoverBackgroundColor: buttonHoverColor,
-    hoverBorderColor: buttonHoverColor
-  })), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, {
-    className: "ActionsWrapper"
-  }, showLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Label, {
-    className: "Label"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "separator"
-  }, "|")), children || '', showViewOptionsButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
-    iconName: "ViewIndicator",
-    buttonText: "View Indicator"
-  }), showSearchInput && /*#__PURE__*/_react.default.createElement(_TabMenu.SearchInputWrap, {
-    width: inputWidth,
-    onTyping: e => onSearchFieldTyping(e)
-  })), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
-    id: "tabsBody",
-    setBackground: setBackground
-  }, tabs[activeTab] && tabs[activeTab].content));
-};
-TabMenu.defaultProps = {
-  activeColor: '#229E38',
-  children: null,
-  className: 'TabMenuContainer',
-  color: '#229E38',
-  currentTab: 0,
-  headlineInsteadTabs: false,
-  headlineText: 'Headline',
-  inputWidth: '100%',
-  onFilterButtonClick: () => {},
-  onSearchFieldTyping: () => {},
-  onTabChange: () => {},
-  panelIsOpen: false,
-  setBackground: false,
-  showActions: true,
-  showFilterButton: true,
-  showLabel: true,
-  showSearchInput: true,
-  showViewOptionsButton: true,
-  disabledButton: false,
-  setTopRightButton: false,
-  buttonHoverColor: "#92CF17",
-  rightButtonText: 'Button',
-  rightButtonIcon: 'arrow',
-  onTopButtonClick: () => {},
-  tabs: [{
-    title: 'Overview',
-    content: /*#__PURE__*/_react.default.createElement(_MarketShareDescription.default, {
-      marketShareData: [{
-        name: 'pringlesHarvestBlend',
-        rowTitle: 'Pringles Harvest Blend',
-        fieldsArray: [{
-          label: 'Pre-event',
-          value: 1.2,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Event',
-          value: 2,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Post-event',
-          value: 2.3,
-          textBefore: '',
-          textAfter: '%'
-        }],
-        rowFooter: `<strong>Pringles Harvest Blend </strong>
-              <p1>market share </p1>
-              <strong>increased by 98% </strong>
-              <p1>following the event</p1>`,
-        showBanner: false
-      }, {
-        name: 'pringles',
-        rowTitle: 'Pringles',
-        fieldsArray: [{
-          label: 'Pre-event',
-          value: 2.8,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Event',
-          value: 3.5,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Post-event',
-          value: 3.05,
-          textBefore: '',
-          textAfter: '%'
-        }],
-        rowFooter: `<strong>Pringles Harvest Blend </strong>
-              <p1>market share </p1>
-              <strong>increased by 98% </strong>
-              <p1>following the event</p1>`,
-        showBanner: false
-      }, {
-        name: 'pringlesHarvestBlend',
-        rowTitle: 'Pringles Harvest Blend',
-        fieldsArray: [{
-          label: 'Pre-event',
-          value: 1.2,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Event',
-          value: 2,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Post-event',
-          value: 2.3,
-          textBefore: '',
-          textAfter: '%'
-        }],
-        rowFooter: `<strong>Pringles Harvest Blend </strong>
-              <p1>market share </p1>
-              <strong>increased by 98% </strong>
-              <p1>following the event</p1>`,
-        showBanner: false
-      }, {
-        name: 'pringles',
-        rowTitle: 'Pringles',
-        fieldsArray: [{
-          label: 'Pre-event',
-          value: 2.8,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Event',
-          value: 3.5,
-          textBefore: '',
-          textAfter: '%'
-        }, {
-          label: 'Post-event',
-          value: 3.05,
-          textBefore: '',
-          textAfter: '%'
-        }],
-        rowFooter: `<strong>Pringles Harvest Blend </strong>
-              <p1>market share </p1>
-              <strong>increased by 98% </strong>
-              <p1>following the event</p1>`,
-        showBanner: false
-      }]
-    })
-  }, {
-    title: 'Sales',
-    content: 'Content for Tab 3'
-  }, {
-    title: 'Shopper Behavior',
-    content: 'Content'
-  }]
-};
-var _default = exports.default = TabMenu;

package/dist/stories/components/TabMenu.style.js

@@ -1,120 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TopRow = exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.SearchInputWrap = exports.SagIconButtonWrap = exports.PresentationSlider = exports.Nav = exports.Label = exports.Headline = exports.Body = exports.ActionsWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _SagIconButton = _interopRequireDefault(require("./SagIconButton"));
-var _SearchInput = _interopRequireDefault(require("./SearchInput"));
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div`
-  font-family: 'Poppins', sans-serif;
-  display: grid;
-  gap: 20px;
-  grid-template-rows: repeat(3, auto);
-`;
-const TopRow = exports.TopRow = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 20px;
-`;
-const Headline = exports.Headline = _styledComponents.default.span`
-  font-size: 18px;
-  font-weight: 500;
-  margin-right: auto;
-`;
-const Nav = exports.Nav = _styledComponents.default.nav`
-`;
-const Tabs = exports.Tabs = _styledComponents.default.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-const Tab = exports.Tab = _styledComponents.default.div`
-  cursor: pointer;
-  position: relative;
-  text-align: center;
-  padding: 8px 12px;
-  font-size: 16px;
-  color: #000000;
-  &.active {
-    font-weight: 600;
-    color: ${props => props.color};
-    border-bottom: 1mm solid ${props => props.color};
-  }
-`;
-const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #EAEAEA;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    z-index: 1;
-    width: ${props => props.width};
-    height: 2px;
-    /* background-color: ${props => props.color}; */
-    transform: translateX(calc(100% * ${props => props.activeTab}));
-    transition: transform .35s ease;
-  }
-`;
-const Body = exports.Body = _styledComponents.default.div`
-  width: 100%;
-  ${scrollableStyles}
-  position: relative;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  padding:  ${props => props.setBackground ? '20px' : '5px'};
-  background-color: ${props => props.setBackground ? 'white' : 'unset'};
-  border-radius: ${props => props.setBackground ? '12px' : '0'};
-  box-shadow: ${props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset'};
-`;
-const Label = exports.Label = _styledComponents.default.div`
-  font-size: 12px;
-  font-weight: 400;
-  padding: 8px;
-  color: #5a5a5a;
-  background-color: #E7E7E7;
-  border-radius: 4px;
-   > span {
-      font-weight: 500;
-    }
-    ~ span {
-      margin: 0 24px;
-      font-weight: 400;
-    }
-`;
-const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-`;
-const SagIconButtonWrap = exports.SagIconButtonWrap = (0, _styledComponents.default)(_SagIconButton.default)`
-`;
-const SearchInputWrap = exports.SearchInputWrap = (0, _styledComponents.default)(_SearchInput.default)`
-  margin-left: auto;
-`;

package/dist/stories/components/TextField.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextField = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
-var _styles = require("@mui/material/styles");
-var _TextField2 = require("./TextField.style");
-/**
- *  SAG TextField
- */
-const TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    width = '100%',
-    height = '49px',
-    label,
-    focusColor,
-    shape,
-    size,
-    placeHolder = 'Enter your email address',
-    passwordField = false,
-    defaultValue,
-    resetDefaultValue,
-    required,
-    inputRef,
-    allowedInput = 'all',
-    onChange,
-    multiline = false
-  } = _ref;
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [showPassword, setShowPassword] = _react.default.useState(false);
-  const handleClickShowPassword = () => setShowPassword(show => !show);
-  const onChangeHandler = event => {
-    onChange(event);
-    setCurrentInputValue({
-      event,
-      value: event.target.value
-    });
-  };
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-  const handleMouseDownPassword = event => {
-    event.preventDefault();
-  };
-
-  // defines shape: squire or round
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      return {
-        '& .MuiOutlinedInput-root': {
-          width: {
-            width
-          },
-          height: {
-            height
-          },
-          paddingTop: multiline ? '12px' : '0',
-          marginTop: 0,
-          borderColor: 'green',
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '6px'
-          },
-          alignItems: multiline ? 'flex-start' : 'center',
-          '&.Mui-focused fieldset': {
-            borderColor: focusColor
-          }
-        },
-        '& label.Mui-focused': {
-          color: focusColor
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          // color: focusColor,
-          paddingTop: '4px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white',
-          paddingTop: 0
-        },
-        '& .MuiInputLabel-root': {
-          fontFamily: 'Poppins'
-        },
-        '& .MuiInputBase-inputSizeSmall': {
-          fontFamily: 'Poppins'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  const isInputAllowed = inputChar => {
-    const NUMERIC_REGEX = /^[0-9-]+$/;
-    const ALPHA_REGEX = /^[a-zA-Z]+$/;
-    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
-    switch (allowedInput) {
-      case 'all':
-        return true;
-      case 'alpha':
-        if (ALPHA_REGEX.test(inputChar)) return true;
-        return false;
-      case 'numeric':
-        if (NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      case 'alphaNumeric':
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      default:
-        return true;
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_TextField2.TextFieldContainer, {
-    id: "TextFieldContainer",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    key: resetDefaultValue,
-    label: label,
-    multiline: multiline,
-    defaultValue: defaultValue,
-    placeholder: placeHolder,
-    id: "outlined-start-adornment",
-    sx: getTextFieldStyle(),
-    size: size,
-    required: required,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    },
-    InputProps: {
-      textalign: 'flex-start',
-      alignitems: 'flex-start',
-      aligncontent: 'flex-start',
-      disableunderline: true.toString(),
-      style: {
-        textalign: 'start',
-        '&::placeholder': {
-          color: '#B1B1B1'
-        }
-      }
-    }
-  }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-    sx: getTextFieldStyle(),
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
-    htmlFor: "outlined-adornment-password"
-  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
-    id: "outlined-adornment-password",
-    type: showPassword ? 'text' : 'password',
-    size: size,
-    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-      position: "end"
-    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "aria-label": "toggle password visibility",
-      onClick: handleClickShowPassword,
-      onMouseDown: handleMouseDownPassword,
-      edge: "end"
-    }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
-    defaultValue: defaultValue,
-    label: label,
-    multiline: multiline,
-    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
-    ref: ref !== null && ref !== void 0 ? ref : null,
-    onKeyDown: event => {
-      if (!isInputAllowed(event.key)) {
-        event.preventDefault();
-      }
-    },
-    onChange: event => {
-      onChangeHandler(event);
-    }
-  })))));
-});
-var _default = exports.default = TextField;

package/dist/stories/components/TextField.style.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextFieldContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div`
-font-family: "Poppins";
-  display: flex;
-  width: ${props => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-size: 14px;
-`;