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

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

# Grid - Col API

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

## Import

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

## Usage

<Canvas withSource="open">
  <Story name="usage">
    <Col xs={{ span: '3', offset: '1' }}>.ods-col-3 .ods-offset-1</Col>
  </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-col                            | Styles applied to the root element when no breakpoint is passed.      |
| .ods-col-[auto,1..12]               | Sets the width content at xs or all breakpoints.                      |
| .ods-col-[sm,md,lg,xl]-[auto,1..12] | Sets the width content until the specified breakpoint.                |
| .ods-offset-[1..11]                 | Increases the left margin of a column for xs or all breakpoints.      |
| .ods-offset-[sm,md,lg,xl]-[0..11]   | Increases the left margin of a column until the specified breakpoint. |

- _Set the column value (for any breakpoint size) to "auto" to size columns based on the natural width of their content._

- _Offsetting by the width of an entire row isn't possible_

- _In addition to column clearing at responsive breakpoints, you may need to reset offsets (e.g., .ods-offset-md-0)_

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/Col.tsx) for more detail.
