@razorpay/blade/build/lib/web/development/components/Form/FormHint.js

The Design System that powers Razorpay

import 'react';
import { FormHintWrapper } from './FormHintWrapper.web.js';
import { hintMarginTop, hintTextSize, hintIconSize } from './formTokens.js';
import '../Typography/Text/index.js';
import '../Box/BaseBox/index.js';
import '../Icons/index.js';
import '../../utils/getPlatformType/index.js';
import '../Box/index.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Box } from '../Box/Box.js';
import { Text } from '../Typography/Text/Text.js';
import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';

/* eslint-disable react/display-name */

var HintText = function HintText(_ref) {
  var Icon = _ref.icon,
    children = _ref.children,
    id = _ref.id,
    color = _ref.color,
    size = _ref.size;
  var isReactNative = getPlatformType() === 'react-native';
  return /*#__PURE__*/jsx(BaseBox, {
    marginTop: hintMarginTop[size],
    id: id,
    children: /*#__PURE__*/jsxs(FormHintWrapper, {
      children: [Icon ?
      /*#__PURE__*/
      // offset block element 2px down to align with text
      jsx(Box, {
        flexShrink: 0,
        marginTop: "spacing.1",
        children: /*#__PURE__*/jsx(Icon, {})
      }) : null, /*#__PURE__*/jsx(Text, {
        as: isReactNative ? undefined : 'span',
        color: color,
        size: hintTextSize[size],
        variant: "caption",
        wordBreak: "break-word",
        children: children
      })]
    })
  });
};
var Icons = {
  error: function error(_ref2) {
    var size = _ref2.size;
    return /*#__PURE__*/jsx(InfoIcon, {
      display: 'block',
      color: "feedback.icon.negative.intense",
      size: hintIconSize[size]
    });
  },
  success: function success(_ref3) {
    var size = _ref3.size;
    return /*#__PURE__*/jsx(CheckIcon, {
      display: 'block',
      color: "feedback.icon.positive.intense",
      size: hintIconSize[size]
    });
  }
};
var FormHint = function FormHint(_ref4) {
  var type = _ref4.type,
    helpText = _ref4.helpText,
    errorText = _ref4.errorText,
    successText = _ref4.successText,
    helpTextId = _ref4.helpTextId,
    errorTextId = _ref4.errorTextId,
    successTextId = _ref4.successTextId,
    _ref4$size = _ref4.size,
    size = _ref4$size === void 0 ? 'medium' : _ref4$size;
  var colors = {
    help: 'surface.text.gray.muted',
    error: 'feedback.text.negative.intense',
    success: 'feedback.text.positive.intense'
  };
  var showError = type === 'error' && errorText;
  var showSuccess = type === 'success' && successText;
  var showHelp = !showError && !showSuccess && helpText;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [showHelp && /*#__PURE__*/jsx(HintText, {
      size: size,
      id: helpTextId,
      color: colors.help,
      children: helpText
    }), showError && /*#__PURE__*/jsx(HintText, {
      size: size,
      id: errorTextId,
      icon: function icon() {
        return Icons.error({
          size: size
        });
      },
      color: colors.error,
      children: errorText
    }), showSuccess && /*#__PURE__*/jsx(HintText, {
      size: size,
      id: successTextId,
      icon: function icon() {
        return Icons.success({
          size: size
        });
      },
      color: colors.success,
      children: successText
    })]
  });
};

export { FormHint };
//# sourceMappingURL=FormHint.js.map