optimizely-oui/src/components/ManagerSideNav/NavList/index.js

Optimizely's Component Library.

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

const NavList = ({
    children,
    className,
    label,
    popover,
    rightLabel,
    testSection,
    ...props
}) => (
    <nav className={classNames("sidenav__section", className)} data-test-section={testSection} {...props}>
        {(label || rightLabel) && (
            <div className="sidenav__section__title muted">
                <h5>{label}</h5>
                {rightLabel && <h6>{rightLabel}</h6>}
                {popover}
            </div>
        )}
        <ul className="nav-list">{children}</ul>
    </nav>
);

NavList.propTypes = {
    /** Content to render within the list */
    children: PropTypes.node,
    /** CSS class names. */
    className: PropTypes.string,
    /** Label to use for this section */
    label: PropTypes.string,
    /** Popover to display next to the label */
    popover: PropTypes.bool,
    /** Optional text to display to the right of the label */
    rightLabel: PropTypes.bool,
    /** Value used for testing via data-test-section attribute */
    testSection: PropTypes.bool,
};

export default NavList;