import React, { useMemo, useRef } from 'react'; import { Button } from '@leafygreen-ui/button'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { Modal } from '@leafygreen-ui/modal'; import { CloseIconColor } from '@leafygreen-ui/modal'; import { Body, Disclaimer, H3, Link } from '@leafygreen-ui/typography'; import { Graphic } from '../Graphic/Graphic'; import { baseModalStyle, disclaimerStyles, footerContentStyle, getButtonStyles, getContentStyles, linkStyle, titleStyle, wrapperStyle, } from './MarketingModal.styles'; import { BlobPosition, GraphicStyle, MarketingModalProps, } from './MarketingModal.types'; /** * Modals can be used to display a simple task, to confirm actions, prompt users to input information, or display additional information. */ const MarketingModal = ({ children, title, graphic, onLinkClick, onClose, buttonProps = {}, linkText, darkMode: darkModeProp, graphicStyle = GraphicStyle.Center, closeIconColor = CloseIconColor.Default, blobPosition = BlobPosition.TopLeft, showBlob = false, disclaimer, initialFocus: initialFocusProp, ...modalProps }: MarketingModalProps) => { const { theme, darkMode } = useDarkMode(darkModeProp); const buttonRef = useRef(null); const initialFocus = useMemo(() => { if (initialFocusProp) { return initialFocusProp; } return buttonRef; }, [initialFocusProp]); return (

{title}

{children}

{linkText} {disclaimer && (

{disclaimer}

)}

); }; MarketingModal.displayName = 'MarketingModal'; export default MarketingModal;