@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.
51 lines (36 loc) • 3.13 kB
Markdown
# List
To implement List component into your project you'll need to add the import:
```jsx
import List, { ListItem } from "@kiwicom/orbit-components/lib/List";
```
After adding import into your project you can use it simply like:
```jsx
<List>
<ListItem>Hello world!</ListItem>
</List>
```
## Props
Table below contains all types of the props available in List component.
| Name | Type | Default | Description |
| :----------- | :-------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the List, normally [`ListItem`](#listitem-props). |
| dataTest | `string` | | Optional prop for testing purposes. |
| size | [`enum`](#enum) | `"normal"` | The size of the List. |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
| type | [`enum`](#enum) | `"primary"` | The color type of the List. |
### ListItem Props
Table below contains all types of the props in ListItem component.
| Name | Type | Default | Description |
| :----------- | :------------ | :-------------- | :------------------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the ListItem. |
| dataTest | `string` | | Optional prop for testing purposes. |
| icon | `React.Node` | `"CircleSmall"` | The displayed Icon or CarrierLogo component. [See Functional specs](#functional-specs) |
| label | `Translation` | | Adds a label to ListItem |
### enum
| size | type |
| :--------- | :------------ |
| `"small"` | `"primary"` |
| `"normal"` | `"secondary"` |
| `"large"` |
#### Functional specs
- You can color your icon if you pass some value into `color` or `customColor` prop of the **Icon**. Be aware of using other components, because they are not styled by default.