# All files / src/ToolHeader ToolHeader.tsx

92.1% Statements 35/38
50% Branches 1/2
80% Functions 4/5
90.62% Lines 29/32

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
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    1262x
    2x
    2x
    2x
    2x

    2x
    2x

    2x
    4x

    2x

    4x
    4x

    4x

    2x

    2x

    2x
    3x
    3x

    2x

    2x

    1x
    1x

    2x

    2x

    2x

    2x

    2x

    2x

    2x

     import { Cog } from '@procore/core-icons'
    import React from 'react'
    import { Tabs as TabsBase } from '../Tabs/Tabs'
    import { useI18nContext } from '../_hooks/I18n'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import { DivAttributes, Props, SVGAttributes } from '../_utils/types'
    import { ActionIcon } from './ActionIcon'
    import {
      StyledHeaderActions,
      StyledHeaderBadge,
      StyledHeaderTabs,
      StyledToolHeader,
      StyledToolHeaderIconContainer,
      StyledToolHeaderTitle,
    } from './ToolHeader.styles'
    import {
      ToolHeaderBadgeProps,
      ToolHeaderIconProps,
      ToolHeaderSettingsActionPolyType,
      ToolHeaderSettingsActionProps,
      ToolHeaderSettingsActionRef,
    } from './ToolHeader.types'

    const ToolHeader_ = React.forwardRef<HTMLDivElement, any>((props, ref) => {
      return <StyledToolHeader ref={ref} {...props} />
    })

    export const Icon = React.forwardRef<
      HTMLDivElement,
      SVGAttributes & ToolHeaderIconProps
    >(function Icon({ className, icon: icon_, ...props }, ref) {
      const icon = icon_ ? (
        React.cloneElement(icon_ as React.ReactElement, { ...props, size: 'sm' })
      ) : (
        <Cog {...props} size="sm" />
      )
      return (
        <StyledToolHeaderIconContainer className={className} ref={ref}>
          {icon}
        </StyledToolHeaderIconContainer>
      )
    })

    function SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(
      props: ToolHeaderSettingsActionProps<Role>,
      ref: ToolHeaderSettingsActionRef<Role>
    ) {
      const i18n = useI18nContext()

      const Comp = ActionIcon as any

      return (
        <Comp
          aria-label={i18n.t('core.toolHeader.settingsAction')}
          ref={ref}
          {...props}
        >
          <ToolHeader.Icon />
        </Comp>
      )
    }

    const SettingsAction = React.forwardRef(SettingsActionInner) as <
      Role extends ToolHeaderSettingsActionPolyType
    >(
      props: ToolHeaderSettingsActionProps<Role>
    ) => ReturnType<typeof SettingsActionInner>

    export const Title = StyledToolHeaderTitle

    export const Tabs = React.forwardRef<HTMLDivElement, DivAttributes & Props>(
      function Tabs({ children, className, ...props }, ref) {
        return (
          <StyledHeaderTabs className={className} ref={ref}>
            <TabsBase {...props}>{children}</TabsBase>
          </StyledHeaderTabs>
        )
      }
    )

    export const Actions = StyledHeaderActions

    /**
     * @deprecated
     *
     * This `Badge` pattern is no longer supported and it is now recommended to use a `Pill` instead.
     *
     * @deprecatedSince 10.20.0
     *
     * @see https://core.procore.com/latest/web/components/pill/react/
     */
    export const Badge = React.forwardRef<
      HTMLDivElement,
      DivAttributes & ToolHeaderBadgeProps
    >(function Badge({ children, variant, ...props }, ref) {
      return (
        <StyledHeaderBadge {...props} $variant={variant} ref={ref}>
          {children}
        </StyledHeaderBadge>
      )
    })

    ToolHeader_.displayName = 'ToolHeader'

    Icon.displayName = 'ToolHeader.Icon'

    Title.displayName = 'ToolHeader.Title'

    Tabs.displayName = 'ToolHeader.Tabs'

    Actions.displayName = 'ToolHeader.Actions'

    Badge.displayName = 'ToolHeader.Badge'

    export const ToolHeader = addSubcomponents(
      {
        Icon,
        Title,
        Tabs,
        Actions,
        Badge,
        SettingsAction,
      },
      ToolHeader_
    )