@studyportals/modal v3.0.4

Modal

This is the Studyportals implementation of modal dialogs as defined in the design system. More information can be found in the Studyportals StyleGuide.

Table of Contents

• Setup & commands
• Modal types
• Modal configuration
• Modal styling
• ModalManager

Setup & commands

The following commands can be used to setup and run a local environment for developing the modal component. Also, we're using husky to run unit tests before a git push is done. This could be by-passed (if absolutely necessary) by running git push --no-verify.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build for production with minification
npm run build

# run linter
npm run lint
npm run lint:fix # with fix

# run unit tests
npm run unit

Modal types

There are two variations of the modal component your application can use, these are called SimpleModal and ComplexModal. While they are a bit different in their purpose and styling (as explained in the Studyportals StyleGuide) they are largely the same in the way they are implemented in your code. The only difference is that an optional call to action element can be passed to the constructor of SimpleModal.

const simple = new SimpleModal(
	content: HTMLElement,
	config: IIModalConfig,
	cta?: HTMLElement
)

const complex = new ComplexModal(
	content: HTMLElement,
	config: IIModalConfig
)

interface IIModalConfig {
	onOpen?: () => any,
	onClose?: () => any,
	cssClassName?: string,
	destroyOnClose: boolean
}

Modal configuration

Modal styling

When using Modal in your code, you should also make sure the default Modal styling is included. This can be done by importing it like so:

@import '~@studyportals/modal/dist/modal.css';

ModalManager

ModalManager is responsible for actually opening and closing your modals. In order for ModalManager to be available to use it should be instantiated on the window after which you can use it to open and close instances of a Modal.

const modal = new SimpleModal(
	document.createElement('div'),
	{
		destroyOnClose: true
	}
);
window.ModalManager = new ModalManager();

ModalManager.open(modal);
ModalManager.close(modal);

Next to opening and closing your modals, ModalManager will also keep track of other modals that might be opened at the same time and stack them in order of most recently opened. When the top modal is closed, any modal under it that has the open state will be automatically revealed. In this way there will always be only one modal visible to the user while retaining the option to have multiple modals opened.