import React from 'react';
import PropTypes from 'prop-types';
/**
 * @category controls
 * @component form
 * @variations collab-ui-react
 **/

var FormSubSection = function FormSubSection(props) {
  var label = props.label,
      children = props.children,
      description = props.description;
  return React.createElement("div", {
    className: "sub-section"
  }, label && React.createElement("h5", {
    className: "sub-section__label"
  }, label), description && React.createElement("p", {
    className: "sub-section__description"
  }, description), children);
};

FormSubSection.propTypes = {
  /** @prop Children node to render inside FormSubSection | null */
  children: PropTypes.node,

  /** @prop Optional FormSubSection description text | '' */
  description: PropTypes.string,

  /** @prop Optional FormSubSection label text | '' */
  label: PropTypes.string
};
FormSubSection.defaultProps = {
  children: null,
  description: '',
  label: ''
};
FormSubSection.displayName = 'FormSubSection';
export 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>
    );
  }

**/