@kiwicom/orbit-components/es/Card/CardSection/components/SectionContent.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled, { css } from "styled-components";
import transition from "../../../utils/transition";
import defaultTheme from "../../../defaultTheme";
import Slide from "../../../utils/Slide";
import mq from "../../../utils/mediaQuery";
import useBoundingRect from "../../../hooks/useBoundingRect";
const StyledCardSectionContent = styled.div.withConfig({
  displayName: "SectionContent__StyledCardSectionContent",
  componentId: "sc-1a373hk-0"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";width:100%;border-top:", ";padding-top:", ";transition:", ";", ""], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme,
  expanded,
  noSeparator
}) => expanded && !noSeparator ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
  hasPaddingTop,
  theme
}) => hasPaddingTop && theme.orbit.spaceMedium, transition(["padding", "border-top"], "fast", "linear"), mq.largeMobile(css(["padding-top:", ";"], ({
  theme,
  hasPaddingTop
}) => hasPaddingTop && theme.orbit.spaceLarge))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCardSectionContent.defaultProps = {
  theme: defaultTheme
};

const SectionContent = ({
  expandable,
  expanded,
  children,
  noSeparator,
  hasPaddingTop,
  slideID,
  labelID
}) => {
  const [{
    height
  }, ref] = useBoundingRect({
    height: expanded ? null : 0
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, expandable ? /*#__PURE__*/React.createElement(Slide, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement(StyledCardSectionContent, {
    noSeparator: noSeparator,
    ref: ref,
    expanded: expanded,
    hasPaddingTop: hasPaddingTop,
    expandable: expandable
  }, children)) : /*#__PURE__*/React.createElement(StyledCardSectionContent, {
    ref: ref,
    hasPaddingTop: hasPaddingTop
  }, children));
};

export default SectionContent;