All files / lib/FormSubSection index.js

100% Statements 6/6
100% Branches 4/4
100% Functions 1/1
100% Lines 6/6
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 70 71 72 73 74 75 76 77 78 79 80 81                  89x 5x   5x                 89x                 89x           89x                                                                                        
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * @category controls
 * @component form
 * @variations collab-ui-react
 **/
 
const FormSubSection = props => {
  const { label, children, description } = props;
 
  return (
    <div className="sub-section">
      {label && <h5 className="sub-section__label">{label}</h5>}
      {description && <p className="sub-section__description">{description}</p>}
      {children}
    </div>
  );
};
 
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>
    );
  }
 
**/