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

An implementation of GitHub's Primer Design System using React

import { CheckCircleFillIcon, AlertFillIcon } from '@primer/octicons-react';
import { clsx } from 'clsx';
import React from 'react';
import styled from 'styled-components';
import Text from '../../Text/Text.js';
import sx from '../../sx.js';
import { cssModulesFlag } from '../../FormControl/feature-flags.js';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import classes from './InputValidation.module.css.js';

const validationIconMap = {
  success: CheckCircleFillIcon,
  error: AlertFillIcon
};
const InputValidation = ({
  children,
  id,
  validationStatus,
  sx
}) => {
  const enabled = useFeatureFlag(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.createElement(StyledInputValidation, {
    className: clsx({
      [classes.InputValidation]: enabled
    }),
    "data-validation-status": validationStatus,
    sx: sx
  }, IconComponent ? /*#__PURE__*/React.createElement(StyledValidationIcon, {
    "aria-hidden": "true",
    className: clsx({
      [classes.ValidationIcon]: enabled
    }),
    style: {
      '--inputValidation-iconSize': iconBoxMinHeight
    }
  }, /*#__PURE__*/React.createElement(IconComponent, {
    size: iconSize,
    fill: "currentColor"
  })) : null, /*#__PURE__*/React.createElement(StyledValidationText, {
    id: id,
    className: clsx({
      [classes.ValidationText]: enabled
    }),
    style: {
      '--inputValidation-lineHeight': captionLineHeight
    }
  }, children));
};
InputValidation.displayName = "InputValidation";
const StyledInputValidation = styled(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);
const StyledValidationIcon = styled.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.span.withConfig({
  displayName: "InputValidation__StyledValidationText",
  componentId: "sc-1b199hv-2"
})(["line-height:var(--inputValidation-lineHeight);"]);

export { InputValidation as default };