@primer/react/lib/internal/components/InputValidation.js

An implementation of GitHub's Primer Design System using React

'use strict';

var octiconsReact = require('@primer/octicons-react');
var clsx = require('clsx');
var React = require('react');
var styled = require('styled-components');
var Text = require('../../Text/Text.js');
var sx = require('../../sx.js');
var featureFlags = require('../../FormControl/feature-flags.js');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var InputValidation_module = require('./InputValidation.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const validationIconMap = {
  success: octiconsReact.CheckCircleFillIcon,
  error: octiconsReact.AlertFillIcon
};
const InputValidation = ({
  children,
  id,
  validationStatus,
  sx
}) => {
  const enabled = useFeatureFlag.useFeatureFlag(featureFlags.cssModulesFlag);
  const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;

  // TODO: use `text-caption-lineHeight` token as a custom property when it's available
  // then, we can move this all to CSS and use `calc` to get our height values
  const captionLineHeight = 16 / 12;
  const iconSize = 12;
  const iconBoxMinHeight = iconSize * captionLineHeight;
  return /*#__PURE__*/React__default.default.createElement(StyledInputValidation, {
    className: clsx.clsx({
      [InputValidation_module.InputValidation]: enabled
    }),
    "data-validation-status": validationStatus,
    sx: sx
  }, IconComponent ? /*#__PURE__*/React__default.default.createElement(StyledValidationIcon, {
    "aria-hidden": "true",
    className: clsx.clsx({
      [InputValidation_module.ValidationIcon]: enabled
    }),
    style: {
      '--inputValidation-iconSize': iconBoxMinHeight
    }
  }, /*#__PURE__*/React__default.default.createElement(IconComponent, {
    size: iconSize,
    fill: "currentColor"
  })) : null, /*#__PURE__*/React__default.default.createElement(StyledValidationText, {
    id: id,
    className: clsx.clsx({
      [InputValidation_module.ValidationText]: enabled
    }),
    style: {
      '--inputValidation-lineHeight': captionLineHeight
    }
  }, children));
};
InputValidation.displayName = "InputValidation";
const StyledInputValidation = styled__default.default(Text).withConfig({
  displayName: "InputValidation__StyledInputValidation",
  componentId: "sc-1b199hv-0"
})(["color:var(--inputValidation-fgColor);display:flex;font-size:var(--text-body-size-small);font-weight:600;& :where(a){color:currentColor;text-dectoration:underline;}&:where([data-validation-status='success']){--inputValidation-fgColor:var(--fgColor-success);}&:where([data-validation-status='error']){--inputValidation-fgColor:var(--fgColor-danger);}", ""], sx.default);
const StyledValidationIcon = styled__default.default.span.withConfig({
  displayName: "InputValidation__StyledValidationIcon",
  componentId: "sc-1b199hv-1"
})(["align-items:center;display:flex;margin-inline-end:var(--base-size-4);min-height:var(--inputValidation-iconSize);"]);
const StyledValidationText = styled__default.default.span.withConfig({
  displayName: "InputValidation__StyledValidationText",
  componentId: "sc-1b199hv-2"
})(["line-height:var(--inputValidation-lineHeight);"]);

module.exports = InputValidation;