Add style guide examples for ContactName and ConversationTitle

ts/components/conversation/ContactName.md

@@ -0,0 +1,32 @@
+#### With name and profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName
+    i18n={util.i18n}
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### Profile, no name
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName
+    i18n={util.i18n}
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### No name, no profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName i18n={util.i18n} phoneNumber="+12025550011" />
+</div>
+```

ts/components/conversation/ConversationTitle.md

@@ -0,0 +1,45 @@
+#### With name and profile, verified
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    isVerified
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### With name, not verified
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+  />
+</div>
+```
+
+#### Profile, no name
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### No name, no profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle i18n={util.i18n} phoneNumber="+12025550011" />
+</div>
+```

ts/components/conversation/ConversationTitle.tsx

@@ -25,7 +25,7 @@ export class ConversationTitle extends React.Component<Props> {
         {phoneNumber ? (
           <span className="conversation-number">{phoneNumber}</span>
         ) : null}{' '}
-        {profileName ? (
+        {profileName && !name ? (
           <span className="profileName">
             <Emojify text={profileName} i18n={i18n} />
           </span>