@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
111 lines (109 loc) • 4.4 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import CardSectionContext from "../CardSectionContext";
import { getSize } from "../../../../Icon/index";
import { ICON_SIZES } from "../../../../Icon/consts";
import defaultTheme from "../../../../defaultTheme";
import ChevronDown from "../../../../icons/ChevronDown";
import { left } from "../../../../utils/rtl/index";
import media from "../../../../utils/mediaQuery";
var StyledCardSectionIconRight = styled(ChevronDown).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
};
export var StyledCardSectionHeader = styled.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 && getSize(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;
}, media.desktop(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)";
}, 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;
});
StyledCardSectionHeader.defaultProps = {
theme: defaultTheme
};
var StyledCardSectionButtons = styled.div.withConfig({
displayName: "CardSectionHeader__StyledCardSectionButtons",
componentId: "sc-1mk9rio-2"
})(["margin-", ":", ";"], left, function (_ref15) {
var theme = _ref15.theme;
return theme.orbit.spaceLarge;
});
StyledCardSectionButtons.defaultProps = {
theme: defaultTheme
};
var StyledCardSectionHeaderContent = styled.div.withConfig({
displayName: "CardSectionHeader__StyledCardSectionHeaderContent",
componentId: "sc-1mk9rio-3"
})(["flex:1;"]);
StyledCardSectionHeaderContent.defaultProps = {
theme: defaultTheme
};
var CardSectionHeader = function CardSectionHeader(_ref16) {
var children = _ref16.children,
actions = _ref16.actions;
return /*#__PURE__*/React.createElement(CardSectionContext.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"
}));
});
};
export default CardSectionHeader;