docs(ChatPane): Add attachments and link to chat pane messages in prototype (#514)

* Add attachments and link to chat pane messages in prototype

* Small improvement

* Small improvement

* Improvements after CR

Author: sophieH29

docs/src/prototypes/chatPane/services/dataMock.ts

@@ -66,6 +66,7 @@ class ChatMock {
         timestamp: timestamp.short,
         timestampLong: timestamp.long,
         isImportant: random.boolean(),
+        withAttachment: random.boolean(),
       }
 
       return message

docs/src/prototypes/chatPane/services/messageFactoryMock.ts renamed to docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -1,3 +1,5 @@
+import { Attachment, Popup, Button, Menu, popupFocusTrapBehavior } from '@stardust-ui/react'
+import * as React from 'react'
 import * as _ from 'lodash'
 import { ChatMessageProps } from 'src/components/Chat/ChatMessage'
 import { DividerProps } from 'src/components/Divider/Divider'
@@ -32,7 +34,9 @@ const statusMap: Map<UserStatus, StatusPropsExtendable> = new Map([
 function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage {
   const { content, mine } = msg
   const msgProps: ChatMessage = {
-    content,
+    content: msg.withAttachment
+      ? { content: createMessageContentWithAttachments(content) }
+      : content,
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -44,6 +48,56 @@ function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage
   return msgProps
 }
 
+function createMessageContentWithAttachments(content: string) {
+  const contextMenu = (
+    <Menu
+      items={[
+        { key: 'download', content: 'Download', icon: 'download' },
+        { key: 'linkify', content: 'Get link', icon: 'linkify' },
+        { key: 'tab', content: 'Make this a tab', icon: 'folder open' },
+      ]}
+      vertical
+      pills
+    />
+  )
+
+  const actionPopup = (
+    <Popup
+      accessibility={popupFocusTrapBehavior}
+      trigger={
+        <Button aria-label="More attachment options" iconOnly circular icon="ellipsis horizontal" />
+      }
+      content={{ content: contextMenu }}
+    />
+  )
+
+  return (
+    <>
+      <span>
+        {content} <a href="/"> Some link </a>
+      </span>
+      <div style={{ marginTop: '20px', display: 'flex' }}>
+        {_.map(['MeetingNotes.pptx', 'Document.docx'], (fileName, index) => (
+          <Attachment
+            icon="file word outline"
+            aria-label={`File attachment ${fileName}. Press tab for more options Press Enter to open the file`}
+            header={fileName}
+            action={{ icon: 'ellipsis horizontal' }}
+            renderAction={() => actionPopup}
+            data-is-focusable={true}
+            styles={{
+              '&:focus': {
+                outline: '.2rem solid #6264A7',
+              },
+              ...(index === 1 ? { marginLeft: '15px' } : {}),
+            }}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
+
 function generateDividerProps(props: DividerProps): Divider {
   const { content, important, type = 'secondary' } = props
   const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, type }

docs/src/prototypes/chatPane/services/types.ts

@@ -19,6 +19,7 @@ export interface MessageData {
   from: string
   isImportant: boolean
   mine: boolean
+  withAttachment?: boolean
 }
 
 export interface ChatData {