@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.
137 lines (135 loc) • 4.67 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import Grid from "../utils/Grid";
import { LAYOUT_SETTINGS } from "./consts";
const getChildrenProps = (type, key) => {
if (LAYOUT_SETTINGS[type].layoutColumns && LAYOUT_SETTINGS[type].layoutColumns[key]) {
return 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
} = LAYOUT_SETTINGS[type];
return /*#__PURE__*/React.createElement(Grid, _extends({}, 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
});
}));
};
export default Layout;
export { default as LayoutColumn } from "./LayoutColumn";