@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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
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";
var StyledCardSectionContent = styled.div.withConfig({
  displayName: "SectionContent__StyledCardSectionContent",
  componentId: "gtsta3-0"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";width:100%;border-top:", ";padding-top:", ";transition:", ";", ""], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontFamily;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.colorTextPrimary;
}, function (_ref5) {
  var theme = _ref5.theme,
      expanded = _ref5.expanded,
      noSeparator = _ref5.noSeparator;
  return expanded && !noSeparator ? "1px solid ".concat(theme.orbit.paletteCloudNormal) : "0px solid ".concat(theme.orbit.paletteCloudNormal);
}, function (_ref6) {
  var hasPaddingTop = _ref6.hasPaddingTop,
      theme = _ref6.theme;
  return hasPaddingTop && theme.orbit.spaceMedium;
}, transition(["padding", "border-top"], "fast", "linear"), mq.largeMobile(css(["padding-top:", ";"], function (_ref7) {
  var theme = _ref7.theme,
      hasPaddingTop = _ref7.hasPaddingTop;
  return hasPaddingTop && theme.orbit.spaceLarge;
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCardSectionContent.defaultProps = {
  theme: defaultTheme
};

var SectionContent = function SectionContent(_ref8) {
  var expandable = _ref8.expandable,
      expanded = _ref8.expanded,
      children = _ref8.children,
      noSeparator = _ref8.noSeparator,
      hasPaddingTop = _ref8.hasPaddingTop,
      slideID = _ref8.slideID,
      labelID = _ref8.labelID;

  var _useBoundingRect = useBoundingRect({
    height: expanded ? null : 0
  }),
      _useBoundingRect2 = _slicedToArray(_useBoundingRect, 2),
      height = _useBoundingRect2[0].height,
      ref = _useBoundingRect2[1];

  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;