# All files / src/Required Required.tsx

100% Statements 14/14
50% Branches 5/10
100% Functions 1/1
100% Lines 9/9

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
    4127x
    27x
    27x

    27x

    2x

    2x
    2x

    2x

    27x
     import React from 'react'
    import { useI18nContext } from '../_hooks/I18n'
    import {
      StyledRequiredContainer,
      StyledRequiredMark,
      StyledRequiredText,
    } from './Required.styles'
    import { RequiredProps } from './Required.types'

    /**

     @since 10.19.0

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

     */
    export const Required = React.forwardRef<HTMLSpanElement, RequiredProps>(
      (
        { children, i18nScope = 'core.required', showLabel = false, ...props },
        ref
      ) => {
        const I18n = useI18nContext()
        const labelOrChildren = showLabel || Boolean(children)

        return (
          <StyledRequiredContainer {...props} ref={ref}>
            <StyledRequiredMark $showLabel={labelOrChildren}>*</StyledRequiredMark>
            {labelOrChildren ? (
              <StyledRequiredText>
                {children
                  ? children
                  : I18n.t('requiredFields', { scope: i18nScope })}
              </StyledRequiredText>
            ) : null}
          </StyledRequiredContainer>
        )
      }
    )

    Required.displayName = 'Required'