'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * @category controls
 * @component form
 * @variations collab-ui-react
 **/

var FormSubSection = function FormSubSection(props) {
  var label = props.label,
      children = props.children,
      description = props.description;


  return _react2.default.createElement(
    'div',
    { className: 'sub-section' },
    label && _react2.default.createElement(
      'h5',
      { className: 'sub-section__label' },
      label
    ),
    description && _react2.default.createElement(
      'p',
      { className: 'sub-section__description' },
      description
    ),
    children
  );
};

FormSubSection.defaultProps = {
  label: '',
  description: '',
  children: null
};

FormSubSection.displayName = 'FormSubSection';

exports.default = FormSubSection;

/**
* @name Form Sub Section
* @description Forms are useful.
*
* @category controls
* @component form
* @section Form Sub Section
*
* @js

import {
  FormSubSection,
  Input
} from '@collab-ui/react';

export default function Default() {
    return (
      <div className='row'>
        <br />
        <FormSubSection
          label='Subsection Label'
          description='Subsection Description lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet hendrerit turpis, in accumsan quam.'
        >
          <Input
            htmlId='testMe2'
            value='testMe2'
            name='testMe2'
            label='First Input'
            disabled
            placeholder='Disabled Input'
            onChange={() => {}}
            inputHelpText='Field Must be Disabled'
            errorArr={[]}
          />
        </FormSubSection>
      </div>
    );
  }

**/

module.exports = exports['default'];