@royallondon/design-system-component-notification-panel 0.0.0-stage → 1.4.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,55 @@
-# 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 Notification panel package from npm
+
+```bash
+npm install @royallondon/design-system-component-notification-panel
+```
+
+Import the required CSS file
+
+```css
+@import '@royallondon/design-system-component-notification-panel/dist/notification-panel';
+```
+
+Import the required JS file and then initalise the notification function
+
+```js
+import notificationPanel from '@royallondon/design-system-component-notification-panel/dist/notification-panel';
+
+const panel = document.getElementById('notifications');
+notificationPanel(panel);
+```
+
+[Start using the Notification panel component](https://design.royallondon.com/components/notification-panel/#live-example)
+
+### Support
+
+Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
+
+### Licence
+
+#### @royallondon/design-system-component-notification-panel
+
+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 Notification panel component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Notification panel page](https://design.royallondon.com/components/notification-panel/).
+
+### Release log
+
+| Version | Release notes                                                                                        |
+| ------- | ---------------------------------------------------------------------------------------------------- |
+| 1.4.0   | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps |
+| 1.3.3   | Move to new feed                                                                                     |
+| 1.3.0   | Apply new icons and latest tokens added to foundations                                               |
+| 1.2.2   | Fix "Mark all as read" button position on sm breakpoint                                              |
+| 1.2.1   | Update TypeScript declaration to support internal functions                                          |
+| 1.2.0   | Add SPA support for notification links and expose internal functions                                 |
+| 1.1.0   | Update foundations dependency version to ensure new tokens                                           |
+| 1.0.4   | Fix width collapse of notification panel when empty                                                  |
+| 1.0.3   | Add ts declaration file                                                                              |
+| 1.0.2   | Add HTML code to the README                                                                          |
+| 1.0.1   | Add missing dependencies                                                                             |
+| 1.0.0   | Initial development release of notification panel component                                          |

package/dist/notification-panel.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);.rl-c-notification-panel{flex-direction:column;inset:4.5rem 0 auto;max-height:calc(100dvh - 9.5rem);max-width:33.5rem;position:fixed;z-index:var(--z-header)}@media (min-width:32rem){.rl-c-notification-panel{inset:auto;max-height:calc(100vh - 6.75rem);position:absolute;right:calc(var(--spacing-03)*-1);top:calc(100% + var(--spacing-03));width:var(--notification-banner-width)}}@media (--mq-sm ){.rl-c-notification-panel{inset:auto;max-height:calc(100vh - 6.75rem);position:absolute;right:calc(var(--spacing-03)*-1);top:calc(100% + var(--spacing-03));width:var(--notification-banner-width)}}.rl-c-notification-panel:not([hidden]){display:flex}.rl-c-notification-panel .rl-c-notification-banner{background:var(--notification-panel-item-fill);border-style:solid;border-width:0 0 0 .25rem}.rl-c-notification-panel__content,.rl-c-notification-panel__footer,.rl-c-notification-panel__header{padding-inline:var(--spacing-03)}.rl-c-notification-panel__footer,.rl-c-notification-panel__header{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing-04)}:is(.rl-c-notification-panel__header,.rl-c-notification-panel__footer) .rl-c-button--text{margin-left:auto;width:auto}.rl-c-notification-panel__header{background:var(--notification-panel-fill-header);padding-block:var(--spacing-03) var(--spacing-02)}@media (max-width:31.9375rem){.rl-c-notification-panel__header .rl-c-button--text{display:none}}@media (--mq-xs-max ){.rl-c-notification-panel__header .rl-c-button--text{display:none}}.rl-c-notification-panel__heading{color:var(--notification-panel-text-title);margin:0}.rl-c-notification-panel__content{background:var(--notification-panel-fill-container);overflow-y:auto;padding-block:var(--spacing-03)}.rl-c-notification-panel__content:not(:has(.rl-c-notification-banner)){align-items:center;display:flex;flex-direction:column;gap:var(--spacing-02);justify-content:center;min-height:20rem}.rl-c-notification-panel__content .rl-c-tabs__header{margin-bottom:var(--spacing-03)}.rl-c-notification-panel__items{display:flex;flex-direction:column;gap:var(--spacing-02);margin:0}.rl-c-notification-panel__footer{background:var(--notification-panel-fill-container);inset:auto 0 0;padding-block:var(--spacing-03);position:fixed}@media (min-width:32rem){.rl-c-notification-panel__footer{display:none}}@media (--mq-sm ){.rl-c-notification-panel__footer{display:none}}

package/dist/notification-panel.d.ts

@@ -0,0 +1,20 @@
+declare function notificationPanel(panel: HTMLElement): {
+  // Internal state
+  readonly isOpen: boolean;
+
+  // Elements
+  header: Element | null;
+  toggle: HTMLElement | null;
+  bodyOverlay: HTMLElement | null;
+  event: CustomEvent<HTMLElement>;
+
+  // Functions
+  bindEvents: () => void;
+  togglePanel: () => void;
+  open: () => void;
+  close: (resetFocus?: boolean) => void;
+  handleKeydown: (e: KeyboardEvent) => void;
+  trapFocus: (e: KeyboardEvent) => void;
+};
+
+export default notificationPanel;

package/dist/notification-panel.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function notificationPanel(panel) {
+  const header = panel.closest('.rl-c-header');
+  const toggle = panel.parentElement.querySelector('.rl-c-header__actions-item--notifications');
+  if (!toggle) return;
+  const bodyOverlay = document.getElementById('rl-c-nav__overlay');
+  const bannerLinks = panel.querySelectorAll('.rl-c-notification-banner a');
+  const event = new CustomEvent('headerOverlayOpen', {
+    detail: panel
+  });
+  let isActive = false;
+  bindEvents();
+  function bindEvents() {
+    toggle.addEventListener('click', togglePanel);
+    document.addEventListener('keydown', handleKeydown);
+    if (bodyOverlay) {
+      bodyOverlay.addEventListener('click', closePanel);
+    }
+    if (header) {
+      header.addEventListener('headerOverlayOpen', e => {
+        if (e.detail !== panel) {
+          closePanel(false);
+        }
+      });
+    }
+    if (bannerLinks.length) {
+      bannerLinks.forEach(link => {
+        link.addEventListener('click', () => closePanel(false));
+      });
+    }
+  }
+  function togglePanel() {
+    isActive === true ? closePanel() : openPanel();
+  }
+  function openPanel() {
+    isActive = true;
+    if (header) header.dispatchEvent(event);
+    toggle.setAttribute('aria-expanded', true);
+    panel.removeAttribute('hidden');
+    if (bodyOverlay) {
+      bodyOverlay.classList.add('active');
+      bodyOverlay.setAttribute('aria-hidden', 'false');
+    }
+  }
+  function closePanel(resetFocus = true) {
+    isActive = false;
+    toggle.setAttribute('aria-expanded', false);
+    panel.setAttribute('hidden', 'true');
+    if (bodyOverlay) {
+      bodyOverlay.classList.remove('active');
+      bodyOverlay.setAttribute('aria-hidden', 'true');
+      if (resetFocus) toggle.focus();
+    }
+  }
+  function handleKeydown(e) {
+    if (e.key === 'Escape' && isActive) {
+      closePanel();
+    } else if (e.key === 'Tab' && isActive) {
+      trapFocus(e);
+    }
+  }
+  function trapFocus(e) {
+    const focusable = [...panel.parentElement.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')].filter(el => el.checkVisibility());
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  return {
+    open: openPanel,
+    close: closePanel,
+    isOpen: () => isActive
+  };
+}
+var _default = exports.default = notificationPanel;

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@royallondon/design-system-component-notification-panel",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.4.0",
+  "description": "Royal London Design System - Notification panel package",
+  "homepage": "https://design.royallondon.com/components/notification-panel/",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
+    "directory": "ds-packages/packages/design-system-component-notification-panel"
+  },
+  "bugs": {
+    "url": "https://design.royallondon.com/support/"
+  },
+  "keywords": [
+    "royal-london-design-system-component-notification-panel",
+    "rlds-notification-panel",
+    "royal-london"
+  ],
+  "author": "Design System Squad <DesignSystem@royallondon.com>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "main": "dist/notification-panel.css",
+  "style": "dist/notification-panel.css",
+  "scripts": {
+    "build:clean": "npx rimraf dist",
+    "build:lint": "stylelint src/**/*.{css,pcss} --fix",
+    "build:css": "postcss src/**/notification-panel.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-component-navigation-header": "^1.4.2",
+    "@royallondon/design-system-component-notification-banner": "^2.3.2",
+    "@royallondon/design-system-foundations": "^2.23.0"
+  },
+  "peerDependencies": {
+    "@royallondon/design-system-component-navigation-header": ">= 1.3.0 < 3",
+    "@royallondon/design-system-component-notification-banner": ">= 2.2.0 < 3",
+    "@royallondon/design-system-foundations": ">= 2.15.0 < 3"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }