jobiqo-cl/lib/src/components/03-molecules/01-form/02-form-group/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../../../02-atoms/06-layout/04-grid/index.js');
var Cell = require('../../../02-atoms/06-layout/04-grid/Cell.js');

/**
 * @file index.tsx
 *
 * @fileoverview Creates a group of several form items and displays them
 * together under a single label and description.
 */
const StyledFormGroup = styled__default.div `
  margin: ${props => props.theme.formGroup.margin};
  padding: ${props => props.theme.formGroup.padding};
  border-top-width: ${props => props.theme.formGroup.borderWidth};
  border-top-style: ${props => props.theme.formGroup.borderStyle};
  border-top-color: ${props => props.theme.formGroup.borderColor};
  &:first-child {
    border-top-width: 0px;
    padding-top: 0;
    margin-top: 0;
  }
`;
const StyledLabel = styled__default.div `
  display: flex;
  color: ${props => props.valid
    ? props.theme.colors.success
    : props.theme.formGroup.label.color};
  text-transform: ${props => props.theme.formGroup.label.textTransform};
  letter-spacing: ${props => props.theme.formGroup.label.letterSpacing};
  font-weight: ${props => props.theme.formGroup.label.fontWeight};
  font-size: ${props => props.theme.formGroup.label.fontSize};

  svg {
    margin-right: 0.5rem;
    width: 20px;
    height: 20px;
  }
`;
const StyledDescription = styled__default.div `
  margin-top: ${props => props.theme.formGroup.description.marginTop};
  font-size: ${props => props.theme.formGroup.description.fontSize};
  color: ${props => props.valid
    ? props.theme.colors.success
    : props.theme.formGroup.description.color};
`;
/**
 * The form group component groups several form items together in a group.
 * For longer forms it is recommended to group items together in logical
 * groups so that the user can scan the form more easily.
 */
const FormGroup = (_a) => {
    var { children, label, description, icon, valid } = _a, props = tslib_es6.__rest(_a, ["children", "label", "description", "icon", "valid"]);
    return (React__default.createElement(StyledFormGroup, null,
        React__default.createElement(index.Grid, { gap: "2rem", columns: "repeat(auto-fit,minmax(250px,1fr))" },
            (label || description) && (React__default.createElement(Cell.Cell, { width: 1 },
                React__default.createElement(StyledLabel, { valid: valid },
                    icon,
                    label),
                React__default.createElement(StyledDescription, { valid: valid }, description))),
            React__default.createElement(Cell.Cell, { width: 2 }, children))));
};

exports.FormGroup = FormGroup;