@kiwicom/orbit-components/es/Inline/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 { QUERIES } from "../utils/mediaQuery";
import { getTailwindClasses } from "./helpers";
/**
 * @orbit-doc-start
 * README
 * ----------
 * # Inline
 *
 * To implement Inline component into your project you'll need to add the import:
 *
 * ```jsx
 * import Inline from "@kiwicom/orbit-components/lib/Inline";
 * ```
 *
 * After adding import into your project you can use it simply like:
 *
 * ```jsx
 * <Inline>Hello World!</Inline>
 * ```
 *
 * ## Props
 *
 * Table below contains all types of the props available in the Inline component.
 *
 * | Name         | Type                             | Default | Description                                                     |
 * | :----------- | :------------------------------- | :------ | :-------------------------------------------------------------- |
 * | as           | `string`                         | `"div"` | Render as element.                                              |
 * | id           | `string`                         |         | Optional id of component.                                       |
 * | className    | `string`                         |         | Optional className of component.                                |
 * | children     | `React.Node`                     |         | The children of the Inline.                                     |
 * | dataTest     | `string`                         |         | Optional prop for testing purposes.                             |
 * | spacing      | [`spacingToken`](#spacingToken)  |         | The spacing between children elements of the Inline             |
 * | align        | [`enum`](#enum)                  |         | The `align-items` of the Inline                                 |
 * | justify      | [`enum`](#enum)                  |         | The `justify-content` of the Inline                             |
 * | largeDesktop | [`MediaQueries`](#media-queries) |         | Object for setting up properties for the largeDesktop viewport. |
 * | desktop      | [`MediaQueries`](#media-queries) |         | Object for setting up properties for the desktop viewport.      |
 * | tablet       | [`MediaQueries`](#media-queries) |         | Object for setting up properties for the tablet viewport.       |
 * | largeMobile  | [`MediaQueries`](#media-queries) |         | Object for setting up properties for the largeMobile viewport.  |
 * | mediumMobile | [`MediaQueries`](#media-queries) |         | Object for setting up properties for the mediumMobile viewport. |
 *
 * ### Media Queries
 *
 * When you need to specify some different behaviour of the Inline component on different viewport, you can use properties for it.
 * There are `mediumMobile`, `largeMobile`, `tablet`, `desktop` and `largeDesktop` available and it behaves the same as [mediaQueries](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/utils/mediaQuery) functions.
 * All this properties - objects have the some own properties and none is required.
 *
 * | Name    | Type                            | Default | Description                                         |
 * | :------ | :------------------------------ | :------ | :-------------------------------------------------- |
 * | spacing | [`spacingToken`](#spacingToken) |         | The spacing between children elements of the Inline |
 * | align   | [`enum`](#enum)                 |         | The `align-items` of the Inline                     |
 * | justify | [`enum`](#enum)                 |         | The `justify-content` of the Inline                 |
 *
 * ### enum
 *
 * | justify     | align      |
 * | :---------- | :--------- |
 * | `"start"`   | `"start"`  |
 * | `"end"`     | `"end"`    |
 * | `"center"`  | `"center"` |
 * | `"between"` |            |
 * | `"around"`  |            |
 *
 * ### spacingToken
 *
 * | spacingToken |
 * | :----------- |
 * | `"none"`     |
 * | `"50"`       |
 * | `"100"`      |
 * | `"150"`      |
 * | `"200"`      |
 * | `"300"`      |
 * | `"400"`      |
 * | `"500"`      |
 * | `"600"`      |
 * | `"800"`      |
 * | `"1000"`     |
 * | `"1200"`     |
 * | `"1600"`     |
 *
 *
 * @orbit-doc-end
 */
const Inline = ({
  as: Component = "div",
  mediumMobile,
  largeMobile,
  className,
  tablet,
  desktop,
  largeDesktop,
  align,
  justify,
  spacing,
  children,
  dataTest,
  id
}) => {
  const twProps = {
    align,
    justify,
    spacing
  };
  const viewportClasses = React.useMemo(() => {
    const allViewportProps = {
      mediumMobile,
      largeMobile,
      tablet,
      desktop,
      largeDesktop
    };
    return Object.values(QUERIES).map(viewport => {
      const viewportProps = allViewportProps[viewport];
      if (viewportProps == null) {
        return null;
      }
      return getTailwindClasses(viewportProps, viewport);
    });
  }, [desktop, largeDesktop, largeMobile, mediumMobile, tablet]);
  return (
    /*#__PURE__*/
    // @ts-expect-error ts-migrate(3554) FIXME: Property 'children' does not exist on type 'IntrinsicAttributes'.ts(2322)
    React.createElement(Component, {
      className: cx("orbit-inline", className),
      id: id,
      "data-test": dataTest
    }, /*#__PURE__*/React.createElement("div", {
      className: cx("flex flex-wrap", ...getTailwindClasses(twProps), ...viewportClasses)
    }, children))
  );
};
export default Inline;