import { action } from '@storybook/addon-actions';
import { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';
import { Glimpse } from '@pega/cosmos-react-work';
export default {
    title: 'Work/Glimpse',
    component: Glimpse,
    parameters: { layout: 'centered' }
};
export const GlimpseDemo = () => {
    const [target, setTarget] = useElement(null);
    const fields = [
        {
            name: 'Project',
            value: 'Constellation Demo'
        },
        {
            name: 'Phone number',
            value: <PhoneDisplay value='(111) 111-1111'/>
        },
        {
            name: 'Email',
            value: <EmailDisplay value='turnc@example.com'/>
        },
        {
            name: 'Reports to',
            value: 'Helen Bush'
        }
    ];
    return (<>
      <Button variant='link' onClick={(e) => {
            setTarget(e.currentTarget);
        }}>
        Open Glimpse
      </Button>
      {target && (<Glimpse id='turnc' target={target} heading={{
                primary: 'Cindy Turner',
                secondary: 'Lead Engineer',
                visual: <Avatar name='Cindy Turner'/>
            }} fields={fields} onViewProfile={action('View profile')} onDismiss={() => setTarget(null)}/>)}
    </>);
};
//# sourceMappingURL=Glimpse.stories.jsx.map