# All files / src/Notation Notation.tsx

100% Statements 17/17
100% Branches 6/6
100% Functions 2/2
100% Lines 14/14

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
    4218x
    18x
    18x
    18x
    18x

    18x

    18x

    5x
    5x

    18x

    5x
    5x

    5x

    18x
     import React from 'react'
    import styled from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { useDeprecation } from '../_hooks/Deprecation'
    import { colors } from '../_styles/colors'
    import { SpanAttributes } from '../_utils/types'
    import { NotationProps } from './Notation.types'

    const variantColorMap = {
      required: 'orange50',
      error: 'red50',
      pagination: 'gray45',
    } as const

    const StyledNotation = styled.i<NotationProps>`
      ${getTypographyIntent('small')}
      color: ${({ variant }) =>
        variant ? colors[variantColorMap[variant]] : colors.gray15};
      font-style: italic;
    `
    /**
     * @deprecated Please use `<Typography italic />` component for plain text
     * notations or the `<Required />` component for required notations. `Notation`
     * will be removed in a future version.
     *
     *  @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-notation--basic-props)
     */
    export const Notation = React.forwardRef<
      HTMLSpanElement,
      SpanAttributes & NotationProps
    >(function Notation({ children, variant = '', ...props }, ref) {
      useDeprecation({ oldThing: 'Notation', newThing: 'Typography or Required' })

      return (
        <StyledNotation {...props} variant={variant} ref={ref}>
          {children}
        </StyledNotation>
      )
    })

    Notation.displayName = 'Notation'