import { Flex, Text } from '@pega/cosmos-react-core';
import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
export default {
    title: 'Core/Flex/Container',
    component: Flex,
    parameters: {
        layout: 'fullscreen'
    }
};
export const Direction = (args) => {
    return (<Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 2</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3</Text>
      </Flex>
    </Flex>);
};
Direction.args = {
    direction: 'row'
};
Direction.argTypes = {
    direction: {
        options: ['row', 'column', 'row-reverse', 'column-reverse'],
        control: { type: 'select' }
    }
};
export const GapAndPadding = (args) => {
    return (<Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 2</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3</Text>
      </Flex>
    </Flex>);
};
GapAndPadding.args = {
    pad: 1,
    gap: 1
};
GapAndPadding.argTypes = {
    pad: { control: { type: 'number' } },
    gap: { control: { type: 'number' } }
};
export const Wrap = (args) => {
    return (<Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 2</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 4</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 5</Text>
      </Flex>
    </Flex>);
};
Wrap.args = {
    wrap: 'nowrap'
};
Wrap.argTypes = {
    wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
};
export const Justify = (args) => {
    return (<Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>
      <StyledFlexItem>
        <Text>Item 1</Text>
      </StyledFlexItem>
      <StyledFlexItem>
        <Text>Item 2</Text>
      </StyledFlexItem>
      <StyledFlexItem>
        <Text>Item 3</Text>
      </StyledFlexItem>
    </Flex>);
};
Justify.args = {
    justify: 'start'
};
Justify.argTypes = {
    justify: {
        options: ['start', 'end', 'center', 'between', 'around', 'evenly'],
        control: { type: 'select' }
    }
};
export const AlignItems = (args) => {
    return (<Flex container={{ alignItems: args.alignItems, pad: 2 }} as={StyledFlexContainer} height={15} width={30}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>
        <Text>Item 2</Text>
      </Flex>
      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3 - First line</Text>
        <Text>Item 3 - Second line</Text>
      </Flex>
    </Flex>);
};
AlignItems.args = {
    alignItems: 'stretch'
};
AlignItems.argTypes = {
    alignItems: {
        options: ['stretch', 'start', 'end', 'center', 'baseline'],
        control: { type: 'select' }
    }
};
export const AlignContent = (args) => {
    return (<Flex container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }} as={StyledFlexContainer} height={20} width={30}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 2</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 4</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 5</Text>
      </Flex>
    </Flex>);
};
AlignContent.args = {
    alignContent: 'stretch'
};
AlignContent.argTypes = {
    alignContent: {
        options: ['stretch', 'start', 'end', 'center', 'between', 'around'],
        control: { type: 'select' }
    }
};
export const ResponsiveFlex = () => {
    return (<Flex container={{ pad: 1, gap: 6 }} xl={{ container: { gap: 12 } }} lg={{ container: { gap: 9 } }} md={{ container: { gap: 6 } }} sm={{ container: { gap: 3 } }} xs={{ container: { gap: 0 } }} as={StyledFlexContainer}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 2</Text>
      </Flex>
      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
        <Text>Item 3</Text>
      </Flex>
    </Flex>);
};
//# sourceMappingURL=FlexContainer.stories.jsx.map