# All files / src/Token Token.tsx

100% Statements 27/27
90% Branches 9/10
100% Functions 3/3
100% Lines 23/23

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
    8815x
    15x
    15x

    15x

    15x

    205x
    205x
    205x
    205x
    205x
    205x

    205x

    15x
    204x
    204x
    204x

    15x
    205x
    205x

    15x

    15x

    15x

    15x

     import React from 'react'
    import { useI18nContext } from '../_hooks/I18n'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import {
      DivAttributes,
      Props,
      SpanAttributes,
      SVGAttributes,
    } from '../_utils/types'
    import { StyledLabel, StyledRemove, StyledToken } from './Token.styles'
    import { TokenProps } from './Token.types'

    const Parent = React.forwardRef<HTMLDivElement, DivAttributes & TokenProps>(
      function Token(
        {
          children,
          disabled = false,
          focused = false,
          error = false,
          variant,
          ...props
        },
        ref
      ) {
        return (
          <StyledToken
            {...props}
            ref={ref}
            $disabled={disabled || variant === 'disabled'}
            $focused={focused || variant === 'focused'}
            $error={error}
          >
            {children}
          </StyledToken>
        )
      }
    )

    const Remove = React.forwardRef<SVGSVGElement, SVGAttributes & Props>(
      function TokenRemove({ ...props }, ref) {
        const i18n = useI18nContext()
        return (
          <StyledRemove
            ref={ref}
            aria-hidden="false"
            aria-label={i18n.t('core.token.remove')}
            {...props}
          />
        )
      }
    )

    const Label = React.forwardRef<HTMLSpanElement, SpanAttributes & Props>(
      function Label({ children, ...props }, ref) {
        return (
          <StyledLabel ref={ref} {...props}>
            {children}
          </StyledLabel>
        )
      }
    )

    Parent.displayName = 'Token'

    Remove.displayName = 'Token.Remove'

    Label.displayName = 'Token.Label'

    /**

     We use tokens in our multi select dropdowns and file attachers to indicate what
     has been selected or attached. Tokens in these components are removable.

     @since 10.19.0

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

     @see [Design Guidelines](https://design.procore.com/tokens)

     */
    export const Token = addSubcomponents(
      {
        Label,
        Remove,
      },
      Parent
    )