blob: 6f5506fb0231236c37d2d39032803854ddd63abb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import {
type ForwardRefRenderFunction,
type HTMLAttributes,
type ReactElement,
type ReactNode,
forwardRef,
} from 'react';
import type { HeadingProps } from '../heading';
import styles from './modal.module.scss';
export type ModalProps = HTMLAttributes<HTMLDivElement> & {
/**
* The modal body.
*/
children: ReactNode;
/**
* The modal title.
*/
heading?: ReactElement<HeadingProps>;
/**
* The modal kind.
*
* @default 'primary'
*/
kind?: 'primary' | 'secondary';
};
const ModalWithRef: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
{ children, className = '', heading, kind = 'primary', ...props },
ref
) => {
const headingModifier = heading ? 'modal--has-title' : '';
const kindModifier = `modal--${kind}`;
const modalClass = `${styles.modal} ${styles[headingModifier]} ${styles[kindModifier]} ${className}`;
return (
<div {...props} className={modalClass} ref={ref}>
{heading ? <div className={styles.title}>{heading}</div> : null}
{children}
</div>
);
};
/**
* Modal component
*
* Render a modal component.
*/
export const Modal = forwardRef(ModalWithRef);
|
