optimizely-oui/src/components/ListGroup/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}
 */

export const ListGroup = ({ children, className, subtitle, testSection, title, ...props }) => {
    return (
        <div
            className={classNames("oui-listgroup flex soft--top soft--bottom border--bottom", className)}
            data-test-section={testSection}
            {...props}
        >
            <div className="width--1-4">
                <div className="zeta muted weight--normal"></div>
                <div className="subhead force-break">{title}</div>
                <div className="micro muted push-half--ends">{subtitle}</div>
            </div>
            <div className="group flex--1 soft--left">{children}</div>
        </div>
    );
};
ListGroup.propTypes = {
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    subtitle: PropTypes.string,
    testSection: PropTypes.string,
    title: PropTypes.string,
};
ListGroup.defaultProps = {
    subtitle: "",
    testSection: "",
    title: "",
};

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

export const ListGroupItem = ({ children, className, density, testSection, ...props }) => {
    let classes = classNames(
        {
            listgroup__item: true,
            "border--bottom": true,
            "soft--bottom soft--top": density === "tight",
            "soft-double--bottom soft-double--top": density === "loose",
        },
        className
    );

    return (
        <div className={classes} data-test-section={testSection} {...props}>
            {children}
        </div>
    );
};
ListGroupItem.propTypes = {
    children: PropTypes.node.isRequired,
    /** CSS class names. */
    className: PropTypes.string,
    density: PropTypes.oneOf(["tight", "loose"]),
    testSection: PropTypes.string,
};

ListGroupItem.defaultProps = {
    density: "loose",
};

ListGroup.Item = ListGroupItem;

export default ListGroup;