# All files / src/Box Box.styles.ts

76.92% Statements 10/13
85% Branches 17/20
83.33% Functions 5/6
76.92% Lines 10/13

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
    6865x
    65x

    9561x

    3312x

    8832x

    65x
    1104x
    1104x
    5x

    1104x

     import styled, { css } from 'styled-components'
    import { spacing, Spacing } from '../_styles/spacing'
    import { $BoxProps, MarginSize, PaddingSize } from './Box.types'

    function appendPx(value?: number | string): string | undefined {
      Iif (!value) {
        return
      }

      return typeof value === 'string' ? value : `${value}px`
    }

    function sizeStrToPx(str?: string): string | undefined {
      /**
       * hacky usage of "as" here, but since we have a default fallback if the
       * lookup fails it should be fine
       */
      return spacing[str as Spacing] !== undefined
        ? `${spacing[str as Spacing]}px`
        : str
    }

    function shorthandSizeToPx(shorthand?: string): string | undefined {
      return shorthand?.split(' ').map(sizeStrToPx).join(' ')
    }

    function sizeToPx(size?: MarginSize | PaddingSize): string | undefined {
      return sizeStrToPx(size) || size
    }

    export const StyledBox = styled.div<$BoxProps>`
      ${({ $as }) => {
        if ($as === 'ol' || $as === 'ul') {
          return css`
            list-style: none;
            margin: 0;
            padding: 0;
          `
        }
      }}
      ${(p) => css`
        align-content: ${p.$alignContent};
        align-items: ${p.$alignItems};
        align-self: ${p.$alignSelf};
        display: ${p.$display};
        flex-basis: ${p.$flexBasis};
        flex-direction: ${p.$flexDirection};
        flex-grow: ${p.$flexGrow};
        flex-shrink: ${p.$flexShrink};
        flex-wrap: ${p.$flexWrap};
        flex: ${p.$flex};
        gap: ${shorthandSizeToPx(p.$gap)};
        justify-content: ${p.$justifyContent};
        margin: ${shorthandSizeToPx(p.$margin)};
        margin-bottom: ${sizeToPx(p.$marginBottom)};
        margin-left: ${sizeToPx(p.$marginLeft)};
        margin-right: ${sizeToPx(p.$marginRight)};
        margin-top: ${sizeToPx(p.$marginTop)};
        order: ${p.$order};
        padding: ${shorthandSizeToPx(p.$padding)};
        padding-bottom: ${sizeToPx(p.$paddingBottom)};
        padding-left: ${sizeToPx(p.$paddingLeft)};
        padding-right: ${sizeToPx(p.$paddingRight)};
        padding-top: ${sizeToPx(p.$paddingTop)};
        text-align: ${p.$textAlign};
      `}
    `