Add style guide examples for portrait/landscape images

styleguide.config.js

@@ -163,7 +163,7 @@ module.exports = {
         },
         {
           // To test handling of attachments, we need arraybuffers in memory
-          test: /\.(gif|mp3|mp4|txt)$/,
+          test: /\.(gif|mp3|mp4|txt|jpg|jpeg|png)$/,
           loader: 'arraybuffer-loader',
         },
       ],

ts/components/conversation/Message.md

@@ -120,6 +120,125 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
+#### Image with portrait aspect ratio
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.portraitYellow,
+    fileName: 'portraitYellow.png',
+    contentType: 'image/png',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+
+#### Image with portrait aspect ratio and caption
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'This is an odd yellow bar. Cool, huh?',
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.portraitYellow,
+    fileName: 'portraitYellow.png',
+    contentType: 'image/png',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+#### Image with landscape aspect ratio
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.landscapePurple,
+    fileName: 'landscapePurple.jpg',
+    contentType: 'image/jpeg',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
+#### Image with landscape aspect ratio and caption
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: "An interesting horizontal bar. It's art.",
+  sent_at: Date.now() - 18000000,
+  attachments: [{
+    data: util.landscapePurple,
+    fileName: 'landscapePurple.jpg',
+    contentType: 'image/jpeg',
+  }],
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
 #### Video with caption
 
 ```jsx

ts/styleguide/StyleGuideUtil.ts

@@ -41,6 +41,23 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain');
 import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4';
 const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4');
 
+// @ts-ignore
+import landscapeGreen from '../../fixtures/1000x50-green.jpeg';
+const landscapeGreenObjectUrl = makeObjectUrl(landscapeGreen, 'image/jpeg');
+// @ts-ignore
+import landscapePurple from '../../fixtures/200x50-purple.png';
+const landscapePurpleObjectUrl = makeObjectUrl(landscapePurple, 'image/png');
+// @ts-ignore
+import portraitYellow from '../../fixtures/20x200-yellow.png';
+const portraitYellowObjectUrl = makeObjectUrl(portraitYellow, 'image/png');
+// @ts-ignore
+import landscapeRed from '../../fixtures/300x1-red.jpeg';
+const landscapeRedObjectUrl = makeObjectUrl(landscapeRed, 'image/png');
+// @ts-ignore
+import portraitTeal from '../../fixtures/50x1000-teal.jpeg';
+const portraitTealObjectUrl = makeObjectUrl(portraitTeal, 'image/png');
+
+
 function makeObjectUrl(data: ArrayBuffer, contentType: string): string {
   const blob = new Blob([data], {
     type: contentType,
@@ -59,6 +76,16 @@ export {
   mp4ObjectUrl,
   txt,
   txtObjectUrl,
+  landscapeGreen,
+  landscapeGreenObjectUrl,
+  landscapePurple,
+  landscapePurpleObjectUrl,
+  portraitYellow,
+  portraitYellowObjectUrl,
+  landscapeRed,
+  landscapeRedObjectUrl,
+  portraitTeal,
+  portraitTealObjectUrl,
   ourNumber,
 };