digitransit-ui/app/component/FareDisclaimer.js

import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import Icon from './Icon';

const FareDisclaimer = ({ textId, values, href = null, linkText = null }) => {
  return (
    <div className="disclaimer-container unknown-fare-disclaimer__top">
      <div className="icon-container">
        <Icon className="info" img="icon-icon_info" />
      </div>
      <div className="description-container">
        <FormattedMessage id={textId} values={values} />

        {href && (
          <a href={href}>
            <FormattedMessage id={linkText} defaultMessage={linkText} />
          </a>
        )}
      </div>
    </div>
  );
};

FareDisclaimer.propTypes = {
  textId: PropTypes.string.isRequired,
  values: PropTypes.oneOfType([
    PropTypes.shape({
      agencyName: PropTypes.string,
    }),
    PropTypes.object,
  ]),
  href: PropTypes.string,
  linkText: PropTypes.string,
};

FareDisclaimer.defaultProps = {
  values: {},
  href: null,
  linkText: null,
};

export default FareDisclaimer;