@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 _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["active", "component", "children", "isClickable", "theme"],
      _excluded2 = ["active", "children", "dataTest", "onClick", "href", "contentKey", "component", "id"];
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import ChevronRight from "../../icons/ChevronRight";
const StyledBreadcrumbsItem = styled.li.withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItem",
  componentId: "sc-1nqhh1p-0"
})(["display:flex;align-items:center;"]);
const StyledBreadcrumbsItemAnchor = styled((_ref) => {
  let {
    active,
    component,
    children,
    isClickable,
    theme
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  const Component = isClickable ? component : "div";
  return /*#__PURE__*/React.createElement(Component, props, children);
}).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemAnchor",
  componentId: "sc-1nqhh1p-1"
})(["", ""], ({
  theme,
  active,
  isClickable
}) => css(["font-weight:", ";color:", ";text-decoration:", ";", ";"], active ? theme.orbit.fontWeightBold : theme.orbit.fontWeightMedium, theme.orbit.paletteInkNormal, isClickable && !active ? "underline" : "none", isClickable && css(["transition:color ", " ease-in-out;cursor:pointer;&:hover,&:focus{outline:none;text-decoration:none;}&:hover{color:", ";}:focus{color:", ";}"], theme.orbit.durationFast, theme.orbit.paletteProductNormalHover, theme.orbit.paletteProductNormalActive))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledBreadcrumbsItemAnchor.defaultProps = {
  theme: defaultTheme
};
const StyledBreadcrumbsItemIcon = styled(ChevronRight).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemIcon",
  componentId: "sc-1nqhh1p-2"
})(["", ""], ({
  theme
}) => css(["margin:0 ", ";"], theme.orbit.spaceXXSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledBreadcrumbsItemIcon.defaultProps = {
  theme: defaultTheme
}; // eslint-disable-next-line jsx-a11y/anchor-has-content

const DefaultComponent = props => /*#__PURE__*/React.createElement("a", props);

const BreadcrumbsItem = (_ref2) => {
  let {
    active,
    children,
    dataTest,
    onClick,
    href,
    contentKey,
    component = DefaultComponent,
    id
  } = _ref2,
      props = _objectWithoutProperties(_ref2, _excluded2);

  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,
    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: contentKey
  }), !active && /*#__PURE__*/React.createElement(StyledBreadcrumbsItemIcon, {
    ariaHidden: true,
    reverseOnRtl: true,
    size: "small",
    color: "tertiary"
  }));
};

export default BreadcrumbsItem;