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

Patreon Studio Design System

'use client';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { InlineError } from '~/components/InlineError';
import { InlineSuccess } from '~/components/InlineSuccess';
import { LoadingSpinner } from '~/components/LoadingSpinner';
import { MediaLockup } from '~/components/MediaLockup';
import { Spacer } from '~/components/Spacer';
import { Stack } from '~/components/Stack';
import { useTestIdGenerator } from '~/hooks/useTestIdGenerator';
import { tokens } from '~/tokens';
export function InlineHelpText({ id, inputId, helpText, error, success, loading, 'data-tag': dataTag, }) {
    const getTestId = useTestIdGenerator(dataTag);
    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 (<Spacer pt={tokens.global.space.x8}>
      <Stack alignItems="flex-start" gap={tokens.global.space.x4}>
        {shouldDisplayError && (<InlineError aria-live="assertive" data-tag={getTestId('error')} id={inputId} size="xs">
            {error}
          </InlineError>)}

        {shouldDisplaySuccess && (<InlineSuccess aria-live="polite" data-tag={getTestId('success')} id={inputId} size="xs">
            {success}
          </InlineSuccess>)}

        {loading && (<MediaLockup aria-live="polite" data-tag={getTestId('loading')} id={inputId} leadingMedia={{ type: 'loading', component: LoadingSpinner }} variant="body" size="xs">
            {loading}
          </MediaLockup>)}

        {!!helpText && (<BodyText size="sm" aria-live="polite" data-tag={getTestId('helpText')} id={id}>
            {helpText}
          </BodyText>)}
      </Stack>
    </Spacer>);
}
//# sourceMappingURL=index.jsx.map