import { Grid, Text } from '@pega/cosmos-react-core';
import { StyledGridContainer, StyledGridItem } from './Grid.styles';
export default {
    title: 'Core/Grid/Item',
    component: Grid,
    parameters: {
        layout: 'fullscreen'
    }
};
export const StartAndEnd = () => {
    return (<Grid container={{
            cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',
            rows: 'repeat(3, 3rem) auto',
            pad: 2
        }} as={StyledGridContainer} height={20}>
      <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledGridItem}>
        <Text>Item 1</Text>
      </Grid>
      <StyledGridItem>
        <Text>Item 2</Text>
      </StyledGridItem>
      <StyledGridItem>
        <Text>Item 3</Text>
      </StyledGridItem>
      <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledGridItem}>
        <Text>Item 4</Text>
      </Grid>
      <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledGridItem}>
        <Text>Item 5</Text>
      </Grid>
      <Grid item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }} as={StyledGridItem}>
        <Text>Item 6</Text>
      </Grid>
    </Grid>);
};
export const JustifyGridSelf = (args) => {
    return (<Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer}>
      <StyledGridItem>
        <Text>Item 1</Text>
      </StyledGridItem>
      <Grid item={{ justifySelf: args.justifySelf }} as={StyledGridItem} editable>
        <Text>Item 2</Text>
      </Grid>
      <StyledGridItem>
        <Text>Item 3</Text>
      </StyledGridItem>
    </Grid>);
};
JustifyGridSelf.args = {
    justifySelf: 'stretch'
};
JustifyGridSelf.argTypes = {
    justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
};
export const AlignGridSelf = (args) => {
    return (<Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer} height={10} fitContent>
      <StyledGridItem>
        <Text>Item 1</Text>
      </StyledGridItem>
      <Grid item={{ alignSelf: args.alignSelf }} as={StyledGridItem} editable>
        <Text>Item 2</Text>
      </Grid>
      <StyledGridItem>
        <Text>Item 3</Text>
      </StyledGridItem>
    </Grid>);
};
AlignGridSelf.args = {
    alignSelf: 'stretch'
};
AlignGridSelf.argTypes = {
    alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
};
//# sourceMappingURL=GridItem.stories.jsx.map