@patreon/studio/module/components/Banner/types.d.ts

Patreon Studio Design System

import type { IconComponent } from '~/components/Icon/types';
import type { TextLinkProps } from '~/components/TextLink/types';
import type { Action } from '~/types/actions';
export declare const Variant: {
    readonly Critical: "critical";
    readonly Info: "info";
    readonly Success: "success";
    readonly Warning: "warning";
    readonly Inverted: "inverted";
};
export type Variant = (typeof Variant)[keyof typeof Variant];
export interface BannerProps {
    /**
     * The action a user needs to take, represented by a button in the right/bottom of the banner.
     * If undefined, no action button is shown.
     */
    action?: Omit<Action, 'variant'>;
    /**
     * The secondary action a user needs to take, represented by a button to the left of the action button.
     */
    secondaryAction?: Action;
    /**
     * Where to align action Buttons in Banner, always at aligned bottom on mobile.
     */
    alignAction?: 'right' | 'bottom';
    /**
     * Banner message, automatically wrapped with a `<Text>`. Should be 1-2 sentences and may contain links (`TextLink`).
     */
    children: React.ReactNode;
    /**
     * Tag for testing.
     */
    'data-tag'?: string;
    /**
     * HTML id attribute for outer banner node.
     */
    id?: string;
    /**
     * For banners placed within a section of the page.
     * Styles banners with rounded corners and no shadow.
     * Group multiple inline banners inside a `Stack` (with `wrap={false}`)
     * @deprecated use `placement="inline"` instead
     */
    inline?: boolean;
    /**
     * Called when the user clicks on the close button.
     * If undefined, no close button is shown.
     */
    onClose?: () => void;
    /**
     * Determines the banner icon and colors. `Critical`, `Info`, `Success`, and `Warning`
     */
    variant: Variant;
    /**
     * The icon to to display on the left side of `Banner`
     */
    icon?: IconComponent;
    /**
     * Render a loading spinner to the left side of `Banner`
     */
    loading?: boolean;
    /**
     * Type of `Banner` to render
     */
    placement: 'inline-small' | 'inline-large' | 'global';
    /**
     * HeadingText to render above banner text.
     */
    header?: React.ReactNode;
    /**
     * TextLink to render below banner text.
     */
    inlineLink?: Omit<TextLinkProps, 'children' | 'onClick'> & {
        label: React.ReactNode;
    };
}