@patreon/studio/module/components/InlineHelpText/index.jsx

Patreon Studio Design System

'use client';
import React from 'react';
import { useTestIdGenerator } from '../../hooks/useTestIdGenerator';
import { InlineError } from '../InlineError';
import { InlineSuccess } from '../InlineSuccess';
import { LoadingSpinner } from '../LoadingSpinner';
import { HelpTextContainer, HelpLabel, LoadingContainer } from './components';
export function InlineHelpText({ id, inputId, helpText, error, success, loading, 'data-tag': dataTag, }) {
    const getTestId = useTestIdGenerator(dataTag);
    if (!(helpText || error || success || loading)) {
        return null;
    }
    const shouldDisplayError = !!error && typeof error !== 'boolean';
    const shouldDisplaySuccess = !error && !!success && typeof success !== 'boolean';
    // Ensure we don't render an empty `HelpTextContainer`
    if (!helpText && !shouldDisplayError && !shouldDisplaySuccess && !loading) {
        return null;
    }
    return (<HelpTextContainer>
      {!!helpText && (<HelpLabel aria-live="polite" data-tag={getTestId('helpText')} id={id} error={!!error}>
          {helpText}
        </HelpLabel>)}
      {shouldDisplayError && (<InlineError aria-live="assertive" data-tag={getTestId('error')} inputId={inputId} size="xs">
          {error}
        </InlineError>)}
      {shouldDisplaySuccess && (<InlineSuccess aria-live="polite" data-tag={getTestId('success')} inputId={inputId} size="xs">
          {success}
        </InlineSuccess>)}
      {loading && (<LoadingContainer data-tag={getTestId('loading')}>
          <LoadingSpinner size="xxs"/>
          <HelpLabel aria-live="polite" error={!!error}>
            {loading}
          </HelpLabel>
        </LoadingContainer>)}
    </HelpTextContainer>);
}
//# sourceMappingURL=index.jsx.map