import { Grid, Text } from '@pega/cosmos-react-core';
import { StyledGridContainer, StyledGridItem } from './Grid.styles';
export default {
    title: 'Core/Grid/Container',
    component: Grid,
    parameters: {
        layout: 'fullscreen'
    }
};
export const ColumnsAndRows = () => {
    return (<Grid container={{
            cols: '7rem [line1] 1fr [line2] 3fr [line3]',
            rows: 'repeat(3, 3rem) auto',
            pad: 2
        }} as={StyledGridContainer} height={20}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`colRows-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
export const Areas = () => {
    return (<Grid container={{
            cols: '5rem 1fr 3fr',
            rows: 'repeat(3, 3rem) auto',
            areas: '"sidebar header header" "sidebar . main" "sidebar . main" "sidebar footer footer"',
            pad: 2
        }} as={StyledGridContainer} height={20}>
      <Grid item={{ area: 'header' }} as={StyledGridItem}>
        <Text>Header</Text>
      </Grid>
      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>
        <Text>Side</Text>
      </Grid>
      <Grid item={{ area: 'main' }} as={StyledGridItem}>
        <Text>Main</Text>
      </Grid>
      <Grid item={{ area: 'footer' }} as={StyledGridItem}>
        <Text>Footer</Text>
      </Grid>
    </Grid>);
};
export const Template = () => {
    const rowsAndAreas = '"sidebar header header" 3rem "sidebar . main" 3rem "sidebar . main" 3rem "sidebar footer footer" auto';
    const columns = '5rem 1fr 3fr';
    return (<Grid container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }} as={StyledGridContainer} height={20}>
      <Grid item={{ area: 'header' }} as={StyledGridItem}>
        <Text>Header</Text>
      </Grid>
      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>
        <Text>Side</Text>
      </Grid>
      <Grid item={{ area: 'main' }} as={StyledGridItem}>
        <Text>Main</Text>
      </Grid>
      <Grid item={{ area: 'footer' }} as={StyledGridItem}>
        <Text>Footer</Text>
      </Grid>
    </Grid>);
};
export const GapsAndPadding = (args) => {
    return (<Grid container={{
            cols: '7rem 1fr 3fr',
            colGap: args.colGap,
            rows: 'repeat(3, 3rem) auto',
            rowGap: args.rowGap,
            pad: args.pad
        }} as={StyledGridContainer} height={20}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`colRowGap-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
GapsAndPadding.args = {
    pad: 1,
    colGap: 1,
    rowGap: 1
};
GapsAndPadding.argTypes = {
    pad: { control: { type: 'number' } },
    colGap: { control: { type: 'number' } },
    rowGap: { control: { type: 'number' } }
};
export const JustifyGridItems = (args) => {
    return (<Grid container={{
            cols: '7rem 1fr 3fr',
            rows: 'repeat(3, 3rem) auto',
            justifyItems: args.justifyItems,
            pad: 2
        }} as={StyledGridContainer} height={20}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`justifyItems-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
JustifyGridItems.args = {
    justifyItems: 'stretch'
};
JustifyGridItems.argTypes = {
    justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
};
export const JustifyGridContent = (args) => {
    return (<Grid container={{
            cols: 'repeat(3, 7rem)',
            rows: 'repeat(4, 3rem)',
            justifyContent: args.justifyContent,
            pad: 2
        }} as={StyledGridContainer}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`justifyContent-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
JustifyGridContent.args = {
    justifyContent: 'start'
};
JustifyGridContent.argTypes = {
    justifyContent: {
        options: ['start', 'end', 'center', 'around', 'between', 'evenly'],
        control: { type: 'select' }
    }
};
export const AlignGridItems = (args) => {
    return (<Grid container={{
            cols: '7rem 1fr 3fr',
            rows: 'repeat(3, 5rem) auto',
            alignItems: args.alignItems,
            pad: 2
        }} as={StyledGridContainer} height={20}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`alignItems-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
AlignGridItems.args = {
    alignItems: 'stretch'
};
AlignGridItems.argTypes = {
    alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
};
export const AlignGridContent = (args) => {
    return (<Grid container={{
            cols: 'repeat(3, 7rem)',
            rows: 'repeat(4, 3rem)',
            alignContent: args.alignContent,
            pad: 2
        }} as={StyledGridContainer} height={30} fitContent>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`alignContent-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
AlignGridContent.args = {
    alignContent: 'start'
};
AlignGridContent.argTypes = {
    alignContent: {
        options: ['start', 'end', 'center', 'around', 'between', 'evenly'],
        control: { type: 'select' }
    }
};
export const ResponsiveGrid = () => {
    return (<Grid container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }} xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }} lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }} md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }} sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }} xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }} as={StyledGridContainer}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledGridItem key={`colRows-${index}`}>
          <Text>Item {index}</Text>
        </StyledGridItem>))}
    </Grid>);
};
//# sourceMappingURL=GridContainer.stories.jsx.map