@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
94 lines (93 loc) • 2.68 kB
TypeScript
import React from 'react';
import type { ReactNode } from 'react';
import type { Props as ReactModalProps } from 'react-modal';
type Variant = 'light' | 'dark';
type Size = 'small' | 'medium' | 'large';
interface Props {
/**
* Unique ID for the component
*/
id?: string;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* Modal title
*/
title?: string;
/**
* Content of the component
*/
children?: ReactNode;
/**
* Allows to display custom footer
*/
footer?: ReactNode;
/**
* Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
*
* @default '#__next'
*/
appElement?: string;
/**
* Allows to control the state of component
*/
isOpen: boolean;
/**
* Allows to disable all closing handlers.
* When set to `false`, modal can be closed only by setting `isOpen` flag to `false`
*
* @default true
*/
isClosable?: boolean;
/**
* Allows to show and hide close button
*
* @default true
*/
closeButton?: boolean;
/**
* On overlay or close button click callback
*/
onRequestClose?: ReactModalProps['onRequestClose'];
/**
* Allows to set property `aria-label` for `ButtonClose` element
*/
closeLabel?: string;
/**
* Allows to set property `aria-label` for content element
*/
contentLabel?: string;
/**
* Allows changing CSS property `max-width` for Modal content wrapper element.
* @deprecated Replaced with 'size' property
*/
maxWidth?: string;
/**
* Allows to change the size of the component.
* Size in mobile view is always 100% of the window size
*
* @param {Size} small Renders component with 'max-width' of 480px
* @param {Size} medium Renders component with 'max-width' of 768px
* @param {Size} large Renders component with 960px fixed width
*
* @default 'medium'
*/
size?: Size;
/**
* Allows to change the color scheme of the component
*
* @param {Variant} light Sets header background color to `theme.color.background.white.default`
* @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
*
* @default 'light'
*/
variant?: Variant;
}
declare const Modal: ({ appElement, size, variant, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
export default Modal;