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 {