@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 (93 loc) • 3.86 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 = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("../utils/layout/consts");
var _tailwind = require("../common/tailwind");
/**
* @orbit-doc-start
* README
* ----------
* # LinkList
*
* To implement LinkList component into your project you'll need to add the import:
*
* ```jsx
* import LinkList from "@kiwicom/orbit-components/lib/LinkList";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <LinkList direction="row">
* <TextLink type="secondary">Flights</TextLink>
* <TextLink type="secondary">Flights</TextLink>
* <TextLink type="secondary">Flights</TextLink>
* <TextLink type="secondary">Flights</TextLink>
* </LinkList>
* ```
*
* ## Props
*
* Table below contains all types of the props available in LinkList component.
*
* | Name | Type | Default | Description |
* | :----------- | :-------------------- | :--------- | :----------------------------------------------------------------- |
* | **children** | `React.Node` | | The content of the LinkList |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for `LinkList` |
* | direction | [`enum`](#enum) | `"column"` | The size of the LinkList. |
* | indent | `boolean` | | Indenting LinkList item |
* | spacing | [`spacing`](#spacing) | `"400"` | The spacing between LinkList children. |
* | useMargin | `boolean` | `false` | If `true` will use `margin` for spacing, if `false` will use `gap` |
*
* ### enum
*
* | direction |
* | :--------- |
* | `"row"` |
* | `"column"` |
*
* ### spacing
*
* | name | size on `992px - ∞` |
* | :------- | :------------------ |
* | `"none"` | `null` |
* | `"50"` | `2px` |
* | `"100"` | `4px` |
* | `"150"` | `6px` |
* | `"200"` | `8px` |
* | `"300"` | `12px` |
* | `"400"` | `16px` |
* | `"500"` | `20px` |
* | `"600"` | `24px` |
* | `"800"` | `32px` |
* | `"1000"` | `40px` |
* | `"1200"` | `48px` |
* | `"1600"` | `64px` |
*
*
* @orbit-doc-end
*/
const LinkList = ({
direction = "column",
indent,
legacy,
useMargin = legacy,
spacing = _consts.SPACINGS.FOUR_HUNDRED,
children,
dataTest
}) => /*#__PURE__*/React.createElement("ul", {
"data-test": dataTest,
className: (0, _clsx.default)("flex", "w-full", "m-0", "list-none", "text-normal", indent && "ps-100 p-0", direction && (0, _tailwind.getDirectionClasses)(direction), spacing && (0, _tailwind.getSpacingClasses)(spacing, undefined, direction, useMargin))
}, React.Children.map(children, item => {
if (! /*#__PURE__*/React.isValidElement(item)) return null;
return /*#__PURE__*/React.createElement("li", {
className: (0, _clsx.default)("[&_.orbit-text-link]:no-underline", direction === "column" && "tb:[&_.orbit-text-link]:w-auto w-full [&_.orbit-text-link]:w-full")
}, item);
}));
var _default = exports.default = LinkList;