[terra-navigation-side-menu] Added Drill-In view variant

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added examples for drill-in view under `terra-navigation-side-menu`
+
 ## 1.87.0 - (May 14, 2024)
 
 * Changed

packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/NavigationSideMenu.1.doc.mdx

@@ -3,6 +3,7 @@ import { Badge } from 'terra-navigation-side-menu/package.json?dev-site-package'
 import NavigationSideMenuPropsTable from 'terra-navigation-side-menu/src/NavigationSideMenu?dev-site-props-table';
 
 import NavigationSideMenuExample from './example/NavigationSideMenuExample?dev-site-example';
+import DrillInExample from "./example/DrillInExample?dev-site-example";
 
 <Badge />
 
@@ -38,8 +39,17 @@ import NavigationSideMenu from 'terra-navigation-side-menu';
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 
+### Navigation Side Menu Constants
+Enumeration: VARIANTS
+
+|Constant|Type|Description|
+|---|---|---|
+|**NAVIGATION_SIDE_MENU**|string|Renders Navigation Side Menu View.|
+|**DRILL_IN**|string|Renders Drill In View.|
+
 ## Examples
 <NavigationSideMenuExample title='Navigation Side Menu Example' />
+<DrillInExample title='DrillIn Example' />
 
-## Navigation Side Menu Props Table 
+## Navigation Side Menu Props Table
 <NavigationSideMenuPropsTable />

packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import NavigationSideMenu, { VARIANTS } from 'terra-navigation-side-menu';
+import { IconHospital } from 'terra-icon';
+
+import styles from './NavigationSideMenuExample.module.scss';
+
+const cx = classNames.bind(styles);
+
+class DrillInDefault extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleOnChange = this.handleOnChange.bind(this);
+
+    this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined };
+  }
+
+  handleOnChange(event, changeData) {
+    this.setState({ selectedMenuKey: changeData.selectedMenuKey, selectedChildKey: changeData.selectedChildKey });
+  }
+
+  render() {
+    const content = (
+      <NavigationSideMenu
+        id="test-menu"
+        menuItems={[
+          {
+            key: 'menu', text: 'Hospital Details', childKeys: ['submenu1', 'submenu2', 'submenu3', 'submenu4', 'submenu5'],
+          },
+          {
+            key: 'submenu1',
+            text: 'Hospital services',
+            childKeys: ['subsubmenu1', 'subsubmenu2', 'subsubmenu3'],
+            id: 'test-item-1',
+          },
+          { key: 'submenu2', text: 'Hospital events' },
+          {
+            key: 'submenu3', text: 'Hospital Accommodations', isDisabled: true,
+          },
+          { key: 'submenu4', text: 'Hospital Careers' },
+          { key: 'submenu5', text: 'Hospital Info', childKeys: [] },
+          {
+            key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2',
+          },
+          { key: 'subsubmenu2', text: 'Laboratory' },
+          {
+            key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital />,
+          },
+          { key: 'rehab1', text: 'Rehabilitation services 1' },
+          { key: 'rehab2', text: 'Rehabilitation services 2' },
+          { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] },
+        ]}
+        onChange={this.handleOnChange}
+        selectedMenuKey={this.state.selectedMenuKey}
+        selectedChildKey={this.state.selectedChildKey}
+        ariaLabel="Sub Menu List"
+        variant={VARIANTS.DRILL_IN}
+      />
+    );
+
+    return (
+      <div className={cx('content-wrapper')}>
+        {content}
+      </div>
+    );
+  }
+}
+
+export default DrillInDefault;

packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import NavigationSideMenu, { VARIANTS } from 'terra-navigation-side-menu';
+import { IconHospital } from 'terra-icon';
+import styles from './NavigationSideMenuDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+class DrillInExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleOnChange = this.handleOnChange.bind(this);
+    this.resetMenuState = this.resetMenuState.bind(this);
+    this.fakeRoutingBack = this.fakeRoutingBack.bind(this);
+
+    this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined };
+  }
+
+  handleOnChange(event, changeData) {
+    this.setState({ selectedMenuKey: changeData.selectedMenuKey, selectedChildKey: changeData.selectedChildKey });
+  }
+
+  resetMenuState() {
+    this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined });
+  }
+
+  fakeRoutingBack() {
+    this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined });
+  }
+
+  render() {
+    let content;
+    if (this.state.selectedMenuKey === 'fake-parent') {
+      content = (
+        <div className={cx('content')}>
+          <button type="button" onClick={this.resetMenuState}>
+            Child Route
+          </button>
+          <p>Parent Route</p>
+        </div>
+      );
+    } else {
+      content = (
+        <NavigationSideMenu
+          id="test-menu"
+          menuItems={[
+            {
+              key: 'menu', text: 'Hospital Details', childKeys: ['submenu1', 'submenu2', 'submenu3', 'submenu4', 'submenu5'],
+            },
+            {
+              key: 'submenu1',
+              text: 'Hospital services',
+              childKeys: ['subsubmenu1', 'subsubmenu2', 'subsubmenu3'],
+              id: 'test-item-1',
+            },
+            { key: 'submenu2', text: 'Hospital events' },
+            {
+              key: 'submenu3', text: 'Hospital Accommodations',
+            },
+            { key: 'submenu4', text: 'Hospital Careers' },
+            { key: 'submenu5', text: 'Hospital Info', childKeys: [] },
+            {
+              key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2',
+            },
+            { key: 'subsubmenu2', text: 'Laboratory' },
+            {
+              key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: <IconHospital />,
+            },
+            { key: 'rehab1', text: 'Rehabilitation services 1' },
+            { key: 'rehab2', text: 'Rehabilitation services 2' },
+            { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] },
+          ]}
+          onChange={this.handleOnChange}
+          routingStackBack={this.fakeRoutingBack}
+          selectedMenuKey={this.state.selectedMenuKey}
+          selectedChildKey={this.state.selectedChildKey}
+          variant={VARIANTS.DRILL_IN}
+        />
+      );
+    }
+
+    return (
+      <div className={cx('content-wrapper')}>
+        {content}
+      </div>
+    );
+  }
+}
+
+export default DrillInExample;

packages/terra-navigation-side-menu/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added variant prop to render Drill-in view.
+
 ## 2.56.0 - (May 8, 2024)
 
 * Changed

packages/terra-navigation-side-menu/package.json

@@ -39,7 +39,8 @@
     "terra-content-container": "^3.0.0",
     "terra-icon": "^3.19.0",
     "terra-theme-context": "^1.9.0",
-    "terra-visually-hidden-text": "^2.0.0"
+    "terra-visually-hidden-text": "^2.0.0",
+    "terra-status-view": "^4.77.0"
   },
   "peerDependencies": {
     "react": "^16.8.5",

packages/terra-navigation-side-menu/src/MenuItem.module.scss

@@ -6,12 +6,20 @@
 :local {
   .list-item {
     background-color: var(--terra-navigation-side-menu-list-item-background-color);
-    border-bottom: var(--terra-navigation-side-menu-list-item-border-bottom, none);
     border-left: var(--terra-navigation-side-menu-list-item-border-left, none);
     border-right: var(--terra-navigation-side-menu-list-item-border-right, none);
     border-top: var(--terra-navigation-side-menu-list-item-border-top, none);
   }
 
+  .has-border {
+    border-bottom: var(--terra-navigation-side-menu-list-item-border-bottom, 1px solid #6F7477);
+  }
+
+  .is-disabled {
+    cursor: default;
+    opacity: 30%;
+  }
+
   .menu-item {
     align-items: stretch;
     border-bottom: var(--terra-navigation-side-menu-item-border-bottom, none);
@@ -54,7 +62,7 @@
         color: var(--terra-navigation-side-menu-item-hover-chevron-color, #bcbfc0);
       }
     }
-  
+
     &:focus {
       box-shadow: var(--terra-navigation-side-menu-item-focus-box-shadow, none);
       outline: var(--terra-navigation-side-menu-focus-outline, 2px dashed #000);
@@ -125,7 +133,7 @@
         box-shadow: var(--terra-navigation-side-menu-item-focus-box-shadow, none);
         outline: var(--terra-navigation-side-menu-focus-outline, 2px dashed #000);
         outline-offset: var(--terra-navigation-side-menu-focus-outline-offset, -2px);
-  
+
         /* stylelint-disable-next-line max-nesting-depth */
         .chevron {
           color: var(--terra-navigation-side-menu-item-selected-focus-chevron-color, #909496);
@@ -156,4 +164,19 @@
       width: var(--terra-navigation-side-menu-item-chevron-width, 0.8em);
     }
   }
+
+  .icon {
+    margin-right: 10px;
+  }
+
+  .is-drill-in {
+    &:focus {
+      background-color: var(--terra-navigation-side-menu-outline-view-item-focus-background-color, #EBF6FD);
+    }
+
+    &:hover,
+    &.is-hovered {
+      background-color: var(--terra-navigation-side-menu-outline-view-item-hover-background-color, #EBF6FD);
+    }
+  }
 }