# All files / src/ContactItem ContactItem.tsx

100% Statements 36/36
100% Branches 14/14
100% Functions 4/4
100% Lines 28/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    1056x
    6x

    6x

    6x

    6x

    44x
    44x
    44x
    44x
    44x
    44x
    44x
    44x

    44x

    44x

    38x
    25x
    12x

    6x

    44x
    44x

    6x

    44x
    44x

    6x

    6x

    6x

    6x

     import React from 'react'
    import { Avatar } from '../Avatar/Avatar'
    import { TypographyProps } from '../Typography/Typography.types'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import { SpanAttributes } from '../_utils/types'
    import {
      ContactItemAvatar,
      ContactItemAvatarWrapper,
      ContactItemText,
      ContactItemTextWrapper,
      ContactItemWrapper,
    } from './ContactItem.styles'
    import { ContactItemProps } from './ContactItem.types'

    /**

     The contact item component is a more complex alternative to a standard line
     of text found in a list or form component. Use this component when you have
     a list or set of items that can benefit from an additional line of content or
     an avatar.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-contact-item--demo)

     @see [Design Guidelines](https://design.procore.com/contact-item)

     */
    const ContactItem_ = React.forwardRef<HTMLDivElement, ContactItemProps>(
      function ContactItem(
        {
          imageUrl,
          icon,
          initials,
          selected = false,
          disabled = false,
          clickable = false,
          children,
          ...props
        },
        ref
      ) {
        const showAvatar = imageUrl || icon || initials

        return (
          <ContactItemWrapper
            $selected={selected}
            $disabled={disabled}
            $clickable={clickable}
            ref={ref}
            {...props}
          >
            {showAvatar && (
              <ContactItemAvatarWrapper>
                <ContactItemAvatar aria-hidden size="lg" disabled={disabled}>
                  {(() => {
                    if (imageUrl) return <Avatar.Portrait imageUrl={imageUrl} />
                    if (icon) return <Avatar.Icon icon={icon} />
                    if (initials) return <Avatar.Label>{initials}</Avatar.Label>
                  })()}
                </ContactItemAvatar>
              </ContactItemAvatarWrapper>
            )}
            <ContactItemTextWrapper>{children}</ContactItemTextWrapper>
          </ContactItemWrapper>
        )
      }
    )

    const Title = React.forwardRef<
      HTMLDivElement,
      SpanAttributes & TypographyProps
    >(function Title({ children, ...props }, ref) {
      return (
        <ContactItemText weight="bold" color="gray15" ref={ref} {...props}>
          {children}
        </ContactItemText>
      )
    })

    const Description = React.forwardRef<
      HTMLDivElement,
      SpanAttributes & TypographyProps
    >(function Description({ children, ...props }, ref) {
      return (
        <ContactItemText weight="regular" color="gray45" ref={ref} {...props}>
          {children}
        </ContactItemText>
      )
    })

    ContactItem_.displayName = 'ContactItem'

    Title.displayName = 'ContactItem.Title'

    Description.displayName = 'ContactItem.Description'

    export const ContactItem = addSubcomponents(
      {
        Title,
        Description,
      },
      ContactItem_
    )