@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");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _ChevronRight = _interopRequireDefault(require("../../icons/ChevronRight"));

var StyledBreadcrumbsItem = _styledComponents.default.li.withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItem",
  componentId: "sc-1nqhh1p-0"
})(["display:flex;align-items:center;"]);

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

StyledBreadcrumbsItemAnchor.defaultProps = {
  theme: _defaultTheme.default
};
var StyledBreadcrumbsItemIcon = (0, _styledComponents.default)(_ChevronRight.default).withConfig({
  displayName: "BreadcrumbsItem__StyledBreadcrumbsItemIcon",
  componentId: "sc-1nqhh1p-2"
})(["margin:0 ", ";"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.spaceXXSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

var DefaultComponent = function DefaultComponent(props) {
  return /*#__PURE__*/React.createElement("a", props);
};

var BreadcrumbsItem = function BreadcrumbsItem(_ref10) {
  var active = _ref10.active,
      children = _ref10.children,
      dataTest = _ref10.dataTest,
      onClick = _ref10.onClick,
      href = _ref10.href,
      contentKey = _ref10.contentKey,
      _ref10$component = _ref10.component,
      component = _ref10$component === void 0 ? DefaultComponent : _ref10$component,
      id = _ref10.id,
      props = (0, _objectWithoutProperties2.default)(_ref10, ["active", "children", "dataTest", "onClick", "href", "contentKey", "component", "id"]);
  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,
    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"
  }));
};

var _default = BreadcrumbsItem;
exports.default = _default;