import { Link, SelectionCardDisplay } from '@pega/cosmos-react-core';
export default {
    title: 'Core/SelectionCard',
    component: SelectionCardDisplay,
    args: {
        label: 'Selection card'
    },
    argTypes: {
        label: { control: { type: 'text' } }
    }
};
export const SelectionCardDisplayDemo = (args) => {
    const imgAltText = 'The image alternative text';
    const stackedField = {
        id: 'text',
        name: 'Text',
        variant: 'stacked',
        value: 'Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content.'
    };
    return (<SelectionCardDisplay label={args.label} actions={args.showActions
            ? [
                {
                    id: 'id',
                    text: 'First action',
                    onClick: () => { }
                }
            ]
            : undefined} image={args.imageUrl
            ? {
                src: args.imageUrl,
                size: args.imageSize,
                alt: imgAltText,
                placement: args.imagePlacement
            }
            : undefined} fields={args.noOfFields > 0
            ? [
                { id: 'service', name: 'Service length', value: '1 year' },
                {
                    id: 'monthly-cost',
                    name: 'Monthly cost',
                    value: <Link href='https://www.pega.com/'>https://www.pega.com/</Link>
                },
                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' },
                {
                    id: 'phone',
                    name: 'Phone',
                    value: '1-800-123-456'
                },
                stackedField
            ]
                .slice(0, args.noOfFields)
                .map(field => (args.removeFieldLabels ? { id: field.id, value: field.value } : field))
            : undefined}/>);
};
SelectionCardDisplayDemo.args = {
    imagePlacement: 'inline-start',
    imageSize: 'flexible',
    imageUrl: 'https://www.pega.com/sites/default/files/styles/640/public/media/images/2024-01/pega-hp-streamline-ops-card-img-v2.jpg?itok=WO_wAay2',
    noOfFields: 5,
    showActions: false,
    label: 'Selection card label',
    removeFieldLabels: false
};
SelectionCardDisplayDemo.argTypes = {
    imagePlacement: {
        options: ['inline-start', 'inline-end', 'block-start'],
        control: { type: 'select' }
    },
    imageSize: { options: ['large', 'small', 'flexible'], control: { type: 'select' } },
    noOfFields: { control: { type: 'number' } },
    imageUrl: { control: { type: 'text' } },
    label: { control: { type: 'text' } },
    showActions: { control: { type: 'boolean' } },
    removeFieldLabels: { control: { type: 'boolean' } }
};
//# sourceMappingURL=SelectionCard.stories.jsx.map