import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Container from '../Container';

<Meta
  title="Components/Grid/Container"
  component={Container}
  parameters={{ layout: 'padded' }}
/>

# Grid - Container API

The API documentation of the Container React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Container } from '@useblu/ocean-react/Grid';
```

## Usage

<Canvas withSource="open">
  <Story name="usage">
    <Container fluid="sm">.ods-container-sm</Container>
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                 | Description                                          |
| ---------------------------- | ---------------------------------------------------- |
| .ods-container               | Sets a `max-width` at each responsive breakpoint.    |
| .ods-container-fluid         | Sets a `width: 100%` at all breakpoints.             |
| .ods-container-[sm,md,lg,xl] | Sets a `width: 100%` until the specified breakpoint. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Grid/Container.tsx) for more detail.
