@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.
107 lines (106 loc) • 4.22 kB
JavaScript
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = CardSection;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));
var _consts = require("../../Heading/consts");
var _Header = _interopRequireDefault(require("../components/Header"));
var _Expandable = _interopRequireDefault(require("./components/Expandable"));
var _handleKeyDown = _interopRequireDefault(require("../../utils/handleKeyDown"));
function CardSection({
title,
titleAs = _consts.ELEMENT_OPTIONS.DIV,
description,
onClick,
children,
expandable = false,
expanded,
initialExpanded = false,
onClose,
header,
onExpand,
dataTest,
actions
}) {
const [opened, setOpened] = React.useState(initialExpanded);
const isControlled = expanded != null;
const isRoleButton = onClick && !expandable;
React.useEffect(() => {
if (isControlled) {
setOpened(expanded);
}
}, [isControlled, expanded]);
function handleClick() {
if (onClick) {
onClick();
}
if (!isControlled) {
setOpened(state => !state);
}
if (opened) {
onClose?.();
} else {
onExpand?.();
}
}
const slideID = (0, _useRandomId.default)();
return (
/*#__PURE__*/
// Needs to capture bubbled click events from the <button> below
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
React.createElement("div", {
className: (0, _clsx.default)("orbit-card-section", "duration-fast lm:border-x border-b transition-all ease-in-out", opened && "my-200 rounded-300 shadow-level2 [&+*]:border-t", (onClick != null || expandable && !opened) && "hover:bg-white-normal-hover cursor-pointer"),
"data-test": dataTest,
role: isRoleButton ? "button" : undefined
// See comment above
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
,
tabIndex: isRoleButton ? 0 : undefined,
onClick: isRoleButton ? onClick : undefined
// Not needed once we can use <button> or <a> like we should
,
onKeyDown: isRoleButton ? (0, _handleKeyDown.default)(onClick) : undefined
}, (title != null || header != null) && expandable && /*#__PURE__*/React.createElement("div", {
role: "button",
className: (0, _clsx.default)("p-400 lm:p-600 w-full", opened && "hover:bg-white-normal-hover hover:rounded-t-300"),
"aria-expanded": opened,
"aria-controls": slideID,
onClick: handleClick,
onKeyDown: (0, _handleKeyDown.default)(handleClick),
tabIndex: 0
}, /*#__PURE__*/React.createElement(_Header.default, {
title: title,
titleAs: titleAs,
description: description,
expandable: expandable,
header: header,
expanded: opened,
actions: actions,
isSection: true
})), (title != null || header != null) && !expandable && /*#__PURE__*/React.createElement("div", {
className: "p-400 lm:p-600 w-full"
}, /*#__PURE__*/React.createElement(_Header.default, {
title: title,
titleAs: titleAs,
description: description,
expandable: expandable,
header: header,
expanded: opened,
actions: actions,
isSection: true
})), children && expandable && /*#__PURE__*/React.createElement(_Expandable.default, {
expanded: opened,
slideID: slideID
}, /*#__PURE__*/React.createElement("div", {
className: "font-base text-normal text-primary-foreground px-400 lm:px-600 w-full leading-normal"
}, /*#__PURE__*/React.createElement("div", {
className: "py-400 lm:py-600 border-elevation-flat-border-color border-t"
}, children))), children && !expandable && /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("font-base text-normal text-primary-foreground px-400 lm:px-600 pb-400 lm:pb-600 w-full leading-normal", title == null && header == null && "pt-400 lm:pt-600")
}, children))
);
}