{"version":3,"file":"GridContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Grid, Text } from '@pega/cosmos-react-core';\nimport type { GridContainerProps } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Container',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  colGap?: GridContainerProps['colGap'];\n  rowGap?: GridContainerProps['rowGap'];\n  pad?: GridContainerProps['pad'];\n  justifyItems?: GridContainerProps['justifyItems'];\n  justifyContent?: GridContainerProps['justifyContent'];\n  alignItems?: GridContainerProps['alignItems'];\n  alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows: StoryFn = () => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nexport const Areas: StoryFn = () => {\n  return (\n    <Grid\n      container={{\n        cols: '5rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const Template: StoryFn = () => {\n  const rowsAndAreas =\n    '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n  const columns = '5rem 1fr 3fr';\n\n  return (\n    <Grid\n      container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const GapsAndPadding: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        colGap: args.colGap,\n        rows: 'repeat(3, 3rem) auto',\n        rowGap: args.rowGap,\n        pad: args.pad\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRowGap-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nGapsAndPadding.args = {\n  pad: 1,\n  colGap: 1,\n  rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  colGap: { control: { type: 'number' } },\n  rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        justifyItems: args.justifyItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridItems.args = {\n  justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n  justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        justifyContent: args.justifyContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridContent.args = {\n  justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n  justifyContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignGridItems: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 5rem) auto',\n        alignItems: args.alignItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n  alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        alignContent: args.alignContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={30}\n      fitContent\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridContent.args = {\n  alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n  alignContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveGrid: StoryFn = () => {\n  return (\n    <Grid\n      container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n      xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n      lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n      md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n      sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n      xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n"]}