@kiwicom/orbit-components/lib/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";

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

var _react = _interopRequireDefault(require("react"));

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

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

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

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

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

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

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

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var StyledCardSectionIconRight = (0, _styledComponents.default)(_ChevronDown.default).withConfig({
  displayName: "CardSectionHeader__StyledCardSectionIconRight",
  componentId: "sc-1gmw3sa-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-1gmw3sa-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, _index2.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)";
}, _index3.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-1gmw3sa-2"
})(["margin-", ":", ";"], _index3.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-1gmw3sa-3"
})(["flex:1;"]);

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

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

var _default = CardSectionHeader;
exports.default = _default;