npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.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 (1484) hide show

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

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

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { MessageProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ChatHeaderDemo: () => JSX.Element;
-export declare const MessageListDemo: () => JSX.Element;
+export declare const ChatHeaderDemo: Story;
+export declare const MessageListDemo: Story;
 export declare const MessageDemo: Story<MessageProps>;
-export declare const SystemMessageDemo: () => JSX.Element;
+export declare const SystemMessageDemo: Story;
 interface TypeIndicatorDemoProps {
     message?: string;
 }
 export declare const TypeIndicatorDemo: Story<TypeIndicatorDemoProps>;
-export declare const ChatTranscriptsDemo: () => JSX.Element[];
-export declare const TranscriptMessageDemo: () => JSX.Element;
-export declare const SuggestedReplyPickerDemo: () => JSX.Element;
+export declare const ChatTranscriptsDemo: Story;
+export declare const TranscriptMessageDemo: Story;
+export declare const SuggestedReplyPickerDemo: Story;
 interface ChatComposerDemoProps {
     maxAttachments?: number;
 }

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;~~AA2B~~/C,OAAO,EASL,YAAY,EAWb,MAAM,2BAA2B,CAAC;;AAMnC,wBAGU;AAGV,eAAO,MAAM,cAAc,~~mBA4B1B~~,CAAC;AAIF,eAAO,MAAM,eAAe,~~mBAiB3B~~,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,~~CA2D3C~~,CAAC;AAcF,eAAO,MAAM,iBAAiB,~~mBAE7B~~,CAAC;AAIF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AAYF,eAAO,MAAM,mBAAmB,~~qBAW/B~~,CAAC;AAIF,eAAO,MAAM,qBAAqB,~~mBAMjC~~,CAAC;AAKF,eAAO,MAAM,wBAAwB,~~mBAuBpC~~,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,~~CAwgBjD~~,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;AAgC/C,OAAO,EASL,YAAY,EAWb,MAAM,2BAA2B,CAAC;;AAMnC,wBAGU;AAGV,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AAIF,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA+E3C,CAAC;AAcF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAIF,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;AAIF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAKF,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,CA6lBjD,CAAC"}

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

@@ -1,6 +1,6 @@
 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, Menu, useElement, FieldValueList } from '@pega/cosmos-react-core';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList, useModalManager, useModalContext, Modal, SummaryItem, useToaster } 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';
@@ -13,7 +13,7 @@ export default {
     component: Chat
 };
 export const ChatHeaderDemo = () => {
-    const actionsConfig = (<Flex>
+    const actionsConfig = (<div>
       <Button variant='simple' aria-label='Show transcripts'>
         <Flex container={{
             gap: 1,
@@ -26,8 +26,10 @@ export const ChatHeaderDemo = () => {
       <Button variant='simple' icon aria-label='chat info'>
         <Icon name='information'/>
       </Button>
-    </Flex>);
-    return (<ChatHeader title='Live Chat' icon='chat-solid' aria-label='Chat header' actions={actionsConfig}/>);
+    </div>);
+    return (<ChatHeader title='Live chat' icon='chat' aria-label='Chat header' actions={actionsConfig} sentiment={{
+            variant: 'positive'
+        }}/>);
 };
 export const MessageListDemo = () => {
     const messages = ChatMockData.chatMessages;
@@ -39,19 +41,37 @@ export const MessageListDemo = () => {
     </Flex>);
 };
 export const MessageDemo = (args) => {
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
     const attachments = [
         {
             id: '2499167340',
             name: 'Location',
             icon: 'document',
             meta: 'PNG 0.1 MB',
-            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg'
+            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg',
+            actions
         },
         {
             id: '2499167341',
             name: 'FAQ with detailed terms and conditions of the policy',
             icon: 'document-pdf',
-            meta: 'PDF 0.7 MB'
+            meta: 'PDF 0.7 MB',
+            actions
         }
     ];
     const pagePushLinks = [
@@ -64,13 +84,13 @@ export const MessageDemo = (args) => {
     ];
     return (<>
-      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} status='Opened' timeStamp='1:44 PM' message='Hi, Welcome to u-plus. How can I help you ?' variant={args.variant} direction={args.direction}/>
+      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} timeStamp='1:44 PM' message='Hi, Welcome to u-plus. How can I help you ?' variant={args.variant} direction={args.direction}/>
       <br />
       <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={args.variant} direction={args.direction}/>
       <br />
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={args.variant} direction={args.direction}/>
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant='sender' direction='out' status='undelivered'/>
     </>);
 };
 MessageDemo.args = {
@@ -92,9 +112,11 @@ TypeIndicatorDemo.argTypes = {
     message: { control: { type: 'text' } }
 };
 export const ChatTranscriptsDemo = () => {
-    return ChatMockData.transcripts.map((transcript) => {
-        return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcript.data}/>);
-    });
+    return (<>
+      {ChatMockData.transcripts.map((transcript) => {
+            return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcript.data}/>);
+        })}
+    </>);
 };
 export const TranscriptMessageDemo = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
 export const SuggestedReplyPickerDemo = () => {
@@ -133,7 +155,7 @@ export const StandardChat = (args) => {
         options: {
             LiveChat: {
                 title: 'Live chat',
-                icon: 'chat-solid'
+                icon: 'chat'
             },
             Twitter: {
                 title: 'Twitter chat',
@@ -167,6 +189,56 @@ export const StandardChat = (args) => {
         </Flex>
       </Flex>)
     };
+    const { create } = useModalManager();
+    const MyModal = () => {
+        const { dismiss } = useModalContext();
+        const { push } = useToaster();
+        return (<Modal heading='Associate with case' actions={<>
+            <Button onClick={() => {
+                    dismiss();
+                    push({ content: 'Cancelled' });
+                }}>
+              Cancel
+            </Button>
+            <Button variant='primary' onClick={() => {
+                    dismiss();
+                    push({ content: 'Successfully Submitted!!' });
+                }}>
+              Submit
+            </Button>
+          </>} center>
+        <Flex container={{ gap: 2, direction: 'column' }}>
+          <SummaryItem primary={<Text variant='secondary'>Security policy</Text>} secondary={<Text variant='secondary'>PNG - 6.1MB</Text>} visual={<Icon name='document-doc'/>}/>
+          <Select label='Select a service case' style={{ width: '15rem' }}>
+            <Option value=''>Select…</Option>
+            <Option value='Make payment' selected>
+              Make payment
+            </Option>
+            <Option value='Facilities'>Facilities</Option>
+          </Select>
+        </Flex>
+      </Modal>);
+    };
+    const onAssociateWithCase = () => {
+        create(MyModal);
+    };
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+                onAssociateWithCase();
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
     const mockChatMessages = useMemo(() => {
         return [
             ...mockChatMessagesJson.map(message => {
@@ -177,6 +249,14 @@ export const StandardChat = (args) => {
                         meta: <Link href='/'>I-12345</Link>
                     };
                 }
+                if (restMessageData.attachments) {
+                    restMessageData.attachments = restMessageData.attachments.map((item) => {
+                        return {
+                            ...item,
+                            actions
+                        };
+                    });
+                }
                 return restMessageData;
             }),
             conversationRatingMessage
@@ -296,7 +376,9 @@ export const StandardChat = (args) => {
         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' actions={<Flex>
+    const header = (<ChatHeader title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} aria-label='Chat header' sentiment={{
+            variant: 'positive'
+        }} actions={<div>
           <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
             <Flex container={{
                 gap: 1,
@@ -321,7 +403,7 @@ export const StandardChat = (args) => {
                     { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
                 ]
             }}/>
-        </Flex>}/>);
+        </div>}/>);
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
     useOuterEvent('mousedown', [transcriptsContainerRef], () => {