@navinc/base-react-components
Version:
Nav's Pattern Library
36 lines (35 loc) • 2.18 kB
TypeScript
import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
import { ButtonBaseProps } from './button';
import { ReactNode } from 'react';
import { IconName } from './icons';
import { StatusColor } from './theme';
declare type InternalDialogProps = {
'data-testid'?: string;
/** If `true` remove padding from Dialog container. */
noPadding?: boolean;
};
export declare type DialogProps = Pick<MuiDialogProps, 'aria-labelledby' | 'aria-describedby' | 'children' | 'className' | 'open' | 'onClose'> & InternalDialogProps;
export declare const BaseDialog: ({ noPadding, "data-testid": dataTestId, ...props }: DialogProps) => JSX.Element;
declare type DialogButtonsDirection = 'column' | 'row-reverse';
declare type DialogTextAlign = 'left' | 'center';
export declare type ConfirmationDialogProps = {
/** Text shown in dialog header. */
header: string;
/** Slotted dialog content. */
content: ReactNode;
/** Props passed to primary button. It is recommended to have at least `children` and `onClick`. */
primaryButtonProps: ButtonBaseProps;
/** Props passed to secondary button. It is recommended to have at least `children` and `onClick`. */
secondaryButtonProps: ButtonBaseProps;
/** Sets the icon `color` and `background-color` styles. */
status?: StatusColor;
/** Name of the icon. */
iconName?: IconName;
/** Controls the header and content text alignment. */
textAlign?: DialogTextAlign;
/** Defines the `flex-direction` style property of button container. Buttons will always be stacked in a `column` on mobile. */
buttonsDirection?: DialogButtonsDirection;
} & DialogProps;
export declare const ConfirmationDialog: ({ header, content, iconName, status, primaryButtonProps, secondaryButtonProps, buttonsDirection, textAlign, ...props }: ConfirmationDialogProps) => JSX.Element;
declare const _default: import("styled-components").StyledComponent<({ header, content, iconName, status, primaryButtonProps, secondaryButtonProps, buttonsDirection, textAlign, ...props }: ConfirmationDialogProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export default _default;