sag_components 1.0.1021 → 1.0.1022

package/dist/stories/components/IconButton/IconButton.js

@@ -1,147 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.IconButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _DownloadIcon = require("../../icons/DownloadIcon");
-var _DocumentIcon = require("../../icons/DocumentIcon");
-var _BellIcon = require("../../icons/BellIcon");
-var _ExitIcon = require("../../icons/ExitIcon");
-var _FlyIcon = require("../../icons/FlyIcon");
-var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
-var _EyeIcon = require("../../icons/EyeIcon");
-var _IconButton = require("./IconButton.style");
-/* IconButton */
-const IconButton = props => {
-  const {
-    // downloadStatus,
-    // fileName,
-    fileLink,
-    showProcess,
-    contentColor,
-    buttonText,
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    iconName,
-    iconWidth,
-    iconHeight,
-    disabled,
-    onClick,
-    onCancelClick
-  } = props;
-  const [progress, setProgress] = (0, _react.useState)(0);
-  let interval;
-  const incrementProgress = () => {
-    if (showProcess && progress <= 90) {
-      interval = setInterval(() => {
-        setProgress(prevProgress => {
-          const newProgress = prevProgress + 2;
-          if (newProgress >= 90) {
-            clearInterval(interval);
-          }
-          return newProgress;
-        });
-      }, 500);
-    } else {
-      setProgress(0);
-      clearInterval(interval);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    incrementProgress();
-  }, [showProcess]);
-  const getIcon = icon => {
-    switch (icon) {
-      case 'download':
-        return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'document':
-        return /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'fly':
-        return /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'bell':
-        return /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'maintenance':
-        return /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'exit':
-        return /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'eye':
-        return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      default:
-        return '';
-    }
-  };
-  const onClickHandler = event => {
-    onClick(event);
-  };
-  const onCancelClickHandler = event => {
-    onCancelClick(event);
-  };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, {
-    id: "ButtonWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
-    download: true,
-    href: fileLink,
-    backgroundColor: disabled ? '#E3E4E5' : backgroundColor,
-    borderColor: disabled ? '#B1B1B1' : borderColor,
-    borderRadius: borderRadius,
-    color: disabled ? '#B1B1B1' : contentColor,
-    inProgress: showProcess,
-    progress: progress,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), showProcess && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
-    onClick: event => onCancelClickHandler(event)
-  }, "Click here to cancel"));
-};
-exports.IconButton = IconButton;
-var _default = exports.default = IconButton;
-IconButton.defaultProps = {
-  // downloadStatus: '',
-  // fileName: '',
-  fileLink: '',
-  showProcess: false,
-  buttonText: '',
-  iconName: 'eye',
-  contentColor: '#212121',
-  backgroundColor: '#FFFFFF',
-  borderColor: '#B1B1B1',
-  borderRadius: '12px',
-  iconHeight: 18,
-  iconWidth: 18,
-  disabled: false,
-  onClick: () => {},
-  onCancelClick: () => {}
-};

package/dist/stories/components/IconButton/IconButton.stories.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Maintenance = exports.Exit = exports.DownloadProcess = exports.Download = exports.Document = exports.Bell = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _IconButton = require("./IconButton");
-var _default = exports.default = {
-  title: 'SAG Core/IconButton',
-  component: _IconButton.IconButton,
-  tags: ['autodocs'],
-  argTypes: {
-    iconName: {
-      name: 'Icon Name',
-      options: ['download', 'document', 'fly', 'bell', 'maintenance', 'exit', 'eye'],
-      control: {
-        type: 'select'
-      },
-      description: 'select icon from list to fill into the button'
-    },
-    buttonText: {
-      name: 'buttonText',
-      control: {
-        type: 'text'
-      },
-      description: 'Button text aside icon'
-    },
-    iconWidth: {
-      name: 'Icon Width',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'width of the icon (in px)'
-    },
-    iconHeight: {
-      name: 'Icon Height',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'height of the icon (in px)'
-    },
-    showProcess: {
-      name: 'Show Process',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Add visual progress on the button'
-    },
-    disabled: {
-      name: 'Disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'changes the button to be enabled/disabled'
-    },
-    // downloadStatus: {
-    //   name: 'Download status',
-    //   control: { type: 'radio' },
-    //   options: ['in progress', 'success', 'fail'],
-    //   defaultValue: 'success',
-    //   description: 'The state of the button when progress exist',
-    // },
-
-    onClick: {
-      action: 'onClick',
-      description: 'returns an event click object when user clicks on a button'
-    }
-  }
-};
-const Exit = exports.Exit = {
-  args: {
-    iconName: 'exit',
-    iconWidth: 30,
-    iconHeight: 30,
-    showProcess: false,
-    disabled: false
-  }
-};
-const Download = exports.Download = {
-  args: {
-    iconName: 'download',
-    iconWidth: 30,
-    iconHeight: 30,
-    showProcess: false,
-    disabled: false
-  }
-};
-const DownloadProcess = exports.DownloadProcess = {
-  args: {
-    iconName: 'download',
-    iconWidth: 30,
-    iconHeight: 30,
-    buttonText: 'Download',
-    // downloadStatus: 'in progress',
-    showProcess: true,
-    disabled: false
-  }
-};
-const Document = exports.Document = {
-  args: {
-    iconName: 'document',
-    iconWidth: 18,
-    iconHeight: 18,
-    showProcess: false,
-    disabled: false
-  }
-};
-const Bell = exports.Bell = {
-  args: {
-    iconName: 'bell',
-    iconWidth: 60,
-    iconHeight: 60,
-    showProcess: false,
-    disabled: false
-  }
-};
-const Maintenance = exports.Maintenance = {
-  args: {
-    iconName: 'maintenance',
-    iconWidth: 40,
-    iconHeight: 40,
-    showProcess: false,
-    disabled: false
-  }
-};

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

@@ -1,64 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SpanText = exports.IconButtonContainer = exports.CancelClick = exports.ButtonWrapper = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div`
-  width: fit-content;
-  text-align: center;
-`;
-const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a`
-  font-size: 14px;
-  font-weight: 400;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 20px;
-  text-decoration: none;
-  color: ${props => props.color};
-  border-radius: ${props => props.borderRadius};
-  border: 1px solid ${props => props.borderColor.toString()};
-  background: ${props => props.backgroundColor.toString()};
-  position: relative;
-  transition: all .3s;
-  ${props => props.inProgress && (0, _styledComponents.css)`
-      pointer-events: none;
-      &:after {
-        content: 'In progress';
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-wrap: nowrap;
-        position: absolute;
-        background: linear-gradient(
-          to right,
-          #5FCC70 ${props.progress}%,
-          #B1B1B1 ${props.progress + 1}%,
-          #B1B1B1 100%
-        );
-        width: 100%;
-        height: 100%;
-        border-radius: ${props => props.borderRadius};
-        border-width: 0;
-        z-index: 9;
-      }
-    `}
-  &:hover, &:focus {
-    cursor: pointer;
-    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  }
-`;
-const SpanText = exports.SpanText = _styledComponents.default.span`
-`;
-const CancelClick = exports.CancelClick = _styledComponents.default.span`
-  display: inherit;
-  font-family: "Lato", sans-serif;;
-  font-size: 14px;
-  color: #568202;
-  cursor: pointer;
-  margin-top: 5px;
-`;

package/dist/stories/components/Input/Input.js

@@ -1,183 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var _IconsHandler = require("../../utils/IconsHandler");
-var _Input = require("./Input.style");
-// CustomInput.js
-
-const Input = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    size,
-    selectedValue,
-    placeHolder,
-    onChange,
-    onBlur,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    leftIcon,
-    rightIcon,
-    password,
-    leftIconOnClick,
-    rightIconOnClick
-  } = _ref;
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)('');
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const inputRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    setInputValue(selectedValue);
-  }, [selectedValue]);
-  const handleLabelClick = () => {
-    if (disabled) return;
-    setIsFocused(true);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    }
-  };
-  const handleInputChange = e => {
-    setIsFocused(true);
-    setInputValue(e.target.value);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current2;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    }
-    onChange({
-      newValue: e.target.value || ''
-    });
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current3;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-    }
-  };
-  const handleBlur = () => {
-    onBlur();
-    setIsFocused(false);
-  };
-  const leftIconOnClickHandler = () => {
-    if (disabled) return;
-    leftIconOnClick({
-      leftIconOnClick: leftIcon
-    });
-  };
-  const rightIconOnClickHandler = () => {
-    if (disabled) return;
-    rightIconOnClick({
-      rightIconOnClick: rightIcon
-    });
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
-  };
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-  const getPasswordIcon = () => {
-    if (!password) return '';
-    if (showPassword) {
-      return /*#__PURE__*/_react.default.createElement(_Input.IconWrapper, {
-        className: "passwordEyeSlash",
-        disabled: disabled,
-        onClick: toggleShowPassword
-      }, /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, {
-        onClick: toggleShowPassword,
-        color: error ? 'red' : labelColor
-      }));
-    }
-    return (0, _IconsHandler.getIcon)('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
-  };
-  return /*#__PURE__*/_react.default.createElement(_Input.MainContainer, {
-    className: "MainContainer",
-    width: width,
-    size: size,
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_Input.InputContainer, {
-    className: "InputContainer",
-    labelColor: labelColor,
-    disabled: disabled,
-    error: error,
-    isFocused: isFocused,
-    size: size
-  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Input.InputSubContainer, {
-    className: "InputSubContainer",
-    ref: containerRef,
-    labelColor: labelColor,
-    disabled: disabled,
-    error: error,
-    onClick: handleLabelClick,
-    size: size
-  }, /*#__PURE__*/_react.default.createElement(_Input.Label, {
-    className: "Label",
-    isFocused: isFocused,
-    labelColor: labelColor,
-    hasValue: inputValue,
-    leftIcon: leftIcon,
-    disabled: disabled,
-    error: error,
-    errorMessage: errorMessage,
-    onClick: handleLabelClick,
-    size: size
-  }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      color: disabled ? '#D0D0D0' : 'red',
-      height: '16px'
-    }
-  }, "*")), /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
-    className: "StyledInput",
-    ref: inputRef,
-    type: password && !showPassword ? 'password' : 'text',
-    value: inputValue,
-    onChange: handleInputChange,
-    onClick: handleLabelClick,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    disabled: disabled,
-    placeholder: isFocused ? placeHolder : '',
-    error: error,
-    isFocused: isFocused
-  })), password ? getPasswordIcon() : getRightIcon()), error && (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) > 0 && /*#__PURE__*/_react.default.createElement(_Input.ErrorMessage, {
-    className: "ErrorMessage",
-    width: width
-  }, errorMessage));
-};
-Input.defaultProps = {
-  placeHolder: 'Type...',
-  label: '',
-  labelEmptyValue: '',
-  size: 'medium',
-  labelColor: '#066768',
-  required: true,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  selectedValue: '',
-  leftIcon: 'none',
-  rightIcon: 'none',
-  leftIconOnClick: () => {},
-  rightIconOnClick: () => {},
-  onBlur: () => {},
-  password: false
-};
-var _default = exports.default = Input;