@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
JavaScript
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;