diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index 5acca1f099..480e1dc1e6 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -2,7 +2,7 @@ ## Unreleased -* Changed +* Updated * Updated example for drill-in view under `terra-navigation-side-menu`. ## 1.89.1 - (May 20, 2024) diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx index 5857e9729e..b68e30118c 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx @@ -39,7 +39,12 @@ class DrillInDefault extends React.Component { key: 'submenu3', text: 'Hospital Accommodations', isDisabled: true, }, { key: 'submenu4', text: 'Hospital Careers' }, - { key: 'submenu5', text: 'Hospital Info', childKeys: [] }, + { + key: 'submenu5', + text: 'Hospital Info', + childKeys: [], + customStatusDisplay: No results for Hospital Info, + }, { key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2', }, diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx index 9000300b32..6f20972f43 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/test/navigation-side-menu/DrillIn.test.jsx @@ -6,6 +6,40 @@ import styles from './NavigationSideMenuDocCommon.module.scss'; const cx = classNames.bind(styles); +const data = [ + { + 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: [], + customStatusDisplay: No results for Hospital Info, + }, + { + key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2', + }, + { key: 'subsubmenu2', text: 'Laboratory' }, + { + key: 'subsubmenu3', text: 'Rehabilitation services', childKeys: ['rehab1', 'rehab2', 'rehab3'], icon: , + }, + { key: 'rehab1', text: 'Rehabilitation services 1' }, + { + key: 'rehab2', text: 'Rehabilitation services 2', childKeys: [], isLoading: true, customStatusDisplay: Loading..., + }, + { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] }, +]; class DrillInExample extends React.Component { constructor(props) { super(props); @@ -14,19 +48,31 @@ class DrillInExample extends React.Component { this.resetMenuState = this.resetMenuState.bind(this); this.fakeRoutingBack = this.fakeRoutingBack.bind(this); - this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined }; + this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined, data }; } handleOnChange(event, changeData) { + if (changeData.selectedMenuKey === 'rehab2') { + this.setState({ selectedMenuKey: changeData.selectedMenuKey }); + setTimeout(() => { + const modifiedData = [ + { + key: 'rehab2', text: 'Rehabilitation services 2', childKeys: ['rehab1sub'], isLoading: false, + }, + { key: 'rehab1sub', text: 'Rehabilitation services submenu', childKeys: [] }, + ]; + this.setState({ data: modifiedData, selectedMenuKey: 'rehab2' }); + }, 1000); + } this.setState({ selectedMenuKey: changeData.selectedMenuKey, selectedChildKey: changeData.selectedChildKey }); } resetMenuState() { - this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined }); + this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined, data }); } fakeRoutingBack() { - this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined }); + this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined, data }); } render() { @@ -44,33 +90,7 @@ class DrillInExample extends React.Component { content = ( , - }, - { key: 'rehab1', text: 'Rehabilitation services 1' }, - { key: 'rehab2', text: 'Rehabilitation services 2' }, - { key: 'rehab3', text: 'Rehabilitation services 3', childKeys: [] }, - ]} + menuItems={this.state.data} onChange={this.handleOnChange} routingStackBack={this.fakeRoutingBack} selectedMenuKey={this.state.selectedMenuKey} diff --git a/packages/terra-navigation-side-menu/CHANGELOG.md b/packages/terra-navigation-side-menu/CHANGELOG.md index f1f3f7caf1..f51d225a19 100644 --- a/packages/terra-navigation-side-menu/CHANGELOG.md +++ b/packages/terra-navigation-side-menu/CHANGELOG.md @@ -3,6 +3,8 @@ ## Unreleased * Added + * Added custom status display for Drill-in content. + * Added isLoading prop for Drill-in item. * Added headerLevel prop for the title of the menu. * Added missing A11y attributes. diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx index e434909cbb..95c16bab53 100644 --- a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx +++ b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx @@ -68,6 +68,14 @@ const propTypes = { * The icon to display to the left for the menu item when variant is 'drill-in' */ icon: PropTypes.element, + /** + * A custom status display for menu item with no children. Component will fallback to status-view with no results. + */ + customStatusDisplay: PropTypes.node, + /** + * Indicates if items are loaded. + */ + isLoading: PropTypes.bool, })), /** * Callback function when a menu endpoint is reached. @@ -120,6 +128,8 @@ const processMenuItems = (menuItems, variant) => { isRootMenu: item.isRootMenu, icon: item.icon, isDisabled: item.isDisabled, + customStatusDisplay: item.customStatusDisplay, + isLoading: item.isLoading, }; if (item.childKeys) { item.childKeys.forEach((key) => { @@ -337,15 +347,18 @@ class NavigationSideMenu extends Component { } }; - buildListItem(key, keys) { + buildListItem(key, currentItem) { const item = this.state.items[key]; - const tabIndex = Array.from(keys).indexOf(key); + const tabIndex = Array.from(currentItem.childKeys).indexOf(key); const onKeyDown = (event) => { this.handleEvents(event, item, key); }; - if (key === 'empty-child-key') { - return this.props.variant === VARIANTS.DRILL_IN ? : null; + // Render Custom status / Spinner / No results + if (key === 'empty-child-key' || currentItem.isLoading) { + return this.props.variant === VARIANTS.DRILL_IN + ? (currentItem.customStatusDisplay || ) + : null; } return ( @@ -368,7 +381,7 @@ class NavigationSideMenu extends Component { buildListContent(currentItem) { if (currentItem && currentItem.childKeys && currentItem.childKeys.length) { - return currentItem.childKeys.map(key => this.buildListItem(key, currentItem.childKeys)); + return currentItem.childKeys.map(key => this.buildListItem(key, currentItem)); } return null; } diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..53e504a281 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png new file mode 100644 index 0000000000..6cb253ef3b Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png new file mode 100644 index 0000000000..06bad6c25c Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png new file mode 100644 index 0000000000..dc5e68eb92 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png deleted file mode 100644 index 58a9784260..0000000000 Binary files a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png and /dev/null differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..88530aa626 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png new file mode 100644 index 0000000000..bda68b8844 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png new file mode 100644 index 0000000000..fe91c96bb2 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png new file mode 100644 index 0000000000..68fd2cab55 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png deleted file mode 100644 index 955bfd4fa9..0000000000 Binary files a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png and /dev/null differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png new file mode 100644 index 0000000000..156adcfca7 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_data_after_loading.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png new file mode 100644 index 0000000000..69021857be Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_loading_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png new file mode 100644 index 0000000000..044fe3fc3c Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_custom_status.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png new file mode 100644 index 0000000000..e6f9c5c6e8 Binary files /dev/null and b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status-view.png differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png b/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png deleted file mode 100644 index e95b56200c..0000000000 Binary files a/packages/terra-navigation-side-menu/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/navigation-side-menu-spec/displays_no_results_status.png and /dev/null differ diff --git a/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js b/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js index 856b2db006..d512ebf8fd 100644 --- a/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js +++ b/packages/terra-navigation-side-menu/tests/wdio/navigation-side-menu-spec.js @@ -119,10 +119,29 @@ Terra.describeViewports('DrillIn View', ['medium'], () => { browser.keys(['ArrowDown']); Terra.validates.element('second drill-in item focused', { selector: '#root' }); }); + }); + + describe('DrillIn status display for folder with no items', () => { + it('Navigates into folder with no items', () => { + browser.url('/#/raw/tests/cerner-terra-framework-docs/navigation-side-menu/drill-in'); + browser.keys(['Tab', 'ArrowDown', 'ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowRight', + 'ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowRight']); + Terra.validates.element('displays no results status-view', { selector: '#root' }); + }); - it('Navigate into folder with no items', () => { - browser.keys(['ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowRight']); - Terra.validates.element('displays no results status', { selector: '#root' }); + it('Should display custom status for folder with no items', () => { + browser.url('/#/raw/tests/cerner-terra-framework-docs/navigation-side-menu/drill-in'); + browser.keys(['Tab', 'ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowRight']); + Terra.validates.element('displays no results custom status', { selector: '#root' }); + }); + + it('Should display custom status when Loading is true and data when loading is false', () => { + browser.url('/#/raw/tests/cerner-terra-framework-docs/navigation-side-menu/drill-in'); + browser.keys(['Tab', 'ArrowDown', 'ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowDown']); + browser.keys(['ArrowRight', 'ArrowDown', 'ArrowDown', 'ArrowRight']); + Terra.validates.element('displays loading status', { selector: '#root' }); + browser.pause(1000); + Terra.validates.element('displays data after loading', { selector: '#root' }); }); }); });