# All files / src/FilterToken FilterToken.tsx

100% Statements 25/25
50% Branches 1/2
100% Functions 3/3
100% Lines 20/20

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
    671x
    1x
    1x
    1x
    1x

    1x

    1x

    2x
    2x

    1x
    1x
    1x

    1x

    1x
    2x
    2x

    1x

    1x

    1x

    1x

     import { Clear } from '@procore/core-icons'
    import React from 'react'
    import { Button } from '../Button/Button'
    import { useI18nContext } from '../_hooks/I18n'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import {
      ButtonAttributes,
      DivAttributes,
      Props,
      SpanAttributes,
    } from '../_utils/types'
    import { StyledFilterToken, StyledLabel } from './FilterToken.styles'
    import { FilterTokenProps } from './FilterToken.types'

    const Parent = React.forwardRef<
      HTMLDivElement,
      DivAttributes & FilterTokenProps
    >(function FilterToken({ children, focused = false, ...props }, ref) {
      return (
        <StyledFilterToken {...props} ref={ref} $focused={focused}>
          {children}
        </StyledFilterToken>
      )
    })

    const Remove = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(
      function TokenRemove({ children, ...props }, ref) {
        const i18n = useI18nContext()

        return (
          <Button
            aria-label={i18n.t('core.token.remove')}
            ref={ref}
            {...props}
            variant="tertiaryContrast"
            size="sm"
            style={{ ...props.style, marginLeft: '6px' }}
            icon={<Clear />}
          />
        )
      }
    )

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

    Parent.displayName = 'FilterToken'

    Remove.displayName = 'FilterToken.Remove'

    Label.displayName = 'FilterToken.Label'

    export const FilterToken = addSubcomponents(
      {
        Label,
        Remove,
      },
      Parent
    )