@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.
143 lines (141 loc) • 5.15 kB
JavaScript
;
"use client";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.LayoutColumn = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _Grid = _interopRequireDefault(require("../utils/Grid"));
var _consts = require("./consts");
var _LayoutColumn = _interopRequireDefault(require("./LayoutColumn"));
exports.LayoutColumn = _LayoutColumn.default;
const getChildrenProps = (type, key) => {
if (_consts.LAYOUT_SETTINGS[type].layoutColumns && _consts.LAYOUT_SETTINGS[type].layoutColumns[key]) {
return _consts.LAYOUT_SETTINGS[type].layoutColumns[key];
}
return null;
};
/**
* @orbit-doc-start
* README
* ----------
* # Layout
*
* To implement the Layout component into your project you'll need to add the import:
*
* ```jsx
* import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <Layout type="MMB">
* <LayoutColumn>This is the main section.</LayoutColumn>
* </Layout>
* ```
*
* ## Props
*
* Table below contains all types of the props available in the Layout component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------------- | :------ | :------------------------------------------------------------------------------ |
* | **children** | `React.Node` | | The children of the Layout, use [`LayoutColumn`](#layoutcolumn) as top-wrapper. |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | **type** | [`enum`](#layouts) | | The type of the Layout. |
*
* ### LayoutColumn
*
* LayoutColumn component gives us a possibility how to control all accessibility and behaviour properties globally, so you don't have to worry about it.
* **If you want to use `Layout` component in your project, use `LayoutColumn` also.**
*
* Table below contains all types of the props available in the LayoutColumn component.
*
* | Name | Type | Default | Description |
* | :----------- | :----------- | :------ | :---------------------------------------------- |
* | as | `string` | `"div"` | The HTML element in which item will be rendered |
* | **children** | `React.Node` | | The children of the LayoutColumn. |
* | dataTest | `string` | | Optional prop for testing purposes. |
*
* ## Layouts
*
* For now, we are providing three global layouts that are necessary for our projects.
* There is possibility to use `Search`, `Booking` or `MMB` layout.
*
* ### Search
*
* The Search layout consist of three columns.
*
* To implement the Search layout into your project, you need to use this JSX markup:
*
* ```jsx
* import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
*
* const App = () => (
* <Layout type="Search">
* <LayoutColumn>The left SideBar for filters</LayoutColumn>
* <LayoutColumn>The main section for displaying the results</LayoutColumn>
* <LayoutColumn>The right SideBar for promotion</LayoutColumn>
* </Layout>
* );
* ```
*
* ### Booking
*
* The Booking layout consist of two columns.
*
* To implement the Booking layout into your project, you need to use this JSX markup:
*
* ```jsx
* import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
*
* const App = () => (
* <Layout type="Booking">
* <LayoutColumn>The main section for Booking form</LayoutColumn>
* <LayoutColumn>The left SideBar for displaying the summary</LayoutColumn>
* </Layout>
* );
* ```
*
* ### MMB
*
* The ManageMyBooking layout consist only of one column.
*
* To implement the MMB layout into your project, you need to use this JSX markup:
*
* ```jsx
* import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
*
* const App = () => (
* <Layout type="MMB">
* <LayoutColumn>The main section for ManageMyBooking</LayoutColumn>
* </Layout>
* );
* ```
*
*
* @orbit-doc-end
*/
const Layout = ({
children,
type,
dataTest
}) => {
// Removes unwanted props from Grid
const {
layoutColumns: _,
...props
} = _consts.LAYOUT_SETTINGS[type];
return /*#__PURE__*/React.createElement(_Grid.default, (0, _extends2.default)({}, props, {
className: "px-400 de:p-600 mx-auto my-0 box-border w-full py-0",
dataTest: dataTest
}), React.Children.map(children, (item, key) => {
return /*#__PURE__*/React.cloneElement(item, {
...getChildrenProps(type, key.toString()),
...item.props
});
}));
};
var _default = exports.default = Layout;