@kiwicom/orbit-components/es/LinkList/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use client";

import * as React from "react";
import cx from "clsx";
import { SPACINGS } from "../utils/layout/consts";
import { getDirectionClasses, getSpacingClasses } from "../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 = SPACINGS.FOUR_HUNDRED,
  children,
  dataTest
}) => /*#__PURE__*/React.createElement("ul", {
  "data-test": dataTest,
  className: cx("flex", "w-full", "m-0", "list-none", "text-normal", indent && "ps-100 p-0", direction && getDirectionClasses(direction), spacing && getSpacingClasses(spacing, undefined, direction, useMargin))
}, React.Children.map(children, item => {
  if (! /*#__PURE__*/React.isValidElement(item)) return null;
  return /*#__PURE__*/React.createElement("li", {
    className: cx("[&_.orbit-text-link]:no-underline", direction === "column" && "tb:[&_.orbit-text-link]:w-auto w-full [&_.orbit-text-link]:w-full")
  }, item);
}));
export default LinkList;