UNPKG

@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.

94 lines (86 loc) 3.92 kB
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } 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-1aqqbs7-0" })(["display:flex;align-items:center;"]); const StyledBreadcrumbsItemAnchor = styled((_ref) => { let { active, component, children, isClickable, theme } = _ref, props = _objectWithoutProperties(_ref, ["active", "component", "children", "isClickable", "theme"]); const Component = isClickable ? component : "div"; return React.createElement(Component, props, children); }).withConfig({ displayName: "BreadcrumbsItem__StyledBreadcrumbsItemAnchor", componentId: "sc-1aqqbs7-1" })(["font-weight:", ";color:", ";text-decoration:none;", ";"], ({ active, theme }) => active && theme.orbit.fontWeightBold, ({ theme }) => theme.orbit.paletteInkLight, ({ isClickable }) => isClickable && css(["transition:color ", " ease-in-out;cursor:pointer;&:hover,&:focus{color:", ";outline:none;text-decoration:underline;}"], ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.paletteInkLightHover)); StyledBreadcrumbsItemAnchor.defaultProps = { theme: defaultTheme }; const StyledBreadcrumbsItemIcon = styled(ChevronRight).withConfig({ displayName: "BreadcrumbsItem__StyledBreadcrumbsItemIcon", componentId: "sc-1aqqbs7-2" })(["margin:0 ", ";"], ({ theme }) => theme.orbit.spaceXSmall); StyledBreadcrumbsItemIcon.defaultProps = { theme: defaultTheme }; // eslint-disable-next-line jsx-a11y/anchor-has-content const DefaultComponent = props => React.createElement("a", props); const BreadcrumbsItem = (_ref2) => { let { active, children, dataTest, onClick, href, contentKey, component = DefaultComponent } = _ref2, props = _objectWithoutProperties(_ref2, ["active", "children", "dataTest", "onClick", "href", "contentKey", "component"]); return React.createElement(StyledBreadcrumbsItem, { "data-test": dataTest, "aria-current": active ? "page" : undefined, property: "itemListElement", typeof: "ListItem" }, React.createElement(StyledBreadcrumbsItemAnchor, _extends({ isClickable: href || onClick, href: href, component: component, active: active, onClick: onClick, property: "item", typeof: "WebPage" }, props), React.createElement("span", { property: "name" }, children)), React.createElement("meta", { property: "position", content: contentKey }), !active && React.createElement(StyledBreadcrumbsItemIcon, { ariaHidden: true, size: "small", color: "tertiary" })); }; export default BreadcrumbsItem;