ContextualBox.js

import React from 'react'
import { has } from 'lodash'
import styled from 'styled-components'
import { Icon, H3 } from '@pubsweet/ui'
import { override, th } from '@pubsweet/ui-toolkit'

import Accordion from './pending/Accordion'
import ControlledAccordion from './pending/ControlledAccordion'

const CustomHeader = ({
  label,
  toggle,
  expanded,
  transparent,
  rightChildren,
  ...props
}) => (
  <Header
    expanded={expanded}
    hasChildren={rightChildren}
    onClick={toggle}
    transparent={transparent}
  >
    <div>
      <Icon secondary size={2}>
        {expanded ? 'minus' : 'plus'}
      </Icon>
      <H3>{label}</H3>
    </div>
    {typeof rightChildren === 'function'
      ? rightChildren({ ...props, expanded, transparent })
      : rightChildren}
  </Header>
)

const ContextualBox = ({ label, children, rightChildren, ...props }) =>
  has(props, 'expanded') ? (
    <ControlledAccordion
      header={CustomHeader}
      label={label}
      rightChildren={rightChildren}
      {...props}
    >
      {children}
    </ControlledAccordion>
  ) : (
    <Accordion
      header={CustomHeader}
      label={label}
      rightChildren={rightChildren}
      {...props}
    >
      {children}
    </Accordion>
  )

export default ContextualBox

// #region styles
const Header = styled.div.attrs({
  'data-test-id': props => props['data-test-id'] || 'accordion-header',
})`
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: ${props =>
    props.hasChildren ? 'space-between' : 'flex-start'};
  ${override('ui.Accordion.Header')};

  ${H3} {
    margin: ${th('gridUnit')} 0;
  }

  & div {
    align-items: center;
    display: flex;
  }
`
// #endregion