@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.
71 lines (70 loc) • 2.21 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import ChevronForward from "../../icons/ChevronForward";
const Component = ({
href,
onClick,
component: Comp,
children,
...props
}) => {
const isClickable = onClick != null || href != null;
if (!isClickable) return /*#__PURE__*/React.createElement("div", props, children);
if (Comp != null) return /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
onClick: onClick,
href: href
}), children);
if (href == null) return /*#__PURE__*/React.createElement("button", _extends({
type: "button"
}, props, {
onClick: onClick
}), children);
return /*#__PURE__*/React.createElement("a", _extends({
href: href,
onClick: onClick
}, props), children);
};
const BreadcrumbsItem = ({
active = false,
children,
dataTest,
onClick,
href,
contentKey,
component,
id,
...props
}) => {
return /*#__PURE__*/React.createElement("li", {
"data-test": dataTest,
"aria-current": active ? "page" : undefined,
itemProp: "itemListElement",
itemScope: true,
itemType: "http://schema.org/ListItem",
className: "flex items-center"
}, /*#__PURE__*/React.createElement(Component, _extends({
href: href,
component: component,
onClick: onClick,
itemScope: true,
itemType: "http://schema.org/WebPage",
itemProp: "item",
itemID: id ?? href
}, props, {
className: cx("text-ink-dark", active ? "font-bold" : "font-medium", (onClick != null || href != null) && [active ? "no-underline" : "underline", "cursor-pointer", "border-none", "p-0", "outline-offset-1", "duration-fast transition-colors ease-in-out", "hover:no-underline", "hover:text-product-normal-hover"])
}), /*#__PURE__*/React.createElement("span", {
itemProp: "name"
}, children)), /*#__PURE__*/React.createElement("meta", {
itemProp: "position",
content: String(contentKey)
}), !active && /*#__PURE__*/React.createElement(ChevronForward, {
ariaHidden: true,
reverseOnRtl: true,
size: "small",
color: "tertiary",
className: "mx-xxs my-0"
}));
};
export default BreadcrumbsItem;