Marketing Modal

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/marketing-modal

Yarn

yarn add @leafygreen-ui/marketing-modal

NPM

npm install @leafygreen-ui/marketing-modal

Example

import MarketingModal from '@leafygreen-ui/marketing-modal';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <MarketingModal
        open={open}
        buttonProps={{
          children: 'Get started',
          onClick: () => setOpen(false),
        }}
        onLinkClick={() => setOpen(false)}
        onClose={() => setOpen(false)}
        title="Introducing New Feature!"
        graphic={
          <img alt="" src="examples/DataLake.png" width={275} height={220} />
        }
        graphicStyle={ImageStyle.Center}
        linkText="Cancel"
      >
        This is some description text, and it is extra long so it fills up this
        modal. Another thing about the modals here.
      </MarketingModal>
    </>
  );
}

Properties

| Prop | Type | Description | Default | | ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | open | boolean | Determines open state of Modal component | false | | onLinkClick | function | Callback that fires when the secondary link is clicked. This can be used to set the modal to be closed. | () => {} | | onClose | function | Callback that fires when the cancel button, x button, or backdrop is clicked. This can be used to set the modal to be closed. | () => {} | | title | ReactNode | Title text to display above the main content text. | | | graphic | React.ReactElement | Element to be used as the main graphic of the modal. | | | graphicStyle | 'center', 'fill' | Determines how the main graphic should be displayed in the modal. | 'center' | | children | node | Children that will be rendered inside <MarketingModal /> component. | | | linkText | string | Text content of the alternate action link. | | | className | string | Style to be applied to the container's root node. | | | darkMode | boolean | Determines if the component will appear in dark mode. | false | | closeIconColor | 'default', 'dark', 'light' | Determines the color of the close icon. | 'default' | | showBlob | boolean | Determines if the blob illustration should appear in the background of the modal. Currently will only work if darkMode is set to false. | false | | blobPosition | 'top left', 'top right', 'bottom right' | Determines the position of the blob if showBlob is set to true. | top left | | disclaimer | React.ReactElement | Disclaimer text to be rendered under the primary action button. | | | buttonProps | ButtonProps | The primary button. An object that accepts all Button props except for the variant prop. | |

Testing Considerations

The MarketingModal component uses the native HTMLDialogElement API for better accessibility and browser-native behavior. However, JSDOM (used by Jest and other test runners) does not fully support this API. You'll need to mock the show, showModal, and close methods in your test setup:

beforeAll(() => {
  HTMLDialogElement.prototype.show = jest.fn(function mock(
    this: HTMLDialogElement,
  ) {
    this.open = true;
  });

  HTMLDialogElement.prototype.showModal = jest.fn(function mock(
    this: HTMLDialogElement,
  ) {
    this.open = true;
  });

  HTMLDialogElement.prototype.close = jest.fn(function mock(
    this: HTMLDialogElement,
  ) {
    this.open = false;
  });
});

This mock can be placed in a beforeAll block in your test file, or in a global test setup file.