diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index accf1022eba6..cad9213c6917 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5915,9 +5915,6 @@ Map {
         "isRequired": true,
         "type": "bool",
       },
-      "isSideNavExpanded": Object {
-        "type": "bool",
-      },
       "onToggle": Object {
         "isRequired": true,
         "type": "func",
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
index 099ec465cb02..eda66ff10d48 100644
--- a/packages/react/src/components/UIShell/HeaderMenu.js
+++ b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -177,8 +177,8 @@ class HeaderMenu extends React.Component {
     };
     const className = cx({
       [`${prefix}--header__submenu`]: true,
-      [customClassName]: true,
       [`${prefix}--header__submenu--current`]: isCurrentPage,
+      [customClassName]: !!customClassName,
     });
 
     // Notes on eslint comments and based on the examples in:
diff --git a/packages/react/src/components/UIShell/HeaderMenuButton.js b/packages/react/src/components/UIShell/HeaderMenuButton.js
index 3d3b8aaddb0d..0da4aaedec38 100644
--- a/packages/react/src/components/UIShell/HeaderMenuButton.js
+++ b/packages/react/src/components/UIShell/HeaderMenuButton.js
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { usePrefix } from '../../internal/usePrefix';
 
-const HeaderMenuButton = ({
+function HeaderMenuButton({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   className: customClassName,
@@ -23,7 +23,7 @@ const HeaderMenuButton = ({
   isActive,
   isCollapsible,
   ...rest
-}) => {
+}) {
   const prefix = usePrefix();
   const className = cx({
     [customClassName]: !!customClassName,
@@ -51,7 +51,7 @@ const HeaderMenuButton = ({
       {isActive ? closeIcon : menuIcon}
     </button>
   );
-};
+}
 
 HeaderMenuButton.propTypes = {
   /**
diff --git a/packages/react/src/components/UIShell/HeaderName.js b/packages/react/src/components/UIShell/HeaderName.js
index c2849af59e2f..90b9dce52f43 100644
--- a/packages/react/src/components/UIShell/HeaderName.js
+++ b/packages/react/src/components/UIShell/HeaderName.js
@@ -4,19 +4,20 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link, { LinkPropTypes } from './Link';
 import { usePrefix } from '../../internal/usePrefix';
 
-const HeaderName = ({
+function HeaderName({
   children,
   className: customClassName,
   prefix,
   href,
   ...rest
-}) => {
+}) {
   const selectorPrefix = usePrefix();
   const className = cx(`${selectorPrefix}--header__name`, customClassName);
   return (
@@ -32,7 +33,7 @@ const HeaderName = ({
       {children}
     </Link>
   );
-};
+}
 
 HeaderName.propTypes = {
   /**
diff --git a/packages/react/src/components/UIShell/HeaderNavigation.js b/packages/react/src/components/UIShell/HeaderNavigation.js
index 109d8a54c0d3..28c3a5237291 100644
--- a/packages/react/src/components/UIShell/HeaderNavigation.js
+++ b/packages/react/src/components/UIShell/HeaderNavigation.js
@@ -9,80 +9,48 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-import { PrefixContext } from '../../internal/usePrefix';
-
-export default class HeaderNavigation extends React.Component {
-  static propTypes = {
-    /**
-     * Required props for accessibility label on the underlying menu
-     */
-    ...AriaLabelPropType,
-
-    /**
-     * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-     * or `HeaderMenu`
-     */
-    children: PropTypes.node,
-
-    /**
-     * Optionally provide a custom class to apply to the underlying <nav> node
-     */
-    className: PropTypes.string,
+import { usePrefix } from '../../internal/usePrefix';
+
+function HeaderNavigation(props) {
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--header__nav`, customClassName);
+  // Assign both label strategies in this option, only one should be defined
+  // so when we spread that should be the one that is applied to the node
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
   };
 
-  constructor(props) {
-    super(props);
-    this.items = [];
-    this.state = {
-      selectedIndex: 0,
-    };
-  }
-
-  static contextType = PrefixContext;
+  return (
+    <nav {...rest} {...accessibilityLabel} className={className}>
+      <ul className={`${prefix}--header__menu-bar`}>{children}</ul>
+    </nav>
+  );
+}
 
+HeaderNavigation.propTypes = {
   /**
-   * Handles individual menuitem refs. We assign them to a class instance
-   * property so that we can properly manage focus of our children.
+   * Required props for accessibility label on the underlying menu
    */
-  handleItemRef = (index) => (node) => {
-    this.items[index] = node;
-  };
+  ...AriaLabelPropType,
 
-  render() {
-    const prefix = this.context;
-    const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      children,
-      className: customClassName,
-      ...rest
-    } = this.props;
-    const className = cx(`${prefix}--header__nav`, customClassName);
-    // Assign both label strategies in this option, only one should be defined
-    // so when we spread that should be the one that is applied to the node
-    const accessibilityLabel = {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-    };
-
-    return (
-      <nav {...rest} {...accessibilityLabel} className={className}>
-        <ul {...accessibilityLabel} className={`${prefix}--header__menu-bar`}>
-          {React.Children.map(children, this._renderNavItem)}
-        </ul>
-      </nav>
-    );
-  }
+  /**
+   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
+   * or `HeaderMenu`
+   */
+  children: PropTypes.node,
 
   /**
-   * Render an individual menuitem, adding a `ref` for each child inside of
-   * `this.items` to properly manage focus.
+   * Optionally provide a custom class to apply to the underlying <nav> node
    */
-  _renderNavItem = (child, index) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        ref: this.handleItemRef(index),
-      });
-    }
-  };
-}
+  className: PropTypes.string,
+};
+
+export { HeaderNavigation };
diff --git a/packages/react/src/components/UIShell/SideNavFooter.js b/packages/react/src/components/UIShell/SideNavFooter.js
index 01f0c189b898..fea109df8244 100644
--- a/packages/react/src/components/UIShell/SideNavFooter.js
+++ b/packages/react/src/components/UIShell/SideNavFooter.js
@@ -17,12 +17,12 @@ import { usePrefix } from '../../internal/usePrefix';
  * navigation that is a part of the UI Shell. It is responsible for handling the
  * user interaction to expand or collapse the side navigation.
  */
-const SideNavFooter = ({
+function SideNavFooter({
   assistiveText,
   className: customClassName,
   expanded,
   onToggle,
-}) => {
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__footer`, customClassName);
   return (
@@ -39,7 +39,7 @@ const SideNavFooter = ({
       </button>
     </footer>
   );
-};
+}
 
 SideNavFooter.propTypes = {
   /**
@@ -55,11 +55,6 @@ SideNavFooter.propTypes = {
    */
   expanded: PropTypes.bool.isRequired,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes.bool,
   /**
    * Provide a function that is called when the toggle button is interacted
    * with. Useful for controlling the expansion state of the side navigation.
diff --git a/packages/react/src/components/UIShell/SideNavIcon.js b/packages/react/src/components/UIShell/SideNavIcon.js
index 8c5f43bbc41b..8dffe0535b45 100644
--- a/packages/react/src/components/UIShell/SideNavIcon.js
+++ b/packages/react/src/components/UIShell/SideNavIcon.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SideNavIcon = ({ children, className: customClassName, small }) => {
+function SideNavIcon({ children, className: customClassName, small }) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__icon`]: true,
@@ -18,7 +18,7 @@ const SideNavIcon = ({ children, className: customClassName, small }) => {
     [customClassName]: !!customClassName,
   });
   return <div className={className}>{children}</div>;
-};
+}
 
 SideNavIcon.propTypes = {
   /**
diff --git a/packages/react/src/components/UIShell/SideNavItem.js b/packages/react/src/components/UIShell/SideNavItem.js
index 450fed4aea1e..401a33db198f 100644
--- a/packages/react/src/components/UIShell/SideNavItem.js
+++ b/packages/react/src/components/UIShell/SideNavItem.js
@@ -10,11 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SideNavItem = ({
-  className: customClassName,
-  children,
-  large = false,
-}) => {
+function SideNavItem({ className: customClassName, children, large = false }) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
@@ -22,11 +18,11 @@ const SideNavItem = ({
     [customClassName]: !!customClassName,
   });
   return <li className={className}>{children}</li>;
-};
+}
 
 SideNavItem.propTypes = {
   /**
-   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * Provide a single icon as the child to `SideNavItem` to render in the
    * container
    */
   children: PropTypes.node.isRequired,
diff --git a/packages/react/src/components/UIShell/SideNavLink.js b/packages/react/src/components/UIShell/SideNavLink.js
index 3cd1231d766d..bc6c729f9748 100644
--- a/packages/react/src/components/UIShell/SideNavLink.js
+++ b/packages/react/src/components/UIShell/SideNavLink.js
@@ -60,12 +60,6 @@ SideNavLink.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes.bool,
-
   /**
    * Specify if this is a large variation of the SideNavLink
    */
diff --git a/packages/react/src/components/UIShell/SideNavLinkText.js b/packages/react/src/components/UIShell/SideNavLinkText.js
index f8a922190fa2..833189a04731 100644
--- a/packages/react/src/components/UIShell/SideNavLinkText.js
+++ b/packages/react/src/components/UIShell/SideNavLinkText.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SideNavLinkText = ({ className: customClassName, children, ...rest }) => {
+function SideNavLinkText({ className: customClassName, children, ...rest }) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__link-text`, customClassName);
   return (
@@ -18,7 +18,7 @@ const SideNavLinkText = ({ className: customClassName, children, ...rest }) => {
       {children}
     </span>
   );
-};
+}
 
 SideNavLinkText.propTypes = {
   /**
diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
index 08921e39c1ac..2b7bb252b8d9 100644
--- a/packages/react/src/components/UIShell/SideNavMenu.js
+++ b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -8,178 +8,147 @@
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import SideNavIcon from './SideNavIcon';
 import { keys, match } from '../../internal/keyboard';
-import { PrefixContext } from '../../internal/usePrefix';
-
-export class SideNavMenu extends React.Component {
-  static contextType = PrefixContext;
-
-  static propTypes = {
-    buttonRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({
-        current: PropTypes.any,
-      }),
-    ]),
-
-    /**
-     * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
-     */
-    children: PropTypes.node,
-
-    /**
-     * Provide an optional class to be applied to the containing node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether the menu should default to expanded. By default, it will
-     * be closed.
-     */
-    defaultExpanded: PropTypes.bool,
-
-    /**
-     * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
-     * considered active if one of its menu items are a link for the current
-     * page.
-     */
-    isActive: PropTypes.bool,
-
-    /**
-     * Property to indicate if the side nav container is open (or not). Use to
-     * keep local state and styling in step with the SideNav expansion state.
-     */
-    isSideNavExpanded: PropTypes.bool,
-
-    /**
-     * Specify if this is a large variation of the SideNavMenu
-     */
-    large: PropTypes.bool,
-
-    /**
-     * Pass in a custom icon to render next to the `SideNavMenu` title
-     */
-    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-    /**
-     * Provide the text for the overall menu name
-     */
-    title: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    defaultExpanded: false,
-    isActive: false,
-    large: false,
-  };
-
-  static getDerivedStateFromProps = (props, state) => {
-    let derivedState = null;
-
-    if (props.isSideNavExpanded === false && state.isExpanded === true) {
-      derivedState = {
-        isExpanded: props.isSideNavExpanded,
-        wasPreviouslyExpanded: true,
-      };
-    } else if (
-      props.isSideNavExpanded === true &&
-      state.wasPreviouslyExpanded === true
-    ) {
-      derivedState = {
-        isExpanded: props.isSideNavExpanded,
-        wasPreviouslyExpanded: false,
-      };
-    }
+import { usePrefix } from '../../internal/usePrefix';
+
+const SideNavMenu = React.forwardRef(function SideNavMenu(props, ref) {
+  const {
+    className: customClassName,
+    children,
+    defaultExpanded = false,
+    isActive = false,
+    large = false,
+    renderIcon: IconElement,
+    isSideNavExpanded,
+    title,
+  } = props;
+  const prefix = usePrefix();
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
+  const className = cx({
+    [`${prefix}--side-nav__item`]: true,
+    [`${prefix}--side-nav__item--active`]:
+      isActive || (hasActiveChild(children) && !isExpanded),
+    [`${prefix}--side-nav__item--icon`]: IconElement,
+    [`${prefix}--side-nav__item--large`]: large,
+    [customClassName]: !!customClassName,
+  });
+
+  if (isSideNavExpanded === false && isExpanded === true) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded === true && prevExpanded === true) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
+  }
 
-    return derivedState;
-  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <li
+      className={className}
+      onKeyDown={(event) => {
+        if (match(event, keys.Escape)) {
+          setIsExpanded(false);
+        }
+      }}>
+      <button
+        aria-expanded={isExpanded}
+        className={`${prefix}--side-nav__submenu`}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+        ref={ref}
+        type="button">
+        {IconElement && (
+          <SideNavIcon>
+            <IconElement />
+          </SideNavIcon>
+        )}
+        <span className={`${prefix}--side-nav__submenu-title`}>{title}</span>
+        <SideNavIcon className={`${prefix}--side-nav__submenu-chevron`} small>
+          <ChevronDown size={20} />
+        </SideNavIcon>
+      </button>
+      <ul className={`${prefix}--side-nav__menu`}>{children}</ul>
+    </li>
+  );
+});
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: props.defaultExpanded || false,
-      wasPreviouslyExpanded: props.defaultExpanded || false,
-    };
+SideNavMenu.propTypes = {
+  /**
+   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the menu should default to expanded. By default, it will
+   * be closed.
+   */
+  defaultExpanded: PropTypes.bool,
+
+  /**
+   * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
+   * considered active if one of its menu items are a link for the current
+   * page.
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes.bool,
+
+  /**
+   * Specify if this is a large variation of the SideNavMenu
+   */
+  large: PropTypes.bool,
+
+  /**
+   * Pass in a custom icon to render next to the `SideNavMenu` title
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Provide the text for the overall menu name
+   */
+  title: PropTypes.string.isRequired,
+};
+
+function hasActiveChild(children) {
+  // if we have children, either a single or multiple, find if it is active
+  if (Array.isArray(children)) {
+    return children.some((child) => {
+      if (!child.props) {
+        return false;
+      }
+
+      if (child.props.isActive === true) {
+        return true;
+      }
+
+      if (child.props['aria-current']) {
+        return true;
+      }
+
+      return false;
+    });
   }
 
-  handleToggleExpand = () => {
-    this.setState((state) => ({ isExpanded: !state.isExpanded }));
-  };
-
-  handleKeyDown = (event) => {
-    if (match(event, keys.Escape)) {
-      this.setState(() => ({ isExpanded: false }));
-    }
-  };
-
-  render() {
-    const { context: prefix } = this;
-    const {
-      buttonRef,
-      className: customClassName,
-      children,
-      renderIcon: IconElement,
-      isActive,
-      title,
-      large,
-    } = this.props;
-    const { isExpanded } = this.state;
-
-    let hasActiveChild;
-    if (children) {
-      // if we have children, either a single or multiple, find if it is active
-      hasActiveChild = Array.isArray(children)
-        ? children.some((child) => {
-            if (
-              child.props &&
-              (child.props.isActive === true || child.props['aria-current'])
-            ) {
-              return true;
-            }
-            return false;
-          })
-        : children.props &&
-          (children.props.isActive === true || children.props['aria-current']);
+  if (children.props) {
+    if (children.props.isActive === true || children.props['aria-current']) {
+      return true;
     }
-
-    const className = cx({
-      [`${prefix}--side-nav__item`]: true,
-      [`${prefix}--side-nav__item--active`]:
-        isActive || (hasActiveChild && !isExpanded),
-      [`${prefix}--side-nav__item--icon`]: IconElement,
-      [`${prefix}--side-nav__item--large`]: large,
-      [customClassName]: !!customClassName,
-    });
-    return (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      <li className={className} onKeyDown={this.handleKeyDown}>
-        <button
-          aria-expanded={isExpanded}
-          className={`${prefix}--side-nav__submenu`}
-          onClick={this.handleToggleExpand}
-          ref={buttonRef}
-          type="button">
-          {IconElement && (
-            <SideNavIcon>
-              <IconElement />
-            </SideNavIcon>
-          )}
-          <span className={`${prefix}--side-nav__submenu-title`}>{title}</span>
-          <SideNavIcon className={`${prefix}--side-nav__submenu-chevron`} small>
-            <ChevronDown size={20} />
-          </SideNavIcon>
-        </button>
-        <ul className={`${prefix}--side-nav__menu`}>{children}</ul>
-      </li>
-    );
   }
-}
 
-const SideNavMenuForwardRef = React.forwardRef((props, ref) => {
-  return <SideNavMenu {...props} buttonRef={ref} />;
-});
+  return false;
+}
 
-SideNavMenuForwardRef.displayName = 'SideNavMenu';
-export default SideNavMenuForwardRef;
+export { SideNavMenu };
diff --git a/packages/react/src/components/UIShell/SideNavSwitcher.js b/packages/react/src/components/UIShell/SideNavSwitcher.js
index 36d7a249022c..61f81715b1f0 100644
--- a/packages/react/src/components/UIShell/SideNavSwitcher.js
+++ b/packages/react/src/components/UIShell/SideNavSwitcher.js
@@ -10,21 +10,21 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
+import { useId } from '../../internal/useId';
 
 const SideNavSwitcher = React.forwardRef(function SideNavSwitcher(props, ref) {
+  const id = useId('side-nav-switcher');
   const prefix = usePrefix();
   const { className: customClassName, labelText, onChange, options } = props;
   const className = cx(`${prefix}--side-nav__switcher`, customClassName);
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
   return (
     <div className={className}>
-      <label
-        htmlFor="side-nav-switcher"
-        className={`${prefix}--assistive-text`}>
+      <label htmlFor={id} className={`${prefix}--assistive-text`}>
         {labelText}
       </label>
       <select
-        id="carbon-side-nav-switcher"
+        id={id}
         className={`${prefix}--side-nav__select`}
         defaultValue=""
         onBlur={onChange}
diff --git a/packages/react/src/components/UIShell/SkipToContent.js b/packages/react/src/components/UIShell/SkipToContent.js
index 8e8eda4950e3..d3e37513ec0c 100644
--- a/packages/react/src/components/UIShell/SkipToContent.js
+++ b/packages/react/src/components/UIShell/SkipToContent.js
@@ -10,13 +10,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SkipToContent = ({
+function SkipToContent({
   children,
   className: customClassName,
   href,
   tabIndex,
   ...rest
-}) => {
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--skip-to-content`, customClassName);
   return (
@@ -24,7 +24,7 @@ const SkipToContent = ({
       {children}
     </a>
   );
-};
+}
 
 SkipToContent.propTypes = {
   /**
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
deleted file mode 100644
index ba4c888b459c..000000000000
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ /dev/null
@@ -1,927 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import cx from 'classnames';
-
-import { Search, Notification, AppSwitcher } from '@carbon/icons-react';
-
-import { action } from '@storybook/addon-actions';
-
-import React, { useState } from 'react';
-import { withReadme } from 'storybook-readme';
-import readme from './README.md';
-import HeaderContainer from './HeaderContainer';
-import {
-  Content,
-  Header,
-  HeaderMenuButton,
-  HeaderName,
-  HeaderNavigation,
-  HeaderMenu,
-  HeaderMenuItem,
-  HeaderGlobalBar,
-  HeaderGlobalAction,
-  HeaderPanel,
-  HeaderSideNavItems,
-  SkipToContent,
-  SideNav,
-  // Temporarily comment these out until they are needed again
-  // SideNavHeader,
-  // SideNavDetails,
-  // SideNavSwitcher,
-  SideNavDivider,
-  SideNavItems,
-  SideNavLink,
-  SideNavMenu,
-  SideNavMenuItem,
-  Switcher,
-  SwitcherItem,
-  SwitcherDivider,
-} from '../UIShell';
-import Modal from '../Modal';
-import Button from '../Button';
-
-import mdx from './UIShell.mdx';
-
-SideNav.displayName = 'SideNav';
-SideNavMenu.displayName = 'SideNavMenu';
-SideNavMenuItem.displayName = 'SideNavMenuItem';
-
-const Fade16 = () => (
-  <svg
-    width="16"
-    height="16"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 32 32"
-    aria-hidden="true">
-    <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-  </svg>
-);
-
-const StoryContent = ({ useResponsiveOffset = true }) => {
-  const [open, setOpen] = useState(false);
-  const classNameFirstColumn = cx({
-    'bx--col-lg-13': true,
-    'bx--offset-lg-3': useResponsiveOffset,
-  });
-  const content = (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className={classNameFirstColumn}>
-          <h2 style={{ margin: '0 0 30px' }}>Purpose and function</h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with
-            <a href="www.carbondesignsystem.com"> Carbon</a>. It contains the
-            shared navigation framework for the entire design system and ties
-            the products in IBM’s portfolio together in a cohesive and elegant
-            way. The shell is the home of the topmost navigation, where users
-            can quickly and dependably gain their bearings and move between
-            pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve
-            the needs of a broad range of products and users. Adopting the shell
-            ensures compliance with IBM design standards, simplifies development
-            efforts, and provides great user experiences. All IBM products built
-            with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell,
-            consider the “shell” of MacOS, which contains the Apple menu,
-            top-level navigation, and universal, OS-level controls at the top of
-            the screen, as well as a universal dock along the bottom or side of
-            the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of
-            the shell can be compared to the dock in MacOS.
-          </p>
-          <h2 style={{ margin: '30px 0' }}>Header responsive behavior</h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with
-            persistent side nav menus should have the side nav collapse into
-            “hamburger” menu. See the example to better understand responsive
-            behavior of the header.
-          </p>
-          <h2 style={{ margin: '30px 0' }}>Secondary navigation</h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the
-            header. It can be configured to be either fixed-width or flexible,
-            with only one level of nested items allowed. Both links and category
-            lists can be used in the side-nav and may be mixed together. There
-            are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed
-            on a page when using a side-nav, then the tabs are secondary in
-            hierarchy to the side-nav.
-          </p>
-          <Button onClick={() => setOpen(true)}>Launch modal</Button>
-          <Modal
-            modalHeading="Add a custom domain"
-            modalLabel="Account resources"
-            primaryButtonText="Add"
-            secondaryButtonText="Cancel"
-            open={open}
-            onRequestClose={() => setOpen(false)}>
-            <p style={{ marginBottom: '1rem' }}>
-              Custom domains direct requests for your apps in this Cloud Foundry
-              organization to a URL that you own. A custom domain can be a
-              shared domain, a shared subdomain, or a shared domain and host.
-            </p>
-          </Modal>
-        </div>
-      </div>
-    </div>
-  );
-  const style = {
-    height: '100%',
-  };
-  if (useResponsiveOffset) {
-    style.margin = '0';
-    style.width = '100%';
-  }
-  return (
-    <Content id="main-content" style={style}>
-      {content}
-    </Content>
-  );
-};
-
-// eslint-disable-next-line storybook/csf-component
-export default {
-  title: 'Components/UI Shell',
-  subcomponents: {
-    Content,
-    Header,
-    HeaderMenuButton,
-    HeaderName,
-    HeaderNavigation,
-    HeaderMenu,
-    HeaderMenuItem,
-    HeaderGlobalBar,
-    HeaderGlobalAction,
-    HeaderPanel,
-    HeaderSideNavItems,
-    SkipToContent,
-    SideNav,
-    SideNavItems,
-    SideNavDivider,
-    SideNavLink,
-    SideNavMenu,
-    SideNavMenuItem,
-    Switcher,
-    SwitcherItem,
-    SwitcherDivider,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-export const HeaderBase = withReadme(readme, () => (
-  <Header aria-label="IBM Platform Name">
-    <HeaderName href="#" prefix="IBM">
-      [Platform]
-    </HeaderName>
-  </Header>
-));
-
-export const HeaderBaseWNavigation = withReadme(readme, () => (
-  <HeaderContainer
-    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-      <Header aria-label="IBM Platform Name">
-        <SkipToContent />
-        <HeaderMenuButton
-          aria-label="Open menu"
-          onClick={onClickSideNavExpand}
-          isActive={isSideNavExpanded}
-        />
-        <HeaderName href="#" prefix="IBM">
-          [Platform]
-        </HeaderName>
-        <HeaderNavigation aria-label="IBM [Platform]">
-          <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-          <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-          <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-          <HeaderMenu aria-label="Link 4" menuLinkName="Link 4" isCurrentPage>
-            <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-            <HeaderMenuItem href="#" isCurrentPage>
-              Sub-link 2
-            </HeaderMenuItem>
-            <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-          </HeaderMenu>
-        </HeaderNavigation>
-        <SideNav
-          aria-label="Side navigation"
-          expanded={isSideNavExpanded}
-          isPersistent={false}>
-          <SideNavItems>
-            <HeaderSideNavItems>
-              <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-              <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-              <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-              <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-                <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-                <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
-                <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-              </HeaderMenu>
-            </HeaderSideNavItems>
-          </SideNavItems>
-        </SideNav>
-      </Header>
-    )}
-  />
-));
-
-HeaderBaseWNavigation.storyName = 'Header Base w/ Navigation';
-
-export const HeaderBaseWActions = withReadme(readme, () => (
-  <Header aria-label="IBM Platform Name">
-    <HeaderName href="#" prefix="IBM">
-      [Platform]
-    </HeaderName>
-    <HeaderGlobalBar>
-      <HeaderGlobalAction aria-label="Search" onClick={action('search click')}>
-        <Search size={20} />
-      </HeaderGlobalAction>
-      <HeaderGlobalAction
-        aria-label="Notifications"
-        onClick={action('notification click')}>
-        <Notification size={20} />
-      </HeaderGlobalAction>
-      <HeaderGlobalAction
-        aria-label="App Switcher"
-        onClick={action('app-switcher click')}
-        tooltipAlignment="end">
-        <AppSwitcher size={20} />
-      </HeaderGlobalAction>
-    </HeaderGlobalBar>
-  </Header>
-));
-
-HeaderBaseWActions.storyName = 'Header Base w/ Actions';
-
-export const HeaderBaseWSkipToContent = withReadme(readme, () => (
-  <>
-    <Header aria-label="IBM Platform Name">
-      <SkipToContent />
-      <HeaderName href="#" prefix="IBM">
-        [Platform]
-      </HeaderName>
-      <HeaderGlobalBar>
-        <HeaderGlobalAction
-          aria-label="Search"
-          onClick={action('search click')}>
-          <Search size={20} />
-        </HeaderGlobalAction>
-        <HeaderGlobalAction
-          aria-label="Notifications"
-          onClick={action('notification click')}>
-          <Notification size={20} />
-        </HeaderGlobalAction>
-        <HeaderGlobalAction
-          aria-label="App Switcher"
-          onClick={action('app-switcher click')}
-          tooltipAlignment="end">
-          <AppSwitcher size={20} />
-        </HeaderGlobalAction>
-      </HeaderGlobalBar>
-    </Header>
-    <StoryContent />
-  </>
-));
-
-HeaderBaseWSkipToContent.storyName = 'Header Base w/ SkipToContent';
-
-export const HeaderBaseWNavigationAndActions = withReadme(readme, () => (
-  <HeaderContainer
-    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-      <Header aria-label="IBM Platform Name">
-        <SkipToContent />
-        <HeaderMenuButton
-          aria-label="Open menu"
-          onClick={onClickSideNavExpand}
-          isActive={isSideNavExpanded}
-        />
-        <HeaderName href="#" prefix="IBM">
-          [Platform]
-        </HeaderName>
-        <HeaderNavigation aria-label="IBM [Platform]">
-          <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-          <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-          <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-          <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-            <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-            <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
-            <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-          </HeaderMenu>
-        </HeaderNavigation>
-        <HeaderGlobalBar>
-          <HeaderGlobalAction
-            aria-label="Search"
-            onClick={action('search click')}>
-            <Search size={20} />
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            aria-label="Notifications"
-            onClick={action('notification click')}>
-            <Notification size={20} />
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            aria-label="App Switcher"
-            onClick={action('app-switcher click')}
-            tooltipAlignment="end">
-            <AppSwitcher size={20} />
-          </HeaderGlobalAction>
-        </HeaderGlobalBar>
-        <SideNav
-          aria-label="Side navigation"
-          expanded={isSideNavExpanded}
-          isPersistent={false}>
-          <SideNavItems>
-            <HeaderSideNavItems>
-              <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-              <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-              <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-              <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-                <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-                <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
-                <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-              </HeaderMenu>
-            </HeaderSideNavItems>
-          </SideNavItems>
-        </SideNav>
-      </Header>
-    )}
-  />
-));
-
-HeaderBaseWNavigationAndActions.storyName =
-  'Header Base w/ Navigation and Actions';
-
-export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => (
-  <HeaderContainer
-    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-      <>
-        <Header aria-label="IBM Platform Name">
-          <SkipToContent />
-          <HeaderMenuButton
-            aria-label="Open menu"
-            onClick={onClickSideNavExpand}
-            isActive={isSideNavExpanded}
-          />
-          <HeaderName href="#" prefix="IBM">
-            [Platform]
-          </HeaderName>
-          <HeaderNavigation aria-label="IBM [Platform]">
-            <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-            <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-            <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-            <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-              <HeaderMenuItem href="#one">Sub-link 1</HeaderMenuItem>
-              <HeaderMenuItem href="#two">Sub-link 2</HeaderMenuItem>
-              <HeaderMenuItem href="#three">Sub-link 3</HeaderMenuItem>
-            </HeaderMenu>
-          </HeaderNavigation>
-          <HeaderGlobalBar>
-            <HeaderGlobalAction
-              aria-label="Search"
-              onClick={action('search click')}>
-              <Search size={20} />
-            </HeaderGlobalAction>
-            <HeaderGlobalAction
-              aria-label="Notifications"
-              onClick={action('notification click')}>
-              <Notification size={20} />
-            </HeaderGlobalAction>
-            <HeaderGlobalAction
-              aria-label="App Switcher"
-              onClick={action('app-switcher click')}
-              tooltipAlignment="end">
-              <AppSwitcher size={20} />
-            </HeaderGlobalAction>
-          </HeaderGlobalBar>
-          <SideNav aria-label="Side navigation" expanded={isSideNavExpanded}>
-            <SideNavItems>
-              <HeaderSideNavItems hasDivider={true}>
-                <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-                <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-                <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-                <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-                  <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-                  <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
-                  <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-                </HeaderMenu>
-              </HeaderSideNavItems>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu
-                renderIcon={Fade16}
-                title="Category title"
-                isActive={true}>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-            </SideNavItems>
-          </SideNav>
-        </Header>
-        <StoryContent />
-      </>
-    )}
-  />
-));
-
-HeaderBaseWNavigationActionsAndSideNav.storyName =
-  'Header Base w/ Navigation, Actions and SideNav';
-
-export const HeaderBaseWSideNav = withReadme(readme, () => (
-  <HeaderContainer
-    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-      <>
-        <Header aria-label="IBM Platform Name">
-          <SkipToContent />
-          <HeaderMenuButton
-            aria-label="Open menu"
-            onClick={onClickSideNavExpand}
-            isActive={isSideNavExpanded}
-          />
-          <HeaderName href="#" prefix="IBM">
-            [Platform]
-          </HeaderName>
-          <SideNav aria-label="Side navigation" expanded={isSideNavExpanded}>
-            <SideNavItems>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu
-                renderIcon={Fade16}
-                title="Category title"
-                isActive={true}>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-            </SideNavItems>
-          </SideNav>
-        </Header>
-        <StoryContent />
-      </>
-    )}
-  />
-));
-
-HeaderBaseWSideNav.storyName = 'Header Base w/ SideNav';
-
-export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => {
-  const [expanded, setExpanded] = useState(false);
-
-  const toggleRightPanel = () => {
-    setExpanded(!expanded);
-  };
-
-  return (
-    <Header aria-label="IBM Platform Name">
-      <HeaderName href="#" prefix="IBM">
-        [Platform]
-      </HeaderName>
-      <HeaderGlobalBar>
-        <HeaderGlobalAction
-          tooltipAlignment="end"
-          isActive={expanded}
-          aria-label="Notifications"
-          onClick={toggleRightPanel}>
-          <Notification size={20} />
-        </HeaderGlobalAction>
-      </HeaderGlobalBar>
-      <HeaderPanel aria-label="Header Panel" expanded={expanded} />
-    </Header>
-  );
-});
-
-HeaderBaseWActionsAndRightPanel.storyName =
-  'Header Base w/ Actions and Right Panel with Animation';
-
-export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
-  <Header aria-label="IBM Platform Name">
-    <HeaderName href="#" prefix="IBM">
-      [Platform]
-    </HeaderName>
-    <HeaderGlobalBar>
-      <HeaderGlobalAction aria-label="Search" onClick={action('search click')}>
-        <Search size={20} />
-      </HeaderGlobalAction>
-      <HeaderGlobalAction
-        aria-label="Notifications"
-        onClick={action('notification click')}>
-        <Notification size={20} />
-      </HeaderGlobalAction>
-      <HeaderGlobalAction
-        aria-label="App Switcher"
-        isActive
-        onClick={action('app-switcher click')}
-        tooltipAlignment="end">
-        <AppSwitcher size={20} />
-      </HeaderGlobalAction>
-    </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded>
-      <Switcher aria-label="Switcher Container">
-        <SwitcherItem isSelected aria-label="Link 1" href="#">
-          Link 1
-        </SwitcherItem>
-        <SwitcherDivider />
-        <SwitcherItem href="#" aria-label="Link 2">
-          Link 2
-        </SwitcherItem>
-        <SwitcherItem href="#" aria-label="Link 3">
-          Link 3
-        </SwitcherItem>
-        <SwitcherItem href="#" aria-label="Link 4">
-          Link 4
-        </SwitcherItem>
-        <SwitcherItem href="#" aria-label="Link 5">
-          Link 5
-        </SwitcherItem>
-        <SwitcherDivider />
-        <SwitcherItem href="#" aria-label="Link 6">
-          Link 6
-        </SwitcherItem>
-      </Switcher>
-    </HeaderPanel>
-  </Header>
-));
-
-HeaderBaseWActionsAndSwitcher.storyName = 'Header Base w/ Actions and Switcher';
-
-export const FixedSideNav = withReadme(readme, () => (
-  <>
-    <SideNav
-      isFixedNav
-      expanded={true}
-      isChildOfHeader={false}
-      aria-label="Side navigation">
-      <SideNavItems>
-        <SideNavMenu title="L0 menu">
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu title="L0 menu" isActive={true}>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu title="L0 menu">
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
-        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
-      </SideNavItems>
-    </SideNav>
-    <StoryContent useResponsiveOffset={false} />
-  </>
-));
-
-FixedSideNav.storyName = 'Fixed SideNav';
-
-export const FixedSideNavWIcons = withReadme(readme, () => (
-  <>
-    <SideNav
-      isFixedNav
-      expanded={true}
-      isChildOfHeader={false}
-      aria-label="Side navigation">
-      <SideNavItems>
-        <SideNavMenu renderIcon={Fade16} title="Category title">
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu renderIcon={Fade16} title="Category title" isActive={true}>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-            Link
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu renderIcon={Fade16} title="Category title">
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-          Link
-        </SideNavLink>
-        <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-          Link
-        </SideNavLink>
-      </SideNavItems>
-    </SideNav>
-    <StoryContent useResponsiveOffset={false} />
-  </>
-));
-
-FixedSideNavWIcons.storyName = 'Fixed SideNav w/ Icons';
-
-export const FixedSideNavWDivider = withReadme(readme, () => (
-  <>
-    <SideNav
-      isFixedNav
-      expanded={true}
-      isChildOfHeader={false}
-      aria-label="Side navigation">
-      <SideNavItems>
-        <SideNavMenu title="L0 menu">
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu title="L0 menu" isActive={true}>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu title="L0 menu">
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">
-            L0 menu item
-          </SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavDivider />
-        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
-        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
-      </SideNavItems>
-    </SideNav>
-    <StoryContent useResponsiveOffset={false} />
-  </>
-));
-
-FixedSideNavWDivider.storyName = 'Fixed SideNav w/ Divider';
-
-export const SideNavRail = withReadme(readme, () => (
-  <>
-    <SideNav aria-label="Side navigation" isRail>
-      <SideNavItems>
-        <SideNavMenu renderIcon={Fade16} title="Category title">
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-            Link
-          </SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu renderIcon={Fade16} title="Category title">
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavMenu renderIcon={Fade16} title="Category title">
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Link</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-          Link
-        </SideNavLink>
-        <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-          Link
-        </SideNavLink>
-      </SideNavItems>
-    </SideNav>
-    <StoryContent />
-  </>
-));
-
-SideNavRail.storyName = 'SideNav Rail';
-
-export const SideNavRailWHeader = withReadme(readme, () => (
-  <HeaderContainer
-    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-      <>
-        <Header aria-label="IBM Platform Name">
-          <SkipToContent />
-          <HeaderMenuButton
-            aria-label="Open menu"
-            isCollapsible
-            onClick={onClickSideNavExpand}
-            isActive={isSideNavExpanded}
-          />
-          <HeaderName href="#" prefix="IBM">
-            [Platform]
-          </HeaderName>
-          <HeaderNavigation aria-label="IBM [Platform]">
-            <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-            <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-            <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-            <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
-              <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
-              <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
-              <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
-            </HeaderMenu>
-          </HeaderNavigation>
-          <HeaderGlobalBar>
-            <HeaderGlobalAction
-              aria-label="Search"
-              onClick={action('search click')}>
-              <Search size={20} />
-            </HeaderGlobalAction>
-            <HeaderGlobalAction
-              aria-label="Notifications"
-              onClick={action('notification click')}>
-              <Notification size={20} />
-            </HeaderGlobalAction>
-            <HeaderGlobalAction
-              aria-label="App Switcher"
-              onClick={action('app-switcher click')}
-              tooltipAlignment="end">
-              <AppSwitcher size={20} />
-            </HeaderGlobalAction>
-          </HeaderGlobalBar>
-          <SideNav
-            aria-label="Side navigation"
-            isRail
-            expanded={isSideNavExpanded}
-            onOverlayClick={onClickSideNavExpand}>
-            <SideNavItems>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavMenu renderIcon={Fade16} title="Category title">
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem aria-current="page" href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-                <SideNavMenuItem href="javascript:void(0)">
-                  Link
-                </SideNavMenuItem>
-              </SideNavMenu>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-              <SideNavLink renderIcon={Fade16} href="javascript:void(0)">
-                Link
-              </SideNavLink>
-            </SideNavItems>
-          </SideNav>
-        </Header>
-        <StoryContent />
-      </>
-    )}
-  />
-));
-
-SideNavRailWHeader.storyName = 'SideNav Rail w/Header';
-
-export const SideNavWLargeSideNavItems = withReadme(readme, () => (
-  <>
-    <SideNav
-      expanded={true}
-      isChildOfHeader={false}
-      aria-label="Side navigation">
-      <SideNavItems>
-        <SideNavMenu title="Large menu" large>
-          <SideNavMenuItem href="javascript:void(0)">Menu 1</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Menu 2</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Menu 3</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavLink href="javascript:void(0)" large>
-          Large link
-        </SideNavLink>
-        <SideNavMenu renderIcon={Fade16} title="Large menu w/icon" large>
-          <SideNavMenuItem href="javascript:void(0)">Menu 1</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Menu 2</SideNavMenuItem>
-          <SideNavMenuItem href="javascript:void(0)">Menu 3</SideNavMenuItem>
-        </SideNavMenu>
-        <SideNavLink renderIcon={Fade16} href="javascript:void(0)" large>
-          Large link w/icon
-        </SideNavLink>
-      </SideNavItems>
-    </SideNav>
-    <StoryContent />
-  </>
-));
-
-SideNavWLargeSideNavItems.storyName = 'SideNav w/ large side nav items';
diff --git a/packages/react/src/components/UIShell/next/UIShell.stories.js b/packages/react/src/components/UIShell/UIShell.stories.js
similarity index 99%
rename from packages/react/src/components/UIShell/next/UIShell.stories.js
rename to packages/react/src/components/UIShell/UIShell.stories.js
index 49de20f44f05..0fad7864e155 100644
--- a/packages/react/src/components/UIShell/next/UIShell.stories.js
+++ b/packages/react/src/components/UIShell/UIShell.stories.js
@@ -31,8 +31,9 @@ import {
   Switcher,
   SwitcherItem,
   SwitcherDivider,
-} from '../';
-import { Modal, Button } from 'carbon-components-react';
+} from './';
+import Modal from '../Modal';
+import Button from '../Button';
 import {
   Search,
   Notification,
diff --git a/packages/react/src/components/UIShell/__tests__/Content-test.js b/packages/react/src/components/UIShell/__tests__/Content-test.js
new file mode 100644
index 000000000000..98975198cbdb
--- /dev/null
+++ b/packages/react/src/components/UIShell/__tests__/Content-test.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Content } from '../';
+
+describe('Content', () => {
+  it('should support customizing the tag of the outermost element with `tagName`', () => {
+    const { container, rerender } = render(<Content />);
+    expect(container.firstChild.tagName).toBe('MAIN');
+
+    rerender(<Content tagName="section" />);
+    expect(container.firstChild.tagName).toBe('SECTION');
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<Content className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<Content data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+});
diff --git a/packages/react/src/components/UIShell/__tests__/Header-test.js b/packages/react/src/components/UIShell/__tests__/Header-test.js
index ebf31afd8c7e..05dab87fb1b6 100644
--- a/packages/react/src/components/UIShell/__tests__/Header-test.js
+++ b/packages/react/src/components/UIShell/__tests__/Header-test.js
@@ -5,15 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Header } from '../';
 
 describe('Header', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <Header aria-label="label" className="custom-class" />
+  it('should support labeling through aria-label', () => {
+    const { container } = render(<Header aria-label="test" />);
+    expect(container.firstChild).toEqual(screen.getByLabelText('test'));
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<Header aria-label="test" className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <Header aria-label="test" data-testid="test" />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js b/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js
new file mode 100644
index 000000000000..111011c3fed3
--- /dev/null
+++ b/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { HeaderContainer } from '../';
+
+describe('HeaderContainer', () => {
+  it('should support rendering through a render prop', () => {
+    const renderProp = jest.fn(() => null);
+    render(<HeaderContainer render={renderProp} />);
+    expect(renderProp).toHaveBeenCalled();
+    expect(renderProp).toHaveBeenCalledWith(
+      {
+        isSideNavExpanded: false,
+        onClickSideNavExpand: expect.any(Function),
+      },
+      {}
+    );
+  });
+
+  it('should call the `render` prop any time the state changes', () => {
+    let _onClickSideNavExpand;
+    const renderProp = jest.fn(({ onClickSideNavExpand }) => {
+      _onClickSideNavExpand = onClickSideNavExpand;
+      return null;
+    });
+    render(<HeaderContainer render={renderProp} isSideNavExpanded />);
+
+    expect(renderProp).toHaveBeenCalledWith(
+      {
+        isSideNavExpanded: true,
+        onClickSideNavExpand: expect.any(Function),
+      },
+      {}
+    );
+
+    act(() => {
+      _onClickSideNavExpand();
+    });
+
+    expect(renderProp).toHaveBeenCalledWith(
+      {
+        isSideNavExpanded: false,
+        onClickSideNavExpand: expect.any(Function),
+      },
+      {}
+    );
+  });
+});
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderGlobalAction-test.js b/packages/react/src/components/UIShell/__tests__/HeaderGlobalAction-test.js
index d42242cf58cf..48b04c28dfa7 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderGlobalAction-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderGlobalAction-test.js
@@ -5,29 +5,82 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Fade } from '@carbon/icons-react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderGlobalAction } from '../';
 
 describe('HeaderGlobalAction', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      'aria-label': 'Accessibility label',
-      className: 'custom-class',
-      onClick: jest.fn(),
-      isActive: false,
-    };
+  it('should support labeling through aria-label', () => {
+    render(
+      <HeaderGlobalAction aria-label="test">
+        <svg />
+      </HeaderGlobalAction>
+    );
+    expect(screen.getByLabelText('test')).toBeInTheDocument();
+  });
+
+  it('should support a custom `className` prop on the button element', () => {
+    render(
+      <HeaderGlobalAction aria-label="test" className="test">
+        <svg />
+      </HeaderGlobalAction>
+    );
+    expect(screen.getByLabelText('test')).toHaveClass('test');
+  });
+
+  it('should spread extra props on the button element', () => {
+    render(
+      <HeaderGlobalAction aria-label="test" data-testid="test">
+        <svg />
+      </HeaderGlobalAction>
+    );
+    expect(screen.getByLabelText('test')).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
+  });
+
+  it('should support a `ref` that is placed on the <button> element', () => {
+    const ref = jest.fn();
+    render(
+      <HeaderGlobalAction aria-label="test" ref={ref}>
+        <svg />
+      </HeaderGlobalAction>
+    );
+    expect(ref).toHaveBeenCalledWith(screen.getByLabelText('test'));
   });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <HeaderGlobalAction {...mockProps}>
-        <Fade size={32} />
+  it('should toggle the active class when `isActive` is set', () => {
+    const { rerender } = render(
+      <HeaderGlobalAction aria-label="test">
+        <svg />
       </HeaderGlobalAction>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByLabelText('test')).not.toHaveClass(
+      'cds--header__action--active'
+    );
+
+    rerender(
+      <HeaderGlobalAction aria-label="test" isActive>
+        <svg />
+      </HeaderGlobalAction>
+    );
+    expect(screen.getByLabelText('test')).toHaveClass(
+      'cds--header__action--active'
+    );
+  });
+
+  it('should call `onClick` when the <button> is clicked', () => {
+    const onClick = jest.fn();
+    render(
+      <HeaderGlobalAction aria-label="test" onClick={onClick}>
+        <svg />
+      </HeaderGlobalAction>
+    );
+
+    userEvent.click(screen.getByLabelText('test'));
+
+    expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderGlobalBar-test.js b/packages/react/src/components/UIShell/__tests__/HeaderGlobalBar-test.js
index 017c7329d258..596d0eed51bb 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderGlobalBar-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderGlobalBar-test.js
@@ -5,13 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderGlobalBar } from '../';
 
 describe('HeaderGlobalBar', () => {
-  it('should render', () => {
-    const wrapper = mount(<HeaderGlobalBar className="custom-class" />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<HeaderGlobalBar className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<HeaderGlobalBar data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js
index 35ab2a8973e9..f8fbef825f8b 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js
@@ -5,136 +5,59 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderMenu, HeaderMenuItem } from '../';
 
-const prefix = 'cds';
-
 describe('HeaderMenu', () => {
-  let mountNode;
-  let mockProps;
-
-  beforeEach(() => {
-    mountNode = document.createElement('div');
-    mockProps = {
-      'aria-label': 'Accessibility label',
-      className: 'custom-class',
-      menuLinkName: 'test',
-      // We use `ref` instead of `focusRef` because `HeaderMenu` forwards the ref
-      // to the underlying menu button
-      ref: jest.fn(),
-      tabIndex: -1,
-    };
-
-    document.body.appendChild(mountNode);
-  });
-
-  afterEach(() => {
-    mountNode.parentNode.removeChild(mountNode);
-  });
-
-  it('should render', () => {
-    const wrapper = mount(
-      <HeaderMenu {...mockProps}>
-        <HeaderMenuItem href="/a">A</HeaderMenuItem>
-        <HeaderMenuItem href="/b">B</HeaderMenuItem>
-        <HeaderMenuItem href="/c">C</HeaderMenuItem>
-      </HeaderMenu>,
-      {
-        attachTo: mountNode,
-      }
+  it('should set the current class if `isCurrentPage` is true', () => {
+    const { container } = render(
+      <HeaderMenu aria-label="test" menuLinkName="test" isCurrentPage>
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container.firstChild).toHaveClass('cds--header__submenu--current');
   });
 
-  it('should render aria-label', () => {
-    const wrapper = mount(
-      <HeaderMenu {...mockProps}>
-        <HeaderMenuItem href="/a">A</HeaderMenuItem>
-        <HeaderMenuItem href="/b">B</HeaderMenuItem>
-        <HeaderMenuItem href="/c">C</HeaderMenuItem>
-      </HeaderMenu>,
-      {
-        attachTo: mountNode,
-      }
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <HeaderMenu
+        className="test"
+        aria-label="test-label"
+        menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
     );
-    const headerMenu = wrapper.childAt(0);
-    const headerMenuText = headerMenu
-      .find(`.${prefix}--header__menu-title`)
-      .prop('aria-label');
-
-    expect(headerMenuText).toMatch('Accessibility label');
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render content prop', () => {
-    const menuContent = () => <p>Some other text</p>;
-    const wrapper = mount(
-      <HeaderMenu renderMenuContent={menuContent} {...mockProps}>
-        <HeaderMenuItem href="/a">A</HeaderMenuItem>
-        <HeaderMenuItem href="/b">B</HeaderMenuItem>
-        <HeaderMenuItem href="/c">C</HeaderMenuItem>
-      </HeaderMenu>,
-      {
-        attachTo: mountNode,
-      }
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <HeaderMenu
+        data-testid="test"
+        aria-label="test-label"
+        menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
     );
-
-    const headerMenu = wrapper.childAt(0);
-    const headerMenuAnchorChildText = headerMenu
-      .find(`.${prefix}--header__menu-title`)
-      .childAt(1)
-      .text();
-    const headerMenuText = headerMenu
-      .find(`.${prefix}--header__menu-title`)
-      .text();
-
-    expect(headerMenuText).not.toMatch('Accessibility label');
-    expect(headerMenuAnchorChildText).toMatch('Some other text');
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 
-  describe('menu button interactions', () => {
-    it('should open and close', () => {
-      const wrapper = mount(
-        <HeaderMenu {...mockProps}>
-          <HeaderMenuItem href="/a">A</HeaderMenuItem>
-          <HeaderMenuItem href="/b">B</HeaderMenuItem>
-          <HeaderMenuItem href="/c">C</HeaderMenuItem>
-        </HeaderMenu>,
-        {
-          attachTo: mountNode,
-        }
-      );
-
-      const headerMenu = wrapper.childAt(0);
-      const headerInstance = headerMenu.instance();
-
-      // Should start closed
-      expect(headerInstance.state.expanded).toEqual(false);
-
-      // Click should open
-      headerMenu.simulate('click');
-      expect(headerInstance.state.expanded).toEqual(true);
-
-      // blur should close
-      headerMenu.simulate('blur');
-      expect(headerInstance.state.expanded).toEqual(false);
-
-      // Get first link in the menu
-      const menuLink = headerMenu.find('a').first();
-
-      // After enter should open
-      menuLink.simulate('keydown', { key: 'Enter', keyCode: 13, which: 13 });
-      expect(headerInstance.state.expanded).toEqual(true);
-
-      // After space should close
-      menuLink.simulate('keydown', { key: 'Space', keyCode: 32, which: 32 });
-      expect(headerInstance.state.expanded).toEqual(false);
-
-      // After esc should close
-      headerMenu.simulate('click');
-      menuLink.simulate('keydown', { key: 'Escape', keyCode: 27, which: 27 });
-      expect(headerInstance.state.expanded).toEqual(false);
-    });
+  it('should support a `ref` on the menu button', () => {
+    const ref = jest.fn();
+    render(
+      <HeaderMenu ref={ref} aria-label="test-label" menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
+    );
+    expect(ref).toHaveBeenCalledWith(screen.getByText('test-link'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenuButton-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenuButton-test.js
index 9823c247f1ab..c9a581276c61 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderMenuButton-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderMenuButton-test.js
@@ -5,29 +5,90 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Fade } from '@carbon/icons-react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderMenuButton } from '../';
 
 describe('HeaderMenuButton', () => {
-  let mockProps;
+  it('should label the <button> element through `aria-label`', () => {
+    const { container } = render(<HeaderMenuButton aria-label="test" />);
+    expect(container.firstChild).toEqual(screen.getByLabelText('test'));
+  });
+
+  it('should set the title of the <button> through `aria-label`', () => {
+    render(<HeaderMenuButton aria-label="test" />);
+    expect(screen.getByLabelText('test')).toHaveAttribute('title', 'test');
+  });
+
+  it('should the active class through `isActive`', () => {
+    const { container, rerender } = render(
+      <HeaderMenuButton aria-label="test" />
+    );
+    expect(container.firstChild).not.toHaveClass('cds--header__action--active');
+
+    rerender(<HeaderMenuButton aria-label="test" isActive />);
+    expect(container.firstChild).toHaveClass('cds--header__action--active');
+  });
+
+  it('should the hidden class through `isCollapsible', () => {
+    const { container, rerender } = render(
+      <HeaderMenuButton aria-label="test" />
+    );
+    expect(container.firstChild).toHaveClass(
+      'cds--header__menu-toggle__hidden'
+    );
+
+    rerender(<HeaderMenuButton aria-label="test" isCollapsible />);
+    expect(container.firstChild).not.toHaveClass(
+      'cds--header__menu-toggle__hidden'
+    );
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      'aria-label': 'Accessibility label',
-      className: 'custom-class',
-      onClick: jest.fn(),
-      isActive: false,
-    };
+  it('should call `onClick` when the <button> is clicked', () => {
+    const onClick = jest.fn();
+    render(<HeaderMenuButton aria-label="test" onClick={onClick} />);
+
+    userEvent.click(screen.getByLabelText('test'));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should support a custom close icon through `renderCloseIcon`', () => {
+    render(
+      <HeaderMenuButton
+        aria-label="test"
+        renderCloseIcon={<span data-testid="close">close</span>}
+        isActive
+      />
+    );
+    expect(screen.getByLabelText('test')).toContainElement(
+      screen.getByTestId('close')
+    );
+  });
+
+  it('should support a custom menu icon through `renderMenuIcon`', () => {
+    render(
+      <HeaderMenuButton
+        aria-label="test"
+        renderMenuIcon={<span data-testid="menu">menu</span>}
+      />
+    );
+    expect(screen.getByLabelText('test')).toContainElement(
+      screen.getByTestId('menu')
+    );
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <HeaderMenuButton aria-label="test" className="test" />
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <HeaderMenuButton {...mockProps}>
-        <Fade size={32} />
-      </HeaderMenuButton>
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <HeaderMenuButton aria-label="test" data-testid="test" />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js
index b4f107e3f63a..da588343f708 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js
@@ -5,25 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderMenuItem } from '../';
 
 describe('HeaderMenuItem', () => {
-  let mockProps;
+  it('should set the current class based on isCurrentPage', () => {
+    render(
+      <HeaderMenuItem data-testid="test" isCurrentPage>
+        test
+      </HeaderMenuItem>
+    );
+    expect(screen.getByTestId('test')).toHaveClass(
+      'cds--header__menu-item--current'
+    );
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <HeaderMenuItem className="test">test</HeaderMenuItem>
+    );
+    expect(container.firstChild).toHaveClass('test');
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-class',
-      children: 'Menu Item',
-      role: 'none',
-      ref: jest.fn(),
-    };
+  it('should spread extra props on the <a> element', () => {
+    render(<HeaderMenuItem data-testid="test">test</HeaderMenuItem>);
+    expect(screen.getByTestId('test').tagName).toBe('A');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<HeaderMenuItem {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
-    expect(mockProps.ref).toHaveBeenCalledTimes(1);
+  it('should support a `ref` on the <a> element', () => {
+    const ref = jest.fn();
+    render(
+      <HeaderMenuItem ref={ref} data-testid="test">
+        test
+      </HeaderMenuItem>
+    );
+    expect(ref).toHaveBeenCalledWith(screen.getByTestId('test'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderName-test.js b/packages/react/src/components/UIShell/__tests__/HeaderName-test.js
index f8a1c65ca977..b9720a921aa3 100644
--- a/packages/react/src/components/UIShell/__tests__/HeaderName-test.js
+++ b/packages/react/src/components/UIShell/__tests__/HeaderName-test.js
@@ -5,24 +5,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { HeaderName } from '../';
 
 describe('HeaderName', () => {
-  let mockProps;
+  it('should render `children` in an element with role="link"', () => {
+    render(<HeaderName href="/test">test</HeaderName>);
+    expect(screen.getByRole('link')).toHaveTextContent('IBM test');
+  });
+
+  it('should support a custom prefix', () => {
+    render(
+      <HeaderName href="/test" prefix="custom">
+        test
+      </HeaderName>
+    );
+    expect(screen.getByRole('link')).toHaveTextContent('custom test');
+  });
+
+  it('should support no prefix', () => {
+    render(
+      <HeaderName href="/test" prefix={null}>
+        test
+      </HeaderName>
+    );
+    expect(screen.getByRole('link')).toHaveTextContent('test');
+  });
+
+  it('should support specifying the href for the link with `href`', () => {
+    render(<HeaderName href="/test">test</HeaderName>);
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/test');
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-class',
-      children: 'Name',
-      prefix: 'IBM',
-      href: '/',
-    };
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <HeaderName className="test" href="/test">
+        test
+      </HeaderName>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<HeaderName {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <HeaderName data-testid="test" href="/test">
+        test
+      </HeaderName>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/next/__tests__/HeaderNavigation-test.js b/packages/react/src/components/UIShell/__tests__/HeaderNavigation-test.js
similarity index 100%
rename from packages/react/src/components/UIShell/next/__tests__/HeaderNavigation-test.js
rename to packages/react/src/components/UIShell/__tests__/HeaderNavigation-test.js
diff --git a/packages/react/src/components/UIShell/__tests__/Link-test.js b/packages/react/src/components/UIShell/__tests__/Link-test.js
index 5ed9333c340f..93005ec12bd2 100644
--- a/packages/react/src/components/UIShell/__tests__/Link-test.js
+++ b/packages/react/src/components/UIShell/__tests__/Link-test.js
@@ -5,34 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import Link from '../Link';
 
-describe('UI Shell - Link', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      element: 'a',
-      children: 'foo',
-      href: '#',
-    };
+describe('Link', () => {
+  it('should render an element with role="link"', () => {
+    render(<Link href="/">test</Link>);
+    expect(screen.getByRole('link')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveTextContent('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<Link {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <Link className="test" href="/">
+        test
+      </Link>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should support rendering a string element', () => {
-    const wrapper = mount(<Link {...mockProps} element="div" />);
-    expect(wrapper).toMatchSnapshot();
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <Link data-testid="test" href="/">
+        test
+      </Link>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 
-  it('should support rendering a component as the element', () => {
-    const mockComponent = (props) => <a {...props}>link</a>;
-    const wrapper = mount(<Link {...mockProps} element={mockComponent} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a `ref` that is placed on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(
+      <Link ref={ref} href="/">
+        test
+      </Link>
+    );
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNav-test.js b/packages/react/src/components/UIShell/__tests__/SideNav-test.js
index 6743e8f2cc73..e74169841433 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNav-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNav-test.js
@@ -5,91 +5,63 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNav from '../SideNav';
-import SideNavLink from '../SideNavLink';
 
-describe('SideNav', () => {
-  let mockProps, wrapper;
-
-  beforeEach(() => {
-    mockProps = {
-      'aria-label': 'Navigation',
-      children: <SideNavLink href="/">Navigation</SideNavLink>,
-    };
-  });
-
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    })),
-  });
-
-  afterEach(() => {
-    wrapper && wrapper.unmount();
-  });
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
 
-  it('should render', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+describe('SideNav', () => {
+  it('should label the <nav> through `aria-label`', () => {
+    render(<SideNav aria-label="test" />);
+    expect(screen.getByRole('navigation')).toEqual(
+      screen.getByLabelText('test')
+    );
   });
 
-  it('by default, focus event listeners are added', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    expect(wrapper.find('nav').props().onFocus).toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).toBeDefined();
+  it('should render an overlay if `isFixedNav` is false', () => {
+    const { container } = render(<SideNav aria-label="test" />);
+    expect(container.childNodes.length).toBe(2);
   });
 
-  it('by default, mouse event listeners are not added', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    expect(wrapper.find('nav').props().onFocus).toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  it('should toggle the overlay-active class when `expanded` is true', () => {
+    const { container } = render(<SideNav aria-label="test" expanded />);
+    expect(container.firstChild).toHaveClass('cds--side-nav__overlay-active');
   });
 
-  it('if addFocusListeners is specified as false, no focus event listeners props are added', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    wrapper.setProps({ addFocusListeners: false });
-    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  it('should toggle the overlay-active class when `defaultExpanded` is true', () => {
+    const { container } = render(<SideNav aria-label="test" defaultExpanded />);
+    expect(container.firstChild).toHaveClass('cds--side-nav__overlay-active');
   });
 
-  it('if addFocusListeners is specified as false in rail SideNav, no event listeners props are added', () => {
-    wrapper = mount(<SideNav {...mockProps} isRail />);
-    wrapper.setProps({ addFocusListeners: false });
-    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).toBeDefined();
+  it('should support a custom `className` prop on the element with role="navigation"', () => {
+    render(<SideNav aria-label="test" className="test" />);
+    expect(screen.getByRole('navigation')).toHaveClass('test');
   });
 
-  it('if addMouseListeners is specified as false, no mouse listener props are added', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    wrapper.setProps({ addMouseListeners: false });
-    expect(wrapper.find('nav').props().onFocus).toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  it('should spread extra props on the outermost element', () => {
+    render(<SideNav aria-label="test" data-testid="test" />);
+    expect(screen.getByRole('navigation')).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 
-  it('if both addFocusListeners and addMouseListeners are specified as false, no mouse or focus listener props are added', () => {
-    wrapper = mount(<SideNav {...mockProps} />);
-    wrapper.setProps({ addFocusListeners: false, addMouseListeners: false });
-    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
-    expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  it('should support a `ref` on the element with role="navigation"', () => {
+    const ref = jest.fn();
+    render(<SideNav aria-label="test" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(screen.getByRole('navigation'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js b/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
index 32502c17de01..4c9ae735b470 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
@@ -5,21 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavDetails from '../SideNavDetails';
 
 describe('SideNavDetails', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      title: 'foo',
-    };
+  it('should support rendering a title through `title`', () => {
+    const { container } = render(<SideNavDetails title="test" />);
+    expect(container.firstChild).toHaveTextContent('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SideNavDetails {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavDetails className="test" title="test" />
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
index 5047a4241e42..c200bd417b73 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
@@ -5,34 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavFooter from '../SideNavFooter';
 
 describe('SideNavFooter', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      assistiveText: 'open',
-      expanded: false,
-      onToggle: jest.fn(),
-    };
+  it('should support labeling a rendered <button> through assistiveText', () => {
+    render(
+      <SideNavFooter
+        assistiveText="test"
+        expanded={false}
+        onToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('test');
   });
 
-  it('should render', () => {
-    const closed = mount(<SideNavFooter {...mockProps} />);
-    expect(closed).toMatchSnapshot();
-
-    const open = mount(
-      <SideNavFooter {...mockProps} assistiveText="close" isExpanded />
+  it('should call `onToggle` when a user interacts with the toggle', () => {
+    const onToggle = jest.fn();
+    render(
+      <SideNavFooter
+        assistiveText="test"
+        expanded={false}
+        onToggle={onToggle}
+      />
     );
-    expect(open).toMatchSnapshot();
+    userEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalled();
   });
 
-  it('should call `onToggle` when clicked', () => {
-    const wrapper = mount(<SideNavFooter {...mockProps} />);
-    wrapper.find('button').simulate('click');
-    expect(mockProps.onToggle).toHaveBeenCalledTimes(1);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavFooter
+        assistiveText="test"
+        className="test"
+        expanded={false}
+        onToggle={jest.fn()}
+      />
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js b/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
index 31235580b74f..42fd46e37212 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
@@ -5,22 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavHeader from '../SideNavHeader';
 
 describe('SideNavHeader', () => {
-  let mockProps;
+  it('should render a <header> element', () => {
+    const { container } = render(<SideNavHeader renderIcon={() => <svg />} />);
+    expect(container.firstChild.tagName).toBe('HEADER');
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      renderIcon: () => <div>mock icon</div>,
-      children: <span>foo</span>,
-    };
+  it('should support a custom icon through `renderIcon`', () => {
+    const CustomIcon = jest.fn(() => <svg data-testid="test" />);
+    render(<SideNavHeader renderIcon={CustomIcon} />);
+    expect(CustomIcon).toHaveBeenCalled();
+    expect(screen.getByTestId('test')).toBeInTheDocument();
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SideNavHeader {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavHeader className="test" renderIcon={() => <svg />} />
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavIcon-test.js b/packages/react/src/components/UIShell/__tests__/SideNavIcon-test.js
index f9242421e2b3..5b1fc22a8bf6 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavIcon-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavIcon-test.js
@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavIcon from '../SideNavIcon';
 
 describe('SideNavIcon', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: <span>foo</span>,
-      small: false,
-    };
+  it('should set the small class when `small` is passed', () => {
+    const { container } = render(
+      <SideNavIcon small>
+        <svg />
+      </SideNavIcon>
+    );
+    expect(container.firstChild).toHaveClass('cds--side-nav__icon--small');
   });
 
-  it('should render', () => {
-    const regular = mount(<SideNavIcon {...mockProps} />);
-    expect(regular).toMatchSnapshot();
-    const small = mount(<SideNavIcon {...mockProps} small />);
-    expect(small).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavIcon className="test">
+        <svg />
+      </SideNavIcon>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js b/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js
index cc955159b410..1fa92a0cfa75 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js
@@ -5,39 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavItem from '../SideNavItem';
 
-const prefix = 'cds';
-
 describe('SideNavItem', () => {
-  let mockProps, wrapper;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: <span>foo</span>,
-    };
-  });
-
-  afterEach(() => {
-    wrapper && wrapper.unmount();
-  });
-
-  it('should render', () => {
-    wrapper = mount(<SideNavItem {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should set the large class when `large` is true', () => {
+    const { container } = render(<SideNavItem large>test</SideNavItem>);
+    expect(container.firstChild).toHaveClass('cds--side-nav__item--large');
   });
 
-  it('should include a css class to render the large variant is large prop is set', () => {
-    wrapper = mount(<SideNavItem {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(false);
-    wrapper.setProps({ large: true });
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(true);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavItem className="test">test</SideNavItem>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js b/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
index cdf18dda93f4..261d86c0ab66 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
@@ -5,22 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { SideNavItems, SideNavItem } from '../';
 
 describe('SideNavItems', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: <SideNavItem>test</SideNavItem>,
-    };
-  });
-
-  it('should render', () => {
-    const wrapper = mount(<SideNavItems {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavItems className="test">
+        <SideNavItem>test</SideNavItem>
+      </SideNavItems>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js b/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js
index e94e0b46c2d0..f881c35408f4 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js
@@ -5,43 +5,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavLink from '../SideNavLink';
 
-const prefix = 'cds';
-
 describe('SideNavLink', () => {
-  let mockProps, wrapper;
+  it('should set the current class when `isActive` is true', () => {
+    render(
+      <SideNavLink href="/" isActive>
+        test
+      </SideNavLink>
+    );
+    expect(screen.getByRole('link')).toHaveClass(
+      'cds--side-nav__link--current'
+    );
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: 'link',
-      icon: <div>icon</div>,
-      isActive: false,
-    };
+  it('should support a custom icon through `renderIcon`', () => {
+    const CustomIcon = jest.fn(() => {
+      return <svg data-testid="custom-icon" />;
+    });
+    render(
+      <SideNavLink href="/" renderIcon={CustomIcon}>
+        test
+      </SideNavLink>
+    );
+    expect(CustomIcon).toHaveBeenCalled();
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
   });
 
-  afterEach(() => {
-    wrapper && wrapper.unmount();
+  it('should support a custom `className` prop on the element with role="link"', () => {
+    render(
+      <SideNavLink href="/" className="test">
+        test
+      </SideNavLink>
+    );
+    expect(screen.getByRole('link')).toHaveClass('test');
   });
 
-  it('should render', () => {
-    const inactive = mount(<SideNavLink {...mockProps} />);
-    expect(inactive).toMatchSnapshot();
-    const active = mount(<SideNavLink {...mockProps} isActive />);
-    expect(active).toMatchSnapshot();
+  it('should spread extra props on the element with role="link"', () => {
+    render(
+      <SideNavLink href="/" data-testid="test">
+        test
+      </SideNavLink>
+    );
+    expect(screen.getByRole('link')).toHaveAttribute('data-testid', 'test');
   });
 
-  it('should include a css class to render the large variant is large prop is set', () => {
-    wrapper = mount(<SideNavLink {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(false);
-    wrapper.setProps({ large: true });
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(true);
+  it('should set a `ref` on the element with role="link"', () => {
+    const ref = jest.fn();
+    render(
+      <SideNavLink href="/" ref={ref}>
+        test
+      </SideNavLink>
+    );
+    expect(ref).toHaveBeenCalledWith(screen.getByRole('link'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavLinkText-test.js b/packages/react/src/components/UIShell/__tests__/SideNavLinkText-test.js
index 28c8a09b70a5..f96bbc9a6ddd 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavLinkText-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavLinkText-test.js
@@ -5,22 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavLinkText from '../SideNavLinkText';
 
 describe('SideNavLinkText', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: 'text',
-    };
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavLinkText className="test">test</SideNavLinkText>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SideNavLinkText {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <SideNavLinkText data-testid="test">test</SideNavLinkText>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
index 383b5c927a04..6b1de2aadc65 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
@@ -5,110 +5,97 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
-import { SideNavMenu } from '../SideNavMenu';
-import { SideNavMenuItem } from '../';
-
-const prefix = 'cds';
+import { SideNavMenu, SideNavMenuItem } from '../';
 
 describe('SideNavMenu', () => {
-  let mockProps, wrapper;
-
-  beforeEach(() => {
-    mockProps = {
-      buttonRef: jest.fn(),
-      className: 'custom-classname',
-      children: 'text',
-      renderIcon: () => <div>icon</div>,
-      isActive: false,
-      title: 'title',
-    };
-  });
-
-  afterEach(() => {
-    wrapper && wrapper.unmount();
+  it('should be expanded by default if `defaultExpanded` is true', () => {
+    render(
+      <SideNavMenu defaultExpanded title="test-title">
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('should render', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should set the active class if `isActive` is true and the component has an active child', () => {
+    const { container } = render(
+      <SideNavMenu isActive title="test-title">
+        <SideNavMenuItem isActive>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(container.firstChild).toHaveClass('cds--side-nav__item--active');
   });
 
-  it('should expand the menu when the button ref is clicked', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(wrapper.state('isExpanded')).toBe(false);
-    expect(mockProps.buttonRef).toHaveBeenCalledTimes(1);
-    wrapper.find('button').simulate('click');
-    expect(wrapper.state('isExpanded')).toBe(true);
+  it('should set the large class if `large` is true', () => {
+    const { container } = render(
+      <SideNavMenu large title="test-title">
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(container.firstChild).toHaveClass('cds--side-nav__item--large');
   });
 
-  it('should collapse the menu when the Esc key is pressed', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} defaultExpanded={true} />);
-    expect(wrapper.state('isExpanded')).toBe(true);
-    wrapper.simulate('keydown', {
-      key: 'Escape',
-      keyCode: 27,
-      which: 27,
+  it('should support rendering an icon through `renderIcon`', () => {
+    const CustomIcon = jest.fn(() => {
+      return <svg data-testid="test-icon" />;
     });
-    expect(wrapper.state('isExpanded')).toBe(false);
+    render(
+      <SideNavMenu title="test-title" renderIcon={CustomIcon}>
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(CustomIcon).toHaveBeenCalled();
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
   });
 
-  it('should reset expanded state if the isSideNavExpanded prop is false', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(wrapper.state('isExpanded')).toBe(false);
-    expect(wrapper.state('wasPreviouslyExpanded')).toBe(false);
-    wrapper.setState({ isExpanded: true });
-    expect(wrapper.state('isExpanded')).toBe(true);
-    expect(wrapper.state('wasPreviouslyExpanded')).toBe(false);
-    // set the prop to false. This should force isExpanded from true to false, and update wasPreviouslyExpanded to true
-    wrapper.setProps({ isSideNavExpanded: false });
-    expect(wrapper.state('isExpanded')).toBe(false);
-    expect(wrapper.state('wasPreviouslyExpanded')).toBe(true);
-  });
+  it('should toggle the menu on click', () => {
+    render(
+      <SideNavMenu title="test-title">
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(screen.getByRole('button')).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
 
-  it('should reset expanded state if the SideNav was collapsed/expanded', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    wrapper.setState({ isExpanded: false, wasPreviouslyExpanded: true });
-    // set the prop to false. This should force isExpanded from true to false, and update wasPreviouslyExpanded to true
-    wrapper.setProps({ isSideNavExpanded: true });
-    expect(wrapper.state('isExpanded')).toBe(true);
-    expect(wrapper.state('wasPreviouslyExpanded')).toBe(false);
+    userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('should add the correct active class if a child is active', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(false);
-    // add a (single) child which is active
-    wrapper.setProps({
-      children: <SideNavMenuItem isActive={true}>Test</SideNavMenuItem>,
-    });
-    expect(
-      wrapper.find('li').at(0).hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(true);
-    wrapper.setProps({
-      children: [
-        <SideNavMenuItem key="first">entry one</SideNavMenuItem>,
-        <SideNavMenuItem key="second" aria-current="page">
-          entry two
-        </SideNavMenuItem>,
-      ],
-    });
-    expect(
-      wrapper.find('li').at(0).hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(true);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavMenu className="test" title="test-title">
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should include a css class to render the large variant is large prop is set', () => {
-    wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(false);
-    wrapper.setProps({ large: true });
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(true);
+  it('should support a `ref` on the <button> element', () => {
+    const ref = jest.fn();
+    render(
+      <SideNavMenu ref={ref} title="test-title">
+        <SideNavMenuItem>a</SideNavMenuItem>
+        <SideNavMenuItem>b</SideNavMenuItem>
+        <SideNavMenuItem>c</SideNavMenuItem>
+      </SideNavMenu>
+    );
+    expect(ref).toHaveBeenCalledWith(screen.getByRole('button'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavMenuItem-test.js b/packages/react/src/components/UIShell/__tests__/SideNavMenuItem-test.js
index e54b05042fbf..8d5ed3926378 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavMenuItem-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavMenuItem-test.js
@@ -5,36 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavMenuItem from '../SideNavMenuItem';
 
 describe('SideNavMenuItem', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: 'link',
-      isActive: false,
-      href: '#',
-      ref: jest.fn(),
-    };
+  it('should set the current class when `isActive` is true', () => {
+    render(
+      <SideNavMenuItem data-testid="test" isActive>
+        test
+      </SideNavMenuItem>
+    );
+    expect(screen.getByTestId('test')).toHaveClass(
+      'cds--side-nav__link--current'
+    );
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SideNavMenuItem {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
-    expect(mockProps.ref).toHaveBeenCalledTimes(1);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavMenuItem className="test">test</SideNavMenuItem>
+    );
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render active styles with `isActive` or `aria-current="page"`', () => {
-    const activeProp = mount(<SideNavMenuItem {...mockProps} isActive />);
-    expect(activeProp).toMatchSnapshot();
+  it('should spread extra props on the <a> element', () => {
+    render(
+      <SideNavMenuItem data-testid="test" href="/">
+        test
+      </SideNavMenuItem>
+    );
+    expect(screen.getByRole('link')).toHaveAttribute('data-testid', 'test');
+  });
 
-    const ariaProp = mount(
-      <SideNavMenuItem {...mockProps} aria-current="page" />
+  it('should support a `ref` on the <a> element', () => {
+    const ref = jest.fn();
+    render(
+      <SideNavMenuItem ref={ref} href="/">
+        test
+      </SideNavMenuItem>
     );
-    expect(ariaProp).toMatchSnapshot();
+    expect(ref).toHaveBeenCalledWith(screen.getByRole('link'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js b/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
index a351e055c951..45f2bab11c9d 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
@@ -5,35 +5,68 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
 import SideNavSwitcher from '../SideNavSwitcher';
 
 describe('SideNavSwitcher', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      labelText: 'label',
-      ref: jest.fn(),
-      onChange: jest.fn(),
-      options: ['Option 1', 'Option 2', 'Option 3'],
-    };
+  it('should label the <select> through `labelText`', () => {
+    render(
+      <SideNavSwitcher
+        labelText="test"
+        options={['Option 1', 'Option 2', 'Option 3']}
+      />
+    );
+    expect(screen.getByRole('combobox')).toEqual(screen.getByLabelText('test'));
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SideNavSwitcher {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should call `onChange` when the value of the <select> changes', () => {
+    const onChange = jest.fn();
+    render(
+      <SideNavSwitcher
+        labelText="test"
+        options={['Option 1', 'Option 2', 'Option 3']}
+        onChange={onChange}
+      />
+    );
+
+    userEvent.selectOptions(
+      screen.getByLabelText('test'),
+      screen.getByRole('option', { name: 'Option 1' })
+    );
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          value: 'Option 1',
+        }),
+      })
+    );
   });
 
-  it('should call `onChange` when an option is selected', () => {
-    const wrapper = mount(<SideNavSwitcher {...mockProps} />);
-    wrapper.find('select').simulate('change', {
-      target: {
-        value: 'Option 2',
-      },
-    });
-    expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <SideNavSwitcher
+        className="test"
+        labelText="test"
+        options={['Option 1', 'Option 2', 'Option 3']}
+      />
+    );
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should support a `ref` on the <select> element', () => {
+    const ref = jest.fn();
+    render(
+      <SideNavSwitcher
+        ref={ref}
+        labelText="test"
+        options={['Option 1', 'Option 2', 'Option 3']}
+      />
+    );
+
+    expect(ref).toHaveBeenCalledWith(screen.getByLabelText('test'));
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SkipToContent-test.js b/packages/react/src/components/UIShell/__tests__/SkipToContent-test.js
index 22e6e3dba768..98b4f80da8f8 100644
--- a/packages/react/src/components/UIShell/__tests__/SkipToContent-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SkipToContent-test.js
@@ -5,24 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import SkipToContent from '../SkipToContent';
 
 describe('SkipToContent', () => {
-  let mockProps;
+  it('should support setting the `href` of the underlying <a> element', () => {
+    render(<SkipToContent href="#test-content">test</SkipToContent>);
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#test-content');
+  });
+
+  it('should support setting the `tabIndex` of the underlying <a> element', () => {
+    render(<SkipToContent tabIndex="-1">test</SkipToContent>);
+    expect(screen.getByRole('link')).toHaveAttribute('tabIndex', '-1');
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      className: 'custom-classname',
-      children: 'Skip to main content',
-      href: '#main-content',
-      tabIndex: '0',
-    };
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<SkipToContent className="test" />);
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render', () => {
-    const wrapper = mount(<SkipToContent {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<SkipToContent data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/Header-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/Header-test.js.snap
deleted file mode 100644
index aa1f501def58..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/Header-test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header should render 1`] = `
-<Header
-  aria-label="label"
-  className="custom-class"
->
-  <header
-    aria-label="label"
-    className="cds--header custom-class"
-  />
-</Header>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
deleted file mode 100644
index bdb40d07aec1..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
+++ /dev/null
@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderGlobalAction should render 1`] = `
-<HeaderGlobalAction
-  aria-label="Accessibility label"
-  className="custom-class"
-  isActive={false}
-  onClick={[MockFunction]}
->
-  <Button
-    aria-label="Accessibility label"
-    className="custom-class cds--header__action"
-    hasIconOnly={true}
-    iconDescription="Accessibility label"
-    onClick={[MockFunction]}
-    tooltipPosition="bottom"
-    type="button"
-  >
-    <ForwardRef(IconButton)
-      align="bottom"
-      aria-describedby={null}
-      aria-label="Accessibility label"
-      aria-pressed={null}
-      className="custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only"
-      disabled={false}
-      kind="primary"
-      label="Accessibility label"
-      onClick={[Function]}
-      size="lg"
-      tabIndex={0}
-      type="button"
-    >
-      <Tooltip
-        align="bottom"
-        className="cds--icon-tooltip"
-        defaultOpen={false}
-        label="Accessibility label"
-      >
-        <Popover
-          align="bottom"
-          className="cds--tooltip cds--icon-tooltip"
-          dropShadow={false}
-          highContrast={true}
-          onKeyDown={[Function]}
-          onMouseLeave={[Function]}
-          open={false}
-        >
-          <span
-            className="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
-            onKeyDown={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <Button
-              aria-describedby={null}
-              aria-label="Accessibility label"
-              aria-labelledby="tooltip-2"
-              aria-pressed={null}
-              className="cds--btn--icon-only custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only"
-              disabled={false}
-              kind="primary"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseEnter={[Function]}
-              size="lg"
-              tabIndex={0}
-              type="button"
-            >
-              <button
-                aria-describedby={null}
-                aria-label="Accessibility label"
-                aria-labelledby="tooltip-2"
-                aria-pressed={null}
-                className="cds--btn--icon-only custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary"
-                disabled={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseEnter={[Function]}
-                tabIndex={0}
-                type="button"
-              >
-                <ForwardRef(Fade)
-                  size={32}
-                >
-                  <Icon
-                    fill="currentColor"
-                    height={32}
-                    preserveAspectRatio="xMidYMid meet"
-                    viewBox="0 0 32 32"
-                    width={32}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      fill="currentColor"
-                      focusable="false"
-                      height={32}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={32}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z"
-                      />
-                    </svg>
-                  </Icon>
-                </ForwardRef(Fade)>
-              </button>
-            </Button>
-            <ForwardRef(PopoverContent)
-              aria-hidden="true"
-              className="cds--tooltip-content"
-              id="tooltip-2"
-              role="tooltip"
-            >
-              <span
-                aria-hidden="true"
-                className="cds--popover"
-                id="tooltip-2"
-                role="tooltip"
-              >
-                <span
-                  className="cds--popover-content cds--tooltip-content"
-                >
-                  Accessibility label
-                </span>
-                <span
-                  className="cds--popover-caret"
-                />
-              </span>
-            </ForwardRef(PopoverContent)>
-          </span>
-        </Popover>
-      </Tooltip>
-    </ForwardRef(IconButton)>
-  </Button>
-</HeaderGlobalAction>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalBar-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalBar-test.js.snap
deleted file mode 100644
index bdeb698ba39b..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalBar-test.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderGlobalBar should render 1`] = `
-<HeaderGlobalBar
-  className="custom-class"
->
-  <div
-    className="cds--header__global custom-class"
-  />
-</HeaderGlobalBar>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
deleted file mode 100644
index a6f7012d9144..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
+++ /dev/null
@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderMenu should render 1`] = `
-<HeaderMenu
-  aria-label="Accessibility label"
-  className="custom-class"
-  menuLinkName="test"
-  tabIndex={-1}
->
-  <HeaderMenu
-    aria-label="Accessibility label"
-    className="custom-class"
-    focusRef={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            <a
-              aria-expanded="false"
-              aria-haspopup="menu"
-              aria-label="Accessibility label"
-              class="cds--header__menu-item cds--header__menu-title"
-              href="#"
-              tabindex="0"
-            >
-              test
-              <svg
-                aria-hidden="true"
-                class="cds--header__menu-arrow"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                preserveAspectRatio="xMidYMid meet"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                />
-              </svg>
-            </a>,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    menuLinkName="test"
-    tabIndex={-1}
-  >
-    <li
-      className="cds--header__submenu custom-class"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <a
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Accessibility label"
-        className="cds--header__menu-item cds--header__menu-title"
-        href="#"
-        onKeyDown={[Function]}
-        tabIndex={0}
-      >
-        test
-        <ForwardRef(ChevronDown)
-          className="cds--header__menu-arrow"
-        >
-          <Icon
-            className="cds--header__menu-arrow"
-            fill="currentColor"
-            height={16}
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <svg
-              aria-hidden={true}
-              className="cds--header__menu-arrow"
-              fill="currentColor"
-              focusable="false"
-              height={16}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-              />
-            </svg>
-          </Icon>
-        </ForwardRef(ChevronDown)>
-      </a>
-      <ul
-        aria-label="Accessibility label"
-        className="cds--header__menu"
-      >
-        <HeaderMenuItem
-          href="/a"
-          key=".0"
-        >
-          <li>
-            <Link
-              className="cds--header__menu-item"
-              element="a"
-              href="/a"
-              tabIndex={0}
-            >
-              <a
-                className="cds--header__menu-item"
-                href="/a"
-                tabIndex={0}
-              >
-                <span
-                  className="cds--text-truncate--end"
-                >
-                  A
-                </span>
-              </a>
-            </Link>
-          </li>
-        </HeaderMenuItem>
-        <HeaderMenuItem
-          href="/b"
-          key=".1"
-        >
-          <li>
-            <Link
-              className="cds--header__menu-item"
-              element="a"
-              href="/b"
-              tabIndex={0}
-            >
-              <a
-                className="cds--header__menu-item"
-                href="/b"
-                tabIndex={0}
-              >
-                <span
-                  className="cds--text-truncate--end"
-                >
-                  B
-                </span>
-              </a>
-            </Link>
-          </li>
-        </HeaderMenuItem>
-        <HeaderMenuItem
-          href="/c"
-          key=".2"
-        >
-          <li>
-            <Link
-              className="cds--header__menu-item"
-              element="a"
-              href="/c"
-              tabIndex={0}
-            >
-              <a
-                className="cds--header__menu-item"
-                href="/c"
-                tabIndex={0}
-              >
-                <span
-                  className="cds--text-truncate--end"
-                >
-                  C
-                </span>
-              </a>
-            </Link>
-          </li>
-        </HeaderMenuItem>
-      </ul>
-    </li>
-  </HeaderMenu>
-</HeaderMenu>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap
deleted file mode 100644
index 3143abed174d..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuButton-test.js.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderMenuButton should render 1`] = `
-<HeaderMenuButton
-  aria-label="Accessibility label"
-  className="custom-class"
-  isActive={false}
-  onClick={[MockFunction]}
->
-  <button
-    aria-label="Accessibility label"
-    className="custom-class cds--header__action cds--header__menu-trigger cds--header__menu-toggle cds--header__menu-toggle__hidden"
-    onClick={[MockFunction]}
-    title="Accessibility label"
-    type="button"
-  >
-    <ForwardRef(Menu)
-      size={20}
-    >
-      <Icon
-        fill="currentColor"
-        height={20}
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 20 20"
-        width={20}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <svg
-          aria-hidden={true}
-          fill="currentColor"
-          focusable="false"
-          height={20}
-          preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 20 20"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-          />
-        </svg>
-      </Icon>
-    </ForwardRef(Menu)>
-  </button>
-</HeaderMenuButton>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
deleted file mode 100644
index 6370fef7422b..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderMenuItem should render 1`] = `
-<HeaderMenuItem
-  className="custom-class"
-  role="none"
->
-  <li
-    className="custom-class"
-    role="none"
-  >
-    <Link
-      className="cds--header__menu-item"
-      element="a"
-      tabIndex={0}
-    >
-      <a
-        className="cds--header__menu-item"
-        tabIndex={0}
-      >
-        <span
-          className="cds--text-truncate--end"
-        >
-          Menu Item
-        </span>
-      </a>
-    </Link>
-  </li>
-</HeaderMenuItem>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderName-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderName-test.js.snap
deleted file mode 100644
index d1ac0ccb8e37..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderName-test.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HeaderName should render 1`] = `
-<HeaderName
-  className="custom-class"
-  href="/"
-  prefix="IBM"
->
-  <Link
-    className="cds--header__name custom-class"
-    element="a"
-    href="/"
-  >
-    <a
-      className="cds--header__name custom-class"
-      href="/"
-    >
-      <span
-        className="cds--header__name--prefix"
-      >
-        IBM
-      </span>
-       
-      Name
-    </a>
-  </Link>
-</HeaderName>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/Link-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/Link-test.js.snap
deleted file mode 100644
index e4cb0ca70993..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/Link-test.js.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UI Shell - Link should render 1`] = `
-<Link
-  element="a"
-  href="#"
->
-  <a
-    href="#"
-  >
-    foo
-  </a>
-</Link>
-`;
-
-exports[`UI Shell - Link should support rendering a component as the element 1`] = `
-<Link
-  element={[Function]}
-  href="#"
->
-  <mockComponent
-    href="#"
-  >
-    <a
-      href="#"
-    >
-      link
-    </a>
-  </mockComponent>
-</Link>
-`;
-
-exports[`UI Shell - Link should support rendering a string element 1`] = `
-<Link
-  element="div"
-  href="#"
->
-  <div
-    href="#"
-  >
-    foo
-  </div>
-</Link>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap
deleted file mode 100644
index 06c4240beb7b..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNav should render 1`] = `
-<SideNav
-  addFocusListeners={true}
-  addMouseListeners={true}
-  aria-label="Navigation"
-  defaultExpanded={false}
-  isChildOfHeader={true}
-  isFixedNav={false}
-  isPersistent={true}
->
-  <div
-    className="cds--side-nav__overlay"
-  />
-  <nav
-    aria-hidden={false}
-    aria-label="Navigation"
-    className="cds--side-nav__navigation cds--side-nav cds--side-nav--ux"
-    onBlur={[Function]}
-    onFocus={[Function]}
-  >
-    <SideNavLink
-      element="a"
-      href="/"
-      large={false}
-    >
-      <SideNavItem
-        large={false}
-      >
-        <li
-          className="cds--side-nav__item"
-        >
-          <Link
-            className="cds--side-nav__link"
-            element="a"
-            href="/"
-          >
-            <a
-              className="cds--side-nav__link"
-              href="/"
-            >
-              <SideNavLinkText>
-                <span
-                  className="cds--side-nav__link-text"
-                >
-                  Navigation
-                </span>
-              </SideNavLinkText>
-            </a>
-          </Link>
-        </li>
-      </SideNavItem>
-    </SideNavLink>
-  </nav>
-</SideNav>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavDetails-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavDetails-test.js.snap
deleted file mode 100644
index 834fe9cc14cd..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavDetails-test.js.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavDetails should render 1`] = `
-<SideNavDetails
-  title="foo"
->
-  <div
-    className="cds--side-nav__details"
-  >
-    <h2
-      className="cds--side-nav__title"
-      title="foo"
-    >
-      foo
-    </h2>
-  </div>
-</SideNavDetails>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap
deleted file mode 100644
index a5a3f770831f..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavFooter should render 1`] = `
-<SideNavFooter
-  assistiveText="open"
-  expanded={false}
-  onToggle={[MockFunction]}
->
-  <footer
-    className="cds--side-nav__footer"
-  >
-    <button
-      className="cds--side-nav__toggle"
-      onClick={[Function]}
-      title="open"
-      type="button"
-    >
-      <div
-        className="cds--side-nav__icon"
-      >
-        <ForwardRef(ChevronRight)
-          size={20}
-        >
-          <Icon
-            fill="currentColor"
-            height={20}
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 32 32"
-            width={20}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <svg
-              aria-hidden={true}
-              fill="currentColor"
-              focusable="false"
-              height={20}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 32 32"
-              width={20}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"
-              />
-            </svg>
-          </Icon>
-        </ForwardRef(ChevronRight)>
-      </div>
-      <span
-        className="cds--assistive-text"
-      >
-        open
-      </span>
-    </button>
-  </footer>
-</SideNavFooter>
-`;
-
-exports[`SideNavFooter should render 2`] = `
-<SideNavFooter
-  assistiveText="close"
-  expanded={false}
-  isExpanded={true}
-  onToggle={[MockFunction]}
->
-  <footer
-    className="cds--side-nav__footer"
-  >
-    <button
-      className="cds--side-nav__toggle"
-      onClick={[Function]}
-      title="close"
-      type="button"
-    >
-      <div
-        className="cds--side-nav__icon"
-      >
-        <ForwardRef(ChevronRight)
-          size={20}
-        >
-          <Icon
-            fill="currentColor"
-            height={20}
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 32 32"
-            width={20}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <svg
-              aria-hidden={true}
-              fill="currentColor"
-              focusable="false"
-              height={20}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 32 32"
-              width={20}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"
-              />
-            </svg>
-          </Icon>
-        </ForwardRef(ChevronRight)>
-      </div>
-      <span
-        className="cds--assistive-text"
-      >
-        close
-      </span>
-    </button>
-  </footer>
-</SideNavFooter>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavHeader-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavHeader-test.js.snap
deleted file mode 100644
index aa5e47b93cf2..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavHeader-test.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavHeader should render 1`] = `
-<SideNavHeader
-  renderIcon={[Function]}
->
-  <header
-    className="cds--side-nav__header"
-  >
-    <SideNavIcon
-      small={false}
-    >
-      <div
-        className="cds--side-nav__icon"
-      >
-        <renderIcon>
-          <div>
-            mock icon
-          </div>
-        </renderIcon>
-      </div>
-    </SideNavIcon>
-    <span>
-      foo
-    </span>
-  </header>
-</SideNavHeader>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavIcon-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavIcon-test.js.snap
deleted file mode 100644
index 72e6e8a3befb..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavIcon-test.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavIcon should render 1`] = `
-<SideNavIcon
-  className="custom-classname"
-  small={false}
->
-  <div
-    className="cds--side-nav__icon custom-classname"
-  >
-    <span>
-      foo
-    </span>
-  </div>
-</SideNavIcon>
-`;
-
-exports[`SideNavIcon should render 2`] = `
-<SideNavIcon
-  className="custom-classname"
-  small={true}
->
-  <div
-    className="cds--side-nav__icon cds--side-nav__icon--small custom-classname"
-  >
-    <span>
-      foo
-    </span>
-  </div>
-</SideNavIcon>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItem-test.js.snap
deleted file mode 100644
index 805c5c5431c6..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItem-test.js.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavItem should render 1`] = `
-<SideNavItem
-  className="custom-classname"
->
-  <li
-    className="cds--side-nav__item custom-classname"
-  >
-    <span>
-      foo
-    </span>
-  </li>
-</SideNavItem>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap
deleted file mode 100644
index 40641b8537ce..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavItems should render 1`] = `
-<SideNavItems
-  className="custom-classname"
->
-  <ul
-    className="cds--side-nav__items custom-classname"
-  >
-    <SideNavItem
-      key=".0"
-    >
-      <li
-        className="cds--side-nav__item"
-      >
-        test
-      </li>
-    </SideNavItem>
-  </ul>
-</SideNavItems>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLink-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLink-test.js.snap
deleted file mode 100644
index b598509f545a..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLink-test.js.snap
+++ /dev/null
@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavLink should render 1`] = `
-<SideNavLink
-  className="custom-classname"
-  element="a"
-  icon={
-    <div>
-      icon
-    </div>
-  }
-  isActive={false}
-  large={false}
->
-  <SideNavItem
-    large={false}
-  >
-    <li
-      className="cds--side-nav__item"
-    >
-      <Link
-        className="cds--side-nav__link custom-classname"
-        element="a"
-        icon={
-          <div>
-            icon
-          </div>
-        }
-      >
-        <a
-          className="cds--side-nav__link custom-classname"
-          icon={
-            <div>
-              icon
-            </div>
-          }
-        >
-          <SideNavLinkText>
-            <span
-              className="cds--side-nav__link-text"
-            >
-              link
-            </span>
-          </SideNavLinkText>
-        </a>
-      </Link>
-    </li>
-  </SideNavItem>
-</SideNavLink>
-`;
-
-exports[`SideNavLink should render 2`] = `
-<SideNavLink
-  className="custom-classname"
-  element="a"
-  icon={
-    <div>
-      icon
-    </div>
-  }
-  isActive={true}
-  large={false}
->
-  <SideNavItem
-    large={false}
-  >
-    <li
-      className="cds--side-nav__item"
-    >
-      <Link
-        className="cds--side-nav__link cds--side-nav__link--current custom-classname"
-        element="a"
-        icon={
-          <div>
-            icon
-          </div>
-        }
-      >
-        <a
-          className="cds--side-nav__link cds--side-nav__link--current custom-classname"
-          icon={
-            <div>
-              icon
-            </div>
-          }
-        >
-          <SideNavLinkText>
-            <span
-              className="cds--side-nav__link-text"
-            >
-              link
-            </span>
-          </SideNavLinkText>
-        </a>
-      </Link>
-    </li>
-  </SideNavItem>
-</SideNavLink>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLinkText-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLinkText-test.js.snap
deleted file mode 100644
index f4da04e4c411..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavLinkText-test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavLinkText should render 1`] = `
-<SideNavLinkText
-  className="custom-classname"
->
-  <span
-    className="cds--side-nav__link-text custom-classname"
-  >
-    text
-  </span>
-</SideNavLinkText>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
deleted file mode 100644
index d02976324aba..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
+++ /dev/null
@@ -1,134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavMenu should render 1`] = `
-<SideNavMenu
-  buttonRef={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          <button
-            aria-expanded="false"
-            class="cds--side-nav__submenu"
-            type="button"
-          >
-            <div
-              class="cds--side-nav__icon"
-            >
-              <div>
-                icon
-              </div>
-            </div>
-            <span
-              class="cds--side-nav__submenu-title"
-            >
-              title
-            </span>
-            <div
-              class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="20"
-                preserveAspectRatio="xMidYMid meet"
-                viewBox="0 0 32 32"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                />
-              </svg>
-            </div>
-          </button>,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  className="custom-classname"
-  defaultExpanded={false}
-  isActive={false}
-  large={false}
-  renderIcon={[Function]}
-  title="title"
->
-  <li
-    className="cds--side-nav__item cds--side-nav__item--icon custom-classname"
-    onKeyDown={[Function]}
-  >
-    <button
-      aria-expanded={false}
-      className="cds--side-nav__submenu"
-      onClick={[Function]}
-      type="button"
-    >
-      <SideNavIcon
-        small={false}
-      >
-        <div
-          className="cds--side-nav__icon"
-        >
-          <renderIcon>
-            <div>
-              icon
-            </div>
-          </renderIcon>
-        </div>
-      </SideNavIcon>
-      <span
-        className="cds--side-nav__submenu-title"
-      >
-        title
-      </span>
-      <SideNavIcon
-        className="cds--side-nav__submenu-chevron"
-        small={true}
-      >
-        <div
-          className="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
-        >
-          <ForwardRef(ChevronDown)
-            size={20}
-          >
-            <Icon
-              fill="currentColor"
-              height={20}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 32 32"
-              width={20}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <svg
-                aria-hidden={true}
-                fill="currentColor"
-                focusable="false"
-                height={20}
-                preserveAspectRatio="xMidYMid meet"
-                viewBox="0 0 32 32"
-                width={20}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                />
-              </svg>
-            </Icon>
-          </ForwardRef(ChevronDown)>
-        </div>
-      </SideNavIcon>
-    </button>
-    <ul
-      className="cds--side-nav__menu"
-    >
-      text
-    </ul>
-  </li>
-</SideNavMenu>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
deleted file mode 100644
index db4d407a92e4..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
+++ /dev/null
@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavMenuItem should render 1`] = `
-<SideNavMenuItem
-  className="custom-classname"
-  href="#"
-  isActive={false}
->
-  <li
-    className="cds--side-nav__menu-item custom-classname"
-  >
-    <Link
-      className="cds--side-nav__link"
-      element="a"
-      href="#"
-    >
-      <a
-        className="cds--side-nav__link"
-        href="#"
-      >
-        <SideNavLinkText>
-          <span
-            className="cds--side-nav__link-text"
-          >
-            link
-          </span>
-        </SideNavLinkText>
-      </a>
-    </Link>
-  </li>
-</SideNavMenuItem>
-`;
-
-exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria-current="page"\` 1`] = `
-<SideNavMenuItem
-  className="custom-classname"
-  href="#"
-  isActive={true}
->
-  <li
-    className="cds--side-nav__menu-item custom-classname"
-  >
-    <Link
-      className="cds--side-nav__link cds--side-nav__link--current"
-      element="a"
-      href="#"
-    >
-      <a
-        className="cds--side-nav__link cds--side-nav__link--current"
-        href="#"
-      >
-        <SideNavLinkText>
-          <span
-            className="cds--side-nav__link-text"
-          >
-            link
-          </span>
-        </SideNavLinkText>
-      </a>
-    </Link>
-  </li>
-</SideNavMenuItem>
-`;
-
-exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria-current="page"\` 2`] = `
-<SideNavMenuItem
-  aria-current="page"
-  className="custom-classname"
-  href="#"
-  isActive={false}
->
-  <li
-    className="cds--side-nav__menu-item custom-classname"
-  >
-    <Link
-      aria-current="page"
-      className="cds--side-nav__link"
-      element="a"
-      href="#"
-    >
-      <a
-        aria-current="page"
-        className="cds--side-nav__link"
-        href="#"
-      >
-        <SideNavLinkText>
-          <span
-            className="cds--side-nav__link-text"
-          >
-            link
-          </span>
-        </SideNavLinkText>
-      </a>
-    </Link>
-  </li>
-</SideNavMenuItem>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap
deleted file mode 100644
index 60c1b32fef33..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap
+++ /dev/null
@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavSwitcher should render 1`] = `
-<SideNavSwitcher
-  className="custom-classname"
-  labelText="label"
-  onChange={[MockFunction]}
-  options={
-    Array [
-      "Option 1",
-      "Option 2",
-      "Option 3",
-    ]
-  }
->
-  <div
-    className="cds--side-nav__switcher custom-classname"
-  >
-    <label
-      className="cds--assistive-text"
-      htmlFor="side-nav-switcher"
-    >
-      label
-    </label>
-    <select
-      className="cds--side-nav__select"
-      defaultValue=""
-      id="carbon-side-nav-switcher"
-      onBlur={[MockFunction]}
-      onChange={[MockFunction]}
-    >
-      <option
-        className="cds--side-nav__option"
-        disabled={true}
-        hidden={true}
-        value=""
-      >
-        label
-      </option>
-      <option
-        className="cds--side-nav__option"
-        key="Option 1"
-        value="Option 1"
-      >
-        Option 1
-      </option>
-      <option
-        className="cds--side-nav__option"
-        key="Option 2"
-        value="Option 2"
-      >
-        Option 2
-      </option>
-      <option
-        className="cds--side-nav__option"
-        key="Option 3"
-        value="Option 3"
-      >
-        Option 3
-      </option>
-    </select>
-    <div
-      className="cds--side-nav__switcher-chevron"
-    >
-      <ForwardRef(ChevronDown)
-        size={20}
-      >
-        <Icon
-          fill="currentColor"
-          height={20}
-          preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 32 32"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <svg
-            aria-hidden={true}
-            fill="currentColor"
-            focusable="false"
-            height={20}
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 32 32"
-            width={20}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-            />
-          </svg>
-        </Icon>
-      </ForwardRef(ChevronDown)>
-    </div>
-  </div>
-</SideNavSwitcher>
-`;
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SkipToContent-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SkipToContent-test.js.snap
deleted file mode 100644
index 246cafa572ec..000000000000
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SkipToContent-test.js.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SkipToContent should render 1`] = `
-<SkipToContent
-  className="custom-classname"
-  href="#main-content"
-  tabIndex="0"
->
-  <a
-    className="cds--skip-to-content custom-classname"
-    href="#main-content"
-    tabIndex="0"
-  >
-    Skip to main content
-  </a>
-</SkipToContent>
-`;
diff --git a/packages/react/src/components/UIShell/index.js b/packages/react/src/components/UIShell/index.js
index 4a404c0cc13f..0697a6cedb6c 100644
--- a/packages/react/src/components/UIShell/index.js
+++ b/packages/react/src/components/UIShell/index.js
@@ -5,12 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
-import HeaderNavigationClassic from './HeaderNavigation';
-import { HeaderNavigation as HeaderNavigationNext } from './next';
-import SideNavMenuClassic from './SideNavMenu';
-import { SideNavMenu as SideNavMenuNext } from './next/SideNavMenu';
-
 export Content from './Content';
 
 export Header from './Header';
@@ -21,9 +15,7 @@ export HeaderMenu from './HeaderMenu';
 export HeaderMenuButton from './HeaderMenuButton';
 export HeaderMenuItem from './HeaderMenuItem';
 export HeaderName from './HeaderName';
-export const HeaderNavigation = FeatureFlags.enabled('enable-v11-release')
-  ? HeaderNavigationNext
-  : HeaderNavigationClassic;
+export { HeaderNavigation } from './HeaderNavigation';
 export HeaderPanel from './HeaderPanel';
 export HeaderSideNavItems from './HeaderSideNavItems';
 export Switcher from './Switcher';
@@ -42,8 +34,6 @@ export SideNavItem from './SideNavItem';
 export SideNavItems from './SideNavItems';
 export SideNavLink from './SideNavLink';
 export SideNavLinkText from './SideNavLinkText';
-export const SideNavMenu = FeatureFlags.enabled('enable-v11-release')
-  ? SideNavMenuNext
-  : SideNavMenuClassic;
+export { SideNavMenu } from './SideNavMenu';
 export SideNavMenuItem from './SideNavMenuItem';
 export SideNavSwitcher from './SideNavSwitcher';
diff --git a/packages/react/src/components/UIShell/next/HeaderNavigation.js b/packages/react/src/components/UIShell/next/HeaderNavigation.js
deleted file mode 100644
index 6db04f8fb1e5..000000000000
--- a/packages/react/src/components/UIShell/next/HeaderNavigation.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../../prop-types/AriaPropTypes';
-import { usePrefix } from '../../../internal/usePrefix';
-
-function HeaderNavigation(props) {
-  const {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--header__nav`, customClassName);
-  // Assign both label strategies in this option, only one should be defined
-  // so when we spread that should be the one that is applied to the node
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-  };
-
-  return (
-    <nav {...rest} {...accessibilityLabel} className={className}>
-      <ul className={`${prefix}--header__menu-bar`}>{children}</ul>
-    </nav>
-  );
-}
-
-HeaderNavigation.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu
-   */
-  ...AriaLabelPropType,
-
-  /**
-   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-   * or `HeaderMenu`
-   */
-  children: PropTypes.node,
-
-  /**
-   * Optionally provide a custom class to apply to the underlying <nav> node
-   */
-  className: PropTypes.string,
-};
-
-export { HeaderNavigation };
diff --git a/packages/react/src/components/UIShell/next/SideNavMenu.js b/packages/react/src/components/UIShell/next/SideNavMenu.js
deleted file mode 100644
index 834b02f23363..000000000000
--- a/packages/react/src/components/UIShell/next/SideNavMenu.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import SideNavIcon from '../SideNavIcon';
-import { keys, match } from '../../../internal/keyboard';
-import { usePrefix } from '../../../internal/usePrefix';
-
-const SideNavMenu = React.forwardRef(function SideNavMenu(props, ref) {
-  const {
-    className: customClassName,
-    children,
-    defaultExpanded = false,
-    isActive = false,
-    large = false,
-    renderIcon: IconElement,
-    isSideNavExpanded,
-    title,
-  } = props;
-  const prefix = usePrefix();
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
-  const className = cx({
-    [`${prefix}--side-nav__item`]: true,
-    [`${prefix}--side-nav__item--active`]:
-      isActive || (hasActiveChild(children) && !isExpanded),
-    [`${prefix}--side-nav__item--icon`]: IconElement,
-    [`${prefix}--side-nav__item--large`]: large,
-    [customClassName]: !!customClassName,
-  });
-
-  if (isSideNavExpanded === false && isExpanded === true) {
-    setIsExpanded(false);
-    setPrevExpanded(true);
-  } else if (isSideNavExpanded === true && prevExpanded === true) {
-    setIsExpanded(true);
-    setPrevExpanded(false);
-  }
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <li
-      className={className}
-      onKeyDown={(event) => {
-        if (match(event, keys.Escape)) {
-          setIsExpanded(false);
-        }
-      }}>
-      <button
-        aria-expanded={isExpanded}
-        className={`${prefix}--side-nav__submenu`}
-        onClick={() => {
-          setIsExpanded(!isExpanded);
-        }}
-        ref={ref}
-        type="button">
-        {IconElement && (
-          <SideNavIcon>
-            <IconElement />
-          </SideNavIcon>
-        )}
-        <span className={`${prefix}--side-nav__submenu-title`}>{title}</span>
-        <SideNavIcon className={`${prefix}--side-nav__submenu-chevron`} small>
-          <ChevronDown size={20} />
-        </SideNavIcon>
-      </button>
-      <ul className={`${prefix}--side-nav__menu`}>{children}</ul>
-    </li>
-  );
-});
-
-SideNavMenu.propTypes = {
-  /**
-   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
-   */
-  children: PropTypes.node,
-
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the menu should default to expanded. By default, it will
-   * be closed.
-   */
-  defaultExpanded: PropTypes.bool,
-
-  /**
-   * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
-   * considered active if one of its menu items are a link for the current
-   * page.
-   */
-  isActive: PropTypes.bool,
-
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes.bool,
-
-  /**
-   * Specify if this is a large variation of the SideNavMenu
-   */
-  large: PropTypes.bool,
-
-  /**
-   * Pass in a custom icon to render next to the `SideNavMenu` title
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * Provide the text for the overall menu name
-   */
-  title: PropTypes.string.isRequired,
-};
-
-function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
-  if (Array.isArray(children)) {
-    return children.some((child) => {
-      if (!child.props) {
-        return false;
-      }
-
-      if (child.props.isActive === true) {
-        return true;
-      }
-
-      if (child.props['aria-current']) {
-        return true;
-      }
-
-      return false;
-    });
-  }
-
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-export { SideNavMenu };
diff --git a/packages/react/src/components/UIShell/next/UIShell.mdx b/packages/react/src/components/UIShell/next/UIShell.mdx
deleted file mode 100644
index dd3c3a76f672..000000000000
--- a/packages/react/src/components/UIShell/next/UIShell.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Props } from '@storybook/addon-docs';
-
-# UIShell
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell)
-&nbsp;|&nbsp;
-[Usage guidelines](https://www.carbondesignsystem.com/components/UI-shell-header/usage)
-&nbsp;|&nbsp;
-[Accessibility](https://www.carbondesignsystem.com/components/UI-shell-header/accessibility)
-
-## Table of Contents
-
-## Overview
-
-## Component API
-
-<Props />
-
-## Feedback
-
-Help us improve this component by providing feedback, asking questions on Slack,
-or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/UIShell/UIShell.mdx).
diff --git a/packages/react/src/components/UIShell/next/__tests__/SideNavMenu-test.js b/packages/react/src/components/UIShell/next/__tests__/SideNavMenu-test.js
deleted file mode 100644
index 42602dd3c69b..000000000000
--- a/packages/react/src/components/UIShell/next/__tests__/SideNavMenu-test.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { mount } from 'enzyme';
-import { SideNavMenu } from '../SideNavMenu';
-import { SideNavMenuItem } from '../../';
-
-const prefix = 'cds';
-
-describe('SideNavMenu', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      ref: jest.fn(),
-      className: 'custom-classname',
-      children: <span data-testid="children">test</span>,
-      renderIcon: () => <div>icon</div>,
-      isActive: false,
-      title: 'title',
-    };
-  });
-
-  it('should render', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should expand the menu when the button ref is clicked', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} />);
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(false);
-    expect(mockProps.ref).toHaveBeenCalledTimes(1);
-
-    wrapper.find('button').simulate('click');
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(true);
-  });
-
-  it('should collapse the menu when the Esc key is pressed', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} defaultExpanded />);
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(true);
-
-    wrapper.simulate('keydown', {
-      key: 'Escape',
-      keyCode: 27,
-      which: 27,
-    });
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(false);
-  });
-
-  it('should reset expanded state if the isSideNavExpanded prop is false', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} />);
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(false);
-    wrapper.find('button').simulate('click');
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(true);
-
-    // set the prop to false. This should force isExpanded from true to false, and update wasPreviouslyExpanded to true
-    wrapper.setProps({ isSideNavExpanded: false });
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(false);
-  });
-
-  it('should reset expanded state if the SideNav was collapsed/expanded', () => {
-    const wrapper = mount(
-      <SideNavMenu {...mockProps} defaultExpanded isSideNavExpanded={false} />
-    );
-
-    // set the prop to false. This should force isExpanded from true to false, and update wasPreviouslyExpanded to true
-    wrapper.setProps({ isSideNavExpanded: true });
-
-    expect(wrapper.find('button').prop('aria-expanded')).toBe(true);
-  });
-
-  it('should add the correct active class if a child is active', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(false);
-    // add a (single) child which is active
-    wrapper.setProps({
-      children: <SideNavMenuItem isActive={true}>Test</SideNavMenuItem>,
-    });
-    expect(
-      wrapper.find('li').at(0).hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(true);
-    wrapper.setProps({
-      children: [
-        <SideNavMenuItem key="first">entry one</SideNavMenuItem>,
-        <SideNavMenuItem key="second" aria-current="page">
-          entry two
-        </SideNavMenuItem>,
-      ],
-    });
-    expect(
-      wrapper.find('li').at(0).hasClass(`${prefix}--side-nav__item--active`)
-    ).toBe(true);
-  });
-
-  it('should include a css class to render the large variant is large prop is set', () => {
-    const wrapper = mount(<SideNavMenu {...mockProps} />);
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(false);
-    wrapper.setProps({ large: true });
-    expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
-    ).toBe(true);
-  });
-});
diff --git a/packages/react/src/components/UIShell/next/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/next/__tests__/__snapshots__/SideNavMenu-test.js.snap
deleted file mode 100644
index 644ebd5f9145..000000000000
--- a/packages/react/src/components/UIShell/next/__tests__/__snapshots__/SideNavMenu-test.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SideNavMenu should render 1`] = `
-<ForwardRef(SideNavMenu)
-  className="custom-classname"
-  isActive={false}
-  renderIcon={[Function]}
-  title="title"
->
-  <li
-    className="cds--side-nav__item cds--side-nav__item--icon custom-classname"
-    onKeyDown={[Function]}
-  >
-    <button
-      aria-expanded={false}
-      className="cds--side-nav__submenu"
-      onClick={[Function]}
-      type="button"
-    >
-      <SideNavIcon
-        small={false}
-      >
-        <div
-          className="cds--side-nav__icon"
-        >
-          <renderIcon>
-            <div>
-              icon
-            </div>
-          </renderIcon>
-        </div>
-      </SideNavIcon>
-      <span
-        className="cds--side-nav__submenu-title"
-      >
-        title
-      </span>
-      <SideNavIcon
-        className="cds--side-nav__submenu-chevron"
-        small={true}
-      >
-        <div
-          className="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
-        >
-          <ForwardRef(ChevronDown)
-            size={20}
-          >
-            <Icon
-              fill="currentColor"
-              height={20}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 32 32"
-              width={20}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <svg
-                aria-hidden={true}
-                fill="currentColor"
-                focusable="false"
-                height={20}
-                preserveAspectRatio="xMidYMid meet"
-                viewBox="0 0 32 32"
-                width={20}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                />
-              </svg>
-            </Icon>
-          </ForwardRef(ChevronDown)>
-        </div>
-      </SideNavIcon>
-    </button>
-    <ul
-      className="cds--side-nav__menu"
-    >
-      <span
-        data-testid="children"
-      >
-        test
-      </span>
-    </ul>
-  </li>
-</ForwardRef(SideNavMenu)>
-`;
diff --git a/packages/react/src/components/UIShell/next/index.js b/packages/react/src/components/UIShell/next/index.js
deleted file mode 100644
index 5b08f5fc926f..000000000000
--- a/packages/react/src/components/UIShell/next/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { HeaderNavigation } from './HeaderNavigation';
-export { SideNavMenu } from './SideNavMenu';