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 fc97ac9f68..88977fec76 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 @@ -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 index 6e4cbb0d45..82bcc8fba4 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 @@ -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 index 211c8cda65..42dec163a3 100644 --- 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 ; - } - - if (this.props.variant !== 'drill-in' && key === 'empty-child-key') { - return null; + if (key === 'empty-child-key') { + return this.props.variant === VARIANTS.DRILL_IN ? : 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 index f4d5bcbc13..b7e37ec299 100644 --- 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 && {itemIcon}} + {variant === VARIANTS.DRILL_IN && itemIcon && {itemIcon}}
{this.textRender()}
diff --git a/packages/terra-navigation-side-menu/src/constants.js b/packages/terra-navigation-side-menu/src/constants.js new file mode 100644 index 0000000000..c00e341b65 --- /dev/null +++ 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/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap b/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap index 8552153ffc..75e0f9a2d4 100644 --- a/packages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap +++ b/packages/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" >
  • } - 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" >
  • `; @@ -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" /> `;