@kiwicom/orbit-components/es/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.

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import ChevronForward from "../../icons/ChevronForward";
const StyledBreadcrumbsItem = styled.li.withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItem",
  componentId: "sc-1jvc6cf-0"
})(["display:flex;align-items:center;"]);
const StyledBreadcrumbsItemAnchor = styled(({
  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
}) => css(["font-weight:", ";color:", ";text-decoration:", ";", ";"], $active ? theme.orbit.fontWeightBold : theme.orbit.fontWeightMedium, theme.orbit.paletteInkDark, isClickable && !$active ? "underline" : "none", isClickable && 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
};
const StyledBreadcrumbsItemIcon = styled(ChevronForward).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemIcon",
  componentId: "sc-1jvc6cf-2"
})(["", ""], ({
  theme
}) => css(["margin:0 ", ";"], theme.orbit.spaceXXSmall));
StyledBreadcrumbsItemIcon.defaultProps = {
  theme: defaultTheme
};
const DefaultComponent = props =>
// @ts-expect-error TODO
// eslint-disable-next-line jsx-a11y/anchor-has-content
props.onClick && !props.href ? /*#__PURE__*/React.createElement("button", _extends({}, 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, _extends({
    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"
  }));
};
export default BreadcrumbsItem;