@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.
108 lines • 3.94 kB
TypeScript
import * as React from "react";
import type { Props } from "./types";
/**
* @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
*/
declare const Layout: ({ children, type, dataTest }: Props) => React.JSX.Element;
export default Layout;
export { default as LayoutColumn } from "./LayoutColumn";
//# sourceMappingURL=index.d.ts.map