@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.
47 lines (33 loc) • 1.63 kB
Markdown
# getSpacingToken
The function `getSpacingToken` is used for additional `margin-bottom` for some components.
## Usage with styled-components
```jsx
import styled from "styled-components";
import getSpacingToken from "@kiwicom/orbit-components/lib/common/getSpacingToken";
const MyComponent = styled.div`
margin-bottom: ${getSpacingToken};
// It's not necessary do destructure props
// margin-bottom: ${() => getSpacingToken({ spaceAfter, theme })};
`;
MyComponent.defaultProps = {
theme: defaultTheme,
};
const App = () => <MyComponent spaceAfter="small" />;
```
## Parameter
This function receives one parameter - object. With usage in `styled-components` it can receive it _automatically_.
| Name | Type | Default | Description |
| :--------- | :-------------------- | :------- | :-------------------------------- |
| spaceAfter | [`enum`](#enum) | `"none"` | The value to be applied. |
| theme | `typeof defaultTheme` | | Theme object with tokens and rtl. |
> Please note that the _token value_ in the documentation may not be up to date. Check [orbit.kiwi](https://orbit.kiwi/design-tokens/).
### enum
| name | used token | token value |
| :----------- | :------------- | :---------- |
| `"none"` | | `0` |
| `"smallest"` | `spaceXXSmall` | `4px` |
| `"small"` | `spaceXSmall` | `8px` |
| `"normal"` | `spaceSmall` | `12px` |
| `"medium"` | `spaceMedium` | `16px` |
| `"large"` | `spaceLarge` | `24px` |
| `"largest"` | `spaceXLarge` | `32px` |