@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.
104 lines (103 loc) • 4.13 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.BadgeListItem = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _tailwind = require("../common/tailwind");
var _consts = require("../utils/layout/consts");
var _BadgeListItem = _interopRequireDefault(require("./BadgeListItem"));
exports.BadgeListItem = _BadgeListItem.default;
/**
* @orbit-doc-start
* README
* ----------
* # BadgeList
*
* To implement BadgeList component into your project you'll need to add the import:
*
* ```jsx
* import BadgeList, { BadgeListItem } from "@kiwicom/orbit-components/lib/BadgeList";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <BadgeList>
* <BadgeListItem icon={<Airplane />}>Lorem ipsum dolor sit amet</BadgeListItem>
* </BadgeList>
* ```
*
* ## Props
*
* Table below contains all types of the props available in BadgeList component.
*
* | Name | Type | Default | Description |
* | :-------- | :-------------------- | :------ | :----------------------------------------------------------------- |
* | children | `React.Node` | | The content of the BadgeList. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for `BadgeList` |
* | ariaLabel | `string` | | Adds aria-label to the BadgeList's `ul` element for accessibility. |
* | spacing | [`spacing`](#spacing) | `"100"` | The size of the spacing between BadgeListItems. |
*
* ### BadgeListItem
*
* | Name | Type | Default | Description |
* | :------------ | :-------------- | :---------- | :---------------------------------------------------- |
* | children | `React.Node` | | The content of the BadgeListItem. |
* | icon | `React.Node` | | The displayed icon on the left. |
* | iconLabel | `string` | | Adds aria-label to the icon for better accessibility. |
* | type | [`enum`](#enum) | `"neutral"` | The color type of the BadgeListItem. |
* | size | [`enum`](#enum) | `"small"` | The text size of the BadgeListItem. |
* | strikeThrough | `boolean` | `false` | Whether the text is striked through. |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
* ### enum
*
* | type | size |
* | :----------- | ---------- |
* | `"neutral"` | `"small"` |
* | `"info"` | `"normal"` |
* | `"success"` | |
* | `"warning"` | |
* | `"critical"` | |
*
* ### spacing
*
* | spacing values |
* | :------------- |
* | `"none"` |
* | `"reverse"` |
* | `"50"` |
* | `"100"` |
* | `"150"` |
* | `"200"` |
* | `"300"` |
* | `"400"` |
* | `"500"` |
* | `"600"` |
* | `"800"` |
* | `"1000"` |
* | `"1200"` |
* | `"1600"` |
*
*
* @orbit-doc-end
*/
const BadgeList = ({
children,
dataTest,
id,
ariaLabel,
spacing = _consts.SPACINGS.ONE_HUNDRED
}) => {
return /*#__PURE__*/React.createElement("ul", {
className: (0, _clsx.default)("orbit-badge-list m-0 flex flex-col p-0", spacing && (0, _tailwind.getSpacingClasses)(spacing, undefined, "column")),
"data-test": dataTest,
id: id,
"aria-label": ariaLabel
}, children);
};
var _default = exports.default = BadgeList;