@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.
82 lines (66 loc) • 7.43 kB
Markdown
# Card
To implement Card component into your project you'll need to the import at least the Card and the [CardSection](#cardsection):
```jsx
import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
```
After adding import into your project you can use it simply like:
```jsx
<Card>
<CardSection>Hello World!</CardSection>
</Card>
```
## Props
Table below contains all types of the props available in the Card component.
| Name | Type | Default | Description |
| :---------- | :---------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actions | `React.Node` | | Optional prop for Action components in header of Card |
| children | `React.Node` | | The content of the Card. You can use only [CardSection](#cardsection) |
| dataTest | `string` | | Optional prop for testing purposes |
| id | `string` | | Set `id` for `Card` |
| description | `React.Node` | | The description of the Card |
| header | `React.Node` | | The header of the Card. Useful when you need different layout then combination of eg `title` and `description` |
| icon | `React.Node` | | Display icon on the left |
| loading | `boolean` | | If `true` `Loading` will be rendered |
| onClose | `() => void \| Promise` | | Callback that is triggered when Card is closing |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
| title | `React.Node` | | The title of the Card |
| titleAs | [`enum`](#enum) | `"h2"` | The element used for the root node of the title of Card. |
### CardSection
```jsx
import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
```
#### Usage:
```jsx
<Card>
<CardSection>Hello World!</CardSection>
</Card>
```
#### Props
| Name | Type | Default | Description |
| :-------------- | :------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actions | `React.Node` | | Actions which will be rendered on the right side |
| children | `React.Node` | | The content of the CardSection. |
| dataTest | `string` | | Optional prop for testing purposes. |
| description | `React.Node` | | The description of the CardSection |
| expandable | `boolean` | `false` | If `true`, the CardSection will be expandable. |
| expanded | `boolean` | | If you pass either `true` or `false` the CardSection component will controlled component and you will have to manage the state via `onExpand` or `onClose` |
| header | `React.Node` | | The header of the CardSection. Useful when you need different layout than combination of e.g. `title` and `description` properties. |
| icon | `React.Node` | | Displayed icon on the left side of the CardSection. |
| initialExpanded | `boolean` | `false` | Initial state of expandable CardSection when it mounts in uncontrolled variant |
| noSeparator | `Boolean` | | Optional prop to turn off Separator between `header` and `children` |
| onClick | `event => void \| Promise` | | Function for handling the onClick event. |
| |
| onClose | `() => void \| Promise` | | Callback that is triggered when section is closing |
| onExpand | `() => void \| Promise` | | Callback that is triggered when section is expanding |
| title | `React.Node` | | The title of the CardSection |
| titleAs | [`enum`](#enum) | `"h2"` | The element used for the root node of the title of CardSection. |
### enum
| titleAs |
| :------ |
| `"h1"` |
| `"h2"` |
| `"h3"` |
| `"h4"` |
| `"h5"` |
| `"h6"` |
| `"div"` |