@wordpress/components/build/base-control/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _visuallyHidden = _interopRequireDefault(require("../visually-hidden"));

var _baseControlStyles = require("./styles/base-control-styles");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @typedef Props
 * @property {string} id The id of the element to which labels and help text are being generated.
 *                       That element should be passed as a child.
 * @property {import('react').ReactNode} help If this property is added, a help text will be
 *                                            generated using help property as the content.
 * @property {import('react').ReactNode} label If this property is added, a label will be generated
 *                                             using label property as the content.
 * @property {boolean} [hideLabelFromVision] If true, the label will only be visible to screen readers.
 * @property {string} [className] The class that will be added with "components-base-control" to the
 *                                classes of the wrapper div. If no className is passed only
 *                                components-base-control is used.
 * @property {import('react').ReactNode} [children] The content to be displayed within
 *                                                  the BaseControl.
 */

/**
 * @param {Props} props
 * @return {JSX.Element} Element
 */
function BaseControl({
  id,
  label,
  hideLabelFromVision,
  help,
  className,
  children
}) {
  return (0, _element.createElement)(_baseControlStyles.Wrapper, {
    className: (0, _classnames.default)('components-base-control', className)
  }, (0, _element.createElement)(_baseControlStyles.StyledField, {
    className: "components-base-control__field"
  }, label && id && (hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.default, {
    as: "label",
    htmlFor: id
  }, label) : (0, _element.createElement)(_baseControlStyles.StyledLabel, {
    className: "components-base-control__label",
    htmlFor: id
  }, label)), label && !id && (hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.default, {
    as: "label"
  }, label) : (0, _element.createElement)(BaseControl.VisualLabel, null, label)), children), !!help && (0, _element.createElement)(_baseControlStyles.StyledHelp, {
    id: id + '__help',
    className: "components-base-control__help"
  }, help));
}
/**
 * @typedef VisualLabelProps
 * @property {string} [className] Class name
 * @property {import('react').ReactNode} [children] Children
 */

/**
 * @param {VisualLabelProps} Props
 * @return {JSX.Element} Element
 */


BaseControl.VisualLabel = ({
  className,
  children
}) => {
  className = (0, _classnames.default)('components-base-control__label', className);
  return (0, _element.createElement)("span", {
    className: className
  }, children);
};

var _default = BaseControl;
exports.default = _default;
//# sourceMappingURL=index.js.map