# All files / src/Grid Grid.tsx

100% Statements 28/28
100% Branches 2/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
    67
    68
    69
    70
    715x
    5x
    5x

    5x

    5x

    5x

    6x
    6x

    6x

    5x

    3x
    3x

    5x
    3x

    3x
    3x
    3x
    3x
    3x

    5x

     import React from 'react'
    import { addSubcomponents } from '../_utils/addSubcomponents'
    import { StyledGridCol, StyledGridRow } from './Grid.styles'
    import {
      GridColProps,
      GridContextShape,
      GridProps,
      GridRowProps,
    } from './Grid.types'
    import { overrideIfNotDefined } from './Grid.utils'

    const defaultContextShape: GridContextShape = {
      gutterX: 'none',
      gutterY: 'none',
      colStackCap: 'mobileLg',
    }
    const GridContext = React.createContext<GridContextShape>(defaultContextShape)

    function BaseGrid({ gutterX, gutterY, colStackCap, ...props }: GridProps) {
      const gridContextValue = overrideIfNotDefined(defaultContextShape, {
        gutterX,
        gutterY,
        colStackCap,
      })
      return (
        <GridContext.Provider value={gridContextValue}>
          <div {...props} />
        </GridContext.Provider>
      )
    }

    const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
      props,
      ref
    ) {
      const { gutterX, gutterY } = React.useContext(GridContext)
      return (
        <StyledGridRow {...props} $gutterX={gutterX} $gutterY={gutterY} ref={ref} />
      )
    })

    const GridCol = React.forwardRef<HTMLDivElement, GridColProps>(function GridCol(
      { colWidth = 'auto', colStart: offset, ...props },
      ref
    ) {
      const {
        gutterX,
        gutterY,
        colStackCap: colStackBreakpoint,
      } = React.useContext(GridContext)
      return (
        <StyledGridCol
          {...props}
          ref={ref}
          $span={colWidth}
          $offset={offset}
          $gutterX={gutterX}
          $gutterY={gutterY}
          $colStackBreakpoint={colStackBreakpoint}
        />
      )
    })

    export const Grid = addSubcomponents(
      {
        Row: GridRow,
        Col: GridCol,
      },
      BaseGrid
    )