# All files / layouts/Form FieldGroup.js

44.44% Statements 4/9
0% Branches 0/2
0% Functions 0/3
50% Lines 4/8

    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

    5x

    5x

    5x

    5x

     import PropTypes from 'prop-types';
    import styled from 'styled-components';

    /**
     * DEPRECATED
     *
     * A set of form fields which is grouped in a row
     *
     * You can supply `spacing` as a prop. Spacing can be an int (flex size) or an array of ints (flex size per item)
     */
    const FieldGroup = styled.div`
      display: flex;
      flex-direction: row;

      justify-content: ${({ align }) => align};

      ${({ spacing }) => {
        if (spacing instanceof Array) {
          return spacing.map((item, idx) => `& > *:nth-child(${idx + 1}) { flex: ${ item}; }`).join('\n');
        }
        return `& > * { flex: ${ spacing}; }`;
      }}
    `;

    FieldGroup.propTypes = {
      /**
       *
       */
      spacing: PropTypes.array,
      /**
       * A literal flexbox justify-content value.
       */
      align: PropTypes.string,
      /**
       * Adds an id to the element.
       */
      id: PropTypes.string,
      /**
       * Adds a class name to the element.
       */
      className: PropTypes.string,
    };

    FieldGroup.defaultProps = {
      spacing: '0 1 auto',
      align: 'space-around',
      id: null,
      className: null,
    };

    FieldGroup.usage = `
    # FieldGroup

    For when you know how you want to lay out fields in a form on one row. For instance, if the first name and last name field need to be on the same row, you'd use a FieldGroup to join them. You can pass props for arrangement:

    * \`spacing\`: a single value to set the \`flex\` CSS property of every item, or an array to set them individually.
    * \`align\`: a verbatim value for \`justify-content\` on the enclosing flexbox.

    \`\`\`
    <FieldGroup spacing={[2, 1]} align="space-between">
      <TextField />
      <ButtonField />
    </FieldGroup>
    \`\`\`
    `;

    export default FieldGroup;