@shopify/polaris/dist/esm/components/Choice/Choice.js

Shopify’s product component library

import React$1 from 'react';
import { classNames } from '../../utilities/css.js';
import { InlineError as InlineError$1 } from '../InlineError/InlineError.js';
import styles from './Choice.scss.js';

function Choice({
  id,
  label,
  disabled,
  error,
  children,
  labelHidden,
  helpText,
  onClick,
  onMouseOut,
  onMouseOver
}) {
  var className = classNames(styles.Choice, labelHidden && styles.labelHidden, disabled && styles.disabled);
  var labelMarkup = /*#__PURE__*/React$1.createElement("label", {
    className: className,
    htmlFor: id,
    onClick: onClick,
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut
  }, /*#__PURE__*/React$1.createElement("span", {
    className: styles.Control
  }, children), /*#__PURE__*/React$1.createElement("span", {
    className: styles.Label
  }, label));
  var helpTextMarkup = helpText ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.HelpText,
    id: helpTextID(id)
  }, helpText) : null;
  var errorMarkup = error && typeof error !== 'boolean' && /*#__PURE__*/React$1.createElement("div", {
    className: styles.Error
  }, /*#__PURE__*/React$1.createElement(InlineError$1, {
    message: error,
    fieldID: id
  }));
  var descriptionMarkup = helpTextMarkup || errorMarkup ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Descriptions
  }, errorMarkup, helpTextMarkup) : null;
  return descriptionMarkup ? /*#__PURE__*/React$1.createElement("div", null, labelMarkup, descriptionMarkup) : labelMarkup;
}
function helpTextID(id) {
  return "".concat(id, "HelpText");
}

export { Choice, helpTextID };