{"size": 1841, "ext": "js", "max_stars_repo_path": "packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.js", "max_stars_repo_name": "mohofo7/orbit", "max_stars_repo_stars_event_min_datetime": "2018-03-18T08:56:19.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-21T03:51:09.000Z", "max_issues_repo_path": "packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.js", "max_issues_repo_name": "ninarazi/orbit", "max_issues_repo_issues_event_min_datetime": "2018-03-14T14:12:14.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-25T09:27:49.000Z", "max_forks_repo_path": "packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.js", "max_forks_repo_name": "ninarazi/orbit", "max_forks_repo_forks_event_min_datetime": "2018-04-04T09:42:22.000Z", "max_forks_repo_forks_event_max_datetime": "2020-08-10T09:38:32.000Z"}
{"max_stars_count": 706, "max_issues_count": 1107, "max_forks_count": 93, "avg_line_length": 25.2191780822, "max_line_length": 90, "alphanum_fraction": 0.6398696361}
// @flow
import * as React from "react";
import styled from "styled-components";

import Button from "../../../Button";
import defaultTheme from "../../../defaultTheme";
import transition from "../../../utils/transition";
import type { Globals } from "../../../common/common.js.flow";

const Wrapper = styled.div`
  display: flex;
  padding: ${({ theme, noPadding }) => !noPadding && theme.orbit.spaceLarge};
  background-color: ${({ theme }) => theme.orbit.paletteWhite};
  align-items: center;
  min-height: ${({ expanded }) => (expanded ? "19px" : "44px")};
  transition: ${transition(["min-height"], "fast", "ease-in-out")};
`;

const HeaderContent = styled.div`
  display: flex;
  flex-grow: 1;
  align-items: center;
`;

const HeaderActions = styled.div`
  display: flex;
  margin-left: ${({ theme }) => theme.orbit.spaceLarge};
`;

// $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Wrapper.defaultProps = {
  theme: defaultTheme,
};

// $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
HeaderActions.defaultProps = {
  theme: defaultTheme,
};

type Props = {|
  children: React.Node,
  expanded: boolean,
  expandable: boolean,
  onExpand?: () => void | Promise<any>,
  actions?: React.Node,
  ...Globals,
|};

const AccordionSectionHeader = ({
  children,
  actions,
  expanded,
  onExpand,
  expandable,
  dataTest,
}: Props): React.Node => (
  <Wrapper expanded={expanded} data-test={dataTest && `${dataTest}Header`}>
    <HeaderContent>{children}</HeaderContent>
    {!expanded && (
      <HeaderActions>
        {expandable &&
          (actions || (
            <Button onClick={onExpand} type="secondary">
              Open
            </Button>
          ))}
      </HeaderActions>
    )}
  </Wrapper>
);

export default AccordionSectionHeader;
