From 256705fd11ab58e7f35a776606bda5b60207f0e4 Mon Sep 17 00:00:00 2001
From: Sofiya Huts <sohuts@microsoft.com>
Date: Thu, 22 Nov 2018 12:35:18 +0100
Subject: [PATCH 1/4] Add attachments and link to chat pane messages in
 prototype

---
 ...eFactoryMock.ts => messageFactoryMock.tsx} | 51 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)
 rename docs/src/prototypes/chatPane/services/{messageFactoryMock.ts => messageFactoryMock.tsx} (66%)

diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.ts b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
similarity index 66%
rename from docs/src/prototypes/chatPane/services/messageFactoryMock.ts
rename to docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index d4a6a8ad00..17852f4869 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.ts
+++ b/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,7 @@ const statusMap: Map<UserStatus, StatusPropsExtendable> = new Map([
 function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage {
   const { content, mine } = msg
   const msgProps: ChatMessage = {
-    content,
+    content: getMessageContent(content),
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -44,6 +46,53 @@ function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage
   return msgProps
 }
 
+function getMessageContent(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' }}>
+        {_.map(['MeetingNotes.pptx', 'Document.docx'], (fileName, index) => {
+          return (
+            <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}
+              style={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 }

From 5ebf17bda30fbd5d21110dc08608cfb0f65b0cc5 Mon Sep 17 00:00:00 2001
From: Sofiya Huts <sohuts@microsoft.com>
Date: Mon, 26 Nov 2018 10:41:14 +0100
Subject: [PATCH 2/4] Small improvement

---
 .../chatPane/services/messageFactoryMock.tsx  | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index 17852f4869..099af89b70 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -34,7 +34,7 @@ const statusMap: Map<UserStatus, StatusPropsExtendable> = new Map([
 function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage {
   const { content, mine } = msg
   const msgProps: ChatMessage = {
-    content: getMessageContent(content),
+    content: createMessageContent(content),
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -46,7 +46,7 @@ function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage
   return msgProps
 }
 
-function getMessageContent(content: string) {
+function createMessageContent(content: string) {
   const contextMenu = (
     <Menu
       items={[
@@ -74,20 +74,18 @@ function getMessageContent(content: string) {
       <span>
         {content} <a href="/"> Some link </a>
       </span>
-      <div style={{ marginTop: '20px' }}>
-        {_.map(['MeetingNotes.pptx', 'Document.docx'], (fileName, index) => {
-          return (
-            <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}
-              style={index === 1 ? { marginLeft: '15px' } : {}}
-            />
-          )
-        })}
+      <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}
+            style={index === 1 ? { marginLeft: '15px' } : {}}
+          />
+        ))}
       </div>
     </>
   )

From 97b485d01393217695d82b94aa12962399059a4f Mon Sep 17 00:00:00 2001
From: Sofiya Huts <sohuts@microsoft.com>
Date: Mon, 26 Nov 2018 15:44:48 +0100
Subject: [PATCH 3/4] Small improvement

---
 .../prototypes/chatPane/services/messageFactoryMock.tsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index 099af89b70..6d44d7f03c 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -34,7 +34,7 @@ const statusMap: Map<UserStatus, StatusPropsExtendable> = new Map([
 function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage {
   const { content, mine } = msg
   const msgProps: ChatMessage = {
-    content: createMessageContent(content),
+    content: { content: createMessageContent(content) },
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -83,7 +83,12 @@ function createMessageContent(content: string) {
             action={{ icon: 'ellipsis horizontal' }}
             renderAction={() => actionPopup}
             data-is-focusable={true}
-            style={index === 1 ? { marginLeft: '15px' } : {}}
+            styles={{
+              '&:focus': {
+                outline: '.2rem solid #6264A7',
+              },
+              ...(index === 1 ? { marginLeft: '15px' } : {}),
+            }}
           />
         ))}
       </div>

From 28501f09cc7277ea17d89a68d90d8e9a0f31e1bb Mon Sep 17 00:00:00 2001
From: Sofiya Huts <sohuts@microsoft.com>
Date: Mon, 26 Nov 2018 17:21:30 +0100
Subject: [PATCH 4/4] Improvements after CR

---
 docs/src/prototypes/chatPane/services/dataMock.ts           | 1 +
 .../src/prototypes/chatPane/services/messageFactoryMock.tsx | 6 ++++--
 docs/src/prototypes/chatPane/services/types.ts              | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/src/prototypes/chatPane/services/dataMock.ts b/docs/src/prototypes/chatPane/services/dataMock.ts
index b00c40604f..32cf13880a 100644
--- a/docs/src/prototypes/chatPane/services/dataMock.ts
+++ b/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
diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index 6d44d7f03c..9efe7077b7 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -34,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: createMessageContent(content) },
+    content: msg.withAttachment
+      ? { content: createMessageContentWithAttachments(content) }
+      : content,
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -46,7 +48,7 @@ function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage
   return msgProps
 }
 
-function createMessageContent(content: string) {
+function createMessageContentWithAttachments(content: string) {
   const contextMenu = (
     <Menu
       items={[
diff --git a/docs/src/prototypes/chatPane/services/types.ts b/docs/src/prototypes/chatPane/services/types.ts
index b22c30821e..2ec2710266 100644
--- a/docs/src/prototypes/chatPane/services/types.ts
+++ b/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 {