@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.
141 lines (140 loc) • 5.82 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 _mediaQuery = require("../utils/mediaQuery");
var _helpers = require("./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(_mediaQuery.QUERIES).map(viewport => {
const viewportProps = allViewportProps[viewport];
if (viewportProps == null) {
return null;
}
return (0, _helpers.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: (0, _clsx.default)("orbit-inline", className),
id: id,
"data-test": dataTest
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("flex flex-wrap", ...(0, _helpers.getTailwindClasses)(twProps), ...viewportClasses)
}, children))
);
};
var _default = exports.default = Inline;