@pega/cosmos-react-demos 2.0.0

package/lib/social/Email/Email.stories.jsx

@@ -0,0 +1,798 @@
+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 (<Modal heading={composerProps.subject} options={{ id: { compositeId } }}>
+          <EmailComposer {...composerProps} ref={composerRef} onCancel={() => handleComposerCancel(compositeId)}/>
+        </Modal>);
+    }, { center: true }, { minimizable: true, maximizable: true, dockable: true });
+    composerModals[compositeId] = {
+        dismissModal: modalControls.dismiss,
+        unMountModal: modalControls.unmount,
+        composerRef
+    };
+};
+const emailActions = (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly 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')
+            }
+        ]
+    }}/>);
+const emailDemoActions = (create, subject) => {
+    const id = createUID();
+    return (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly 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)
+                }
+            ]
+        }}/>);
+};
+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 (<Card>
+      <StyledEmailCardContent>
+        <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')
+            };
+        })}/>
+      </StyledEmailCardContent>
+    </Card>);
+};
+const StyledViewAnalysis = styled.div `
+  width: 18rem;
+`;
+export const viewAnalysis = () => {
+    const content = ViewAnalysisMockData;
+    const headerProps = {
+        icon: 'list-number',
+        text: 'Entities'
+    };
+    return (<StyledViewAnalysis>
+      <ViewAnalysis header={headerProps} content={content}/>
+    </StyledViewAnalysis>);
+};
+export const emailEntities = () => {
+    const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
+    return (<Card>
+      <StyledEmailCardContent>
+        <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}/>
+      </StyledEmailCardContent>
+    </Card>);
+};
+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: (<RichTextViewer content='<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>' type='html'/>),
+            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: (<RichTextViewer content='<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>' type='html'/>),
+            onReply: action('On reply'),
+            onForward: action('On forward'),
+            onSuggestionClick: action('On Suggested reply clicked'),
+            actions: emailActions
+        }
+    ];
+    return (<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}/>);
+};
+export const EmailComposerDemo = () => {
+    const fileUploadInputRef = useRef(null);
+    const [attachments, setAttachments] = useState(emailAttachments);
+    return (<Card style={{ width: '30rem' }}>
+      <CardContent>
+        <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={<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!')
+                    }
+                ]
+            }}/>}/>
+        <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
+                        };
+                    })
+                ]);
+            }
+        }}/>
+      </CardContent>
+    </Card>);
+};
+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: (<RichTextViewer content='<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>' type='html'/>),
+            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: (<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'/>)
+            },
+            {
+                ...emailsData[1],
+                unRead: false,
+                timeStamp: '2021-01-02T14:16',
+                from: mockEmails['Mystery Rey'],
+                to: [mockEmails['Hugh Phillips']],
+                body: (<RichTextViewer content='<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>' type='html'/>)
+            }
+        ],
+        [
+            {
+                ...emailsData[0],
+                unRead: false,
+                timeStamp: '2020-12-05T18:18',
+                from: mockEmails['Laura Stevens'],
+                to: [mockEmails['Sara Davis']],
+                body: (<RichTextViewer content='<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>' type='html'/>),
+                sentiment: {
+                    variant: 'positive'
+                }
+            },
+            {
+                ...emailsData[1],
+                unRead: false,
+                timeStamp: '2021-01-04T08:30',
+                from: mockEmails['Sara Davis'],
+                to: [mockEmails['Laura Stevens']],
+                body: (<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'/>)
+            }
+        ]
+    ].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 (<EmailShell style={{
+            height: 'calc(100vh)',
+            width: '30rem',
+            margin: 'auto'
+        }} headerProps={{
+            actions: (<Flex container={{
+                    alignItems: 'center',
+                    gap: 0
+                }}>
+            <Button variant='simple' icon>
+              <Icon name='filter'/>
+            </Button>
+            <MenuButton variant='simple' text='More actions' icon='more' iconOnly portal menu={{ items: actions }}/>
+          </Flex>),
+            subject: 'Pause service'
+        }} autoCollapse={boolean('Auto collapse', true)} conversations={boolean('Single conversation', true) ? singleEmailConversation : emailConversations}/>);
+};
+EmailDemo.parameters = {
+    layout: 'fullscreen'
+};
+const sentiment = {
+    variant: 'negative',
+    labelHidden: true
+};
+export const EmailSummaryItemDemo = () => {
+    const [active, setActive] = useState(false);
+    return (<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);
+        }}/>);
+};
+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 (<EmailSummaryList style={{ height: 'calc(100vh)', width: '25rem', margin: 'auto' }} ref={emailSummaryListRef} unreadEmailCount={99} categories={categories} items={allEmailItems} onItemClick={handleItemClick} onCategoryClick={onCategoryClick}/>);
+};
+EmailSummaryListDemo.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Email.stories.jsx.map