{"version":3,"file":"FlexContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexContainerProps } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Container',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  direction?: FlexContainerProps['direction'];\n  gap?: FlexContainerProps['gap'];\n  pad?: FlexContainerProps['pad'];\n  wrap?: FlexContainerProps['wrap'];\n  justify?: FlexContainerProps['justify'];\n  alignItems?: FlexContainerProps['alignItems'];\n  alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nDirection.args = {\n  direction: 'row'\n};\n\nDirection.argTypes = {\n  direction: {\n    options: ['row', 'column', 'row-reverse', 'column-reverse'],\n    control: { type: 'select' }\n  }\n};\n\nexport const GapAndPadding: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGapAndPadding.args = {\n  pad: 1,\n  gap: 1\n};\n\nGapAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nWrap.args = {\n  wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n  wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n      <StyledFlexItem>\n        <Text>Item 1</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 2</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 3</Text>\n      </StyledFlexItem>\n    </Flex>\n  );\n};\n\nJustify.args = {\n  justify: 'start'\n};\n\nJustify.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignItems: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignItems: args.alignItems, pad: 2 }}\n      as={StyledFlexContainer}\n      height={15}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n  alignItems: {\n    options: ['stretch', 'start', 'end', 'center', 'baseline'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignContent: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n      as={StyledFlexContainer}\n      height={20}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignContent.args = {\n  alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n  alignContent: {\n    options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveFlex: StoryFn = () => {\n  return (\n    <Flex\n      container={{ pad: 1, gap: 6 }}\n      xl={{ container: { gap: 12 } }}\n      lg={{ container: { gap: 9 } }}\n      md={{ container: { gap: 6 } }}\n      sm={{ container: { gap: 3 } }}\n      xs={{ container: { gap: 0 } }}\n      as={StyledFlexContainer}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n"]}