# All files / src/Semantic Semantic.tsx

83.87% Statements 26/31
0% Branches 0/2
54.54% Functions 6/11
83.87% Lines 26/31

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
    10629x
    29x

    29x

    11x

    29x

    6x

    29x

    6x

    29x

    29x

    29x

    29x

    29x

    29x

    29x

    5x

    29x

    6x

    29x

    28x

    29x

    29x

    29x

    29x

    29x

    29x
     import React from 'react'
    import {
      StyledH1,
      StyledH2,
      StyledH3,
      StyledLabel,
      StyledP,
      StyledUL,
    } from './Semantic.styles'
    import { HeadingProps } from './Semantic.types'

    export const H1 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H1(props, ref) {
        return <StyledH1 {...props} ref={ref} />
      }
    )

    export const H2 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H2(props, ref) {
        return <StyledH2 {...props} ref={ref} />
      }
    )

    export const H3 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H3(props, ref) {
        return <StyledH3 {...props} ref={ref} />
      }
    )

    export const H4 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H4(props, ref) {
        return <H3 as="h4" {...props} ref={ref} />
      }
    )

    export const H5 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H5(props, ref) {
        return <H3 as="h5" style={{ fontSize: '90%' }} {...props} ref={ref} />
      }
    )

    export const H6 = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function H6(props, ref) {
        return <H3 as="h6" style={{ fontSize: '85%' }} {...props} ref={ref} />
      }
    )

    const UnknownHeading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
      function UnknownHeading(props, ref) {
        return <strong {...props} ref={ref} />
      }
    )

    const levelToComponent = {
      '1': H1,
      '2': H2,
      '3': H3,
      '4': H4,
      '5': H5,
      '6': H6,
    }

    /**
     * @param level 1 - 6
     * @returns H1 - H6 component
     */
    export function getHeadingComponent(
      level: string | number
    ): React.ForwardRefExoticComponent<HeadingProps> {
      // @ts-ignore
      return levelToComponent[String(level)] || UnknownHeading
    }

    export const P = React.forwardRef<
      HTMLParagraphElement,
      React.HTMLAttributes<HTMLParagraphElement>
    >(function P(props, ref) {
      return <StyledP {...props} ref={ref} />
    })

    export const UL = React.forwardRef<
      HTMLUListElement,
      React.HTMLAttributes<HTMLUListElement>
    >(function UL(props, ref) {
      return <StyledUL {...props} ref={ref} />
    })

    export const Label = React.forwardRef<
      HTMLLabelElement,
      React.HTMLAttributes<HTMLLabelElement> & { htmlFor?: string; block?: boolean }
    >(function Label(props, ref) {
      return <StyledLabel {...props} ref={ref} />
    })

    H1.displayName = 'H1'

    H2.displayName = 'H2'

    H3.displayName = 'H3'

    P.displayName = 'P'

    UL.displayName = 'UL'

    Label.displayName = 'Label'