Some style and interaction fine-tuning

ts/components/conversation/AttachmentList.md

@@ -9,18 +9,19 @@ const attachments = [
     height: 240,
   },
 ];
-
-<AttachmentList
-  attachments={attachments}
-  onClose={() => console.log('onClose')}
-  onClickAttachment={attachment => {
-    console.log('onClickAttachment', attachment);
-  }}
-  onCloseAttachment={attachment => {
-    console.log('onCloseAttachment', attachment);
-  }}
-  i18n={util.i18n}
-/>;
+<util.ConversationContext theme={util.theme}>
+  <AttachmentList
+    attachments={attachments}
+    onClose={() => console.log('onClose')}
+    onClickAttachment={attachment => {
+      console.log('onClickAttachment', attachment);
+    }}
+    onCloseAttachment={attachment => {
+      console.log('onCloseAttachment', attachment);
+    }}
+    i18n={util.i18n}
+  />;
+</util.ConversationContext>;
 ```
 
 ### Four images
@@ -53,7 +54,7 @@ const attachments = [
   },
 ];
 
-<div>
+<util.ConversationContext theme={util.theme}>
   <AttachmentList
     attachments={attachments}
     onClose={() => console.log('onClose')}
@@ -65,7 +66,7 @@ const attachments = [
     }}
     i18n={util.i18n}
   />
-</div>;
+</util.ConversationContext>;
 ```
 
 ### A mix of attachment types
@@ -90,7 +91,7 @@ const attachments = [
   },
 ];
 
-<div>
+<util.ConversationContext theme={util.theme}>
   <AttachmentList
     attachments={attachments}
     onClose={() => console.log('onClose')}
@@ -102,7 +103,7 @@ const attachments = [
     }}
     i18n={util.i18n}
   />
-</div>;
+</util.ConversationContext>;
 ```
 
 ### No attachments provided

ts/components/conversation/AttachmentList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import classNames from 'classnames';
 
 import {
   isImageTypeSupported,
@@ -28,7 +27,6 @@ export class AttachmentList extends React.Component<Props> {
     const {
       attachments,
       i18n,
-      // onError,
       onClickAttachment,
       onCloseAttachment,
       onClose,
@@ -59,7 +57,9 @@ export class AttachmentList extends React.Component<Props> {
               return (
                 <Image
                   key={getUrl(attachment) || attachment.fileName || index}
-                  alt={`TODO: attachment number ${index}`}
+                  alt={i18n('stagedImageAttachment', [
+                    getUrl(attachment) || attachment.fileName,
+                  ])}
                   i18n={i18n}
                   attachment={attachment}
                   softCorners={true}

ts/components/conversation/StagedGenericAttachment.md

@@ -6,11 +6,13 @@ const attachment = {
   fileName: 'manifesto.txt',
 };
 
-<StagedGenericAttachment
-  attachment={attachment}
-  i18n={util.i18n}
-  onClose={attachment => console.log('onClose', attachment)}
-/>;
+<util.ConversationContext theme={util.theme}>
+  <StagedGenericAttachment
+    attachment={attachment}
+    i18n={util.i18n}
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```
 
 File with long name
@@ -21,11 +23,13 @@ const attachment = {
   fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
 };
 
-<StagedGenericAttachment
-  attachment={attachment}
-  i18n={util.i18n}
-  onClose={attachment => console.log('onClose', attachment)}
-/>;
+<util.ConversationContext theme={util.theme}>
+  <StagedGenericAttachment
+    attachment={attachment}
+    i18n={util.i18n}
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```
 
 File with long extension
@@ -36,9 +40,11 @@ const attachment = {
   fileName: 'manifesto.reallylongtxt',
 };
 
-<StagedGenericAttachment
-  attachment={attachment}
-  i18n={util.i18n}
-  onClose={attachment => console.log('onClose', attachment)}
-/>;
+<util.ConversationContext theme={util.theme}>
+  <StagedGenericAttachment
+    attachment={attachment}
+    i18n={util.i18n}
+    onClose={attachment => console.log('onClose', attachment)}
+  />
+</util.ConversationContext>;
 ```