@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.
89 lines • 4.62 kB
TypeScript
import * as React from "react";
import type { Props } from "./types";
/**
* @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
*/
declare const Breadcrumbs: ({ children, dataTest, onGoBack, goBackTitle, spaceAfter, backHref, id, ariaLabel, }: Props) => React.JSX.Element;
export { default as BreadcrumbsItem } from "./BreadcrumbsItem";
export default Breadcrumbs;
//# sourceMappingURL=index.d.ts.map