terra-clinical-item-display/src/ItemComment.jsx

The Item Display component creates an display for text and an optional graphic. The Comment subcomponent creates a display for text with a comment icon.

import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-intl';
import classNames from 'classnames';
import classNamesBind from 'classnames/bind';
import ThemeContext from 'terra-theme-context';
import CommentIndicator from 'terra-icon/lib/icon/IconComment';
import ItemDisplay from './ItemDisplay';
import styles from './ItemComment.module.scss';

const cx = classNamesBind.bind(styles);

const propTypes = {
  /**
   * The text to be displayed for the comment.
   */
  text: PropTypes.string,
  /**
   * Whether or not the text should be truncated in display. Note: To ensure keyboard accessibility,
   * if this prop is used, consumers will need to provide a method to disclose the rest of the text
   * so that it is accessible to keyboard users.
   */
  isTruncated: PropTypes.bool,
  /**
   * @private
   * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
   */
  intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired,
};

const defaultProps = {
  text: '',
  isTruncated: false,
};

const ItemComment = ({
  text,
  isTruncated,
  intl,
  ...customProps
}) => {
  const theme = React.useContext(ThemeContext);
  const commentClass = classNames(
    cx(
      'item-comment',
      theme.className,
    ),
    customProps.className,
  );
  const commentIcon = intl.formatMessage({ id: 'Terra.itemDisplay.comment' });
  return (
    <ItemDisplay
      text={text}
      isTruncated={isTruncated}
      icon={<CommentIndicator a11yLabel={commentIcon} className={cx('inline-icon')} role="img" focusable="true" />}
      {...customProps}
      className={commentClass}
    />
  );
};

ItemComment.propTypes = propTypes;
ItemComment.defaultProps = defaultProps;

export default injectIntl(ItemComment);