Marketing Modal

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/marketing-modal

NPM

npm install @leafygreen-ui/marketing-modal

Example

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

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <MarketingModal
        open={open}
        onButtonClick={() => 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}
        buttonText="Okay"
        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>
    </>
  );
}

Output HTML

<button>Open Modal</button>
<div aria-modal="true" role="dialog" tabindex="-1" class="leafygreen-ui-4ltwxx">
  <button
    tabindex="0"
    aria-disabled="false"
    aria-label="Close modal"
    class="leafygreen-ui-zndd6x"
  >
    <div class="leafygreen-ui-xhlipt">
      <svg
        class="leafygreen-ui-19fdo3o"
        height="20"
        width="20"
        viewBox="0 0 16 16"
        role="img"
      >
        <g
          id="X-Copy"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path
            d="M9,7 L13.5,7 L13.5,9 L9,9 L9,13.5 L7,13.5 L7,9 L2.5,9 L2.5,7 L7,7 L7,2.5 L9,2.5 L9,7 Z"
            id="Combined-Shape-Copy"
            fill="currentColor"
            transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
          ></path>
        </g>
      </svg>
    </div>
  </button>
  <div class="leafygreen-ui-ex1gyf">
    <img alt="" src="examples/DataLake.png" width="275" height="220" />
  </div>
  <div class="leafygreen-ui-8fcqkd">
    <div class="leafygreen-ui-1dhn1u9">Introducing New Feature!</div>
    This is some description text, and it is extra long so it fills up this
    modal. Another thing about the modals here.
  </div>
  <div class="leafygreen-ui-1xfya45">
    <button type="button" class="leafygreen-ui-1p9g0i2" aria-disabled="false">
      <span class="leafygreen-ui-1cpk24m">Okay</span></button
    ><span
      target="_blank"
      class="leafygreen-ui-1ouyicz"
      data-leafygreen-ui="anchor-container"
      tabindex="0"
      ><span class="leafygreen-ui-13nqixy">Cancel</span></span
    >
  </div>
</div>

Properties

| Prop | Type | Description | Default | | ---------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- | -------- | -------------------------------------------------- | --- | | open | boolean | Determines open state of Modal component | false | | onButtonClick | function | Callback that fires when the primary button is clicked. This can be used to set the modal to be closed. | () => {} | | 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 | string | 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 <ConfirmationModal /> component. | | | buttonText | string | Text content of the confirmation button. | | | 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. | | 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. | |