field-label.component.tsx

import React from 'react';
import { Tooltip } from '@carbon/react';
import { useTranslation } from 'react-i18next';
import { type FormField } from '../../types';
 
import styles from './field-label.scss';
import { Information } from '@carbon/react/icons';
 
interface FieldLabelProps {
  field: FormField;
  /**
   * Custom label text to override the default field label.
   */
  customLabel?: string;
}
 
const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
  const { t } = useTranslation();
  const labelText = customLabel || t(field.label);
  const hasTooltip = Boolean(field.questionInfo);
  return (
    <TooltipWrapper field={field} hasTooltip={hasTooltip}>
      <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
        <span>{labelText}</span>
        {field.isRequired && (
          <span title={t('required', 'Required')} className={styles.required}>
            *
          </span>
        )}
        {hasTooltip && (
          <Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
        )}
      </div>
    </TooltipWrapper>
  );
};
 
const TooltipWrapper: React.FC<{ field: FormField; hasTooltip: boolean; children: React.ReactNode }> = ({
  field,
  hasTooltip,
  children,
}) => {
  const { t } = useTranslation();
  return hasTooltip ? (
    <Tooltip align="top-left" label={t(field.questionInfo)}>
      {children}
    </Tooltip>
  ) : (
    <>{children}</>
  );
};
 
export default FieldLabel;