stitch-ui/src/core/components/Collapsible.js

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import classNames from "classnames";
import FontAwesome from "react-fontawesome";

function Collapsible({ open, toggle, headerContent, children, hoverControls }) {
  return (
    <div className="collapsible">
      <div
        className={classNames("collapsible-header", {
          "collapsible-header-is-open": open
        })}
        onClick={toggle}
      >
        <div className="collapsible-header-content">
          {headerContent}
        </div>
        {hoverControls &&
          <div className="collapsible-header-controls">
            {hoverControls}
          </div>}
        <div className="collapsible-header-toggle">
          {open && <FontAwesome name="chevron-down" />}
          {!open && <FontAwesome name="chevron-up" />}
        </div>
      </div>
      <div
        className={classNames("collapsible-content", {
          "collapsible-content-is-hidden": !open
        })}
      >
        {children}
      </div>
    </div>
  );
}

export default Collapsible;