Installation

Install the Modal package from npm

npm install @royallondon/design-system-component-modal

Import the required CSS file

@import '@royallondon/design-system-component-modal/dist/modal';

Import the required JS file, add the html and modal trigger element then initalise the modal function

import { createModal } from '@royallondon/design-system-component-modal/dist/modal';

const innerHTML = `<div class="rl-c-modal-content" id="modal-content" >
<div id="modal-heading" class="rl-c-modal-heading">
<h2 class="rl-t-title-large">Are you sure?</h2>
</div>
<button class="rl-c-modal-close rl-c-modal-close--primary" aria-label="Close">
<svg class="rl-f-icon rl-f-icon--xs" aria-hidden="true">
  <use href="/assets/icons.svg#semantic-danger"></use>
</svg>
</button>
<div class="rl-u__margin--b-6">
<p>The pension plan won't be saved and any information you have provided for this request will be lost.</p>
</div>
<div class="rl-form__row rl-form__row--action">
<button class="rl-c-button--primary">Yes, remove</button>
<button class="rl-c-button--ghost">No, don't remove</button>
</div>
</div>`;
createModal({
  innerHTML,
  modalTriggerElement: element_id | element_classname,
  modalSize: xsmall | small | medium | large,
});

Support

Issues and questions are handled through the Royal London Design System support page.

Licence

@royallondon/design-system-component-modal

This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.

Use of this package is subject to the Royal London Authorised Use Licence. See the LICENSE.md file included in this package.

The Modal component for the Royal London Design System. For design guidance, examples and accessibility notes, see the Modal page.

Release log

| Version | Release notes | | ------- | ---------------------------------------------------------------------------------------------------- | | 2.3.0 | Prepare for public npm release: add licence, publish dist only (src removed), remove source maps | | 2.2.5 | Move to new feed | | 2.2.0 | Apply new icons and latest tokens added to foundations | | 2.1.1 | Fix spacing between elements and improve responsive experience | | 2.1.0 | Update foundations dependency version to ensure new tokens | | 2.0.1 | Fix issue with media query processing without postcss | | 2.0.0 | Upgrade for compatibility with foundations v2 | | 1.0.0 | Initial release of modal component |