@gechiui/components/build-module/base-control/index.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * Internal dependencies
 */

import { VisuallyHidden } from '../visually-hidden';
import { Wrapper, StyledField, StyledLabel, StyledHelp } from './styles/base-control-styles';
/**
 * @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(_ref) {
  let {
    id,
    label,
    hideLabelFromVision,
    help,
    className,
    children
  } = _ref;
  return createElement(Wrapper, {
    className: classnames('components-base-control', className)
  }, createElement(StyledField, {
    className: "components-base-control__field"
  }, label && id && (hideLabelFromVision ? createElement(VisuallyHidden, {
    as: "label",
    htmlFor: id
  }, label) : createElement(StyledLabel, {
    className: "components-base-control__label",
    htmlFor: id
  }, label)), label && !id && (hideLabelFromVision ? createElement(VisuallyHidden, {
    as: "label"
  }, label) : createElement(BaseControl.VisualLabel, null, label)), children), !!help && createElement(StyledHelp, {
    id: id ? id + '__help' : undefined,
    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 = _ref2 => {
  let {
    className,
    children
  } = _ref2;
  className = classnames('components-base-control__label', className);
  return createElement("span", {
    className: className
  }, children);
};

export default BaseControl;
//# sourceMappingURL=index.js.map