fix(unity-react-core): sidebar menu should auto-expand if it contains…

packages/unity-react-core/src/components/SidebarMenu/SidebarMenu.stories.tsx

@@ -20,6 +20,7 @@ const defaultProps = {
         {
           href: "https://example.com",
           text: "Link 2.1",
+          isActive: false,
         },
         {
           href: "https://example.com",
@@ -56,18 +57,33 @@ const defaultProps = {
           text: "Link 5.2",
         },
       ],
-    }
-  ]
-}
+    },
+  ],
+};
 
-const sidebarMenuTemplate = args => <div className="row">
-<SidebarMenu {...args} />
-</div>;
+const sidebarMenuTemplate = args => (
+  <div className="row">
+    <SidebarMenu {...args} />
+  </div>
+);
 
 export const Overview = {
   render: sidebarMenuTemplate.bind({}),
   name: "Sidebar",
   args: {
     ...defaultProps,
-  }
+  },
+};
+
+const defaultProps2 = JSON.parse(JSON.stringify(defaultProps));
+defaultProps2.links[0].text = "Link 1";
+defaultProps2.links[0].isActive = false;
+defaultProps2.links[1].items[0].isActive = true;
+defaultProps2.links[1].items[0].text = "Active Link";
+
+export const WithNestedActivePage = {
+  render: sidebarMenuTemplate.bind({}),
+  args: {
+    ...defaultProps2,
+  },
 };

packages/unity-react-core/src/components/SidebarMenu/SidebarMenu.test.tsx

@@ -10,6 +10,7 @@ const defaultProps: SidebarProps = {
     {
       href: "https://example.com",
       text: "Link 1",
+      isActive: true,
     },
     {
       text: "Link 2 dropdown",
@@ -23,24 +24,39 @@ const defaultProps: SidebarProps = {
           text: "Link 2.2",
         },
       ],
-    }
-  ]
+    },
+  ],
 };
 
-const renderComponent = (props:SidebarProps) => {
+const defaultProps2 = JSON.parse(JSON.stringify(defaultProps));
+delete defaultProps2.links[0].isActive;
+defaultProps2.links[1].items[0].isActive = true;
+
+const renderComponent = (props: SidebarProps) => {
   return render(<SidebarMenu {...props} />);
 };
 
 describe("SidebarMenu tests", () => {
-  let component:RenderResult;
+  let component: RenderResult;
+
+  afterEach(cleanup);
 
-  beforeEach(() => {
+  it("should have top level active link", () => {
     component = renderComponent(defaultProps);
+    expect(component.getByText("Link 1")).toHaveClass("is-active");
+    expect(component.queryByText("Link 2 dropdown")).toHaveAttribute(
+      "aria-expanded",
+      "false"
+    );
   });
 
-  afterEach(cleanup);
-
-  it("should define component", () => {
-    expect(component).toBeDefined();
+  it("should have nested level active link", () => {
+    component = renderComponent(defaultProps2);
+    expect(component.getByText("Link 2.1")).toBeVisible();
+    expect(component.getByText("Link 2 dropdown")).toHaveClass("is-active");
+    expect(component.queryByText("Link 2 dropdown")).toHaveAttribute(
+      "aria-expanded",
+      "true"
+    );
   });
 });

packages/unity-react-core/src/components/SidebarMenu/SidebarMenu.tsx

@@ -1,16 +1,18 @@
 import React from "react";
 import { GaEventWrapper } from "../GaEventWrapper/GaEventWrapper";
 
+interface SidebarItemProps {
+  href: string;
+  text: string;
+  isActive?: boolean;
+}
+
 export interface Link {
   href?: string;
   text: string;
   isActive?: boolean;
-  items?: Array<{
-    href: string;
-    text: string;
-    isActive?: boolean;
-  }>;
-};
+  items?: SidebarItemProps[];
+}
 
 const defaultGaProps = {
   name: "onclick",
@@ -47,19 +49,22 @@ export const SidebarMenu: React.FC<SidebarProps> = ({ title, links }) => {
         {links.map((link, index) => {
           if (link.items) {
             // Render dropdown card
+            const isExpanded = link.items.some(({ isActive }) => isActive);
             return (
-              <div key={index} className="card card-foldable">
+              <div key={link.text} className="card card-foldable">
                 <div className="card-header">
                   <GaEventWrapper
                     gaData={{ ...defaultGaProps, section: title }}
                   >
                     <a
                       id={`card${index}`}
-                      className="collapsed nav-link"
+                      className={`collapsed nav-link${
+                        isExpanded ? " is-active" : ""
+                      }`}
                       href={`#cardBody${index}`}
                       data-bs-toggle="collapse"
                       data-bs-target={`#cardBody${index}`}
-                      aria-expanded="false"
+                      aria-expanded={isExpanded}
                       aria-controls={`cardBody${index}`}
                     >
                       {link.text}
@@ -69,15 +74,15 @@ export const SidebarMenu: React.FC<SidebarProps> = ({ title, links }) => {
                 </div>
                 <div
                   id={`cardBody${index}`}
-                  className="collapse card-body"
+                  className={`collapse card-body ${isExpanded ? " show" : ""}`}
                   aria-labelledby={`card${index}`}
                   data-bs-parent=".sidebar"
                 >
                   {link.items.map(item => (
                     <a
-                      key={link.href}
+                      key={`${item.text}${item.href}`}
                       href={item.href}
-                      className={`nav-link${item.isActive ? " is-active" : ""}`}
+                      className={`nav-link`}
                     >
                       {item.text}
                     </a>
@@ -88,7 +93,10 @@ export const SidebarMenu: React.FC<SidebarProps> = ({ title, links }) => {
           } else {
             // Render regular link
             return (
-              <div key={index} className="nav-link-container">
+              <div
+                key={`${link.text}${link.href}`}
+                className="nav-link-container"
+              >
                 <a
                   className={`nav-link${link.isActive ? " is-active" : ""}`}
                   href={link.href}