@navinc/base-react-components/src/helper.js

Nav's Pattern Library

import styled from 'styled-components'
import Button from './button.js'
import Copy from './copy.js'
import Icon from './icon.js'
import PropTypes from 'prop-types'
import isRebrand from './is-rebrand.js'

export const HelperIcon = styled(Icon)`
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => (isRebrand(theme) ? theme.navNeutral400 : theme.neutral400)};
`

export const HelperDescription = styled(Copy).attrs(() => ({ size: 'sm', bold: true }))`
  color: inherit;
`
const getHelperItemColor = (theme, isLink) => {
  if (isRebrand(theme)) return !isLink && theme.navNeutral400
  return !isLink && theme.neutral400
}
export const HelperItem = styled.div.attrs(
  ({ isLink }) => isLink && { as: Button, variation: 'buttonLink', type: 'button' }
)`
  display: grid;
  padding-top: 4px;
  grid-template-columns: min-content 1fr;
  grid-gap: 4px;
  text-align: left;
  ${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}
  color: ${({ theme, isLink }) => getHelperItemColor(theme, isLink)}
`
/**
 * Helper is a tooltip component
 *
 * @returns ReactElement
 */
export const Helper = ({ className, hasSpaceForErrors, helperLinkAction, helperText, iconName }) => (
  <HelperItem
    className={className}
    isLink={!!helperLinkAction}
    onClick={helperLinkAction}
    hasSpaceForErrors={hasSpaceForErrors}
  >
    {iconName && <HelperIcon name={iconName} />}
    <HelperDescription data-testid={`input:helper-text:${helperText}`} light size="xs">
      {helperText}
    </HelperDescription>
  </HelperItem>
)

Helper.propTypes = {
  /** Classname provided to the HelperItem */
  className: PropTypes.string,
  /** Adds space for an error. Suggest passing !!errors into this prop to add/remove it based on the existence of errors */
  hasSpaceForErrors: PropTypes.bool,
  /** onClick */
  helperLinkAction: PropTypes.func,
  /** Text inside the helper description */
  helperText: PropTypes.string,
  /** Name of icon  */
  iconName: PropTypes.string,
}

Helper.defaultProps = {
  iconName: 'actions/circle-faq',
}

export default styled(Helper)``