saagie-ui/src/react/core/molecules/formGroup/FormGroup.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';

const propTypes = {
  /**
   * Display something before the content
   */
  append: PropTypes.node,
  children: PropTypes.node,
  className: PropTypes.string,
  feedbackMessage: PropTypes.node,
  helper: PropTypes.node,
  icon: PropTypes.string,
  inputId: PropTypes.string,
  isOptional: PropTypes.bool,
  label: PropTypes.node,
  /**
   * Display something after the content
   */
  prepend: PropTypes.node,
  validationState: PropTypes.oneOf([null, 'success', 'warning', 'danger']),
};

const defaultProps = {
  append: null,
  children: '',
  className: '',
  feedbackMessage: null,
  helper: null,
  icon: null,
  inputId: null,
  isOptional: false,
  label: null,
  prepend: null,
  validationState: null,
};

export const FormGroup = ({
  append,
  children,
  className,
  feedbackMessage,
  helper,
  icon,
  inputId,
  isOptional,
  label,
  prepend,
  validationState,
}) => (
  <div className={`sui-m-form-group ${validationState ? `as--${validationState}` : ''} ${className}`}>
    {!!icon && (
      <div className="sui-m-form-group__icon">
        <Icon name={icon} />
      </div>
    )}
    <div className="sui-m-form-group__content">
      {!!label && (
        <label className="sui-a-form-label as--lg" htmlFor={inputId}>
          {label}
          {' '}
          {isOptional && (
            <span className="sui-a-badge as--xs as--end">
              optional
            </span>
          )}
        </label>
      )}
      {!!helper && (
        <div className="sui-a-form-helper">
          {helper}
        </div>
      )}
      <div>
        <div className="sui-g-grid as--auto as--no-wrap as--middle as--gutter-sm">
          {!!prepend && (
            <div className="sui-g-grid__item as--flex-none">
              {prepend}
            </div>
          )}
          <div className="sui-g-grid__item as--fill">
            {children}
          </div>
          {!!append && (
            <div className="sui-g-grid__item as--flex-none">
              {append}
            </div>
          )}
        </div>
      </div>
      {!!feedbackMessage && (
        <div className="sui-a-form-feedback">
          <i className="sui-a-icon as--fa-info-circle as--start" />
          {feedbackMessage}
        </div>
      )}
    </div>
  </div>
);

FormGroup.propTypes = propTypes;
FormGroup.defaultProps = defaultProps;