From 42ffef140660424225d957c0929bc370dc7d90a9 Mon Sep 17 00:00:00 2001
From: Benji Franck <benjamin.franck@gmail.com>
Date: Wed, 7 May 2025 16:22:45 -0600
Subject: [PATCH] feat(#2122): add notification outage example

---
 .../notification/NotificationExamples.tsx     | 14 ++++
 .../NotificationServiceOutageExample.tsx      | 66 +++++++++++++++++++
 src/routes/components/Notificationbanner.tsx  |  6 +-
 3 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/examples/notification/NotificationExamples.tsx
 create mode 100644 src/examples/notification/NotificationServiceOutageExample.tsx

diff --git a/src/examples/notification/NotificationExamples.tsx b/src/examples/notification/NotificationExamples.tsx
new file mode 100644
index 000000000..bc9ff59df
--- /dev/null
+++ b/src/examples/notification/NotificationExamples.tsx
@@ -0,0 +1,14 @@
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { NotificationServiceOutageExample } from "@examples/notification/NotificationServiceOutageExample.tsx";
+
+export const NotificationExamples = () => {
+  return (
+    <>
+      <SandboxHeader
+        exampleTitle="Communicate a future service outage"
+        figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6311-93778&t=sWyB4A2UXCb9rn2W-1">
+      </SandboxHeader>
+      <NotificationServiceOutageExample />
+    </>
+  )
+}
diff --git a/src/examples/notification/NotificationServiceOutageExample.tsx b/src/examples/notification/NotificationServiceOutageExample.tsx
new file mode 100644
index 000000000..495947814
--- /dev/null
+++ b/src/examples/notification/NotificationServiceOutageExample.tsx
@@ -0,0 +1,66 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabNotification  } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const NotificationServiceOutageExample = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <>
+      <Sandbox fullWidth allow={['h2', 'h3', 'p']} skipRender>
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-notification type="important">
+              Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm to Friday, September 16, 2025 at 10 am. If you have questions or concerns, contact us at <a href="mailto:support@example.com">support@example.com</a>. 
+            </goa-notification>
+          `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-notification type="important">
+              Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm to Friday, September 16, 2025 at 10 am. If you have questions or concerns, contact us at <a href="mailto:support@example.com">support@example.com</a>. 
+            </goab-notification>
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoaNotification type="important">
+              Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm to Friday, September 16, 2025 at 10 am. If you have questions or concerns, contact us at <a href="mailto:support@example.com">support@example.com</a>. 
+            </GoaNotification>
+          `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabNotification type="important">
+              Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm to Friday, September 16, 2025 at 10 am. If you have questions or concerns, contact us at <a href="mailto:support@example.com">support@example.com</a>. 
+            </GoabNotification>
+          `}
+        />}
+
+          <GoabNotification type="important">
+          Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm 
+          to Friday, September 16, 2025 at 10 am. If you have questions or concerns, 
+          contact us at <a href="mailto:support@example.com">support@example.com</a>. 
+          </GoabNotification>
+      </Sandbox>
+    </>
+  )
+}
diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx
index 5ea2b2118..5925c0171 100644
--- a/src/routes/components/Notificationbanner.tsx
+++ b/src/routes/components/Notificationbanner.tsx
@@ -15,7 +15,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 import { GoabNotificationType } from "@abgov/ui-components-common";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import {ExamplesEmpty} from "@components/empty-states/examples-empty/ExamplesEmpty.tsx";
+import { NotificationExamples } from "@examples/notification/NotificationExamples.tsx";
 
 // == Page props ==
 
@@ -161,11 +161,11 @@ export default function NotificationBannerPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="0" />
+                <GoabBadge type="information" content="1" />
               </>
             }
           >
-          <ExamplesEmpty />
+          <NotificationExamples />
           </GoabTab>
 
           <GoabTab heading="Design">