@royallondon/design-system-component-modal 0.0.0-stage → 2.3.0

package/LICENSE.md

@@ -0,0 +1,54 @@
+Authorised Use Licence v1.0
+
+Copyright © 2026 Royal London.
+All rights reserved.
+
+1. Grant of Licence
+
+The Licensor grants a non-exclusive, non-transferable,
+revocable, royalty-free licence to use the Software only where:
+
+(a) the individual, organisation, or business has been
+expressly authorised in writing by the Licensor; and
+
+(b) such authorisation remains in force.
+
+2. Restrictions
+
+The Software may not be:
+
+(a) used by any unauthorised person or organisation;
+
+(b) redistributed, sublicensed, sold, rented or made
+available to third parties;
+
+(c) incorporated into another product or service without
+written approval;
+
+(d) reverse engineered except where prohibited by law.
+
+3. Ownership
+
+The Software remains the exclusive property of the Licensor.
+No ownership rights are transferred under this Licence.
+
+4. Termination
+
+The Licensor may revoke authorisation at any time by
+written notice.
+
+Upon termination the Licensee must immediately cease use
+of the Software and destroy all copies.
+
+5. No Warranty
+
+The Software is provided "as is" without warranty of any kind.
+
+6. Limitation of Liability
+
+The Licensor shall not be liable for any damages arising
+from use of the Software.
+
+7. Governing Law
+
+This Licence shall be governed by the laws of England and Wales.

package/README.md

@@ -1,3 +1,69 @@
-# Temporary Holding Version
+### Installation
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Install the Modal package from npm
+
+```bash
+npm install @royallondon/design-system-component-modal
+```
+
+Import the required CSS file
+
+```css
+@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
+
+```js
+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](https://design.royallondon.com/support/).
+
+### 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](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Modal page](https://design.royallondon.com/components/modal/).
+
+### 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                                                                   |

package/dist/modal.css

@@ -0,0 +1 @@
+@custom-media --mq-xsmall (max-width: 31.9375rem);@custom-media --mq-small (min-width: 32rem);@custom-media --mq-medium (min-width: 48rem);@custom-media --mq-large (min-width: 64rem);@custom-media --mq-medium-max (max-width: 47.9375rem);@custom-media --mq-large-max (max-width: 63.9375rem);@custom-media --mq-xs-max (max-width: 31.9375rem);@custom-media --mq-sm (min-width: 32rem);@custom-media --mq-sm-max (max-width: 47.9375rem);@custom-media --mq-md (min-width: 48rem);@custom-media --mq-md-max (max-width: 63.9375rem);@custom-media --mq-lg (min-width: 64rem);@custom-media --mq-lg-max (max-width: 79.9375rem);@custom-media --mq-xl (min-width: 80rem);@custom-media --mq-xl-max (max-width: 95.9375rem);@custom-media --mq-xxl (min-width: 96rem);:root{--xsmall-modal-maxwidth:calc(100% - var(--spacing-05)*2);--xsmall-modal-width:288px;--small-modal-width:432px;--medium-modal-width:576px;--large-modal-width:816px}[class*=rl-c-modal--]{background-color:var(--modal-fill-box);display:none;left:50%;padding:var(--spacing-04);position:fixed;top:var(--spacing-08);transform:translate(-50%,-100%);width:576px;width:var(--medium-modal-width);z-index:1000}@media (min-width:32rem){[class*=rl-c-modal--]{width:432px;width:var(--small-modal-width)}}@media (--mq-small ){[class*=rl-c-modal--]{width:432px;width:var(--small-modal-width)}}@media (min-width:48rem){[class*=rl-c-modal--]{width:576px;width:var(--medium-modal-width)}}@media (--mq-medium ){[class*=rl-c-modal--]{width:576px;width:var(--medium-modal-width)}}@media (min-width:64rem){[class*=rl-c-modal--]{width:816px;width:var(--large-modal-width)}}@media (--mq-large ){[class*=rl-c-modal--]{width:816px;width:var(--large-modal-width)}}@media (min-width:32rem){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large,.rl-c-modal--medium,.rl-c-modal--small{width:432px;width:var(--small-modal-width)}}@media (--mq-small ){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large,.rl-c-modal--medium,.rl-c-modal--small{width:432px;width:var(--small-modal-width)}}@media (min-width:48rem){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large,.rl-c-modal--medium{width:576px;width:var(--medium-modal-width)}}@media (--mq-medium ){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large,.rl-c-modal--medium{width:576px;width:var(--medium-modal-width)}}@media (min-width:64rem){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large{width:816px;width:var(--large-modal-width)}}@media (--mq-large ){.rl-c-modal--xsmall{width:288px;width:var(--xsmall-modal-width)}.rl-c-modal--large{width:816px;width:var(--large-modal-width)}}@media (max-width:31.9375rem){.rl-c-modal--large,.rl-c-modal--medium,.rl-c-modal--small,.rl-c-modal--xsmall,[class*=rl-c-modal--]{width:var(--xsmall-modal-maxwidth)}}@media (--mq-xsmall ){.rl-c-modal--large,.rl-c-modal--medium,.rl-c-modal--small,.rl-c-modal--xsmall,[class*=rl-c-modal--]{width:var(--xsmall-modal-maxwidth)}}[class*=rl-c-modal--].open{animation:slideDown .3s ease forwards;display:block}@keyframes slideDown{0%{transform:translate(-50%,-100%)}to{transform:translate(-50%)}}.rl-c-modal-heading{color:var(--modal-text-title);margin-bottom:var(--spacing-03)}.rl-c-modal-heading>:last-child{margin-bottom:0}.rl-c-modal-content{color:var(--modal-text-body);margin:calc(var(--spacing-01)*-1);max-height:80vh;overflow-y:auto;padding:var(--spacing-01);position:relative}.rl-c-modal-close--primary{align-items:center;display:flex;height:1.5rem;justify-content:center;padding:0;position:absolute;right:var(--spacing-01);top:var(--spacing-02);width:1.5rem}.rl-c-modal-backdrop{background:color-mix(in srgb,var(--modal-fill-overlay),transparent 80%);height:100%;left:0;position:fixed;top:0;width:100%;z-index:999}

package/dist/modal.d.ts

@@ -0,0 +1,12 @@
+interface ModalOptions {
+    innerHTML?: string;
+    modalTriggerElement: HTMLElement;
+    modalSize?: string;
+    customButtons?: {
+        selector: string;
+        closeAfter?: boolean;
+        callback: (event: MouseEvent) => void;
+    }[];
+}
+export declare function createModal(options?: ModalOptions): void;
+export {};

package/dist/modal.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModal = createModal;
+function createModal(options = {}) {
+  const {
+    innerHTML,
+    modalTriggerElement,
+    modalSize = '',
+    customButtons
+  } = options;
+  const modalBackdrop = document.createElement('div');
+  modalBackdrop.classList.add('rl-c-modal-backdrop');
+  let modalElement;
+  let triggeringElement;
+  let focusableElements = [];
+  let nextFocusElement;
+  modalTriggerElement.addEventListener('click', event => {
+    event.preventDefault();
+    if (!modalElement) {
+      create(innerHTML);
+    }
+    open();
+    const focusableElements2 = document.body.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    let matchedIndex = -1;
+    for (let i = 0; i < focusableElements2.length; i++) {
+      const element = focusableElements2[i];
+      const match = modalTriggerElement;
+      if (element.outerHTML === match.outerHTML) {
+        matchedIndex = i;
+        break;
+      }
+    }
+    nextFocusElement = focusableElements2[matchedIndex + 1];
+    triggeringElement = modalTriggerElement;
+  });
+  function create(customInnerHTML) {
+    modalElement = document.createElement('div');
+    modalElement.classList.add(`rl-c-modal--${modalSize}`);
+    modalElement.setAttribute('role', 'dialog');
+    modalElement.setAttribute('aria-labelledby', 'modal-heading');
+    modalElement.innerHTML = customInnerHTML;
+    document.body.appendChild(modalElement);
+    const closeButton = modalElement.querySelectorAll('.rl-c-modal-close');
+    closeButton.forEach(closeBtn => {
+      closeBtn.addEventListener('click', close);
+    });
+    if (customButtons) {
+      customButtons.forEach(({
+        selector,
+        closeAfter = true,
+        callback
+      }) => {
+        const button = modalElement.querySelector(selector);
+        button.addEventListener('click', event => {
+          callback(event);
+          if (closeAfter) {
+            close();
+          }
+        });
+      });
+    }
+    focusableElements = modalElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  }
+  function open() {
+    document.body.appendChild(modalBackdrop);
+    modalElement.classList.add('open');
+    const closeButton = modalElement.querySelector('.rl-c-modal-close');
+    closeButton.focus();
+    const backgroundContent = document.querySelectorAll('body > *:not([class*="rl-c-modal--"])');
+    backgroundContent.forEach(element => {
+      element.setAttribute('aria-hidden', 'true');
+      if (!element.classList.contains(`rl-c-modal--${modalSize}`)) {
+        element.setAttribute('tabindex', '-1');
+      }
+    });
+    document.addEventListener('keydown', handleKeyDown);
+    modalElement.addEventListener('keydown', handleModalTab);
+  }
+  function close() {
+    document.body.removeChild(modalBackdrop);
+    modalElement.classList.remove('open');
+    if (triggeringElement.offsetParent) {
+      triggeringElement.focus();
+    } else {
+      nextFocusElement.focus();
+    }
+    const backgroundContent = document.querySelectorAll('[aria-hidden="true"]');
+    backgroundContent.forEach(element => {
+      element.removeAttribute('aria-hidden');
+      element.removeAttribute('tabindex');
+    });
+  }
+  function handleKeyDown(event) {
+    if (event.key === 'Escape' && modalElement.classList.contains('open')) {
+      close();
+    }
+  }
+  function handleModalTab(event) {
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (event.key === 'Tab') {
+      if (event.shiftKey && document.activeElement === firstFocusableElement) {
+        event.preventDefault();
+        lastFocusableElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement.focus();
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@royallondon/design-system-component-modal",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.0",
+  "description": "Royal London Design System - Modal package",
+  "homepage": "https://design.royallondon.com/components/modal/",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
+    "directory": "ds-packages/packages/design-system-component-modal"
+  },
+  "bugs": {
+    "url": "https://design.royallondon.com/support/"
+  },
+  "keywords": [
+    "royal-london-design-system-component-modal",
+    "rlds-modal",
+    "royal-london"
+  ],
+  "author": "Design System Squad <DesignSystem@royallondon.com>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "typings": "dist/modal.d.ts",
+  "main": "dist/modal.css",
+  "style": "dist/modal.css",
+  "scripts": {
+    "build:clean": "npx rimraf dist",
+    "build:lint": "stylelint src/**/*.{css,pcss} --fix",
+    "build:css": "postcss src/**/modal.pcss --base src --dir dist/ --ext css",
+    "build:js": "npm-run-all --serial build:babel build:types",
+    "build:babel": "babel src/ --out-dir dist/ --config-file ../../babel.config",
+    "build:types": "npx copyfiles -u 1 \"src/**/*.d.ts\" dist",
+    "build": "npm-run-all --serial build:clean build:css build:js"
+  },
+  "devDependencies": {
+    "@royallondon/design-system-foundations": "^2.23.0"
+  },
+  "peerDependencies": {
+    "@royallondon/design-system-foundations": ">= 2.15.0 < 3"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }