@pega/cosmos-react-demos 2.1.3 → 2.1.6

package/lib/social/Email/Email.stories.js

@@ -1,845 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useContext, createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import { array, boolean } from '@storybook/addon-knobs';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, hasProp, Flex, Button, ModalManagerContext, Modal, menuHelpers, defaultThemeProp } from '@pega/cosmos-react-core';
-import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import { RichTextViewer } from '@pega/cosmos-react-rte';
-import { Email, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, ViewAnalysis } from '@pega/cosmos-react-social';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, ViewAnalysisMockData, EmailMockData } from './Email.mocks';
-registerIcon(filterIcon);
-export default {
-    title: 'Social/Email',
-    component: Email
-};
-const { emails: mockEmails, suggestedReplies: mockSuggestedReplies, emailBodyTemplates: mockEmailBodyTemplates } = EmailMockData;
-const handleExternalEntry = (filterValue) => {
-    const pattern = /^[\w.\-_]+@[a-zA-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;
-    const matched = filterValue.match(pattern);
-    return !!matched?.input;
-};
-const baseComposerProps = {
-    participants,
-    externalValidator: handleExternalEntry,
-    to: {
-        reply: toParticipants.slice(0, 1),
-        replyAll: toParticipants
-    },
-    cc: ccParticipants,
-    subject: '',
-    bodyContent: '',
-    onSend: action('On Send'),
-    onCancel: () => {
-        action('cancelled email composing');
-    },
-    templates: mockEmailBodyTemplates
-};
-var LaunchAction;
-(function (LaunchAction) {
-    LaunchAction[LaunchAction["REPLY"] = 0] = "REPLY";
-    LaunchAction[LaunchAction["REPLYALL"] = 1] = "REPLYALL";
-    LaunchAction[LaunchAction["SUGGESTION"] = 2] = "SUGGESTION";
-    LaunchAction[LaunchAction["FORWARD"] = 3] = "FORWARD";
-})(LaunchAction || (LaunchAction = {}));
-const composerModals = {};
-const getCompositeId = (id, launchAction) => {
-    return `${id}-${launchAction}`;
-};
-const handleComposerCancel = (compositeID) => {
-    composerModals[compositeID]?.dismissModal();
-    composerModals[compositeID]?.unMountModal();
-    delete composerModals[compositeID];
-};
-const launchEmailComposer = (id, launchAction, composerProps, create) => {
-    const compositeId = getCompositeId(id, launchAction);
-    const composerRef = createRef();
-    const modalControls = create(() => {
-        return (_jsx(Modal, { heading: composerProps.subject, options: { id: { compositeId } }, children: _jsx(EmailComposer, { ...composerProps, ref: composerRef, onCancel: () => handleComposerCancel(compositeId) }, void 0) }, void 0));
-    }, { center: true }, { minimizable: true, maximizable: true, dockable: true });
-    composerModals[compositeId] = {
-        dismissModal: modalControls.dismiss,
-        unMountModal: modalControls.unmount,
-        composerRef
-    };
-};
-const emailActions = (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
-        items: [
-            {
-                id: createUID(),
-                primary: 'Reply',
-                onClick: action('On reply')
-            },
-            {
-                id: createUID(),
-                primary: 'Reply all',
-                onClick: action('On reply all')
-            },
-            {
-                id: createUID(),
-                primary: 'Forward',
-                onClick: action('Forward')
-            }
-        ]
-    } }, void 0));
-const emailDemoActions = (create, subject) => {
-    const id = createUID();
-    return (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
-            items: [
-                {
-                    id,
-                    primary: 'Reply',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLY, {
-                        ...baseComposerProps,
-                        responseType: 'reply',
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id,
-                    primary: 'Reply all',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLYALL, {
-                        ...baseComposerProps,
-                        responseType: 'replyAll',
-                        cc: [],
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id,
-                    primary: 'Forward',
-                    onClick: () => launchEmailComposer(id, LaunchAction.FORWARD, {
-                        ...baseComposerProps,
-                        responseType: 'forward',
-                        subject: `Fw-${subject}` || ''
-                    }, create)
-                }
-            ]
-        } }, void 0));
-};
-const generateEmailConversationParticipants = (emails, fields) => {
-    let l;
-    if (fields) {
-        l = [...fields];
-    }
-    else {
-        l = ['from', 'to', 'cc', 'bcc'];
-    }
-    const emailUsers = emails.map(emailItem => {
-        return l.map(n => {
-            if (hasProp(emailItem, n)) {
-                return emailItem[n];
-            }
-            return [];
-        });
-    });
-    return [...new Set(Array.from(emailUsers).flat(2))];
-};
-const StyledEmailCardContent = styled(CardContent)(({ theme }) => {
-    return css `
-    &&&& {
-      padding: calc(2 * ${theme.base.spacing}) 0;
-    }
-  `;
-});
-StyledEmailCardContent.defaultProps = defaultThemeProp;
-/*
-
-   _____                 _ _
-  | ____|_ __ ___   __ _(_) |
-  |  _| | '_ ` _ \ / _` | | |
-  | |___| | | | | | (_| | | |
-  |_____|_| |_| |_|\__,_|_|_|
-
-
-*/
-export const email = () => {
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket(H-765437) !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>', subject: 'I have a quick question on travel', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
-                    variant: 'positive'
-                }, actions: emailActions, suggestions: mockSuggestedReplies, attachments: [
-                    {
-                        id: createUID(),
-                        value: 'https://pega.com/media/document.doc',
-                        displayText: 'Policy document'
-                    },
-                    {
-                        id: createUID(),
-                        value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
-                        displayText: 'E-Ticket'
-                    }
-                ].map(attachment => {
-                    return {
-                        ...attachment,
-                        onDownload: action('On attachment download'),
-                        onPreview: action('On attachment preview')
-                    };
-                }) }, void 0) }, void 0) }, void 0));
-};
-const StyledViewAnalysis = styled.div `
-  width: 18rem;
-`;
-export const viewAnalysis = () => {
-    const content = ViewAnalysisMockData;
-    const headerProps = {
-        icon: 'list-number',
-        text: 'Entities'
-    };
-    return (_jsx(StyledViewAnalysis, { children: _jsx(ViewAnalysis, { header: headerProps, content: content }, void 0) }, void 0));
-};
-/*
-  ______                 _ _   ______       _   _ _   _
- |  ____|               (_) | |  ____|     | | (_) | (_)
- | |__   _ __ ___   __ _ _| | | |__   _ __ | |_ _| |_ _  ___  ___
- |  __| | '_ ` _ \ / _` | | | |  __| | '_ \| __| | __| |/ _ \/ __|
- | |____| | | | | | (_| | | | | |____| | | | |_| | |_| |  __/\__ \
- |______|_| |_| |_|\__,_|_|_| |______|_| |_|\__|_|\__|_|\___||___/
-
-*/
-export const emailEntities = () => {
-    const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, Nagercoil branch, with code 3967. I have a saving bank account here. My account number is 6785420965476.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', entityHighlightMapping: boolean('Entity Highlighting', true)
-                    ? [
-                        {
-                            value: '3967',
-                            type: 'system',
-                            name: 'BranchCode',
-                            variant: 0,
-                            description: 'Branch Code'
-                        },
-                        {
-                            value: 'Laura Stevens',
-                            type: 'system',
-                            name: 'Name',
-                            variant: 1,
-                            description: 'Name'
-                        },
-                        {
-                            value: 'Nagercoil',
-                            type: 'system',
-                            name: 'Location',
-                            variant: 2,
-                            description: nestedEntities
-                        },
-                        {
-                            value: 'Trichy',
-                            type: 'system',
-                            name: 'Location',
-                            variant: 2,
-                            description: 'Location'
-                        },
-                        {
-                            value: '6785420965476',
-                            type: 'system',
-                            name: 'AccountNumber',
-                            variant: 3,
-                            description: 'Account Number'
-                        },
-                        {
-                            value: '1920 6746 8653 1256',
-                            type: 'system',
-                            name: 'CardNumber',
-                            variant: 4,
-                            description: 'Card Number'
-                        },
-                        {
-                            value: 'Debit Card',
-                            type: 'system',
-                            name: 'CardType',
-                            variant: 5,
-                            description: 'Card Type'
-                        },
-                        {
-                            value: 'Jan 04, 2021',
-                            type: 'system',
-                            name: 'Date',
-                            variant: 6,
-                            description: 'Date'
-                        }
-                    ]
-                    : undefined, subject: 'I lost my debit card', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
-                    variant: 'neutral'
-                }, actions: emailActions, suggestions: mockSuggestedReplies }, void 0) }, void 0) }, void 0));
-};
-/*
-
-   _____                 _ _    ____                                    _   _
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ ____   _____ _ __ ___  __ _| |_(_) ___  _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ \ \ / / _ \ '__/ __|/ _` | __| |/ _ \| '_ \
-  | |___| | | | | | (_| | | | | |__| (_) | | | \ V /  __/ |  \__ \ (_| | |_| | (_) | | | |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_|\_/ \___|_|  |___/\__,_|\__|_|\___/|_| |_|
-
-
-*/
-export const emailConversation = () => {
-    const emailArr = [
-        {
-            id: createUID(),
-            timeStamp: '2021-01-05T09:12',
-            from: mockEmails['Laura Stevens'],
-            cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
-            bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-            to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            body: (_jsx(RichTextViewer, { content: '<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>', type: 'html' }, void 0)),
-            unRead: true,
-            onReply: action('On reply'),
-            onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
-            suggestions: mockSuggestedReplies
-        },
-        {
-            id: createUID(),
-            timeStamp: '2021-01-02T03:12',
-            from: mockEmails['Sara Davis'],
-            cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
-            bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-            to: [mockEmails['Laura Stevens'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            body: (_jsx(RichTextViewer, { content: '<div> Hi, <br /> <br /> <div>I\u2019m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>', type: 'html' }, void 0)),
-            onReply: action('On reply'),
-            onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions
-        }
-    ];
-    return (_jsx(EmailConversation, { participants: generateEmailConversationParticipants(emailArr), from: generateEmailConversationParticipants(emailArr, ['from'])[0], to: generateEmailConversationParticipants(emailArr, ['to']), id: createUID(), timeStamp: emailArr[0].timeStamp, unReadEmailCount: emailArr.filter(item => item.unRead).length, emails: emailArr }, void 0));
-};
-/*
-
-   _____                 _ _    ____
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ __ ___  _ __   ___  ___  ___ _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ ` _ \| '_ \ / _ \/ __|/ _ \ '__|
-  | |___| | | | | | (_| | | | | |__| (_) | | | | | | |_) | (_) \__ \  __/ |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_| |_| .__/ \___/|___/\___|_|
-                                                   |_|
-
-*/
-export const EmailComposerDemo = () => {
-    const fileUploadInputRef = useRef(null);
-    const [attachments, setAttachments] = useState(emailAttachments);
-    return (_jsx(Card, { style: { width: '30rem' }, children: _jsxs(CardContent, { children: [_jsx(EmailComposer, { onSend: action('On Send'), onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, to: {
-                        reply: [participants[7].emailAddress],
-                        replyAll: toParticipants,
-                        forward: []
-                    }, cc: ccParticipants, bcc: bccParticipants, responseType: 'reply', subject: 'Request: Pause service', templates: mockEmailBodyTemplates, bodyContent: 'Hi, Hope you are doing well', onImageAdded: action('On Image added'), attachments: attachments.map(attachment => {
-                        return {
-                            ...attachment,
-                            onDelete: name => {
-                                setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
-                            }
-                        };
-                    }), footerMoreActions: _jsx(MenuButton, { text: 'Phrases', placement: 'top', menu: {
-                            items: [
-                                {
-                                    primary: 'Thanks',
-                                    id: 'Thanks',
-                                    onClick: action('Thanks!')
-                                },
-                                {
-                                    primary: 'Sorry, please give us some time',
-                                    id: 'Sorry',
-                                    onClick: action('Sorry, please give us some time!')
-                                }
-                            ]
-                        } }, void 0) }, void 0), _jsx("input", { ref: fileUploadInputRef, type: 'file', style: { display: 'none' }, onChange: (e) => {
-                        if (e.target.files) {
-                            setAttachments(prevAttachments => [
-                                ...prevAttachments,
-                                ...Array.from(e.target.files).map(file => {
-                                    return {
-                                        name: file.name
-                                    };
-                                })
-                            ]);
-                        }
-                    } }, void 0)] }, void 0) }, void 0));
-};
-/*
-
-   _____                 _ _       _          _ _
-  | ____|_ __ ___   __ _(_) |  ___| |__   ___| | |
-  |  _| | '_ ` _ \ / _` | | | / __| '_ \ / _ \ | |
-  | |___| | | | | | (_| | | | \__ \ | | |  __/ | |
-  |_____|_| |_| |_|\__,_|_|_| |___/_| |_|\___|_|_|
-
-*/
-export const EmailDemo = ({ hideSuggestions }) => {
-    const actions = array('Actions', ['Transfer', 'End conversation']).map(name => ({
-        primary: name,
-        id: name,
-        onClick: action(`Clicked ${name}`)
-    }));
-    const { create } = useContext(ModalManagerContext);
-    const emailsData = [
-        {
-            id: createUID(),
-            timeStamp: '2021-01-05T09:12',
-            from: participants[0],
-            to: participants.slice(0, 2),
-            body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>', type: 'html' }, void 0)),
-            unRead: true,
-            subject: 'Pause service',
-            suggestions: hideSuggestions ? undefined : mockSuggestedReplies,
-            attachments: [
-                {
-                    id: createUID(),
-                    value: 'https://pega.com/media/document.doc',
-                    displayText: 'Policy document'
-                },
-                {
-                    id: createUID(),
-                    value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
-                    displayText: 'E-Ticket'
-                }
-            ].map(attachment => {
-                return {
-                    ...attachment,
-                    onDownload: action('On attachment download'),
-                    onPreview: action('On attachment preview')
-                };
-            })
-        },
-        {
-            id: createUID(),
-            timeStamp: '2021-01-02T03:12',
-            from: participants[3],
-            to: participants.slice(2, 4),
-            body: emailBodyContent,
-            unRead: true,
-            subject: 'Pause service'
-        }
-    ].map(emailData => {
-        const emailActionItems = emailDemoActions(create, emailData.subject);
-        return {
-            ...emailData,
-            onReply: id => {
-                launchEmailComposer(id, LaunchAction.REPLY, {
-                    ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: `Re-${emailData.subject}` || ''
-                }, create);
-            },
-            onForward: id => {
-                launchEmailComposer(id, LaunchAction.FORWARD, {
-                    ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'forward',
-                    subject: `Fw-${emailData.subject}` || ''
-                }, create);
-            },
-            onSuggestionClick: (id, suggestionId) => {
-                const suggestion = emailData.suggestions?.find(item => item.id === suggestionId);
-                launchEmailComposer(id, LaunchAction.SUGGESTION, {
-                    ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: suggestion?.title || '',
-                    bodyContent: suggestion ? suggestion.content : '',
-                    defaultTemplate: suggestion?.title
-                }, create);
-            },
-            actions: emailActionItems,
-            tags: hideSuggestions
-                ? undefined
-                : {
-                    items: ['Pause service', 'Lost or stolen'],
-                    label: 'Associated service cases',
-                    onRemove: action('On Associated service case remove'),
-                    dismissable: true
-                }
-        };
-    });
-    const emailConversations = [
-        [...emailsData],
-        [
-            {
-                ...emailsData[0],
-                timeStamp: '2021-01-03T17:15',
-                from: mockEmails['Hugh Phillips'],
-                to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
-                cc: [mockEmails['Adam Gillchrist']],
-                bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>', type: 'html' }, void 0))
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-02T14:16',
-                from: mockEmails['Mystery Rey'],
-                to: [mockEmails['Hugh Phillips']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>', type: 'html' }, void 0))
-            }
-        ],
-        [
-            {
-                ...emailsData[0],
-                unRead: false,
-                timeStamp: '2020-12-05T18:18',
-                from: mockEmails['Laura Stevens'],
-                to: [mockEmails['Sara Davis']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>', type: 'html' }, void 0)),
-                sentiment: {
-                    variant: 'positive'
-                }
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-04T08:30',
-                from: mockEmails['Sara Davis'],
-                to: [mockEmails['Laura Stevens']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>', type: 'html' }, void 0))
-            }
-        ]
-    ].map((emails, i) => {
-        return {
-            from: generateEmailConversationParticipants(emails, ['from'])[0],
-            to: emails[0].to,
-            id: createUID(),
-            timeStamp: emails[0].timeStamp,
-            unReadEmailCount: emails.filter(item => item.unRead).length,
-            emails,
-            sentiment: emails[0].sentiment,
-            isForwarded: i !== 2,
-            isCollapsed: i !== 0
-        };
-    });
-    const singleEmailConversation = [
-        {
-            from: generateEmailConversationParticipants(emailsData, ['from'])[0],
-            to: generateEmailConversationParticipants(emailsData, ['to']),
-            id: createUID(),
-            timeStamp: new Date(emailsData[0].timeStamp),
-            unReadEmailCount: emailsData.filter(item => item.unRead).length,
-            emails: emailsData
-        }
-    ];
-    return (_jsx(EmailShell, { style: {
-            height: 'calc(100vh)',
-            width: '30rem',
-            margin: 'auto'
-        }, headerProps: {
-            actions: (_jsxs(Flex, { container: {
-                    alignItems: 'center',
-                    gap: 0
-                }, children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'filter' }, void 0) }, void 0), _jsx(MenuButton, { variant: 'simple', text: 'More actions', icon: 'more', iconOnly: true, portal: true, menu: { items: actions } }, void 0)] }, void 0)),
-            subject: 'Pause service'
-        }, autoCollapse: boolean('Auto collapse', true), conversations: boolean('Single conversation', true) ? singleEmailConversation : emailConversations }, void 0));
-};
-EmailDemo.parameters = {
-    layout: 'fullscreen'
-};
-const sentiment = {
-    variant: 'negative',
-    labelHidden: true
-};
-/*
-  ______                 _ _    _____                                              _____ _
- |  ____|               (_) |  / ____|                                            |_   _| |
- | |__   _ __ ___   __ _ _| | | (___  _   _ _ __ ___  _ __ ___   __ _ _ __ _   _    | | | |_ ___ _ __ ___
- |  __| | '_ ` _ \ / _` | | |  \___ \| | | | '_ ` _ \| '_ ` _ \ / _` | '__| | | |   | | | __/ _ \ '_ ` _ \
- | |____| | | | | | (_| | | |  ____) | |_| | | | | | | | | | | | (_| | |  | |_| |  _| |_| ||  __/ | | | | |
- |______|_| |_| |_|\__,_|_|_| |_____/ \__,_|_| |_| |_|_| |_| |_|\__,_|_|   \__, | |_____|\__\___|_| |_| |_|
-                                                                            __/ |
-                                                                           |___/
-*/
-export const EmailSummaryItemDemo = () => {
-    const [active, setActive] = useState(false);
-    return (_jsx(EmailSummaryItem, { style: { width: '25rem' }, id: createUID(), activeParticipants: [
-            {
-                shortName: 'Robert',
-                fullName: 'Robert Downer',
-                emailAddress: 'robert.downey@example.com'
-            },
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ], message: 'I have a quick question on traveling to India. How do I reach Hyderabad?', timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)), topic: 'Missing Luggage', sentiment: sentiment, urgency: 10, unreadEmailCount: active ? 0 : 8, active: active, onClick: () => {
-            setActive(true);
-        } }, void 0));
-};
-/*
-  ______                 _ _    _____                                              _      _     _
- |  ____|               (_) |  / ____|                                            | |    (_)   | |
- | |__   _ __ ___   __ _ _| | | (___  _   _ _ __ ___  _ __ ___   __ _ _ __ _   _  | |     _ ___| |_
- |  __| | '_ ` _ \ / _` | | |  \___ \| | | | '_ ` _ \| '_ ` _ \ / _` | '__| | | | | |    | / __| __|
- | |____| | | | | | (_| | | |  ____) | |_| | | | | | | | | | | | (_| | |  | |_| | | |____| \__ \ |_
- |______|_| |_| |_|\__,_|_|_| |_____/ \__,_|_| |_| |_|_| |_| |_|\__,_|_|   \__, | |______|_|___/\__|
-                                                                            __/ |
-                                                                           |___/
-*/
-const emailSummaryItems = [
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        active: true,
-        urgency: 85,
-        unreadEmailCount: 4
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10,
-        unreadEmailCount: 2
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida. Is there a discount going on?',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65,
-        unreadEmailCount: 1
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance? How often do we need it?',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85,
-        unreadEmailCount: 6
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    }
-];
-export const EmailSummaryListDemo = () => {
-    const emailSummaryListRef = useRef(null);
-    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems);
-    const [categories, setCategories] = useState([
-        {
-            id: createUID(),
-            primary: 'Default worklist',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Authors',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Administrators',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Managers',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Users',
-            selected: false
-        }
-    ]);
-    const handleItemClick = (id) => {
-        const index = allEmailItems.findIndex(emailItem => {
-            return emailItem.id === id;
-        });
-        const newEmailItems = [...allEmailItems];
-        newEmailItems.splice(index, 1, { ...allEmailItems[index], unreadEmailCount: 0 });
-        setAllEmailItems(newEmailItems);
-    };
-    const onCategoryClick = (id) => {
-        setCategories(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
-    };
-    return (_jsx(EmailSummaryList, { style: { height: 'calc(100vh)', width: '25rem', margin: 'auto' }, ref: emailSummaryListRef, unreadEmailCount: 99, categories: categories, items: allEmailItems, onItemClick: handleItemClick, onCategoryClick: onCategoryClick }, void 0));
-};
-EmailSummaryListDemo.parameters = {
-    layout: 'fullscreen'
-};
-//# sourceMappingURL=Email.stories.js.map