@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.
361 lines (360 loc) • 23.4 kB
JavaScript
"use strict";
"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 = _interopRequireDefault(require("./helpers"));
/**
* @orbit-doc-start
* README
* ----------
* # Box
*
* To implement Box component into your project you'll need to add the import:
*
* ```jsx
* import Box from "@kiwicom/orbit-components/lib/Box";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <Box>Hello World!</Box>
* ```
*
* ## Props
*
* Table below contains all types of the props available in the Box component.
*
* | Name | Type | Default | Description |
* | :----------- | :------------------------------------------------------------------- | :------ | :-------------------------------------------------------------- |
* | as | `string` | `"div"` | Render as element. |
* | className | `string` | | The optional className of Box. |
* | children | `React.Node` | | The children of the Box. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | id | `string` | | Set `id` for `Box` |
* | display | [`enum`](#enum) | | The `display` of the Box |
* | padding | [`spacingObject`](#spacingobject) \| [`spacingToken`](#spacingtoken) | | The `padding` of the Box |
* | margin | [`spacingObject`](#spacingobject) \| [`spacingToken`](#spacingtoken) | | The `margin` of the Box |
* | wrap | [`enum`](#enum) | | The `flex-wrap` of the Box |
* | shrink | `number` | | The `flex-shrink` of the Box |
* | grow | `number` | | The `flex-grow` of the Box |
* | align | [`enum`](#enum) | | The `align-items` of the Box |
* | justify | [`enum`](#enum) | | The `justify-content` of the Box |
* | direction | [`enum`](#enum) | | The `flex-direction` of the Box |
* | width | [`enum`](#enum) | | The `width` of the Box |
* | minWidth | `string` | | The `min-width` of the Box |
* | maxWidth | `string` | | The `max-width` of the Box |
* | height | [`enum`](#enum) | | The `height` of the Box |
* | maxHeight | `string` | | The `max-height` of the Box |
* | position | [`position`](#position) | | The `position` of the Box |
* | left | `string` | | The `left` of the Box |
* | zIndex | `number` | | The `z-index` of the Box |
* | top | `string` | | The `top` of the Box |
* | right | `string` | | The `right` of the Box |
* | bottom | `string` | | The `bottom` of the Box |
* | textAlign | [`textAlign`](#textAlign) | | The `text-align` of the Box |
* | elevation | [`elevation`](#elevation) | | The `box-shadow` of the Box |
* | color | `string` | | The `color` of the Box |
* | background | `string` | | The `background` of the Box |
* | borderRadius | [`borderRadius`](#borderRadius) | | The `border-radius` of the Box |
* | overflow | [`overflow`](#overflow) | | The `overflow` of the Box |
* | 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. |
* | ariaLabel | `string` | | Optional prop for setting `aria-label` attribute. |
*
* ### Media Queries
*
* When you need to specify some different behavior of the Box 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 |
* | :----------- | :------------------------------------------------------------------- | :------ | :------------------------------- |
* | padding | [`spacingObject`](#spacingobject) \| [`spacingToken`](#spacingtoken) | | The `padding` of the Box |
* | margin | [`spacingObject`](#spacingobject) \| [`spacingToken`](#spacingtoken) | | The `margin` of the Box |
* | wrap | [`enum`](#enum) | | The `flex-wrap` of the Box |
* | shrink | `number` | | The `flex-shrink` of the Box |
* | grow | `number` | | The `flex-grow` of the Box |
* | align | [`enum`](#enum) | | The `align-items` of the Box |
* | justify | [`enum`](#enum) | | The `justify-content` of the Box |
* | direction | [`enum`](#enum) | | The `flex-direction` of the Box |
* | width | [`enum`](#enum) | | The `width` of the Box |
* | maxWidth | `string` | | The `max-width` of the Box |
* | height | [`enum`](#enum) | | The `height` of the Box |
* | maxHeight | `string` | | The `max-height` of the Box |
* | position | [`position`](#position) | | The `position` of the Box |
* | left | `string` | | The `left` of the Box |
* | top | `string` | | The `top` of the Box |
* | right | `string` | | The `right` of the Box |
* | bottom | `string` | | The `bottom` of the Box |
* | textAlign | [`textAlign`](#textAlign) | | The `text-align` of the Box |
* | elevation | [`elevation`](#elevation) | | The `box-shadow` of the Box |
* | color | `string` | | The `color` of the Box |
* | background | `string` | | The `background` of the Box |
* | borderRadius | [`borderRadius`](#borderRadius) | | The `border-radius` of the Box |
* | overflow | [`overflow`](#overflow) | | The `overflow` of the Box |
*
* ### enum
*
* | display | justify | direction | align | wrap | width | height |
* | :--------------- | :---------- | :----------------- | :---------- | :--------- | :------- | :------- |
* | `"none"` | `"start"` | `"row"` | `"start"` | `"nowrap"` | `"full"` | `"full"` |
* | `"flex"` | `"end"` | `"column"` | `"end"` | `"wrap"` | `"auto"` | `"auto"` |
* | `"inline-flex"` | `"center"` | `"row-reverse"` | `"center"` | | `string` | `string` |
* | `"block"` | `"between"` | `"column-reverse"` | `"stretch"` | | | |
* | `"inline"` | `"around"` | | | | | |
* | `"inline-block"` | | | | | | |
* | `"list-item"` | | | | | | |
*
* ### position
*
* | position |
* | :----------- |
* | `"relative"` |
* | `"absolute"` |
* | `"fixed"` |
*
* ### textAlign
*
* | textAlign |
* | :--------- |
* | `"start"` |
* | `"end"` |
* | `"left"` |
* | `"center"` |
* | `"right"` |
*
* ### borderRadius
*
* | borderRadius |
* | :----------- |
* | `"full"` |
* | `"50"` |
* | `"100"` |
* | `"150"` |
* | `"200"` |
* | `"300"` |
* | `"400"` |
*
* ### overflow
*
* | overflow |
* | :---------- |
* | `"auto"` |
* | `"hidden"` |
* | `"scroll"` |
* | `"visible"` |
*
* ### elevation
*
* | elevation |
* | :---------------- |
* | `"fixed"` |
* | `"fixedReverse"` |
* | `"level1"` |
* | `"level2"` |
* | `"level3"` |
* | `"level3Reverse"` |
* | `"level4"` |
* | `"navBar"` |
*
* ### spacingObject
*
* | key | value |
* | :--------- | :------------------------------ |
* | `"top"` | [`spacingToken`](#spacingtoken) |
* | `"right"` | [`spacingToken`](#spacingtoken) |
* | `"left"` | [`spacingToken`](#spacingtoken) |
* | `"bottom"` | [`spacingToken`](#spacingtoken) |
*
* If you want to define `spacingObject`, you can define specific directions like this:
* `<Box margin={{ top: "XXSmall", bottom: "XXSmall" }} />`
*
* ### spacingToken
*
* | spacingToken |
* | :----------- |
* | `"none"` |
* | `"50"` |
* | `"100"` |
* | `"150"` |
* | `"200"` |
* | `"300"` |
* | `"400"` |
* | `"500"` |
* | `"600"` |
* | `"800"` |
* | `"1000"` |
* | `"1200"` |
* | `"1600"` |
*
*
* @orbit-doc-end
*/
const Box = ({
as: Component = "div",
id,
mediumMobile,
largeMobile,
tablet,
desktop,
largeDesktop,
children,
dataTest,
className,
display,
wrap,
direction,
position,
align,
justify,
textAlign,
elevation,
borderRadius,
overflow,
shrink,
grow,
zIndex,
width,
minWidth,
maxWidth,
height,
maxHeight,
top,
right,
bottom,
left,
color,
background,
padding,
margin,
ariaLabel,
ref
}) => {
const twProps = {
display,
wrap,
direction,
position,
align,
justify,
textAlign,
elevation,
borderRadius,
overflow,
color,
background,
padding,
margin
};
const viewportClasses = React.useMemo(() => {
const viewportSpecs = {
mediumMobile,
largeMobile,
tablet,
desktop,
largeDesktop
};
return Object.values(_mediaQuery.QUERIES).map(viewport => {
const viewportProps = viewportSpecs[viewport];
if (viewportProps == null) return null;
return (0, _helpers.default)(viewportProps, viewport);
});
}, [mediumMobile, largeMobile, tablet, desktop, largeDesktop]);
const vars = {
"--box-shrink": shrink,
"--ld-box-shrink": largeDesktop?.shrink,
"--de-box-shrink": desktop?.shrink,
"--tb-box-shrink": tablet?.shrink,
"--lm-box-shrink": largeMobile?.shrink,
"--mm-box-shrink": mediumMobile?.shrink,
"--box-grow": grow,
"--ld-box-grow": largeDesktop?.grow,
"--de-box-grow": desktop?.grow,
"--tb-box-grow": tablet?.grow,
"--lm-box-grow": largeMobile?.grow,
"--mm-box-grow": mediumMobile?.grow,
"--box-z-index": zIndex,
"--ld-box-z-index": largeDesktop?.zIndex,
"--de-box-z-index": desktop?.zIndex,
"--tb-box-z-index": tablet?.zIndex,
"--lm-box-z-index": largeMobile?.zIndex,
"--mm-box-z-index": mediumMobile?.zIndex,
"--box-width": width,
"--ld-box-width": largeDesktop?.width,
"--de-box-width": desktop?.width,
"--tb-box-width": tablet?.width,
"--lm-box-width": largeMobile?.width,
"--mm-box-width": mediumMobile?.width,
"--box-min-width": minWidth,
"--ld-box-min-width": largeDesktop?.minWidth,
"--de-box-min-width": desktop?.minWidth,
"--tb-box-min-width": tablet?.minWidth,
"--lm-box-min-width": largeMobile?.minWidth,
"--mm-box-min-width": mediumMobile?.minWidth,
"--box-max-width": maxWidth,
"--ld-box-max-width": largeDesktop?.maxWidth,
"--de-box-max-width": desktop?.maxWidth,
"--tb-box-max-width": tablet?.maxWidth,
"--lm-box-max-width": largeMobile?.maxWidth,
"--mm-box-max-width": mediumMobile?.maxWidth,
"--box-height": height,
"--ld-box-height": largeDesktop?.height,
"--de-box-height": desktop?.height,
"--tb-box-height": tablet?.height,
"--lm-box-height": largeMobile?.height,
"--mm-box-height": mediumMobile?.height,
"--box-max-height": maxHeight,
"--ld-box-max-height": largeDesktop?.maxHeight,
"--de-box-max-height": desktop?.maxHeight,
"--tb-box-max-height": tablet?.maxHeight,
"--lm-box-max-height": largeMobile?.maxHeight,
"--mm-box-max-height": mediumMobile?.maxHeight,
"--box-top": top,
"--ld-box-top": largeDesktop?.top,
"--de-box-top": desktop?.top,
"--tb-box-top": tablet?.top,
"--lm-box-top": largeMobile?.top,
"--mm-box-top": mediumMobile?.top,
"--box-right": right,
"--ld-box-right": largeDesktop?.right,
"--de-box-right": desktop?.right,
"--tb-box-right": tablet?.right,
"--lm-box-right": largeMobile?.right,
"--mm-box-right": mediumMobile?.right,
"--box-bottom": bottom,
"--ld-box-bottom": largeDesktop?.bottom,
"--de-box-bottom": desktop?.bottom,
"--tb-box-bottom": tablet?.bottom,
"--lm-box-bottom": largeMobile?.bottom,
"--mm-box-bottom": mediumMobile?.bottom,
"--box-left": left,
"--ld-box-left": largeDesktop?.left,
"--de-box-left": desktop?.left,
"--tb-box-left": tablet?.left,
"--lm-box-left": largeMobile?.left,
"--mm-box-left": mediumMobile?.left
};
const varClasses = [vars["--box-shrink"] != null && "shrink-[var(--box-shrink)]", vars["--ld-box-shrink"] != null && "ld:shrink-[var(--ld-box-shrink)]", vars["--de-box-shrink"] != null && "de:shrink-[var(--de-box-shrink)]", vars["--tb-box-shrink"] != null && "tb:shrink-[var(--tb-box-shrink)]", vars["--lm-box-shrink"] != null && "lm:shrink-[var(--lm-box-shrink)]", vars["--mm-box-shrink"] != null && "mm:shrink-[var(--mm-box-shrink)]", vars["--box-grow"] != null && "grow-[var(--box-grow)]", vars["--ld-box-grow"] != null && "ld:grow-[var(--ld-box-grow)]", vars["--de-box-grow"] != null && "de:grow-[var(--de-box-grow)]", vars["--tb-box-grow"] != null && "tb:grow-[var(--tb-box-grow)]", vars["--lm-box-grow"] != null && "lm:grow-[var(--lm-box-grow)]", vars["--mm-box-grow"] != null && "mm:grow-[var(--mm-box-grow)]", vars["--box-z-index"] != null && "z-[var(--box-z-index)]", vars["--ld-box-z-index"] != null && "ld:z-[var(--ld-box-z-index)]", vars["--de-box-z-index"] != null && "de:z-[var(--de-box-z-index)]", vars["--tb-box-z-index"] != null && "tb:z-[var(--tb-box-z-index)]", vars["--lm-box-z-index"] != null && "lm:z-[var(--lm-box-z-index)]", vars["--mm-box-z-index"] != null && "mm:z-[var(--mm-box-z-index)]", vars["--box-width"] != null && "w-[var(--box-width)]", vars["--ld-box-width"] != null && "ld:w-[var(--ld-box-width)]", vars["--de-box-width"] != null && "de:w-[var(--de-box-width)]", vars["--tb-box-width"] != null && "tb:w-[var(--tb-box-width)]", vars["--lm-box-width"] != null && "lm:w-[var(--lm-box-width)]", vars["--mm-box-width"] != null && "mm:w-[var(--mm-box-width)]", vars["--box-min-width"] != null && "min-w-[var(--box-min-width)]", vars["--ld-box-min-width"] != null && "ld:min-w-[var(--ld-box-min-width)]", vars["--de-box-min-width"] != null && "de:min-w-[var(--de-box-min-width)]", vars["--tb-box-min-width"] != null && "tb:min-w-[var(--tb-box-min-width)]", vars["--lm-box-min-width"] != null && "lm:min-w-[var(--lm-box-min-width)]", vars["--mm-box-min-width"] != null && "mm:min-w-[var(--mm-box-min-width)]", vars["--box-max-width"] != null && "max-w-[var(--box-max-width)]", vars["--ld-box-max-width"] != null && "ld:max-w-[var(--ld-box-max-width)]", vars["--de-box-max-width"] != null && "de:max-w-[var(--de-box-max-width)]", vars["--tb-box-max-width"] != null && "tb:max-w-[var(--tb-box-max-width)]", vars["--lm-box-max-width"] != null && "lm:max-w-[var(--lm-box-max-width)]", vars["--mm-box-max-width"] != null && "mm:max-w-[var(--mm-box-max-width)]", vars["--box-height"] != null && "h-[var(--box-height)]", vars["--ld-box-height"] != null && "ld:h-[var(--ld-box-height)]", vars["--de-box-height"] != null && "de:h-[var(--de-box-height)]", vars["--tb-box-height"] != null && "tb:h-[var(--tb-box-height)]", vars["--lm-box-height"] != null && "lm:h-[var(--lm-box-height)]", vars["--mm-box-height"] != null && "mm:h-[var(--mm-box-height)]", vars["--box-max-height"] != null && "max-h-[var(--box-max-height)]", vars["--ld-box-max-height"] != null && "ld:max-h-[var(--ld-box-max-height)]", vars["--de-box-max-height"] != null && "de:max-h-[var(--de-box-max-height)]", vars["--tb-box-max-height"] != null && "tb:max-h-[var(--tb-box-max-height)]", vars["--lm-box-max-height"] != null && "lm:max-h-[var(--lm-box-max-height)]", vars["--mm-box-max-height"] != null && "mm:max-h-[var(--mm-box-max-height)]", vars["--box-top"] != null && "top-[var(--box-top)]", vars["--ld-box-top"] != null && "ld:top-[var(--ld-box-top)]", vars["--de-box-top"] != null && "de:top-[var(--de-box-top)]", vars["--tb-box-top"] != null && "tb:top-[var(--tb-box-top)]", vars["--lm-box-top"] != null && "lm:top-[var(--lm-box-top)]", vars["--mm-box-top"] != null && "mm:top-[var(--mm-box-top)]", vars["--box-right"] != null && "right-[var(--box-right)]", vars["--ld-box-right"] != null && "ld:right-[var(--ld-box-right)]", vars["--de-box-right"] != null && "de:right-[var(--de-box-right)]", vars["--tb-box-right"] != null && "tb:right-[var(--tb-box-right)]", vars["--lm-box-right"] != null && "lm:right-[var(--lm-box-right)]", vars["--mm-box-right"] != null && "mm:right-[var(--mm-box-right)]", vars["--box-bottom"] != null && "bottom-[var(--box-bottom)]", vars["--ld-box-bottom"] != null && "ld:bottom-[var(--ld-box-bottom)]", vars["--de-box-bottom"] != null && "de:bottom-[var(--de-box-bottom)]", vars["--tb-box-bottom"] != null && "tb:bottom-[var(--tb-box-bottom)]", vars["--lm-box-bottom"] != null && "lm:bottom-[var(--lm-box-bottom)]", vars["--mm-box-bottom"] != null && "mm:bottom-[var(--mm-box-bottom)]", vars["--box-left"] != null && "left-[var(--box-left)]", vars["--ld-box-left"] != null && "ld:left-[var(--ld-box-left)]", vars["--de-box-left"] != null && "de:left-[var(--de-box-left)]", vars["--tb-box-left"] != null && "tb:left-[var(--tb-box-left)]", vars["--lm-box-left"] != null && "lm:left-[var(--lm-box-left)]", vars["--mm-box-left"] != null && "mm:left-[var(--mm-box-left)]"];
return (
/*#__PURE__*/
// @ts-expect-error Allow any component
React.createElement(Component, {
className: (0, _clsx.default)(className, "orbit-box font-base box-border", ...(0, _helpers.default)(twProps), ...viewportClasses, ...varClasses),
ref: ref,
id: id,
"data-test": dataTest,
style: vars,
"aria-label": ariaLabel
}, children)
);
};
var _default = exports.default = Box;