optimizely-oui/src/components/BlockList/Category/index.js

Optimizely's Component Library.

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

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

const Category = ({
    children,
    className,
    header,
    testSection,
    ...props
}) => (
    <li className={classNames("oui-block-list__category", className)} data-test-section={testSection} {...props}>
        {header && (
            <div
                className="oui-block-list__category__name soft-half--ends soft--sides"
                style={{ wordBreak: "break-word" }}
            >
                {header}
            </div>
        )}
        {children && <ul>{children}</ul>}
    </li>
);

Category.propTypes = {
    /** Items that appears within the category */
    children: PropTypes.node.isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    /** Node or component that appears above the `children` */
    header: PropTypes.node,
    /** Hook for automated JavaScript tests */
    testSection: PropTypes.string,
};

Category.displayName = "BlockList.Category";

export default Category;