@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Validation/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import ValidationPassed from '@material-ui/icons/CheckCircle';
+import ValidationFailed from '@material-ui/icons/Cancel';
+import PlaceholderIcon from '@material-ui/icons/FiberManualRecord';
+import { string, objectOf, bool, elementType } from 'prop-types';
+import UTLabel from '../../../../../../../UTLabel';
+import styles from './styles.module.scss';
+const Validation = _ref => {
+  let {
+    assertion,
+    classes,
+    dataTestId,
+    disabled,
+    NoValueIcon,
+    requirement,
+    shouldShowError,
+    ValidationFailedIcon,
+    ValidationPassedIcon,
+    value
+  } = _ref;
+  const {
+    passedIconStyle,
+    failedIconStyle,
+    iconStyle
+  } = classes;
+  const PassedIcon = ValidationPassedIcon || ValidationPassed;
+  const FailedIcon = ValidationFailedIcon || ValidationFailed;
+  const NoValue = NoValueIcon || PlaceholderIcon;
+  const labelColor = !value && !shouldShowError ? 'gray' : assertion ? 'success' : 'error';
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId
+  }, value || shouldShowError && !disabled ? assertion ? /*#__PURE__*/React.createElement(PassedIcon, {
+    className: "".concat(styles.passedIcon, " ").concat(iconStyle, " ").concat(passedIconStyle)
+  }) : /*#__PURE__*/React.createElement(FailedIcon, {
+    className: "".concat(styles.failedIcon, " ").concat(iconStyle, " ").concat(failedIconStyle)
+  }) : /*#__PURE__*/React.createElement(NoValue, {
+    className: iconStyle
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.label,
+    colorTheme: labelColor,
+    variant: "small",
+    withMarkdown: true
+  }, requirement));
+};
+Validation.propTypes = {
+  assertion: bool,
+  classes: objectOf(string),
+  dataTestId: string,
+  disabled: bool,
+  NoValueIcon: elementType,
+  requirement: string,
+  shouldShowError: bool,
+  ValidationFailedIcon: elementType,
+  ValidationPassedIcon: elementType,
+  value: string
+};
+export default Validation;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Validation/styles.module.scss

@@ -0,0 +1,9 @@
+.container {
+  align-items: center;
+  display: flex;
+  margin-top: 8px;
+}
+
+.label {
+  margin-left: 8px;
+}

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/index.js

@@ -0,0 +1,127 @@
+import React, { Fragment } from 'react';
+import { arrayOf, shape, string, elementType, objectOf, bool, instanceOf, oneOfType } from 'prop-types';
+import { metaPropTypes } from '../../../../../../types/formTypes';
+import Validation from './components/Validation';
+import Error from './components/Error';
+const PasswordValidations = _ref => {
+  let {
+    passwordValidations,
+    value,
+    classes,
+    ValidationFailedIcon,
+    ValidationPassedIcon,
+    ErrorIcon,
+    NoValueIcon,
+    meta,
+    disabled,
+    passwordValidationsWarning,
+    errorDataTestId,
+    validationDataTestId
+  } = _ref;
+  const validatedRegExps = passwordValidations.map(_ref2 => {
+    let {
+      expression,
+      ...regex
+    } = _ref2;
+    return {
+      assertion: new RegExp(expression).test(value),
+      ...regex
+    };
+  });
+  const {
+    errorsContainerStyle
+  } = classes;
+  const {
+    submitFailed,
+    error: metaError
+  } = meta;
+  const validations = validatedRegExps.filter(_ref3 => {
+    let {
+      requirement
+    } = _ref3;
+    return requirement;
+  });
+  const errors = validatedRegExps.filter(_ref4 => {
+    let {
+      requirement
+    } = _ref4;
+    return !requirement;
+  });
+  if (metaError && !passwordValidations.map(_ref5 => {
+    let {
+      error
+    } = _ref5;
+    return error;
+  }).includes(metaError)) errors.push({
+    error: metaError
+  });
+  const showErrors = errors.some(_ref6 => {
+    let {
+      assertion,
+      error
+    } = _ref6;
+    return !assertion && !(passwordValidationsWarning !== null && passwordValidationsWarning !== void 0 && passwordValidationsWarning.some(_ref7 => {
+      let {
+        error: warningError
+      } = _ref7;
+      return error === warningError;
+    }));
+  });
+  return /*#__PURE__*/React.createElement(Fragment, null, validations.map((_ref8, index) => {
+    let {
+      requirement,
+      assertion
+    } = _ref8;
+    return /*#__PURE__*/React.createElement(Validation, {
+      assertion: assertion,
+      classes: classes,
+      disabled: disabled,
+      key: requirement,
+      NoValueIcon: NoValueIcon,
+      requirement: requirement,
+      shouldShowError: submitFailed,
+      ValidationFailedIcon: ValidationFailedIcon,
+      ValidationPassedIcon: ValidationPassedIcon,
+      value: value,
+      dataTestId: "".concat(validationDataTestId, ".").concat(index)
+    });
+  }), submitFailed && showErrors && /*#__PURE__*/React.createElement("div", {
+    className: errorsContainerStyle
+  }, errors.map((_ref9, index) => {
+    let {
+      error,
+      assertion
+    } = _ref9;
+    return /*#__PURE__*/React.createElement(Error, {
+      dataTestId: "".concat(errorDataTestId, ".").concat(index),
+      ErrorIcon: ErrorIcon,
+      classes: classes,
+      assertion: assertion,
+      error: error,
+      key: error
+    });
+  })));
+};
+PasswordValidations.propTypes = {
+  passwordValidations: arrayOf(shape({
+    expression: oneOfType([string, instanceOf(RegExp)]),
+    requirement: string,
+    error: string
+  })),
+  passwordValidationsWarning: arrayOf(shape({
+    expression: oneOfType([string, instanceOf(RegExp)]),
+    requirement: string,
+    error: string
+  })),
+  value: string,
+  classes: objectOf(string),
+  ValidationFailedIcon: elementType,
+  ValidationPassedIcon: elementType,
+  ErrorIcon: elementType,
+  NoValueIcon: elementType,
+  meta: metaPropTypes,
+  disabled: bool,
+  errorDataTestId: string,
+  validationDataTestId: string
+};
+export default PasswordValidations;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordWarning/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { arrayOf, string, shape, elementType, objectOf } from 'prop-types';
+import Divider from '@material-ui/core/Divider';
+import UTLabel from '../../../../../UTLabel';
+import styles from './styles.module.scss';
+const PasswordWarning = _ref => {
+  let {
+    classes,
+    dataTestId,
+    passwordValidationsWarning,
+    value,
+    WarningIcon
+  } = _ref;
+  const {
+    warningDivider
+  } = classes;
+  const validatedRegExps = passwordValidationsWarning.map(_ref2 => {
+    let {
+      expression,
+      ...regex
+    } = _ref2;
+    return {
+      assertion: new RegExp(expression).test(value),
+      ...regex
+    };
+  });
+  return validatedRegExps.map((_ref3, index) => {
+    let {
+      error,
+      assertion
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: assertion ? styles.hide : styles.warningContainer,
+      "data-testid": "".concat(dataTestId, ".").concat(index)
+    }, /*#__PURE__*/React.createElement(Divider, {
+      className: warningDivider
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.iconAndLabelContainer
+    }, /*#__PURE__*/React.createElement(WarningIcon, null), /*#__PURE__*/React.createElement(UTLabel, {
+      className: styles.warning,
+      colorTheme: "warning",
+      withMarkdown: true
+    }, error)));
+  });
+};
+PasswordWarning.propTypes = {
+  classes: objectOf(string),
+  passwordValidationsWarning: arrayOf(shape({
+    expression: string,
+    requirement: string,
+    error: string
+  })),
+  value: string,
+  WarningIcon: elementType
+};
+export default PasswordWarning;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordWarning/styles.module.scss

@@ -0,0 +1,16 @@
+.hide {
+  display: none;
+}
+
+.warningContainer {
+  margin-top: 16px;
+}
+
+.iconAndLabelContainer {
+  display: flex;
+  margin-top: 16px;
+}
+
+.warning {
+  margin-left: 8px;
+}

package/dist/esm/components/UTPasswordField/versions/V0/index.js

@@ -0,0 +1,102 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { string, bool, elementType, objectOf } from 'prop-types';
+import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
+import UTTextInput from '../../../UTTextInput';
+import WithTheme from '../../../WithTheme';
+import { retrieveStyle } from './theme';
+import PasswordValidations from './components/PasswordValidations';
+import PasswordWarning from './components/PasswordWarning';
+const UTPasswordField = _ref => {
+  let {
+    actionDataTestId,
+    classes = {},
+    dataTestId,
+    disabled,
+    errorDataTestId,
+    ErrorIcon,
+    field,
+    helperTextDataTestId,
+    input,
+    meta,
+    NoValueIcon,
+    tooltipContentDataTestId,
+    tooltipIconDataTestId,
+    validationDataTestId,
+    ValidationFailedIcon,
+    ValidationPassedIcon,
+    warningDataTestId,
+    WarningIcon,
+    ...otherProps
+  } = _ref;
+  const {
+    passwordValidations,
+    showValidations,
+    passwordValidationsWarning
+  } = field || {};
+  const {
+    value
+  } = input;
+  const {
+    validationContainer
+  } = classes;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTTextInput, _extends({
+    actionDataTestId: actionDataTestId,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    field: field,
+    helperTextDataTestId: helperTextDataTestId,
+    input: input,
+    meta: !showValidations ? meta : undefined,
+    tooltipContentDataTestId: tooltipContentDataTestId,
+    tooltipIconDataTestId: tooltipIconDataTestId,
+    type: "password"
+  }, otherProps)), showValidations && passwordValidations && /*#__PURE__*/React.createElement("div", {
+    className: validationContainer
+  }, /*#__PURE__*/React.createElement(PasswordValidations, {
+    classes: classes,
+    disabled: disabled,
+    errorDataTestId: errorDataTestId,
+    ErrorIcon: ErrorIcon,
+    meta: meta,
+    NoValueIcon: NoValueIcon,
+    passwordValidations: passwordValidations,
+    passwordValidationsWarning: passwordValidationsWarning,
+    validationDataTestId: validationDataTestId,
+    ValidationFailedIcon: ValidationFailedIcon,
+    ValidationPassedIcon: ValidationPassedIcon,
+    value: value
+  })), showValidations && passwordValidationsWarning && /*#__PURE__*/React.createElement(PasswordWarning, {
+    classes: classes,
+    dataTestId: warningDataTestId,
+    passwordValidationsWarning: passwordValidationsWarning,
+    value: value,
+    WarningIcon: WarningIcon
+  }));
+};
+UTPasswordField.propTypes = {
+  actionDataTestId: string,
+  classes: objectOf(string),
+  dataTestId: string,
+  disabled: bool,
+  errorDataTestId: string,
+  ErrorIcon: elementType,
+  field: fieldType,
+  helperTextDataTestId: string,
+  input: inputPropTypes,
+  label: string,
+  meta: metaPropTypes,
+  NoValueIcon: elementType,
+  PasswordInvisibleIcon: elementType,
+  PasswordVisibleIcon: elementType,
+  placeholder: string,
+  tooltipContentDataTestId: string,
+  tooltipIconDataTestId: string,
+  validationDataTestId: string,
+  ValidationFailedIcon: elementType,
+  ValidationPassedIcon: elementType,
+  variant: string,
+  warningDataTestId: string,
+  WarningIcon: elementType
+};
+export default WithTheme(retrieveStyle)(UTPasswordField);

package/dist/esm/components/UTPasswordField/versions/V0/theme.js

@@ -0,0 +1,30 @@
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  var _theme$UTPasswordFiel, _theme$UTPasswordFiel2, _theme$UTPasswordFiel3, _theme$UTPasswordFiel4;
+  let {
+    theme
+  } = _ref;
+  return {
+    iconStyle: {
+      height: (theme === null || theme === void 0 || (_theme$UTPasswordFiel = theme.UTPasswordField) === null || _theme$UTPasswordFiel === void 0 || (_theme$UTPasswordFiel = _theme$UTPasswordFiel.icon) === null || _theme$UTPasswordFiel === void 0 ? void 0 : _theme$UTPasswordFiel.size) || '1rem',
+      width: (theme === null || theme === void 0 || (_theme$UTPasswordFiel2 = theme.UTPasswordField) === null || _theme$UTPasswordFiel2 === void 0 || (_theme$UTPasswordFiel2 = _theme$UTPasswordFiel2.icon) === null || _theme$UTPasswordFiel2 === void 0 ? void 0 : _theme$UTPasswordFiel2.size) || '1rem',
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTPasswordFiel3 = theme.UTPasswordField) === null || _theme$UTPasswordFiel3 === void 0 || (_theme$UTPasswordFiel3 = _theme$UTPasswordFiel3.icon) === null || _theme$UTPasswordFiel3 === void 0 ? void 0 : _theme$UTPasswordFiel3.borderRadius) || '50%'
+    },
+    passedIconStyle: {
+      fill: theme.Palette.success['05']
+    },
+    failedIconStyle: {
+      fill: theme.Palette.error['05']
+    },
+    errorsContainerStyle: {
+      borderTop: "1px solid ".concat(theme.Palette.error['05']),
+      marginTop: 7
+    },
+    warningDivider: {
+      backgroundColor: withImportant(theme.Palette.warning['05'])
+    },
+    validationContainer: {
+      margin: withImportant(theme === null || theme === void 0 || (_theme$UTPasswordFiel4 = theme.UTPasswordField) === null || _theme$UTPasswordFiel4 === void 0 || (_theme$UTPasswordFiel4 = _theme$UTPasswordFiel4.validationContainer) === null || _theme$UTPasswordFiel4 === void 0 ? void 0 : _theme$UTPasswordFiel4.margin)
+    }
+  };
+};

package/dist/esm/components/UTPasswordField/versions/V1/README.md

@@ -0,0 +1,23 @@
+# UTPasswordField
+
+## Description
+
+`UTPasswordField` is a component that provides a password input field with an optional toggle to show or hide the password. It builds on the `UTTextInput` component and adds functionality specific to password inputs.
+
+## Props
+
+`UTPasswordField` inherits all the props from `UTTextInput` and adds custom behavior for handling password visibility.
+
+| Name | Type | Default | Description                            |
+| ---- | ---- | ------- | -------------------------------------- |
+| ...  | ...  | ...     | Inherits all props from `UTTextInput`. |
+
+## Usage
+
+```javascript
+<UTPasswordField placeholder="Enter your password" />
+```
+
+## Notes
+
+For more detailed information on inherited props, refer to the documentation for `UTTextInput`.

package/dist/esm/components/UTPasswordField/versions/V1/constants.js

@@ -0,0 +1,2 @@
+export const ICON_EYE = 'IconEye';
+export const ICON_EYE_OFF = 'IconEyeOff';

package/dist/esm/components/UTPasswordField/versions/V1/index.js

@@ -0,0 +1,29 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { propTypes as textInputPropTypes } from '../../../UTTextInput/versions/V1';
+import UTTextInput from '../../../UTTextInput';
+import { ICON_EYE, ICON_EYE_OFF } from './constants';
+const UTPasswordField = _ref => {
+  let {
+    type,
+    onVisibilityToggle,
+    ...props
+  } = _ref;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const toggleVisibility = () => {
+    onVisibilityToggle === null || onVisibilityToggle === void 0 || onVisibilityToggle(!isPasswordVisible);
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const action = {
+    Icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
+    onClick: toggleVisibility
+  };
+  const textInputType = isPasswordVisible ? type : 'password';
+  return /*#__PURE__*/React.createElement(UTTextInput, _extends({}, props, {
+    action: action,
+    type: textInputType,
+    version: "V1"
+  }));
+};
+UTPasswordField.propTypes = textInputPropTypes;
+export default UTPasswordField;

package/dist/esm/components/UTPhoneInput/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTPhoneInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTPhoneInput.propTypes = {
+  version: string
+};
+export default UTPhoneInput;