npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.8.4 → 4.0.0-dev.9.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.8.4 → 4.0.0-dev.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/jsx/social/Chat/Chat.mocks.js.map CHANGED Viewed

package/jsx/social/Chat/Chat.stories.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import { Meta, Story } from '@storybook/react';
-import { MessageProps, SystemMessageProps, TranscriptMessageProps, MessageListProps } from '@pega/cosmos-react-social';
+import { OmitStrict } from '@pega/cosmos-react-core';
+import { ChatHeaderProps, MessageProps, SystemMessageProps, TranscriptMessageProps, MessageListProps } from '@pega/cosmos-react-social';
 import { TranscriptHeaderProps } from '@pega/cosmos-react-social/lib/components/Chat/TranscriptMessage';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ChatHeaderDemo: Story;
+interface ChatHeaderDemoProps extends OmitStrict<ChatHeaderProps, 'actions' | 'sentiment' | 'context'> {
+}
+export declare const ChatHeaderDemo: Story<ChatHeaderDemoProps>;
 export interface MessageListDemoProps {
     onScrollToButtonClick?: MessageListProps['onScrollToButtonClick'];
 }

package/jsx/social/Chat/Chat.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAqC~~/C,OAAO,~~EASL~~,YAAY,EASZ,kBAAkB,EAElB,sBAAsB,EAEtB,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;;~~AAMxG~~,wBAGU;AAGV,eAAO,MAAM,cAAc,EAAE,~~KA+B5B~~,CAAC;~~AAKF~~,MAAM,WAAW,oBAAoB;IACnC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAoBvD,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA+E3C,CAAC;AAcF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAEvD,CAAC;AAgBF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AAYF,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAC;AAKF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAC/C,uBAAuB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAC3D,oBAAoB,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAqBnE,CAAC;AA4BF,eAAO,MAAM,wBAAwB,EAAE,KAuBtC,CAAC;AAKF,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AAYF,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,~~CA6sBjD~~,CAAC"}
1	+ {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EA8BL,UAAU,EACX,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAIL,eAAe,EAMf,YAAY,EASZ,kBAAkB,EAElB,sBAAsB,EAEtB,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;;AAYxG,wBAGU;AAGV,UAAU,mBACR,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAAG;AAE7E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CAiCrD,CAAC;AAmBF,MAAM,WAAW,oBAAoB;IACnC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAoBvD,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA+E3C,CAAC;AAcF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAEvD,CAAC;AAgBF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AAYF,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAC;AAKF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAC/C,uBAAuB,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAC3D,oBAAoB,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAqBnE,CAAC;AA4BF,eAAO,MAAM,wBAAwB,EAAE,KAuBtC,CAAC;AAKF,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AAYF,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA0lBjD,CAAC"}

package/jsx/social/Chat/Chat.stories.jsx CHANGED Viewed

@@ -1,36 +1,51 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, useElement, FieldValueList, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } from '@pega/cosmos-react-core';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
 import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
 import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
 import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
-import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList } from './Chat.mocks';
+import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList, contextItems as contextItemsMock } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
     component: Chat
 };
-export const ChatHeaderDemo = () => {
-    const actionsConfig = (<div>
-      <Button variant='simple' aria-label='Show transcripts'>
-        <Flex container={{
-            gap: 1,
-            alignItems: 'center'
-        }}>
-          <Icon name='chats'/>
-          <Text>Transcripts</Text>
-        </Flex>
-      </Button>
-      <Button variant='simple' icon aria-label='chat info'>
-        <Icon name='information'/>
-      </Button>
-    </div>);
-    return (<ChatHeader title='Live chat' icon='chat' aria-label='Chat header' actions={actionsConfig} sentiment={{
-            variant: 'positive'
+export const ChatHeaderDemo = (args) => {
+    const { title, icon, customer, authenticated } = args;
+    const [contextItems, setContextItems] = useState([]);
+    const [loading, setLoading] = useState(false);
+    return (<ChatHeader title={title} icon={icon || 'chat'} actions={[
+            { id: 'action-1', text: 'Transfer' },
+            { id: 'action-2', text: 'End chat' }
+        ]} sentiment={{
+            variant: 'positive',
+            'aria-label': 'Sentiment is positive'
+        }} customer={customer} authenticated={authenticated} context={{
+            items: contextItems,
+            onClick: () => {
+                setLoading(true);
+                setTimeout(() => {
+                    setContextItems(contextItemsMock);
+                    setLoading(false);
+                }, 1000);
+            },
+            loading
         }}/>);
 };
+ChatHeaderDemo.args = {
+    title: 'Live chat',
+    icon: 'chat',
+    customer: 'Ginger Ventura',
+    authenticated: true
+};
+ChatHeaderDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    icon: { control: { type: 'text' }, type: { name: 'string', required: false } },
+    customer: { control: { type: 'text' } },
+    authenticated: { control: { type: 'boolean' }, type: { name: 'string', required: false } }
+};
 export const MessageListDemo = (args) => {
     const messages = ChatMockData.chatMessages;
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
@@ -362,88 +377,7 @@ export const StandardChat = (args) => {
             };
         }
     }, [chatMessages, args.simulateConversation]);
-    const [openPopover, setOpenPopover] = useState(false);
-    const [popoverRef, setPopoverRef] = useElement();
-    const [buttonRef, setButtonRef] = useElement();
-    const additionalInfo = {
-        title: 'Additional info',
-        options: {
-            LiveChat: [
-                {
-                    id: '1',
-                    name: 'Session status',
-                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Profile name',
-                    value: 'Sara Davis'
-                }
-            ],
-            Twitter: [
-                {
-                    id: '1',
-                    name: 'Session status',
-                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Twitter handle',
-                    value: '@Connor'
-                },
-                {
-                    id: '3',
-                    name: 'Followers',
-                    value: '13,556'
-                }
-            ],
-            Facebook: [
-                {
-                    id: '1',
-                    name: 'Session status',
-                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Profile name',
-                    value: 'Sara Davis'
-                }
-            ]
-        }
-    };
-    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
-        if (openPopover)
-            setOpenPopover(false);
-    });
-    const header = (<ChatHeader title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} aria-label='Chat header' sentiment={{
-            variant: 'positive',
-            'aria-label': 'Sentiment is positive'
-        }} actions={<div>
-          <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
-            <Flex container={{
-                gap: 1,
-                alignItems: 'center'
-            }}>
-              <Icon name='chats'/>
-              <Text>Transcripts</Text>
-            </Flex>
-          </Button>
-          <Button variant='simple' icon aria-label='chat info' ref={setButtonRef} onClick={() => setOpenPopover(current => !current)}>
-            <Icon name='information'/>
-          </Button>
-          <Popover show={openPopover} target={buttonRef} ref={setPopoverRef} arrow placement='bottom-end'>
-            <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>
-              <Text variant='h4'>{additionalInfo.title}</Text>
-              <FieldValueList variant='inline' fields={additionalInfo.options[args.selectedChannel || 'LiveChat']}/>
-            </Flex>
-          </Popover>
-          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{
-                items: [
-                    { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
-                    { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
-                ]
-            }}/>
-        </div>}/>);
+    const header = (<ChatHeaderDemo title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} customer='Ginger Ventura' authenticated/>);
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
     useOuterEvent('mousedown', [transcriptsContainerRef], () => {