CollapsableFieldSet.jsx

import React from "react";
import { string, bool } from "prop-types";
import styled from "styled-components";
import { Collapse } from "react-collapse";

const Legend = styled.legend`
  display: flex;
  width: 100%;
  justify-content: space-between;
`;

const Title = styled.h2`
  font-weight: 500;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: auto auto;
`;

const Controls = styled.div`
  display: inline-flex;
  align-items: center;
`;

function Fieldset({ className, title, controls, collapsed, onToggleCollapsed, children }) {
  return (
    <fieldset className={className} >
      <Legend>
        <Title onClick={onToggleCollapsed}>{title}</Title>
        <Controls>{controls}</Controls>
      </Legend>
      <Collapse isOpened={!collapsed}>{children}</Collapse>
    </fieldset>
  );
}

Fieldset.propTypes = {
  className: string,
  collapsed: bool
};

Fieldset.defaultProps = {
  className: undefined,
  collapsed: false
};

export default styled(Fieldset)`
  border: 0;
  border-bottom: 1px solid ${({ theme }) => theme.table.separator};
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 2rem;
  padding-bottom: 2rem;

  ${Legend}+* {
    max-width: 70rem;
  }
`;