fix(react): update sideNavExpanded and topNavResized to work as other…

… events Update sideNavExpanded and topNavResized to work as other events and appear in docs
mi6 · Jan 15, 2024 · 6312376 · 6312376
1 parent ef12e8d
commit 6312376
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git 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
@@ -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>