From 9dedda84e214fd7aeb2d73dc10ce5eaca0aba523 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Tue, 22 May 2018 15:18:51 -0700
Subject: [PATCH] Add style guide examples for ContactName and
 ConversationTitle

---
 ts/components/conversation/ContactName.md     | 32 +++++++++++++
 .../conversation/ConversationTitle.md         | 45 +++++++++++++++++++
 .../conversation/ConversationTitle.tsx        |  2 +-
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 ts/components/conversation/ContactName.md
 create mode 100644 ts/components/conversation/ConversationTitle.md

diff --git a/ts/components/conversation/ContactName.md b/ts/components/conversation/ContactName.md
new file mode 100644
index 0000000000..f078461c99
--- /dev/null
+++ b/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>
+```
diff --git a/ts/components/conversation/ConversationTitle.md b/ts/components/conversation/ConversationTitle.md
new file mode 100644
index 0000000000..85f095fab2
--- /dev/null
+++ b/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>
+```
diff --git a/ts/components/conversation/ConversationTitle.tsx b/ts/components/conversation/ConversationTitle.tsx
index 905435fead..0e5da03758 100644
--- a/ts/components/conversation/ConversationTitle.tsx
+++ b/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>