using constants

cerner · May 15, 2024 · 066ee15 · 066ee15
1 parent 52d9c7f
commit 066ee15
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 36 deletions.
diff --git a/...rra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx b/...rra-framework-docs/src/terra-dev-site/doc/navigation-side-menu/example/DrillInExample.jsx
@@ -55,7 +55,7 @@ class DrillInDefault extends React.Component {
         selectedMenuKey={this.state.selectedMenuKey}
         selectedChildKey={this.state.selectedChildKey}
         ariaLabel="Sub Menu List"
-        variant="drill-in"
+        variant={NavigationSideMenu.Opts.Variants.DRILL_IN}
       />
     );
 

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
@@ -75,7 +75,7 @@ class DrillInExample extends React.Component {
           routingStackBack={this.fakeRoutingBack}
           selectedMenuKey={this.state.selectedMenuKey}
           selectedChildKey={this.state.selectedChildKey}
-          variant="drill-in"
+          variant={NavigationSideMenu.Opts.Variants.DRILL_IN}
         />
       );
     }

diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
@@ -8,6 +8,7 @@ import * as KeyCode from 'keycode-js';
 import ThemeContext from 'terra-theme-context';
 import StatusView from 'terra-status-view';
 import MenuItem from './_MenuItem';
+import VARIANTS from './constants';
 
 import styles from './NavigationSideMenu.module.scss';
 
@@ -89,12 +90,12 @@ const propTypes = {
   /**
    * Renders either Navigation Side Menu or Drill-IN
    */
-  variant: PropTypes.oneOf(['nav-side-menu', 'drill-in']),
+  variant: PropTypes.oneOf(['navigation-side-menu', 'drill-in']),
 };
 
 const defaultProps = {
   menuItems: [],
-  variant: 'nav-side-menu',
+  variant: 'navigation-side-menu',
 };
 
 const processMenuItems = (menuItems) => {
@@ -328,12 +329,8 @@ class NavigationSideMenu extends Component {
       this.handleEvents(event, item, key);
     };
 
-    if (this.props.variant === 'drill-in' && key === 'empty-child-key') {
-      return <StatusView variant="no-data" />;
-    }
-
-    if (this.props.variant !== 'drill-in' && key === 'empty-child-key') {
-      return null;
+    if (key === 'empty-child-key') {
+      return this.props.variant === VARIANTS.DRILL_IN ? <StatusView variant="no-data" /> : null;
     }
 
     return (
@@ -399,7 +396,7 @@ class NavigationSideMenu extends Component {
     }
 
     const headerStyles = cx([
-      { 'header-style': (variant === 'drill-in') },
+      { 'header-style': (variant === VARIANTS.DRILL_IN) },
       theme.className,
     ]);
 
@@ -451,5 +448,8 @@ class NavigationSideMenu extends Component {
 NavigationSideMenu.propTypes = propTypes;
 NavigationSideMenu.defaultProps = defaultProps;
 NavigationSideMenu.contextType = ThemeContext;
+NavigationSideMenu.Opts = {};
+NavigationSideMenu.Opts.Variants = VARIANTS;
 
 export default injectIntl(NavigationSideMenu);
+export { VARIANTS };
diff --git a/packages/terra-navigation-side-menu/src/_MenuItem.jsx b/packages/terra-navigation-side-menu/src/_MenuItem.jsx
@@ -8,6 +8,7 @@ import * as KeyCode from 'keycode-js';
 import ChevronRight from 'terra-icon/lib/icon/IconChevronRight';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
 import { IconDocuments, IconFolder } from 'terra-icon';
+import VARIANTS from './constants';
 
 import styles from './MenuItem.module.scss';
 
@@ -56,7 +57,7 @@ const propTypes = {
   /**
    * Renders either Navigation Side Menu or Drill-IN
    */
-  variant: PropTypes.oneOf(['nav-side-menu', 'drill-in']),
+  variant: PropTypes.oneOf([VARIANTS.NAVIGATION_SIDE_MENU, VARIANTS.DRILL_IN]),
   /**
    * Indicates if menu item should be disabled.
    */
@@ -125,14 +126,14 @@ class MenuItem extends React.Component {
       'menu-item',
       { 'is-selected': isSelected && !hasChevron },
       { 'is-active': this.state.active },
-      { 'is-drill-in': (variant === 'drill-in') },
+      { 'is-drill-in': (variant === VARIANTS.DRILL_IN) },
       theme.className,
     ),
     customProps.className);
 
     const listItemClassNames = cx(
       'list-item',
-      { 'has-border': (variant === 'drill-in') },
+      { 'has-border': (variant === VARIANTS.DRILL_IN) },
       { 'is-disabled': isDisabled },
     );
 
@@ -150,7 +151,7 @@ class MenuItem extends React.Component {
           onKeyDown={this.handleKeyDown}
           aria-haspopup={hasChevron}
         >
-          {variant === 'drill-in' && itemIcon && <span className={cx('icon')}>{itemIcon}</span>}
+          {variant === VARIANTS.DRILL_IN && itemIcon && <span className={cx('icon')}>{itemIcon}</span>}
           <div className={cx('title')}>
             {this.textRender()}
           </div>

diff --git a/packages/terra-navigation-side-menu/src/constants.js b/packages/terra-navigation-side-menu/src/constants.js
@@ -0,0 +1,6 @@
+const VARIANTS = {
+  NAVIGATION_SIDE_MENU: 'navigation-side-menu',
+  DRILL_IN: 'drill-in',
+};
+
+export default VARIANTS;
diff --git a/...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap b/...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
@@ -131,7 +131,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
       onChange={[Function]}
       routingStackBack={[Function]}
       selectedMenuKey="menu"
-      variant="nav-side-menu"
+      variant="navigation-side-menu"
     >
       <VisuallyHiddenText
         aria-atomic="true"
@@ -255,7 +255,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 1"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <MenuItem
                         data-menu-item="test1"
@@ -291,7 +291,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                         onKeyDown={[Function]}
                         tabIndex="-1"
                         text="Test Menu 1"
-                        variant="nav-side-menu"
+                        variant="navigation-side-menu"
                       >
                         <li
                           className="list-item"
@@ -322,7 +322,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 2"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <MenuItem
                         data-menu-item="test2"
@@ -358,7 +358,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                         onKeyDown={[Function]}
                         tabIndex="-1"
                         text="Test Menu 2"
-                        variant="nav-side-menu"
+                        variant="navigation-side-menu"
                       >
                         <li
                           className="list-item"
@@ -389,7 +389,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 3"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <MenuItem
                         data-menu-item="test3"
@@ -425,7 +425,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                         onKeyDown={[Function]}
                         tabIndex="-1"
                         text="Test Menu 3"
-                        variant="nav-side-menu"
+                        variant="navigation-side-menu"
                       >
                         <li
                           className="list-item"
@@ -456,7 +456,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 4"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <MenuItem
                         data-menu-item="test4"
@@ -492,7 +492,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
                         onKeyDown={[Function]}
                         tabIndex="-1"
                         text="Test Menu 4"
-                        variant="nav-side-menu"
+                        variant="navigation-side-menu"
                       >
                         <li
                           className="list-item"
@@ -565,7 +565,7 @@ exports[`Layout should render a NavigationSideMenu with a toolbar 1`] = `
       Toolbar
     </div>
   }
-  variant="nav-side-menu"
+  variant="navigation-side-menu"
 />
 `;
 
@@ -695,7 +695,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
     onChange={[Function]}
     routingStackBack={[Function]}
     selectedMenuKey="menu"
-    variant="nav-side-menu"
+    variant="navigation-side-menu"
   >
     <VisuallyHiddenText
       aria-atomic="true"
@@ -822,7 +822,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                     onKeyDown={[Function]}
                     tabIndex="-1"
                     text="Test Menu 1"
-                    variant="nav-side-menu"
+                    variant="navigation-side-menu"
                   >
                     <MenuItem
                       data-menu-item="test1"
@@ -858,7 +858,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 1"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <li
                         className="list-item"
@@ -889,7 +889,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                     onKeyDown={[Function]}
                     tabIndex="-1"
                     text="Test Menu 2"
-                    variant="nav-side-menu"
+                    variant="navigation-side-menu"
                   >
                     <MenuItem
                       data-menu-item="test2"
@@ -925,7 +925,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 2"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <li
                         className="list-item"
@@ -956,7 +956,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                     onKeyDown={[Function]}
                     tabIndex="-1"
                     text="Test Menu 3"
-                    variant="nav-side-menu"
+                    variant="navigation-side-menu"
                   >
                     <MenuItem
                       data-menu-item="test3"
@@ -992,7 +992,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 3"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <li
                         className="list-item"
@@ -1023,7 +1023,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                     onKeyDown={[Function]}
                     tabIndex="-1"
                     text="Test Menu 4"
-                    variant="nav-side-menu"
+                    variant="navigation-side-menu"
                   >
                     <MenuItem
                       data-menu-item="test4"
@@ -1059,7 +1059,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
                       onKeyDown={[Function]}
                       tabIndex="-1"
                       text="Test Menu 4"
-                      variant="nav-side-menu"
+                      variant="navigation-side-menu"
                     >
                       <li
                         className="list-item"
@@ -1126,7 +1126,7 @@ exports[`Layout should render a NavigationSideMenu with default props 1`] = `
   onChange={[Function]}
   routingStackBack={[Function]}
   selectedMenuKey=""
-  variant="nav-side-menu"
+  variant="navigation-side-menu"
 />
 `;
 
@@ -1192,7 +1192,7 @@ exports[`Layout should render a NavigationSideMenu with selectedKey 1`] = `
   onChange={[Function]}
   routingStackBack={[Function]}
   selectedMenuKey="menu"
-  variant="nav-side-menu"
+  variant="navigation-side-menu"
 />
 `;