labo-components/app/components/shared/Info.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import IDUtil from '../../util/IDUtil';

/**
 * Component with information icon and tooltip
 *
 * className could be e.g.: primary, secondary, black, grey, white, left
 * see Info.scss for all classes or add your own
 */

const Info = ({ id, text, className }) => (
    <span
        className={classNames(IDUtil.cssClassName('info'), {
            [className]: className
        })}
    >
        <i
            className="fas fa-info-circle"
            data-for={'tooltip__' + id}
            data-tip={text}
            data-html={true}
        />
        <ReactTooltip id={'tooltip__' + id} />
    </span>
);

Info.propTypes = {
    // unique identifier
    id: PropTypes.string.isRequired,
    // tooltip text
    text: PropTypes.string.isRequired,

    // (optional) className for styling
    className: PropTypes.string
};

// Render Info with content by id from a strings list
export const renderInfoWithId = (id, strings, className) => {
    const text =
        id in strings ? strings[id] : 'Could not find string with id ' + id;
    return <Info id={id} text={text} className={className} />;
};

export default Info;