refactor(ui-shell): update ui shell tests to use testing library (#11624

) * refactor(react): move next components to stable * refactor(ui-shell): update header tests to use testing library * refactor(ui-shell): update side nav tests to use testing library * refactor(ui-shell): update ui shell tests to use testing library * test(react): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 21, 2022 · 4cb3f0e · 4cb3f0e
1 parent 82f5f0d
commit 4cb3f0e
Show file tree

Hide file tree

Showing 67 changed files with 955 additions and 3,447 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -10,15 +10,15 @@ 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,
     [`${prefix}--side-nav__icon--small`]: 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
@@ -10,23 +10,19 @@ 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,
     [`${prefix}--side-nav__item--large`]: large,
     [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
@@ -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
@@ -10,15 +10,15 @@ 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 (
     <span {...rest} className={className}>
       {children}
     </span>
   );
-};
+}
 
 SideNavLinkText.propTypes = {
   /**