Repository: swisspost/design-system
Pull request #5304: chore(documentation): remove ng-bootstrap notification overlay
Author: login: leagrdv
Created: 2025-04-16T08:49:31Z | Merged: 2025-04-24T10:51:01Z

## 📄 Description

Changeset is set to `minor` as nothing has actually been deleted from the styles.


Diff:
diff --git a/.changeset/many-carpets-listen.md b/.changeset/many-carpets-listen.md
new file mode 100644
index 0000000000..a0ad46599f
--- /dev/null
+++ b/.changeset/many-carpets-listen.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': major
+---
+
+Removed the deprecated notification overlay documentation page.
diff --git a/packages/documentation/src/shared/post-component-demo-link.mdx b/packages/documentation/src/shared/post-component-demo-link.mdx
deleted file mode 100644
index 34be36ecde..0000000000
--- a/packages/documentation/src/shared/post-component-demo-link.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-{/* eslint-disable no-undef */}
-<a
-  className="btn btn-secondary"
-  href={`https://archive.design-system.post.ch/#/post-samples/${props.component}`}
-  rel="nofollow noopener noreferrer"
->
-{/* eslint-enable no-undef */}
-
-  <span>See archived documentation</span>
-</a>
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx
deleted file mode 100644
index 09cf28ded4..0000000000
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Meta, Source } from '@storybook/blocks';
-import StylesPackageImport from '@/shared/styles-package-import.mdx';
-import PostComponentDemoLink from '@/shared/post-component-demo-link.mdx';
-import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx';
-import * as notificationOverlayStories from './notification-overlay.stories';
-import basicExampleHTML from './notification-overlay.sample.html?raw';
-import basicExampleAngular from './notification-overlay.sample.ts?raw';
-
-<Meta of={notificationOverlayStories} />
-
-<div className="docs-title">
-  # Notification overlay
-
-  <div className="buttons-container">
-    <link-design of={JSON.stringify(notificationOverlayStories)}></link-design>
-    <PostComponentDemoLink component="notification-overlay" />
-  </div>
-</div>
-
-<div className="lead mb-16">
-  Present the user with important information or a decision before continuing the workflow.
-</div>
-
-<div className="banner banner-warning mb-24">
-  This component is deprecated and will be removed in a future major version.
-</div>
-
-<ul>
-  <li>
-    <a href="#component-import" target="_self">
-      Component Import
-    </a>
-  </li>
-  <li>
-    <a href="#style-imports" target="_self">
-      Style Imports
-    </a>
-  </li>
-  <li>
-    <a href="#focus-management" target="_self">
-      Focus Management
-    </a>
-  </li>
-  <li>
-    <a href="#examples" target="_self">
-      Examples
-    </a>
-  </li>
-</ul>
-
-<NgbComponentImport module="NgbModalModule" />
-
-<StylesPackageImport components={['modal']} />
-
-## Focus Management
-
-Since the notification overlay appears above the page, generally blocking interaction with the content below,
-it is important that the focus is move to an element within it.
-
-By default, it is the first focusable element within the modal that receives focus upon opening.
-However, You can decide to focus any other element by adding an `ngbAutofocus` attribute to it.
-
-## Examples
-
-### Notify the user of an incomplete field before continuing
-
-<post-tabs>
-  <post-tab-header panel="basicExampleHTML">template.html</post-tab-header>
-  <post-tab-panel name="basicExampleHTML">
-    <Source code={basicExampleHTML} language="html"/>
-  </post-tab-panel>
-
-<post-tab-header panel="basicExampleAngular">component.ts</post-tab-header>
-<post-tab-panel name="basicExampleAngular">
-<Source code={basicExampleAngular} language="ts"/>
-</post-tab-panel>
-</post-tabs>
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
deleted file mode 100644
index fd12c2cdf5..0000000000
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="modal-header p-48 mb-16 rounded-top-4">
-  <div class="text-center">
-    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-24 mb-16"></span>
-    <p class="h4 fw-bold">Please check your details</p>
-    <p class="h4">Some information on the previous page is missing or incomplete.</p>
-  </div>
-</div>
-<div class="modal-body">
-  <p class="h5">If you confirm, the WebStamp may be incomplete.</p>
-</div>
-<div class="modal-footer justify-content-start flex-row-reverse">
-  <button
-    type="button"
-    class="btn btn-primary"
-    (click)="activeModal.close()"
-    ngbAutofocus
-  >
-    <span>Agree</span>
-  </button>
-  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">Back</button>
-</div>
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.ts b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.ts
deleted file mode 100644
index b96e28cba0..0000000000
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbActiveModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'ngb-modal-content',
-  standalone: true,
-  template: `template.html`,
-  imports: [NgbModalModule],
-})
-export class NotificaionOverlayComponent {
-  constructor(protected activeModal: NgbActiveModal) {}
-}
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
deleted file mode 100644
index 0e68676c5e..0000000000
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { StoryObj } from '@storybook/web-components';
-import { MetaComponent } from '@root/types';
-
-const meta: MetaComponent = {
-  id: 'aab3f0df-08ca-4e33-90eb-77ffda6528db',
-  title: 'Components/Notification Overlay',
-  tags: ['package:Angular'],
-  parameters: {
-    badges: [],
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=22748-36043&mode=design&t=HksCTWa2MMccgMl4-0',
-    },
-  },
-};
-
-export default meta;
-
-export const Default: StoryObj = {};
diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
index 88bd506802..2c8d5a1f85 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts
@@ -602,6 +602,12 @@ export class MigrationV89Component extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span>
                   </p>
                 </li>
+                <li class="mb-16">
+                  <p>
+                    The ng-bootstrap <code>notification overlay</code> component has been removed
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                </li>
                 <li class="mb-16">
                   <p>
                     The ng-bootstrap <code>custom select</code> has been removed


Reviews:
user: login: gfellerph
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-16T10:59:10Z
user: login: gfellerph
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-24T08:28:20Z

Review comments:
path: packages/documentation/src/shared/post-component-demo-link.mdx
user: login: gfellerph
body: A file is referencing here and is causing the build to fail.
created_at: 2025-04-16T10:55:15Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the deprected notification overlay documentation page.
path: .changeset/many-carpets-listen.md
user: login: gfellerph
body: ```suggestion
Removed the deprecated notification overlay documentation page.
```
created_at: 2025-04-16T10:57:40Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
path: .changeset/many-carpets-listen.md
user: login: gfellerph
body: It's a bit petty, but someone could have saved a direct link to this docs page. Removing the docs page is therefore breaking the link.

```suggestion
'@swisspost/design-system-documentation': major
```
created_at: 2025-04-16T10:58:57Z
author_association: MEMBER

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-04-16T08:49:35Z
body: ###  🦋  Changeset detected

Latest commit: d75dfe7de0726852122c7b553ead22cd4c05fa30

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name                                   | Type  |
| -------------------------------------- | ----- |
| @swisspost/design-system-documentation | Major |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/swisspost/design-system/new/5208-remove-ng-bootstrap-notification-overlay-documentation?filename=.changeset/hungry-shrimps-retire.md&value=---%0A%22%40swisspost%2Fdesign-system-documentation%22%3A%20patch%0A---%0A%0Achore(documentation)%3A%20remove%20ng-bootstrap%20notification%20overlay%0A)


author_association: NONE
user: login: swisspost-bot
created_at: 2025-04-16T11:39:10Z
body: **Related Previews**
- https://preview-5304--swisspost-design-system-next.netlify.app

author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-04-17T13:44:08Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=swisspost_common-web-frontend&pullRequest=5304) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=swisspost_common-web-frontend&pullRequest=5304&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=swisspost_common-web-frontend&pullRequest=5304&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=swisspost_common-web-frontend&pullRequest=5304&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=swisspost_common-web-frontend&pullRequest=5304&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=swisspost_common-web-frontend&pullRequest=5304&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=swisspost_common-web-frontend&pullRequest=5304)


author_association: NONE