Fix a number of lint failures

js/views/conversation_view.js

@@ -531,7 +531,7 @@
         },
 
         scrollToMessage: function(providedOptions) {
-            const options = providedOptions || options;
+            const options = providedOptions || {};
             const { id } = options;
 
             if (id) {

styleguide.config.js

@@ -28,7 +28,7 @@ module.exports = {
     util: 'ts/styleguide/StyleGuideUtil',
   },
   contextDependencies: [
-    path.join(__dirname, 'ts/test'),
+    path.join(__dirname, 'ts/styleguide'),
   ],
   // We don't want one long, single page
   pagePerSection: true,

ts/components/conversation/Quote.tsx

@@ -6,23 +6,23 @@ import Mime from '../../../js/modules/types/mime';
 
 
 interface Props {
-  i18n: (key: string, values?: Array<string>) => string;
-  authorTitle: string;
-  authorProfileName?: string;
-  authorColor: string;
-  text: string;
   attachments: Array<QuotedAttachment>;
+  authorColor: string;
+  authorProfileName?: string;
+  authorTitle: string;
+  i18n: (key: string, values?: Array<string>) => string;
+  isIncoming: boolean;
   openQuotedMessage?: () => void;
-  quoterAuthorColor?: string,
+  quoterAuthorColor?: string;
-  isIncoming: boolean,
+  text: string;
 }
 
 interface QuotedAttachment {
-  fileName: string;
   contentType: string;
-  thumbnail?: Attachment,
+  fileName: string;
   /* Not included in protobuf */
   isVoiceMessage: boolean;
+  thumbnail?: Attachment;
 }
 
 interface Attachment {
@@ -53,14 +53,15 @@ function getObjectUrl(thumbnail: Attachment | undefined): string | null {
 
 export class Quote extends React.Component<Props, {}> {
   public renderImage(url: string, icon?: string) {
+    const iconElement = icon
+      ? <div className={classnames('icon', icon)} />
+      : null;
+
     return (
       <div className="icon-container">
         <div className="inner">
           <img src={url} />
-          {icon
+          {iconElement}
-            ? <div className={classnames('icon', icon)}></div>
-            : null
-          }
         </div>
       </div>
     );
@@ -73,9 +74,9 @@ export class Quote extends React.Component<Props, {}> {
     const iconColor = isIncoming ? quoterAuthorColor : 'white';
 
     return (
-      <div className='icon-container'>
+      <div className="icon-container">
-        <div className={classnames('circle-background', backgroundColor)}></div>
+        <div className={classnames('circle-background', backgroundColor)} />
-        <div className={classnames('icon', icon, iconColor)}></div>
+        <div className={classnames('icon', icon, iconColor)} />
       </div>
     );
   }
@@ -111,7 +112,7 @@ export class Quote extends React.Component<Props, {}> {
     const { i18n, text, attachments } = this.props;
 
     if (text) {
-      return <div className='text'>{text}</div>;
+      return <div className="text">{text}</div>;
     }
 
     if (!attachments || attachments.length === 0) {
@@ -122,19 +123,19 @@ export class Quote extends React.Component<Props, {}> {
     const { contentType, fileName, isVoiceMessage } = first;
 
     if (Mime.isVideo(contentType)) {
-      return <div className='type-label'>{i18n('video')}</div>;
+      return <div className="type-label">{i18n('video')}</div>;
     }
     if (Mime.isImage(contentType)) {
-      return <div className='type-label'>{i18n('photo')}</div>;
+      return <div className="type-label">{i18n('photo')}</div>;
     }
     if (Mime.isAudio(contentType) && isVoiceMessage) {
-      return <div className='type-label'>{i18n('voiceMessage')}</div>;
+      return <div className="type-label">{i18n('voiceMessage')}</div>;
     }
     if (Mime.isAudio(contentType)) {
-      return <div className='type-label'>{i18n('audio')}</div>;
+      return <div className="type-label">{i18n('audio')}</div>;
     }
 
-    return <div className='filename-label'>{fileName}</div>;
+    return <div className="filename-label">{fileName}</div>;
   }
 
   public render() {
@@ -149,15 +150,15 @@ export class Quote extends React.Component<Props, {}> {
       return null;
     }
 
+    const authorProfileElement = authorProfileName
+      ? <span className="profile-name">~{authorProfileName}</span>
+      : null;
+
     return (
       <div onClick={openQuotedMessage} className={classnames(authorColor, 'quote')} >
         <div className="primary">
           <div className={classnames(authorColor, 'author')}>
-            {authorTitle}{' '}
+            {authorTitle}{' '}{authorProfileElement}
-            {authorProfileName
-              ? <span className='profile-name'>~{authorProfileName}</span>
-              : null
-            }
            </div>
           {this.renderText()}
         </div>

ts/styleguide/StyleGuideUtil.ts

@@ -1,9 +1,12 @@
 import moment from 'moment';
 import qs from 'qs';
 
-import { sample, padStart } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  padStart,
+  sample,
+} from 'lodash';
 
 
 // Helper components used in the Style Guide, exposed at 'util' in the global scope via
@@ -53,7 +56,7 @@ export {
   mp4ObjectUrl,
   txt,
   txtObjectUrl,
-  ourNumber
+  ourNumber,
 };
 
 
@@ -65,6 +68,8 @@ const urlOptions = qs.parse(query);
 const theme = urlOptions.theme || 'android';
 const locale = urlOptions.locale || 'en';
 
+import HTML from '../ts/html';
+
 // @ts-ignore
 import localeMessages from '../../_locales/en/messages.json';
 
@@ -95,6 +100,7 @@ parent.moment.locale(locale);
 parent.React = React;
 parent.ReactDOM = ReactDOM;
 
+parent.Signal.HTML = HTML;
 parent.Signal.Components = {
   Quote,
 };
@@ -141,7 +147,7 @@ const CONTACTS = COLORS.map((color, index) => {
 export {
   COLORS,
   CONTACTS,
-}
+};
 
 parent.textsecure.storage.user.getNumber = () => ourNumber;