Show about info from contact profiles

ts/components/conversation/About.tsx

@@ -0,0 +1,22 @@
+// Copyright 2018-2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { Emojify } from './Emojify';
+
+export type PropsType = {
+  text?: string;
+};
+
+export const About = ({ text }: PropsType): JSX.Element | null => {
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <span className="module-about__text" dir="auto">
+      <Emojify text={text || ''} />
+    </span>
+  );
+};

ts/components/conversation/ContactModal.stories.tsx

@@ -24,6 +24,7 @@ const defaultContact: ConversationType = {
   title: 'Pauline Oliveros',
   type: 'direct',
   phoneNumber: '(333) 444-5515',
+  about: '👍 Free to chat',
 };
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({

ts/components/conversation/ContactModal.tsx

@@ -5,6 +5,7 @@ import React, { ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ConversationType } from '../../state/ducks/conversations';
+import { About } from './About';
 import { Avatar } from '../Avatar';
 import { LocalizerType } from '../../types/Util';
 
@@ -110,6 +111,9 @@ export const ContactModal = ({
               title={contact.title}
             />
             <div className="module-contact-modal__name">{contact.title}</div>
+            <div className="module-about__container">
+              <About text={contact.about} />
+            </div>
             {contact.phoneNumber && (
               <div className="module-contact-modal__profile-and-number">
                 {contact.phoneNumber}

ts/components/conversation/ConversationHero.stories.tsx

@@ -11,6 +11,7 @@ import enMessages from '../../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
+const getAbout = () => text('about', '👍 Free to chat');
 const getTitle = () => text('name', 'Cayce Bollard');
 const getName = () => text('name', 'Cayce Bollard');
 const getProfileName = () => text('profileName', 'Cayce Bollard (profile)');
@@ -23,6 +24,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -39,6 +41,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -55,6 +58,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -71,6 +75,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={getTitle()}
           avatarPath={getAvatarPath()}
@@ -87,6 +92,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={text('title', 'Cayce Bollard (profile)')}
           avatarPath={getAvatarPath()}
@@ -103,6 +109,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          about={getAbout()}
           i18n={i18n}
           title={text('title', '+1 (646) 327-2700')}
           avatarPath={getAvatarPath()}

ts/components/conversation/ConversationHero.tsx

@@ -5,11 +5,13 @@ import * as React from 'react';
 import { take } from 'lodash';
 import { Avatar, Props as AvatarProps } from '../Avatar';
 import { ContactName } from './ContactName';
+import { About } from './About';
 import { Emojify } from './Emojify';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
 
 export type Props = {
+  about?: string;
   i18n: LocalizerType;
   isMe?: boolean;
   sharedGroupNames?: Array<string>;
@@ -111,6 +113,7 @@ const renderMembershipRow = ({
 
 export const ConversationHero = ({
   i18n,
+  about,
   avatarPath,
   color,
   conversationType,
@@ -188,6 +191,11 @@ export const ConversationHero = ({
           />
         )}
       </h1>
+      {about && (
+        <div className="module-about__container">
+          <About text={about} />
+        </div>
+      )}
       {!isMe ? (
         <div className="module-conversation-hero__with">
           {membersCount === 1