@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.
102 lines (101 loc) • 3.69 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import useRandomId from "../../hooks/useRandomId";
import { ELEMENT_OPTIONS } from "../../Heading/consts";
import Header from "../components/Header";
import Expandable from "./components/Expandable";
import handleKeyDown from "../../utils/handleKeyDown";
export default function CardSection({
title,
titleAs = 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 = useRandomId();
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: cx("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 ? handleKeyDown(onClick) : undefined
}, (title != null || header != null) && expandable && /*#__PURE__*/React.createElement("div", {
role: "button",
className: cx("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: handleKeyDown(handleClick),
tabIndex: 0
}, /*#__PURE__*/React.createElement(Header, {
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, {
title: title,
titleAs: titleAs,
description: description,
expandable: expandable,
header: header,
expanded: opened,
actions: actions,
isSection: true
})), children && expandable && /*#__PURE__*/React.createElement(Expandable, {
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: cx("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))
);
}