import { Flex, Text } from '@pega/cosmos-react-core';
import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
export default {
    title: 'Core/Flex/Item',
    component: Flex,
    parameters: {
        layout: 'fullscreen'
    }
};
export const AlignSelf = (args) => {
    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
        <Text>Item 1</Text>
      </Flex>
      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>
        <Text>Item 2</Text>
      </Flex>
      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>
        <Text>Item 3 - First line</Text>
        <Text>Item 3 - Second line</Text>
      </Flex>
    </Flex>);
};
AlignSelf.args = {
    alignSelf: 'auto'
};
AlignSelf.argTypes = {
    alignSelf: {
        options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],
        control: { type: 'select' }
    }
};
export const Grow = (args) => {
    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer}>
      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
        <Text>Grow: 1</Text>
      </Flex>
      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>
        <Text>Grow: {args.grow}</Text>
      </Flex>
      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>
        <Text>Grow: 0</Text>
      </Flex>
    </Flex>);
};
Grow.args = {
    grow: 0
};
Grow.argTypes = {
    grow: { control: { type: 'number' } }
};
export const Shrink = (args) => {
    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>
      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>
        <Text>Shrink: 1</Text>
      </Flex>
      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>
        <Text>Shrink: {args.shrink}</Text>
      </Flex>
      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>
        <Text>Shrink: 0</Text>
      </Flex>
    </Flex>);
};
Shrink.args = {
    shrink: 0
};
Shrink.argTypes = {
    shrink: { control: { type: 'number' } }
};
//# sourceMappingURL=FlexItem.stories.jsx.map