# All files / src/ContactItem ContactItem.styles.ts

100% Statements 20/20
88% Branches 22/25
100% Functions 3/3
100% Lines 19/19

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
    726x
    6x
    6x
    6x
    6x
    6x
    6x

    6x

    6x

    6x

    6x

    6x

    44x
    44x
    1x

    44x
    44x

    44x
    44x

     import styled, { css } from 'styled-components'
    import { Avatar } from '../Avatar/Avatar'
    import { Typography } from '../Typography/Typography'
    import { typographyWeights } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { getLineClamp } from '../_styles/mixins'
    import { spacing } from '../_styles/spacing'

    export const ContactItemAvatarWrapper = styled.div`
      display: inline-flex;
      align-self: flex-start;
    `

    export const ContactItemAvatar = styled(Avatar)`
      cursor: inherit;
      font-weight: ${typographyWeights.bold};
    `

    export const ContactItemTextWrapper = styled.div`
      overflow: hidden;
      margin-left: ${spacing.sm}px;
    `

    export const ContactItemText = styled(Typography)`
      display: flex;
      ${getLineClamp()}
    `

    export const ContactItemWrapper = styled.div<{
      $selected: boolean
      $disabled: boolean
      $clickable: boolean
    }>`
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: ${spacing.sm}px ${spacing.lg}px ${spacing.sm}px ${spacing.sm}px;

      ${({ $disabled, $clickable }) => {
        if ($clickable) {
          return $disabled
            ? css`
                cursor: not-allowed;
              `
            : css`
                cursor: pointer;

                &:hover,
                &.hovered {
                  background-color: ${colors.gray96};
                }
              `
        }
      }}

      ${({ $selected }) =>
        $selected &&
        css`
          ${ContactItemText} {
            color: ${colors.blue40};
          }
        `}

      ${({ $disabled }) =>
        $disabled &&
        css`
          ${ContactItemText} {
            color: ${colors.gray70};
          }
        `}
    `