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

100% Statements 17/17
100% Branches 20/20
100% Functions 3/3
100% Lines 17/17

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
    106
    107
    108
    109
    110
    111
    112
    113
    11416x
    16x
    16x
    16x
    16x

    16x

    16x

    16x

    8x

    16x

    16x

    4x
    4x

    4x
    4x

    16x

    16x

     import styled, { css } from 'styled-components'
    import { StyledFormRow } from '../Form/Form.styles'
    import { Title } from '../Title/Title'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const StyledSectionInner = styled.div``

    export const StyledSectionCollapseHeading = styled.div`
      align-self: flex-start;
      margin-right: ${spacing.sm}px;
    `

    export const sectionClassnames = {
      divide: 'section--divide',
      levelAnonymous: 'section--level-anon',
      level: (num: number) => `section--level-${num}`,
    }

    export const StyledSection = styled.div`
      padding-left: ${spacing.xl}px;
      padding-right: ${spacing.xl}px;
      padding-bottom: ${spacing.xl}px;

      & > ${StyledSectionInner} {
        padding-top: ${spacing.xl}px;
      }

      // horizontal divider
      &.${sectionClassnames.divide} {
        & > ${StyledSectionInner} {
          border-top: 1px solid ${colors.gray85};
        }
      }

      // if leading, no horizontal divider
      &:first-child > ${StyledSectionInner} {
        border-top: 0;
      }

      & & {
        padding-left: 0;
        padding-right: 0;

        // if leading in nested, add the division back
        &:first-child > ${StyledSectionInner} {
          border-top: 1px solid ${colors.gray85};
        }

        &:last-child {
          padding-bottom: 0;
        }
      }

      // form rows have trailing space for error message
      ${StyledFormRow}:last-of-type {
        margin-bottom: ${spacing.xl * -1}px;
      }

      // form rows have trailing space for error message
      ${StyledFormRow} + &&& {
        padding-top: ${spacing.xs}px;
      }
    `

    export const StyledSectionContentRegion = styled.div<{
      $closed: boolean
      $noHeader: boolean
    }>`
      padding-top: 20px;
      padding-bottom: ${spacing.sm}px;

      ${({ $closed }) =>
        $closed &&
        css`
          padding-top: 0;
          padding-bottom: 0;
        `}

      ${({ $noHeader }) =>
        $noHeader &&
        css`
          padding-top: 0;
        `}

      // if a nested section isn't first
      // Section
      //   P
      //   Section <-- space above
      & > :not(${StyledSection}) + ${StyledSection} {
        padding-top: ${spacing.xl}px;
      }

      // nested sections, the last one doesn't need more trailing space
      ${StyledSection} ${StyledSection} &:last-of-type {
        padding-bottom: 0;
      }
    `

    export const StyledSectionHeader = styled.div`
      align-items: center;
      display: flex;
      // min-height on header for alignment:
      //  - when heading line height is less than the collapse button height
      //  - when heading line height is less than the button size it will shift
      //      the heading text when the section is opened and buttons appear
      min-height: 36px;
      word-break: break-word;
    `

    export const StyledTitle = styled(Title)`
      width: 100%;
    `