import { Sentiment } from '../../common';
import { BackslashCircle, GiftBox } from '@transferwise/icons';
import ProcessIndicator from '../../processIndicator';
import StatusIcon from '../../statusIcon';
import { clsx } from 'clsx';
import Body from '../../body';
import { PrimitivePrompt } from '../PrimitivePrompt';
export type InlinePromptProps = {
/**
* The sentiment determines the colour scheme
* @default Sentiment.POSITIVE
*/
sentiment?:
| `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
| 'proposition';
/**
* Replaces the icon with a spinner while waiting for the short-lived action to finish.
* @default false
*/
loading?: boolean;
/**
* While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled
* they are associated with actually disabled component (e.g. a disabled list item or input).
* @default false
*/
muted?: boolean;
/**
* Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be
* replaced by a plain icon.
*/
media?: React.ReactNode;
/**
* Override for the sentiment's-derived, default, accessible name announced by the screen readers.
*/
mediaLabel?: string;
/**
* Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.
* @default auto
*/
width?: 'auto' | 'full';
id?: string;
className?: string;
'data-testid'?: string;
children: React.ReactNode;
};
/**
* Inline prompts appear alongside a specific component on the screen. They help the user stay
* informed, fix something, or get more out of what they're doing.
*
* **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
*/
export const InlinePrompt = ({
sentiment = Sentiment.POSITIVE,
muted = false,
loading = false,
className,
children,
media = null,
mediaLabel,
width = 'auto',
'data-testid': dataTestId,
...restProps
}: InlinePromptProps) => {
const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
const renderMedia = () => {
if (muted) {
return ;
}
if (loading) {
return (
);
}
if (sentiment === 'proposition') {
return media || ;
}
return media || ;
};
return (
{children}
);
};