You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
2 years ago
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import Box from '../../ui/box';
|
||
|
|
import Typography from '../../ui/typography';
|
||
|
|
import Tooltip from '../../ui/tooltip';
|
||
|
|
import {
|
||
|
|
COLORS,
|
||
|
|
DISPLAY,
|
||
|
|
TYPOGRAPHY,
|
||
|
|
} from '../../../helpers/constants/design-system';
|
||
|
|
|
||
|
|
export const CustomSpendingCapTooltip = ({
|
||
|
|
tooltipContentText,
|
||
|
|
tooltipIcon,
|
||
|
|
}) => (
|
||
|
|
<Box display={DISPLAY.INLINE_BLOCK}>
|
||
|
|
<Tooltip
|
||
|
|
interactive
|
||
|
|
position="top"
|
||
|
|
html={
|
||
|
|
<Typography
|
||
|
|
variant={TYPOGRAPHY.H7}
|
||
|
|
margin={3}
|
||
|
|
color={COLORS.TEXT_ALTERNATIVE}
|
||
|
|
className="form-field__heading-title__tooltip"
|
||
|
|
>
|
||
|
|
{tooltipContentText}
|
||
|
|
</Typography>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{tooltipIcon ? (
|
||
|
|
<i className="fa fa-exclamation-triangle form-field__heading-title__tooltip__warning-icon" />
|
||
|
|
) : (
|
||
|
|
tooltipIcon !== '' && <i className="fa fa-question-circle" />
|
||
|
|
)}
|
||
|
|
</Tooltip>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
|
||
|
|
CustomSpendingCapTooltip.propTypes = {
|
||
|
|
tooltipContentText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||
|
|
tooltipIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
||
|
|
};
|