sag_components 1.0.976 → 1.0.978

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;