TextLineWithIcon

Common component to show an icon with a line of text

Properties

Name	Type	Default Value	Required	Description
iconProps	any		No	Props for icon you want to display in this line of text
text	string		Yes	string to display
variant	string | number | symbol		No	sets the variant of the text, if not set defaults to MobileBody
color	string | number | symbol		No	sets the text to the specified color, if not specified defaults to primary
textAlign	"left" | "right" | "center"		No	alignment of the text
textTag	{ labelType: LabelTagTypes; }		No	sets the text to be a tag
a11yLabel	string		No
mt	string | number		No	set margin top of this component
mb	string | number		No	set margin bottom of this component

Example

How to use the TextLineWithIcon component

{textLinesWithIcon?.map((textObj: TextLineWithIconProps, index: number) => {
    return <TextLineWithIcon key={index} {...textObj} />
})}

Source Code

Full code for the TextLineWithIcon component

import React, { FC } from 'react'

import { useTheme } from 'utils/hooks'

import Box from './Box'
import TextView from './TextView'
import VAIcon, { VAIconProps } from './VAIcon'
import { TextLine } from './types'

export type TextLineWithIconProps = {
  /** Props for icon you want to display in this line of text */
  iconProps?: VAIconProps & {
    /** If the icon is supposed to appear on its own line (ex: read tag) */
    isOwnLine?: boolean
  }
} & TextLine

/**Common component to show an icon with a line of text*/
export const TextLineWithIcon: FC<TextLineWithIconProps> = ({ iconProps, text, variant, textAlign, color }) => {
  const themes = useTheme()
  const iconNotOwnRow = !(iconProps && iconProps.isOwnLine)

  return (
    <Box flexDirection={'row'} alignItems={'center'}>
      <Box
        ml={iconNotOwnRow ? 0 : themes.dimensions.listItemDecoratorMarginLeft}
        mr={themes.dimensions.condensedMarginBetween}>
        {iconProps && (
          <VAIcon
            name={iconProps.name}
            width={iconProps.width}
            height={iconProps.height}
            fill={iconProps.fill}
            testID={iconProps.testID}
          />
        )}
        {!iconProps && <Box mr={16} />}
      </Box>
      {iconNotOwnRow && (
        <TextView flex={1} variant={variant} textAlign={textAlign} color={color}>
          {text}
        </TextView>
      )}
    </Box>
  )
}

export default TextLineWithIcon

Accessibility