import { Meta, Story, Canvas, Title, ArgsTable, Source } from '@storybook/addon-docs';
import { Grid, GridItem } from '@lendi/ui/Layout';
import * as stories from './Grid.stories.tsx';

import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Layout/Grid`} component={Grid} />

<Title>Grid</Title>

Our grid system uses a container and columns to layout and align content. It’s built using flexbox and is fully responsive, with a small screens first sizing system.

We are adopting a responsive grid system, it consists of 12 column for desktop, and 4 columns for mobile.

The breakpoint where the amount of columns change from 4 to 12 is 576px. See usage example below:

## Usage

<Source language='tsx' dark={true} code={`import { Grid, GridItem } from '@lendi/ui/Layout';`} />

## Default settings

When no column widths are specified the GridItem component will render columns at 100% width.

<Canvas withSource="open">
  <Story name="Default size" story={stories.DefaultGrid} />
</Canvas>

## Responsive grids

The GridItem lets you specify column widths across 5 breakpoint sizes (xs, sm, md, lg, xl). For every breakpoint, you can specify the amount of columns to span.

Smallest screen sizes default to 100%, but if this needs changing we have 4 columns to choose from with xs prop.

Setting only the xs prop will persist the amount of columns across all breakpoints untill another breakpoint is added.

<Canvas>
  <Story name="Responsive Grid" story={stories.SimpleGridExample} />
</Canvas>

## Auto width columns

Alternately, set the prop to `<GridItem sm="auto" />` if you want the width of the column to be the width of its content.

<Canvas>
  <Story name="Auto width columns" story={stories.AutoWidthGridExample} />
</Canvas>

## Grid inside grid
No reason why you can't use grid inside grid :D
<Canvas>
  <Story name="Grid inside grid" story={stories.GridInsideGrid} />
</Canvas>

## Example layout using Grid component
<Canvas>
  <Story name="Grid page layout" story={stories.ComplexLayoutExample} />
</Canvas>


## Props

### Grid
This component handles flex and all it's alignment properties.
<ArgsTable />

### GridItem
This component is responsible for setting the column widths. It is based on a 12 column grid and we pass column count to GridItem props.
We've used a simple and commonly used props system which most developers will recognise.

We have purposefully kept this simple. Should any further styling be required for individual items we've allowed the classNames prop.
<ArgsTable components={{'GridItem': GridItem }}/>