# All files / layouts/Flow/styles FlowRowStyles.js

89.47% Statements 17/19
64.29% Branches 9/14
90% Functions 9/10
89.47% Lines 17/19

    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

    5x

    5x
    9x
    5x
    9x

    5x
    9x

    1x

    1x

    7x

    5x
    9x

    9x

    9x

    9x

    9x
    9x

     import styled, { css } from 'styled-components';
    import FlowItemContainer from './FlowItemContainer';
    import { HORIZONTAL_SPACING } from '../constants';

    const BaseStyles = styled.div`
      /* Flow is a row */
      display: flex;
      flex-direction: row;
    `;

    const grow = alignment =>
      ['left', 'right', 'center'].includes(alignment) ? 0 : 1;
    const basis = alignment =>
      ['left', 'right', 'center'].includes(alignment) ? 'auto' : 0;

    const justification = alignment => {
      switch (alignment) {
        case 'left':
          return 'flex-start';
        case 'right':
          return 'flex-end';
        case 'center':
          return 'center';
        default:
          return 'space-between';
      }
    };

    const generateSizes = sizes =>
      sizes.map(
        (size, idx) =>
          size !== undefined && size !== null
            ? css`
                & > ${FlowItemContainer}, & > ${BaseStyles} {
                  &:nth-child(${idx + 1}) {
                    flex-grow: ${size};
                  }
                }
              `
            : '',
      );

    // immediately extend via wrap so that we can do nested Flows

    export default styled(BaseStyles)`
      justify-content: ${({ alignment }) => justification(alignment)};

      /* Flow is designed to be nestable */
      & > ${FlowItemContainer}, & > ${BaseStyles} {
        flex-grow: ${({ alignment }) => grow(alignment)};
        flex-shrink: 0;
        margin-left: ${HORIZONTAL_SPACING / 2}px;
        margin-right: ${HORIZONTAL_SPACING / 2}px;
        flex-basis: ${({ alignment }) => basis(alignment)};

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }

      ${({ sizes }) => generateSizes(sizes)} & .FlowItem-label {
        ${({ suppressLabels }) => suppressLabels && 'display: none;'};
      }
    `;