@massds/mayflower-react/dist/Label/index.mjs

React versions of Mayflower design system UI components

/**
 * Label module.
 * @module @massds/mayflower-react/Label
 * @requires module:@massds/mayflower-assets/scss/01-atoms/helper-text
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

const Label = (_ref) => {
  let children = _ref.children,
      inputId = _ref.inputId,
      hidden = _ref.hidden,
      disabled = _ref.disabled,
      conditionText = _ref.conditionText,
      className = _ref.className,
      useLegend = _ref.useLegend;
  const inputLabelClasses = classNames(className, {
    ma__label: true,
    'ma__label--hidden': hidden,
    'ma__label--disabled': disabled
  });
  const Tag = useLegend ? 'legend' : 'label';
  return /*#__PURE__*/React.createElement(Tag, {
    htmlFor: inputId,
    className: inputLabelClasses
  }, children, conditionText && conditionText.length > 0 && /*#__PURE__*/React.createElement("span", {
    className: "ma__label-condition"
  }, " (" + conditionText + ")"));
};

Label.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The text rendered as the label */
  children: PropTypes.string,

  /** The ID of the corresponding input field */
  inputId: PropTypes.string.isRequired,

  /** Render the visually hidden style for label  */
  hidden: PropTypes.bool,

  /** Render the disabled style for label  */
  disabled: PropTypes.bool,

  /** The text describing the conditional status of the field */
  conditionText: PropTypes.string,

  /** Additional classNames for label */
  className: PropTypes.string,

  /** Use legend tag instead of label. Use legend to caption a <fieldset> */
  useLegend: PropTypes.bool
} : {};
export default Label;