@patreon/studio/module/components/Toast/variants.jsx

Patreon Studio Design System

'use client';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { Button } from '~/components/Button';
import { IconCheckmark, IconClose, IconNo } from '~/components/Icon';
import { LoadingSpinner } from '~/components/LoadingSpinner';
import { Spacer } from '~/components/Spacer';
import { TextLink } from '~/components/TextLink';
import { tokens } from '~/tokens';
import { ToastTextWrapper } from './styled-components';
function ToastCloseButton({ setState }) {
    return (<Spacer mr={tokens.global.space.x8} aria-hidden>
      <Button icon={IconClose} corners="pill" variant="secondary" unfilled data-tag="close-button" onClick={() => setState('leaving')}/>
    </Spacer>);
}
function ToastWrapper({ children, action, showCloseButton, setState }) {
    const { label: actionLabel, ...actionProps } = action ?? {};
    return (<>
      {children}
      {action && (<Spacer mr={tokens.global.space.x16} aria-hidden>
          <TextLink {...actionProps}>{actionLabel}</TextLink>
        </Spacer>)}
      {showCloseButton && <ToastCloseButton setState={setState}/>}
    </>);
}
function FormattedChildren({ children }) {
    // Automatically add the correct padding if the children is a simple string.
    // This is mostly for backwards compatibility when previous versions of
    // toasts only accepted strings for contents.
    if (typeof children === 'string') {
        return (<ToastTextWrapper>
        <BodyText>{children}</BodyText>
      </ToastTextWrapper>);
    }
    return <>{children}</>;
}
export function SuccessToast({ children, action, setState }) {
    return (<ToastWrapper showCloseButton action={action} setState={setState}>
      <Spacer ml={tokens.global.space.x16}>
        <IconCheckmark color={tokens.global.success.surface.default} size="16px"/>
      </Spacer>
      <FormattedChildren>{children}</FormattedChildren>
    </ToastWrapper>);
}
export function ErrorToast({ children, action, setState }) {
    return (<ToastWrapper showCloseButton action={action} setState={setState}>
      <Spacer ml={tokens.global.space.x16}>
        <IconNo size="16px" color={tokens.global.critical.surface.default}/>
      </Spacer>
      <FormattedChildren>{children}</FormattedChildren>
    </ToastWrapper>);
}
export function LoadingToast({ children, action, setState }) {
    return (<ToastWrapper action={action} setState={setState}>
      <Spacer ml={tokens.global.space.x16}>
        <LoadingSpinner data-tag="loading-spinner" size="xs"/>
      </Spacer>
      <FormattedChildren>{children}</FormattedChildren>
    </ToastWrapper>);
}
export function CustomToast({ children, showCloseButton, setState }) {
    return (<>
      <FormattedChildren>{children}</FormattedChildren>
      {showCloseButton && <ToastCloseButton setState={setState}/>}
    </>);
}
//# sourceMappingURL=variants.jsx.map