@kiwicom/orbit-components/lib/deprecated/Card/CardSection/CardSectionHeader/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledCardSectionHeader = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _CardSectionContext = _interopRequireDefault(require("../CardSectionContext"));

var _index = require("../../../../Icon/index");

var _consts = require("../../../../Icon/consts");

var _defaultTheme = _interopRequireDefault(require("../../../../defaultTheme"));

var _ChevronDown = _interopRequireDefault(require("../../../../icons/ChevronDown"));

var _index2 = require("../../../../utils/rtl/index");

var _mediaQuery = _interopRequireDefault(require("../../../../utils/mediaQuery"));

var StyledCardSectionIconRight = (0, _styledComponents.default)(_ChevronDown.default).withConfig({
  displayName: "CardSectionHeader__StyledCardSectionIconRight",
  componentId: "sc-1mk9rio-0"
})(["align-self:center;transition:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.durationFast;
});
StyledCardSectionIconRight.defaultProps = {
  theme: _defaultTheme.default
};

var StyledCardSectionHeader = _styledComponents.default.div.withConfig({
  displayName: "CardSectionHeader__StyledCardSectionHeader",
  componentId: "sc-1mk9rio-1"
})(["display:flex;flex-direction:row;align-items:center;transition:margin ", " linear;cursor:", ";position:relative;min-height:", ";margin:", ";padding:", ";margin-bottom:", ";", " &:hover{background:", ";}", "{transform:", ";margin-", ":", ";}&:focus{background:", ";outline:none;}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.durationFast;
}, function (_ref3) {
  var expandable = _ref3.expandable;
  return expandable && "pointer";
}, function (_ref4) {
  var expandable = _ref4.expandable;
  return expandable && (0, _index.getSize)(_consts.ICON_SIZES.MEDIUM);
}, function (_ref5) {
  var theme = _ref5.theme;
  return "-".concat(theme.orbit.spaceMedium);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceMedium;
}, function (_ref7) {
  var expanded = _ref7.expanded;
  return expanded && 0;
}, _mediaQuery.default.desktop((0, _styledComponents.css)(["padding:", ";margin:", ";margin-bottom:", ";"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.spaceLarge;
}, function (_ref9) {
  var theme = _ref9.theme;
  return "-".concat(theme.orbit.spaceLarge);
}, function (_ref10) {
  var expanded = _ref10.expanded;
  return expanded && 0;
})), function (_ref11) {
  var theme = _ref11.theme,
      expandable = _ref11.expandable;
  return expandable && theme.orbit.paletteWhiteHover;
}, StyledCardSectionIconRight, function (_ref12) {
  var expanded = _ref12.expanded;
  return expanded && "rotate(-180deg)";
}, _index2.left, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.spaceMedium;
}, function (_ref14) {
  var theme = _ref14.theme,
      expandable = _ref14.expandable;
  return expandable && theme.orbit.paletteWhiteHover;
});

exports.StyledCardSectionHeader = StyledCardSectionHeader;
StyledCardSectionHeader.defaultProps = {
  theme: _defaultTheme.default
};

var StyledCardSectionButtons = _styledComponents.default.div.withConfig({
  displayName: "CardSectionHeader__StyledCardSectionButtons",
  componentId: "sc-1mk9rio-2"
})(["margin-", ":", ";"], _index2.left, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.spaceLarge;
});

StyledCardSectionButtons.defaultProps = {
  theme: _defaultTheme.default
};

var StyledCardSectionHeaderContent = _styledComponents.default.div.withConfig({
  displayName: "CardSectionHeader__StyledCardSectionHeaderContent",
  componentId: "sc-1mk9rio-3"
})(["flex:1;"]);

StyledCardSectionHeaderContent.defaultProps = {
  theme: _defaultTheme.default
};

var CardSectionHeader = function CardSectionHeader(_ref16) {
  var children = _ref16.children,
      actions = _ref16.actions;
  return /*#__PURE__*/React.createElement(_CardSectionContext.default.Consumer, null, function (_ref17) {
    var expandable = _ref17.expandable,
        expanded = _ref17.expanded,
        handleToggleSection = _ref17.handleToggleSection,
        onKeyDownHandler = _ref17.onKeyDownHandler;
    return /*#__PURE__*/React.createElement(StyledCardSectionHeader, {
      expandable: expandable,
      expanded: expanded,
      onClick: expandable && handleToggleSection,
      "aria-expanded": expandable && expanded,
      role: expandable && "button",
      tabIndex: expandable && "0",
      onKeyDown: onKeyDownHandler
    }, /*#__PURE__*/React.createElement(StyledCardSectionHeaderContent, {
      expandable: expandable
    }, children), actions && /*#__PURE__*/React.createElement(StyledCardSectionButtons, null, actions), !actions && expandable && /*#__PURE__*/React.createElement(StyledCardSectionIconRight, {
      size: "medium",
      color: "secondary"
    }));
  });
};

var _default = CardSectionHeader;
exports.default = _default;