optimizely-oui/src/components/TabNav/Tab/index.js

Optimizely's Component Library.

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

/**
 * Individual tab component. Only meant to be used within the
 * TabNav wrapper component
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */
const Tab = ({
    children,
    className,
    isActive,
    isDisabled,
    onClick,
    tabId,
    testSection,
    ...props
}) => {
    const classes = classNames({
        "oui-tabs-nav__item": true,
        "oui-tab-disabled": isDisabled,
        "is-active": isActive,
    }, className);

    return (
        <li data-test-section={testSection} className={classes} onClick={onClick} {...props}>
            {children}
        </li>
    );
};

Tab.propTypes = {
    /** Text or element that appears within the component */
    children: PropTypes.node,
    /** CSS class names. */
    className: PropTypes.string,
    /** Should the `TabNav.Tab` visually appear to be active */
    isActive: PropTypes.bool,
    /** Boolean for whether the tab should be given the disabled class */
    isDisabled: PropTypes.bool,
    /** Function to perform when tab is clicked */
    onClick: PropTypes.func.isRequired,
    /** String to identify tab, used in conjunction with activeTab */
    tabId: PropTypes.string.isRequired,
    /** Hook for automated JavaScript tests */
    testSection: PropTypes.string,
};

Tab.displayName = "TabNav.Tab";

export default Tab;