optimizely-oui/src/components/Toolbar/index.js

Optimizely's Component Library.

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

import ToolbarButton from "./ToolbarButton";
import ToolbarLink from "./ToolbarLink";

const Left = props => {
    return <div className="toolbar__left">{props.children}</div>;
};

Left.propTypes = {
    children: PropTypes.node.isRequired,
};

const Right = props => {
    return <div className="toolbar__right">{props.children}</div>;
};

Right.propTypes = {
    children: PropTypes.node.isRequired,
};

/**
 *
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */

const Toolbar = ({
    children,
    className,
    isBottomToolbar,
    testSection,
    toolbarStyle,
    ...props
}) => {
    const toolbarContentClasses = classNames({
        toolbar__content: true,
        "toolbar__content--bare": toolbarStyle.includes("bare"),
        "toolbar__content--tight": toolbarStyle.includes("tight"),
        "background--white": isBottomToolbar,
        "border--top": isBottomToolbar,
        "no-border--bottom": isBottomToolbar || toolbarStyle.includes("bare"),
        "hard--left": isBottomToolbar,
    }, className);

    return (
        <div data-oui-component={true} className={classNames("toolbar", className)} data-test-section={testSection} {...props}>
            <div className={toolbarContentClasses}>{children}</div>
        </div>
    );
};

Toolbar.defaultProps = {
    isBottomToolbar: false,
    toolbarStyle: [],
};

Toolbar.propTypes = {
    /** Items to render for the toolbar */
    children: PropTypes.node.isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    /** Whether this toolbar sits at the bottom of a page */
    isBottomToolbar: PropTypes.bool,
    /** Hook to uze for automated testing */
    testSection: PropTypes.string,
    /** The style to use for this toolbar */
    toolbarStyle: PropTypes.arrayOf(PropTypes.oneOf(["bare", "tight"])),
};

Toolbar.Button = ToolbarButton;
Toolbar.Link = ToolbarLink;
Toolbar.Right = Right;
Toolbar.Left = Left;

export default Toolbar;