@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.
94 lines (92 loc) • 3.36 kB
JavaScript
import 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";
const StyledCardSectionIconRight = styled(ChevronDown).withConfig({
displayName: "CardSectionHeader__StyledCardSectionIconRight",
componentId: "sc-1mk9rio-0"
})(["align-self:center;transition:", ";"], ({
theme
}) => theme.orbit.durationFast);
StyledCardSectionIconRight.defaultProps = {
theme: defaultTheme
};
export const 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;}"], ({
theme
}) => theme.orbit.durationFast, ({
expandable
}) => expandable && "pointer", ({
expandable
}) => expandable && getSize(ICON_SIZES.MEDIUM), ({
theme
}) => `-${theme.orbit.spaceMedium}`, ({
theme
}) => theme.orbit.spaceMedium, ({
expanded
}) => expanded && 0, media.desktop(css(["padding:", ";margin:", ";margin-bottom:", ";"], ({
theme
}) => theme.orbit.spaceLarge, ({
theme
}) => `-${theme.orbit.spaceLarge}`, ({
expanded
}) => expanded && 0)), ({
theme,
expandable
}) => expandable && theme.orbit.paletteWhiteHover, StyledCardSectionIconRight, ({
expanded
}) => expanded && "rotate(-180deg)", left, ({
theme
}) => theme.orbit.spaceMedium, ({
theme,
expandable
}) => expandable && theme.orbit.paletteWhiteHover);
StyledCardSectionHeader.defaultProps = {
theme: defaultTheme
};
const StyledCardSectionButtons = styled.div.withConfig({
displayName: "CardSectionHeader__StyledCardSectionButtons",
componentId: "sc-1mk9rio-2"
})(["margin-", ":", ";"], left, ({
theme
}) => theme.orbit.spaceLarge);
StyledCardSectionButtons.defaultProps = {
theme: defaultTheme
};
const StyledCardSectionHeaderContent = styled.div.withConfig({
displayName: "CardSectionHeader__StyledCardSectionHeaderContent",
componentId: "sc-1mk9rio-3"
})(["flex:1;"]);
StyledCardSectionHeaderContent.defaultProps = {
theme: defaultTheme
};
const CardSectionHeader = ({
children,
actions
}) => React.createElement(CardSectionContext.Consumer, null, ({
expandable,
expanded,
handleToggleSection,
onKeyDownHandler
}) => React.createElement(StyledCardSectionHeader, {
expandable: expandable,
expanded: expanded,
onClick: expandable && handleToggleSection,
"aria-expanded": expandable && expanded,
role: expandable && "button",
tabIndex: expandable && "0",
onKeyDown: onKeyDownHandler
}, React.createElement(StyledCardSectionHeaderContent, {
expandable: expandable
}, children), actions && React.createElement(StyledCardSectionButtons, null, actions), !actions && expandable && React.createElement(StyledCardSectionIconRight, {
size: "medium",
color: "secondary"
})));
export default CardSectionHeader;