@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.
83 lines (82 loc) • 3.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.BreadcrumbsItem = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _ChevronBackward = _interopRequireDefault(require("../icons/ChevronBackward"));
var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));
var _rtl = require("../utils/rtl");
var _TextLink = _interopRequireDefault(require("../TextLink"));
var _Hide = _interopRequireDefault(require("../Hide"));
var _BreadcrumbsItem = _interopRequireDefault(require("./BreadcrumbsItem"));
exports.BreadcrumbsItem = _BreadcrumbsItem.default;
const StyledBreadcrumbs = _styledComponents.default.nav.withConfig({
displayName: "Breadcrumbs__StyledBreadcrumbs",
componentId: "sc-v7d29h-0"
})(["", ""], ({
theme
}) => (0, _styledComponents.css)(["font-family:", ";font-size:", ";margin-bottom:", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextSmall, _getSpacingToken.default));
StyledBreadcrumbs.defaultProps = {
theme: _defaultTheme.default
};
const StyledBreadcrumbsList = _styledComponents.default.ol.withConfig({
displayName: "Breadcrumbs__StyledBreadcrumbsList",
componentId: "sc-v7d29h-1"
})(["display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;"]);
const StyledBackButtonWrapper = _styledComponents.default.span.withConfig({
displayName: "Breadcrumbs__StyledBackButtonWrapper",
componentId: "sc-v7d29h-2"
})(["", ";"], ({
theme
}) => (0, _styledComponents.css)(["margin-", ":", ";"], _rtl.right, theme.orbit.spaceSmall));
StyledBackButtonWrapper.defaultProps = {
theme: _defaultTheme.default
};
const Breadcrumbs = props => {
const childEls = React.Children.toArray(props.children);
const {
children,
dataTest,
onGoBack,
goBackTitle = "Back",
spaceAfter,
backHref,
id
} = props;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Hide.default, {
on: ["smallMobile", "mediumMobile"]
}, /*#__PURE__*/React.createElement(StyledBreadcrumbs, {
"aria-label": "Breadcrumb",
id: id,
"data-test": dataTest,
spaceAfter: spaceAfter
}, /*#__PURE__*/React.createElement(StyledBreadcrumbsList, {
itemScope: true,
itemType: "http://schema.org/BreadcrumbList"
}, React.Children.map(childEls, (item, key) => {
if ( /*#__PURE__*/React.isValidElement(item)) {
return /*#__PURE__*/React.cloneElement(item, {
active: key === React.Children.count(children) - 1,
contentKey: key + 1
});
}
return null;
})))), /*#__PURE__*/React.createElement(_Hide.default, {
on: ["largeMobile", "tablet", "desktop", "largeDesktop"]
}, onGoBack || backHref ? /*#__PURE__*/React.createElement(_TextLink.default, {
standAlone: true,
type: "secondary",
id: id,
iconLeft: /*#__PURE__*/React.createElement(_ChevronBackward.default, {
reverseOnRtl: true
}),
dataTest: "BreadcrumbsBack",
onClick: onGoBack,
href: backHref
}, goBackTitle) : null));
};
var _default = Breadcrumbs;
exports.default = _default;