@leafygreen-ui/marketing-modal

Marketing Modal

View on Storybook

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.	() => {}
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.