feat: close header side nav on navigation (#3826)

carbon-design-system · Sep 25, 2023 · e65bbc8 · e65bbc8
1 parent 2d7a364
commit e65bbc8
Show file tree

Hide file tree

Showing 8 changed files with 416 additions and 250 deletions.
diff --git a/.github/workflows/test-app.yml b/.github/workflows/test-app.yml
@@ -82,7 +82,7 @@ jobs:
         uses: actions/setup-node@v1
         if: steps.changes.outputs.react == 'true'
         with:
-          node-version: '16.x'
+          node-version: '20.x'
 
       - name: Run cli command to create test app
         if: steps.changes.outputs.react == 'true'

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ibm-ai-applications",
   "engines": {
-    "node": "12.x || 14.x  || 16.x || 18.x"
+    "node": "12.x || 14.x || 16.x || 18.x || 20.x"
   },
   "workspaces": {
     "packages": [

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-addons-iot-react",
   "engines": {
-    "node": "12.x || 14.x || 16.x || 18.x"
+    "node": "12.x || 14.x || 16.x || 18.x || 20.x"
   },
   "browser": "es/index.js",
   "main": "lib/index.js",

diff --git a/packages/react/src/components/Header/Header.jsx b/packages/react/src/components/Header/Header.jsx
@@ -142,6 +142,7 @@ const Header = ({
           data-testid={`${testId}-menu-button`}
           aria-label={isSideNavExpanded ? mergedI18n.closeMenu : mergedI18n.openMenu}
           onClick={onClickSideNavExpand}
+          isActive={isSideNavExpanded}
         />
       )}
       <HeaderName

diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.jsx
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx
@@ -535,6 +535,7 @@ export const HeaderWithSideNav = () => {
         appName="Application Name"
         userDisplayName="Admin User"
         username="adminuser"
+        closeSideNavOnNavigation={boolean('Close side nav on navigation', false)}
         routes={routes}
         applications={applications}
         sideNavProps={{

diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx
@@ -1341,4 +1341,110 @@ describe('SuiteHeader', () => {
 
     expect(screen.queryByRole('button', { name: 'Open Menu' })).toBeNull();
   });
+
+  it('checks if close icon appears when menu is open', async () => {
+    render(
+      <SuiteHeader
+        {...commonProps}
+        sideNavProps={{
+          links: [
+            {
+              isEnabled: true,
+              icon: Chip,
+              metaData: {
+                label: 'Devices',
+                href: 'https://google.com',
+                element: 'a',
+                target: '_blank',
+              },
+              linkContent: 'Devices',
+            },
+          ],
+        }}
+      />
+    );
+    const menuButton = screen.getByRole('button', { name: 'Open menu' });
+    // Check if menu button is rendered
+    expect(menuButton).toBeInTheDocument();
+    // Click menu button
+    await userEvent.click(menuButton);
+    // Check if menu button was removed and close button appeared
+    expect(screen.queryByRole('button', { name: 'Open menu' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Close menu' })).toBeInTheDocument();
+  });
+
+  it('checks if side nav closes when clicking an item', async () => {
+    render(
+      <SuiteHeader
+        suiteName="Application Suite"
+        appName="Application Name"
+        userDisplayName="Admin User"
+        username="adminuser"
+        routes={{
+          profile: 'https://www.ibm.com',
+          navigator: 'https://www.ibm.com',
+          admin: 'https://www.ibm.com',
+          logout: 'https://www.ibm.com',
+          logoutInactivity: 'https://www.ibm.com',
+          whatsNew: 'https://www.ibm.com',
+          gettingStarted: 'https://www.ibm.com',
+          documentation: 'https://www.ibm.com',
+          requestEnhancement: 'https://www.ibm.com',
+          support: 'https://www.ibm.com',
+          about: 'https://www.ibm.com',
+          workspaceId: 'workspace1',
+          domain: '',
+        }}
+        applications={[
+          {
+            id: 'monitor',
+            name: 'Monitor',
+            href: 'https://www.ibm.com',
+          },
+          {
+            id: 'health',
+            name: 'Health',
+            href: 'https://google.com',
+            isExternal: true,
+          },
+        ]}
+        closeSideNavOnNavigation
+        sideNavProps={{
+          links: [
+            {
+              isEnabled: true,
+              isActive: true,
+              icon: Chip,
+              metaData: {
+                label: 'Mobile',
+              },
+              linkContent: 'Mobile',
+            },
+          ],
+        }}
+      />
+    );
+    const menuButton = screen.getByRole('button', { name: 'Open menu' });
+    // Check if menu button is rendered
+    expect(menuButton).toBeInTheDocument();
+    // Click menu button
+    userEvent.click(menuButton);
+    // Check if menu button was removed and close button appeared
+    expect(screen.queryByRole('button', { name: 'Open menu' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Close menu' })).toBeInTheDocument();
+    // Check if nav bar is open
+    const sideNav = screen.getByTestId('suite-header-side-nav');
+    expect(sideNav).toHaveClass('bx--side-nav--expanded');
+
+    // Get first nav item and click it
+    const item = within(sideNav).getByTestId('suite-header-side-nav-link-0');
+    fireEvent.click(item);
+    // Take focus away from item
+    fireEvent.blur(item);
+    // Check if side nav closed
+    expect(sideNav).not.toHaveClass('bx--side-nav--expanded');
+    // Check if close menu button disappeared and open menu (hamburger) button is in the document
+    expect(screen.queryByRole('button', { name: 'Close menu' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Open menu' })).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -11874,6 +11874,7 @@ Map {
       "appName": null,
       "applications": null,
       "className": null,
+      "closeSideNavOnNavigation": false,
       "customActionItems": Array [],
       "customApplications": Array [],
       "customHelpLinks": Array [],
@@ -11975,6 +11976,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "closeSideNavOnNavigation": Object {
+        "type": "bool",
+      },
       "customActionItems": Object {
         "args": Array [
           Object {