@royallondon/design-system-component-notification-banner 0.0.0-stage → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE.md +54 -0
  2. package/README.md +52 -2
  3. package/dist/notification-banner.css +1 -0
  4. package/dist/notification-banner.d.ts +1 -0
  5. package/dist/notification-banner.js +23 -0
  6. package/package.json +41 -3
package/LICENSE.md ADDED
@@ -0,0 +1,54 @@
1
+ Authorised Use Licence v1.0
2
+
3
+ Copyright © 2026 Royal London.
4
+ All rights reserved.
5
+
6
+ 1. Grant of Licence
7
+
8
+ The Licensor grants a non-exclusive, non-transferable,
9
+ revocable, royalty-free licence to use the Software only where:
10
+
11
+ (a) the individual, organisation, or business has been
12
+ expressly authorised in writing by the Licensor; and
13
+
14
+ (b) such authorisation remains in force.
15
+
16
+ 2. Restrictions
17
+
18
+ The Software may not be:
19
+
20
+ (a) used by any unauthorised person or organisation;
21
+
22
+ (b) redistributed, sublicensed, sold, rented or made
23
+ available to third parties;
24
+
25
+ (c) incorporated into another product or service without
26
+ written approval;
27
+
28
+ (d) reverse engineered except where prohibited by law.
29
+
30
+ 3. Ownership
31
+
32
+ The Software remains the exclusive property of the Licensor.
33
+ No ownership rights are transferred under this Licence.
34
+
35
+ 4. Termination
36
+
37
+ The Licensor may revoke authorisation at any time by
38
+ written notice.
39
+
40
+ Upon termination the Licensee must immediately cease use
41
+ of the Software and destroy all copies.
42
+
43
+ 5. No Warranty
44
+
45
+ The Software is provided "as is" without warranty of any kind.
46
+
47
+ 6. Limitation of Liability
48
+
49
+ The Licensor shall not be liable for any damages arising
50
+ from use of the Software.
51
+
52
+ 7. Governing Law
53
+
54
+ This Licence shall be governed by the laws of England and Wales.
package/README.md CHANGED
@@ -1,3 +1,53 @@
1
- # Temporary Holding Version
1
+ ### Installation
2
2
 
3
- 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.
3
+ Install the Notification banner package from npm
4
+
5
+ ```bash
6
+ npm install @royallondon/design-system-component-notification-banner
7
+ ```
8
+
9
+ Import the required CSS file
10
+
11
+ ```css
12
+ @import '@royallondon/design-system-component-notification-banner/dist/notification-banner';
13
+ ```
14
+
15
+ Import the required JS file and then initalise the notification function
16
+
17
+ ```js
18
+ import { createNotificationBanner } from '@royallondon/design-system-component-notification-banner/dist/notification-banner.js';
19
+ createNotificationBanner();
20
+ ```
21
+
22
+ [Start using the Notification banner component](https://design.royallondon.com/components/notification-banner/#live-example)
23
+
24
+ ### Support
25
+
26
+ Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
27
+
28
+ ### Licence
29
+
30
+ #### @royallondon/design-system-component-notification-banner
31
+
32
+ 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.
33
+
34
+ Use of this package is subject to the Royal London Authorised Use Licence. See the `LICENSE.md` file included in this package.
35
+
36
+ The Notification banner component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Notification banner page](https://design.royallondon.com/components/notification-banner/).
37
+
38
+ ### Release log
39
+
40
+ | Version | Release notes |
41
+ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
42
+ | 2.4.0 | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps; remove internal names from TypeScript declarations |
43
+ | 2.3.3 | Move to new feed |
44
+ | 2.3.0 | Apply new icons and latest tokens added to foundations |
45
+ | 2.2.0 | Update foundations dependency version to ensure new tokens |
46
+ | 2.1.1 | Add typescript config and definition files |
47
+ | 2.1.0 | Add features for notification panel + tweak spacing/typography |
48
+ | 2.0.2 | Fix close button overlap on mobile + update border width |
49
+ | 2.0.1 | Fix issue with media query processing without postcss |
50
+ | 2.0.0 | Upgrade for compatibility with foundations v2 |
51
+ | 1.0.2 | Fix position of close button |
52
+ | 1.0.1 | Fix typo in readme |
53
+ | 1.0.0 | Initial development release of notification-banner component |
package/dist/notification-banner.css ADDED
@@ -0,0 +1 @@
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{--notification-banner-width:100%;--notification-banner-icon-size:1.5rem}@media (min-width:32rem){:root{--notification-banner-width:27rem}}@media (--mq-sm ){:root{--notification-banner-width:27rem}}@media (min-width:48rem){:root{--notification-banner-width:36rem}}@media (--mq-md ){:root{--notification-banner-width:36rem}}@media (min-width:64rem){:root{--notification-banner-width:52rem}}@media (--mq-lg ){:root{--notification-banner-width:52rem}}.rl-c-notification-banner{border-bottom:.25rem solid;display:none;max-width:100%;padding:var(--spacing-03);position:relative;width:100%;width:var(--notification-banner-width)}.rl-c-notification-banner.open{display:block}.rl-c-notification-banner--large{width:100%}[class*=-banner--info]{background-color:var(--notification-banner-fill-info);border-color:var(--notification-banner-stroke-info)}[class*=-banner--success]{background-color:var(--notification-banner-fill-success);border-color:var(--notification-banner-stroke-success)}[class*=-banner--warning]{background-color:var(--notification-banner-fill-warning);border-color:var(--notification-banner-stroke-warning)}[class*=-banner--alert]{background-color:var(--notification-banner-fill-danger);border-color:var(--notification-banner-stroke-danger)}.rl-c-notification-banner__content{padding-left:calc(var(--notification-banner-icon-size) + var(--spacing-02));position:relative}.rl-c-notification-banner--large .rl-c-notification-banner__content{margin:0 auto;max-width:var(--size-limit-text-max)}.rl-c-notification-banner__content .rl-c-list{margin-left:0}.rl-c-notification-banner__content :last-child{margin-bottom:0}.rl-c-notification-banner__heading{color:var(--notification-banner-text-title);-moz-column-gap:var(--spacing-02);column-gap:var(--spacing-02);display:flex;margin-bottom:var(--spacing-02);margin-left:calc((var(--notification-banner-icon-size) + var(--spacing-02))*-1)}.rl-c-notification-banner__heading:has(+.rl-c-notification-banner-close){width:100%}.rl-c-notification-banner__heading>*{margin-bottom:0}.rl-c-notification-banner__heading .rl-t-label-small{color:var(--notification-panel-item-text-date-hint);flex-shrink:0;margin-right:auto}@media (min-width:48rem){.rl-c-notification-banner__heading .rl-t-label-small{margin-left:auto;margin-right:0}}@media (--mq-md ){.rl-c-notification-banner__heading .rl-t-label-small{margin-left:auto;margin-right:0}}@media (max-width:47.9375rem){.rl-c-notification-banner__heading:has(.rl-t-label-small){flex-wrap:wrap}.rl-c-notification-banner__heading:has(.rl-t-label-small) .rl-t-title-medium{order:1;padding-left:calc(var(--notification-banner-icon-size) + var(--spacing-02));width:100%}}@media (--mq-sm-max ){.rl-c-notification-banner__heading:has(.rl-t-label-small){flex-wrap:wrap}.rl-c-notification-banner__heading:has(.rl-t-label-small) .rl-t-title-medium{order:1;padding-left:calc(var(--notification-banner-icon-size) + var(--spacing-02));width:100%}}.rl-c-notification-banner__heading .rl-f-icon,.rl-c-notification-banner__heading [class*=rl-icon]{flex-shrink:0;height:1.5rem;height:var(--notification-banner-icon-size);width:1.5rem;width:var(--notification-banner-icon-size)}.rl-c-notification-banner__unread{background:var(--notification-panel-item-fill-recent);border-radius:50%;height:.5rem;width:.5rem}.rl-c-notification-banner-close--primary{align-items:center;display:flex;height:1.5rem;justify-content:center;position:absolute;right:0;top:0;width:1.5rem}
package/dist/notification-banner.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function createNotificationBanner(): void;
package/dist/notification-banner.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.createNotificationBanner = createNotificationBanner;
7
+ function createNotificationBanner() {
8
+ function setupCloseButton(closeButton) {
9
+ closeButton.addEventListener('click', function (event) {
10
+ var target = event.currentTarget.getAttribute('aria-controls');
11
+ var notification = document.getElementById(target);
12
+ if (notification) {
13
+ notification.classList.remove('open');
14
+ }
15
+ });
16
+ }
17
+
18
+ // Set up all notification close buttons.
19
+ var closeButtons = document.querySelectorAll('.rl-c-notification-banner-close');
20
+ for (var i = 0, l = closeButtons.length; i < l; i++) {
21
+ setupCloseButton(closeButtons[i]);
22
+ }
23
+ }
package/package.json CHANGED
@@ -1,6 +1,44 @@
1
1
  {
2
2
  "name": "@royallondon/design-system-component-notification-banner",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "2.4.0",
4
+ "description": "Royal London Design System - Notification banner package",
5
+ "homepage": "https://design.royallondon.com/components/notification-banner/",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
9
+ "directory": "ds-packages/packages/design-system-component-notification-banner"
10
+ },
11
+ "bugs": {
12
+ "url": "https://design.royallondon.com/support/"
13
+ },
14
+ "keywords": [
15
+ "royal-london-design-system-component-notification-banner",
16
+ "rlds-notification-banner",
17
+ "royal-london"
18
+ ],
19
+ "author": "Design System Squad <DesignSystem@royallondon.com>",
20
+ "license": "SEE LICENSE IN LICENSE.md",
21
+ "main": "dist/notification-banner.css",
22
+ "style": "dist/notification-banner.css",
23
+ "scripts": {
24
+ "build:clean": "npx rimraf dist",
25
+ "build:lint": "stylelint src/**/*.{css,pcss} --fix",
26
+ "build:css": "postcss src/**/notification-banner.pcss --base src --dir dist/ --ext css",
27
+ "build:js": "npm-run-all --serial build:babel build:types",
28
+ "build:babel": "babel src/ --out-dir dist/ --config-file ../../babel.config",
29
+ "build:types": "npx copyfiles -u 1 \"src/**/*.d.ts\" dist",
30
+ "build": "npm-run-all --serial build:clean build:css build:js"
31
+ },
32
+ "devDependencies": {
33
+ "@royallondon/design-system-foundations": "^2.23.0"
34
+ },
35
+ "peerDependencies": {
36
+ "@royallondon/design-system-foundations": ">= 2.15.0 < 3"
37
+ },
38
+ "files": [
39
+ "dist"
40
+ ],
41
+ "publishConfig": {
42
+ "access": "public"
43
+ }
6
44
  }