UNPKG

@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.

61 lines (44 loc) 2.78 kB
# PricingTable To implement PricingTable component into your project you'll need to the import at least the PricingTable and the [PricingTableItem](#pricingTableItem): ```jsx import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable"; ``` After adding import into your project you can use it simply like: ```jsx <PricingTable> <PricingTableItem> content </PricingTableItem> <PricingTableItem> content </PricingTableItem> </PricingTable> ``` ## Props Table below contains all types of the props available in the PricingTable component. | Name | Type | Default | Description | | :-------------------- | :-------------------------- | :-------------- | :------------------------------- | | children | `React.Node` | | The content of the PricingTable. [See Subcomponents](#subcomponents) | dataTest | `string` | | Optional prop for testing purposes. | defaultActiveElement | `number` | `0` | Sets default active element on mobile view --- ## Subcomponents PricingTable component needs to be used with it's subcomponent PricingTableItem ### PricingTableItem ```jsx import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable"; ``` #### Props Table below contains all types of the props in the PricingTableItem component. | Name | Type | Default | Description | | :---------------- | :--------------------- | :---------- | :------------------------------- | | action | `React$Node` | | Area for action elements, like Button. | badge | `string \| React$Node` | | Badge above the PricingTableItem, [works with Orbit Badge](../Badge/README.md) | **children** | `React.Node` | | Content of the PricingTableItem component. | dataTest | `string` | | Optional prop for testing purposes. | featureIcon | `React$Node` | | Feature Icon displayed at top of the PricingTableItem | mobileDescription | `Translation` | | Description of PricingTableItem, displayed on mobile | name | `Translation` | | Name of PricingTableItem | onClick | `() => void \| Promise`| | Function for handling the onClick event. | price | `Translation` | | Price of item | priceBadge | `React$Node` | | Badge instead of `price`, [works with Orbit Badge](../Badge/README.md)