import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text, ThemeOverride } from '@pega/cosmos-react-core';
import { StyledCard } from './Card.styles';
export default {
    title: 'Core/Card',
    component: Card,
    excludeStories: ['ConfigurableCard'],
    parameters: {
        layout: 'centered'
    }
};
export const SimpleCard = () => {
    return (<Card as={StyledCard}>
      <CardHeader>
        <Text variant='h2'>Simple Card</Text>
      </CardHeader>
      <CardContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </CardContent>
    </Card>);
};
export const FullCard = (args) => {
    return (<Card as={StyledCard}>
      <CardMedia>
        <Image src='https://www.pega.com/sites/default/files/default-og.jpg' height='100' alt='Media'/>
      </CardMedia>
      <CardHeader actions={<MenuButton portal variant='simple' text='Card actions' icon='more' iconOnly menu={{
                items: [
                    { id: 'action-1', primary: 'Card action 1' },
                    { id: 'action-2', primary: 'Card action 2' },
                    { id: 'action-3', primary: 'Card action 3' }
                ]
            }}/>}>
        <Text variant='h2'>Full Card</Text>
      </CardHeader>
      <CardContent>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </CardContent>
      <CardFooter justify={args.justify}>
        <Text variant='secondary'>This is the CardFooter</Text>
      </CardFooter>
    </Card>);
};
FullCard.args = {
    justify: 'start'
};
FullCard.argTypes = {
    justify: {
        options: ['start', 'end', 'center', 'between', 'around', 'evenly'],
        control: { type: 'select' }
    }
};
export const ConfigurableCard = (args) => {
    return (<ThemeOverride theme={{
            components: {
                card: {
                    'border-radius': args.borderRadius,
                    background: args.background
                }
            }
        }}>
      <Card as={StyledCard}>
        <CardHeader>
          <Text variant='h2'>Simple Card</Text>
        </CardHeader>
        <CardContent>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </CardContent>
      </Card>
    </ThemeOverride>);
};
ConfigurableCard.args = {
    borderRadius: '0.5rem',
    background: '#71baff'
};
ConfigurableCard.argTypes = {
    borderRadius: { control: { type: 'text' } },
    background: { control: { type: 'color' } }
};
//# sourceMappingURL=Card.stories.jsx.map