@kiwicom/orbit-components/lib/Breadcrumbs/BreadcrumbsItem/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _ChevronForward = _interopRequireDefault(require("../../icons/ChevronForward"));
const StyledBreadcrumbsItem = _styledComponents.default.li.withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItem",
  componentId: "sc-1jvc6cf-0"
})(["display:flex;align-items:center;"]);
const StyledBreadcrumbsItemAnchor = (0, _styledComponents.default)(({
  component,
  children,
  isClickable,
  ...props
}) => {
  const Component = isClickable ? component : "div";
  return /*#__PURE__*/React.createElement(Component, props, children);
}).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemAnchor",
  componentId: "sc-1jvc6cf-1"
})(["", ""], ({
  theme,
  $active,
  isClickable
}) => (0, _styledComponents.css)(["font-weight:", ";color:", ";text-decoration:", ";", ";"], $active ? theme.orbit.fontWeightBold : theme.orbit.fontWeightMedium, theme.orbit.paletteInkDark, isClickable && !$active ? "underline" : "none", isClickable && (0, _styledComponents.css)(["transition:color ", " ease-in-out;cursor:pointer;border:none;padding:0;outline-offset:1px;&:hover{text-decoration:none;color:", ";}"], theme.orbit.durationFast, theme.orbit.paletteProductNormalHover)));
StyledBreadcrumbsItemAnchor.defaultProps = {
  theme: _defaultTheme.default
};
const StyledBreadcrumbsItemIcon = (0, _styledComponents.default)(_ChevronForward.default).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemIcon",
  componentId: "sc-1jvc6cf-2"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["margin:0 ", ";"], theme.orbit.spaceXXSmall));
StyledBreadcrumbsItemIcon.defaultProps = {
  theme: _defaultTheme.default
};
const DefaultComponent = props =>
// @ts-expect-error TODO
// eslint-disable-next-line jsx-a11y/anchor-has-content
props.onClick && !props.href ? /*#__PURE__*/React.createElement("button", (0, _extends2.default)({}, props, {
  type: "button"
})) : /*#__PURE__*/React.createElement("a", props);
const BreadcrumbsItem = ({
  active,
  children,
  dataTest,
  onClick,
  href,
  contentKey,
  component,
  id,
  ...props
}) => {
  return /*#__PURE__*/React.createElement(StyledBreadcrumbsItem, {
    "data-test": dataTest,
    "aria-current": active ? "page" : undefined,
    itemProp: "itemListElement",
    itemScope: true,
    itemType: "http://schema.org/ListItem"
  }, /*#__PURE__*/React.createElement(StyledBreadcrumbsItemAnchor, (0, _extends2.default)({
    isClickable: href || onClick,
    href: href,
    component: component || DefaultComponent,
    $active: active,
    onClick: onClick,
    itemScope: true,
    itemType: "http://schema.org/WebPage",
    itemProp: "item",
    itemID: id || href
  }, props), /*#__PURE__*/React.createElement("span", {
    itemProp: "name"
  }, children)), /*#__PURE__*/React.createElement("meta", {
    itemProp: "position",
    content: String(contentKey)
  }), !active && /*#__PURE__*/React.createElement(StyledBreadcrumbsItemIcon, {
    ariaHidden: true,
    reverseOnRtl: true,
    size: "small",
    color: "tertiary"
  }));
};
var _default = BreadcrumbsItem;
exports.default = _default;