From 631237669c2b38bea6eab1a7e25c2bd397d756be Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-530
 <111882034+GCHQ-Developer-530@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:09:54 +0000
Subject: [PATCH] fix(react): update sideNavExpanded and topNavResized to work
 as other events

Update sideNavExpanded and topNavResized to work as other events and appear in docs
---
 .../stories/ic-side-navigation.stories.mdx    | 82 +++++++++++++++++++
 .../src/stories/ic-top-navigation.stories.mdx | 23 ++++++
 2 files changed, 105 insertions(+)

diff --git a/packages/react/src/stories/ic-side-navigation.stories.mdx b/packages/react/src/stories/ic-side-navigation.stories.mdx
index 25680b7958..f8bd79a4de 100644
--- a/packages/react/src/stories/ic-side-navigation.stories.mdx
+++ b/packages/react/src/stories/ic-side-navigation.stories.mdx
@@ -509,6 +509,88 @@ export const Controlled = () => {
   </Story>
 </Canvas>
 
+### Side nav expanded event
+
+<Canvas>
+  <Story name="Side nav expanded event">
+    <IcSideNavigation
+      appTitle="ACME"
+      version="v0.0.0"
+      status="BETA"
+      onSideNavExpanded={(event) => console.log(event.detail.sideNavExpanded)}
+    >
+      <svg
+        slot="app-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+      </svg>
+      <IcNavigationItem
+        slot="primary-navigation"
+        href="/"
+        label="Home"
+        selected
+      >
+        <IcBadge text-label="1" slot="badge" variant="light" />
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </IcNavigationItem>
+      <IcNavigationGroup
+        slot="primary-navigation"
+        label="Navigation Group"
+        expandable="true"
+      >
+        <IcNavigationItem href="/" label="Item 1">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </IcNavigationItem>
+      </IcNavigationGroup>
+      <IcNavigationItem slot="secondary-navigation" href="/" label="Settings">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </IcNavigationItem>
+    </IcSideNavigation>
+  </Story>
+</Canvas>
+
 ### React Router
 
 export const HomePage = () => (
diff --git a/packages/react/src/stories/ic-top-navigation.stories.mdx b/packages/react/src/stories/ic-top-navigation.stories.mdx
index 391d6d0948..d110d21262 100644
--- a/packages/react/src/stories/ic-top-navigation.stories.mdx
+++ b/packages/react/src/stories/ic-top-navigation.stories.mdx
@@ -337,6 +337,29 @@ export const Controlled = () => {
   );
 };
 
+### Top nav resized event
+
+<Canvas>
+  <Story name="Top nav resized event" parameters={{ layout: "fullscreen" }}>
+    <IcTopNavigation
+      appTitle="ApplicationName"
+      onTopNavResized={() => console.log(event.detail.size)}
+    >
+      <svg
+        slot="app-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+      </svg>
+    </IcTopNavigation>
+  </Story>
+</Canvas>
+
 ### Theming
 
 <Canvas>