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

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

# Grid - Row API

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

## Import

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

## Usage

<Canvas withSource="open">
  <Story name="usage">
    <Row noGutters md="4">
      .ods-row .ods-no-gutters .ods-row-cols-md-4
    </Row>
  </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-row                           | Styles applied to the root element.                                                                       |
| .ods-no-gutters                    | Removes the negative margins from .ods-row and the horizontal padding from all immediate children columns |
| .ods-row-cols-[1..6]               | Sets the number of columns that best render your content and layout.                                      |
| .ods-row-cols-[sm,md,lg,xl]-[1..6] | Sets column widths in rows until the specified breakpoint.                                                |

_Whereas normal .ods-col-\* classes apply to the individual columns (e.g., .ods-col-md-4), the **row columns classes** are set on the parent .ods-row as a shortcut._

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