@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.
142 lines (141 loc) • 6.62 kB
JavaScript
"use strict";
"use client";
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 _clsx = _interopRequireDefault(require("clsx"));
var _ChevronBackward = _interopRequireDefault(require("../icons/ChevronBackward"));
var _Hide = _interopRequireDefault(require("../Hide"));
var _TextLink = _interopRequireDefault(require("../TextLink"));
var _tailwind = require("../common/tailwind");
var _BreadcrumbsItem = _interopRequireDefault(require("./BreadcrumbsItem"));
exports.BreadcrumbsItem = _BreadcrumbsItem.default;
/**
* @orbit-doc-start
* README
* ----------
* # Breadcrumbs
*
* To implement the Button component into your project you'll need to add the import:
*
* ```jsx
* import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
* ```
*
* After adding import to your project you can use it simply like:
*
* ```jsx
* <Breadcrumbs>
* <BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
* </Breadcrumbs>
* ```
*
* ## Props
*
* The Table below contains all types of props available in the Breadcrumbs component.
*
* | Name | Type | Default | Description |
* | :----------- | :------------------------- | :------- | :------------------------------------------------------------------------------------------------------------------------- |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for `Breadcrumbs`. |
* | **children** | `React.Node` | | The content of the Breadcrumbs, normally [`BreadcrumbsItem`](#breadcrumbsitem). |
* | onGoBack | `event => void \| Promise` | | Callback for handling back button action. If present the back button is visible. |
* | backHref | `string` | | The location for the back button to direct to. Turns the back button into a link when present (renders as an `a` element). |
* | goBackTitle | `React.Node` | `"Back"` | Translation string for the go back link on mobile, defined when onGoBack is defined. |
* | spaceAfter | `enum` | | Additional `margin-bottom` after component. |
* | ariaLabel | `string` | | Optional prop for `aria-label`. |
*
* ### enum
*
* | spaceAfter |
* | :----------- |
* | `"none"` |
* | `"smallest"` |
* | `"small"` |
* | `"normal"` |
* | `"medium"` |
* | `"large"` |
* | `"largest"` |
*
* ## Functional specs
*
* - The last BreadcrumbsItem will have the stronger `font-weight` automatically. Also, all meta-information is automatically rendered too, so you don't have to specify it explicitly.
*
* ## Subcomponents
*
* Breadcrumbs requires one subcomponent - BreadcrumbsItem.
*
* ### BreadcrumbsItem
*
* ```jsx
* import BreadcrumbsItem from "@kiwicom/orbit-components/lib/Breadcrumbs/BreadcrumbsItem";
* ```
*
* #### Usage:
*
* ```jsx
* <BreadcrumbsItem href="https://kiwi.com">Kiwi.com</BreadcrumbsItem>
* ```
*
* #### Props
*
* The Table below contains all types of props available in BreadcrumbsItem component.
*
* | Name | Type | Default | Description |
* | :----------- | :------------------------- | :-------------- | :--------------------------------------------------- |
* | **children** | `string` | | The content of the BreadcrumbsItem. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | **href** | `string` | | The URL to link when the BreadcrumbsItem is clicked. |
* | id | `string` | | HTML `id` attribute for BreadcrumbsItem. |
* | onClick | `event => void \| Promise` | | Function for handling the onClick event. |
* | component | `string \| React.Element` | `a` or `button` | Allows to customize the element to be rendered. |
*
*
* @orbit-doc-end
*/
const Breadcrumbs = ({
children,
dataTest,
onGoBack,
goBackTitle = "Back",
spaceAfter,
backHref,
id,
ariaLabel = "Breadcrumb"
}) => {
const childEls = React.Children.toArray(children);
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Hide.default, {
on: ["smallMobile", "mediumMobile"]
}, /*#__PURE__*/React.createElement("nav", {
className: (0, _clsx.default)("font-base text-small", spaceAfter && _tailwind.spaceAfterClasses[spaceAfter]),
"aria-label": ariaLabel,
id: id,
"data-test": dataTest
}, /*#__PURE__*/React.createElement("ol", {
className: "m-0 flex list-none flex-wrap p-0",
itemScope: true,
itemType: "http://schema.org/BreadcrumbList"
}, React.Children.map(childEls, (item, key) => {
if (! /*#__PURE__*/React.isValidElement(item)) return null;
return /*#__PURE__*/React.cloneElement(item, {
active: key === React.Children.count(children) - 1,
contentKey: key + 1
});
})))), /*#__PURE__*/React.createElement(_Hide.default, {
on: ["largeMobile", "tablet", "desktop", "largeDesktop"]
}, onGoBack || Boolean(backHref) ? /*#__PURE__*/React.createElement(_TextLink.default, {
standAlone: true,
type: "secondary",
id: id,
iconLeft: /*#__PURE__*/React.createElement(_ChevronBackward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
dataTest: "BreadcrumbsBack",
onClick: onGoBack,
href: backHref
}, goBackTitle) : null));
};
var _default = exports.default = Breadcrumbs;