Modal Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of modals according to style guide conventions.

• https://zeroheight.com/990ea04ab/p/280a4e-modal

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | children | any | yes | n/a | Renders the modal description | | open | boolean | yes | false | Determines open state of modal | | closeOnBackdropClick | boolean | no | true | Determines if the modal closes on clicking outside the modal | | title | string | no | undefined | Modal title | | width | number | no | undefined | Determines modal width | | close | function | yes | () => {} | Handler for the onclick event on close button | | hasBodyScroll | boolean | no | false | Determines wether scroll behavior occurs in the body section with a max height on the whole modal, or on the whole modal container (default) | | cta | React node | no | no | Optional "call to action" | | zIndex | number | no | 1000 | Determines z-index style for the modal (as well as backdrop at zIndex - 1) |