vcc-ui/_src/components/spacer/README.md

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

The spacer component creates a flexible space that expands along the major axis of its containing flex layout.

Under the hood, the spacer is simply a `<div>` with the `flex-basis` set to size relative to the baseline grid. This will allow you to create a space that will adapt vertically and horizontally in any flex-box layout.

The default space is 1x to the baseline grid. Eg. 8px if the theme baseline is 8px. Setting the size to 2 would make it 1px, set it to 0.5 would make it 4px. In accordance with the design system rules: The size must be a multiple of 0.5, we do not allow sizes like 0.3.

### Basic Example

```jsx live=true
<Flex>
	<Button>Hello</Button>
	<Spacer />
	<Button>World</Button>
</Flex>
```

### In a row

```jsx live=true
<Flex extend={{ flexDirection: "row" }}>
	<Button>Hello</Button>
	<Spacer />
	<Button>World</Button>
</Flex>
```

### Adapt size based on viewport

You can specify a media query (or use one from the theme) to control the size of the spacer for different viewports.

```jsx live=true
<Flex>
	<Button>Hello</Button>
	<Spacer size={{ default: 4, "@media (max-width: 768px)": 8 }} />
	<Button>World</Button>
</Flex>
```