import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import Typography from '../../ui/typography/typography'; import { COLORS, FONT_WEIGHT, TYPOGRAPHY, DISPLAY, FLEX_WRAP, ALIGN_ITEMS, TEXT_ALIGN, } from '../../../helpers/constants/design-system'; export default function TransactionDetailItem({ detailTitle = '', detailText = '', detailTitleColor = COLORS.BLACK, detailTotal = '', subTitle = '', subText = '', boldHeadings = true, flexWidthValues = false, }) { return (
{detailTitle}
{detailText && ( {detailText} )} {detailTotal}
{React.isValidElement(subTitle) ? (
{subTitle}
) : ( {subTitle} )} {subText}
); } TransactionDetailItem.propTypes = { /** * Detail title text wrapped in Typography component. */ detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), /** * The color of the detailTitle text accepts all Typography color props */ detailTitleColor: PropTypes.string, /** * Text to show on the left of the detailTotal. Wrapped in Typography component. */ detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), /** * Total amount to show. Wrapped in Typography component. Will be bold if boldHeadings is true */ detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), /** * Subtitle text. Checks if React.isValidElement before displaying. Displays under detailTitle */ subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), /** * Text to show under detailTotal. Wrapped in Typography component. */ subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), /** * Whether detailTotal is bold or not. Defaults to true */ boldHeadings: PropTypes.bool, /** * Changes width to auto for transaction-detail-item__detail-values */ flexWidthValues: PropTypes.bool, };