Added Title component for the layout

src/components/Layout/Layout.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import _truncate from 'lodash/truncate';
 import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
 
@@ -11,7 +10,7 @@ import styles from './Layout.scss';
 class Layout extends React.Component {
   static propTypes = {
     actions: React.PropTypes.node,
-    title: React.PropTypes.string,
+    title: React.PropTypes.node,
   }
 
   render() {
@@ -22,11 +21,7 @@ class Layout extends React.Component {
             <Link to="/">{ this.props.teamName }</Link>
           </div>
           <Flex align="center" className={ styles.title }>
-            { this.props.title ? (
-              <span title={this.props.title}>{ _truncate(this.props.title, 60) }</span>
-            ) : (
-              <span className={ styles.untitled }>Untitled document</span>
-            )}
+            { this.props.title }
           </Flex>
           <Flex direction="row">
             <Flex align="center" className={ styles.actions }>

src/components/Layout/Layout.scss

@@ -33,15 +33,7 @@
   justify-content: center;
 }
 
-.title {
-  color: #444;
-}
-
 .actions a {
   text-decoration: none;
   margin-right: 15px;
 }
-
-.untitled {
-  color: #ccc;
-}

src/components/Layout/components/Title/Title.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import _truncate from 'lodash/truncate';
+
+import styles from './Title.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+const Title = (props) => {
+  let title;
+  if (props.truncate) {
+    title = _truncate(props.children, props.truncate);
+  } else {
+    title = props.children;
+  }
+
+  let usePlaceholder;
+  if (props.children === null && props.placeholder) {
+    title = props.placeholder;
+    usePlaceholder = true;
+  }
+
+  return(
+    <span
+      title={ props.children }
+      className={ cx(styles.title, { untitled: usePlaceholder })}
+    >
+      { title }
+    </span>
+  );
+};
+
+Title.propTypes = {
+  children: React.PropTypes.string,
+  truncate: React.PropTypes.number,
+  placeholder: React.PropTypes.string,
+}
+
+export default Title;

src/components/Layout/components/Title/Title.scss

@@ -0,0 +1,7 @@
+.title {
+  color: #444;
+}
+
+.untitled {
+  color: #ccc;
+}

src/components/Layout/components/Title/index.js

@@ -0,0 +1,2 @@
+import Title from './Title';
+export default Title;

src/components/Layout/index.js

@@ -1,2 +1,8 @@
 import Layout from './Layout';
-export default Layout;
+import Title from './components/Title';
+
+export default Layout;
+
+export {
+  Title,
+};

src/scenes/Atlas/Atlas.js

@@ -8,7 +8,7 @@ import { fetchAtlasAsync } from 'actions/AtlasActions';
 // Temp
 import { client } from 'utils/ApiClient';
 
-import Layout from 'components/Layout';
+import Layout, { Title } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 
@@ -49,7 +49,7 @@ class Atlas extends React.Component {
         actions={(
           <Link to={ `/atlas/${data.id}/new` }>New document</Link>
         )}
-        title={ data.name }
+        title={ <Title>{ data.name }</Title> }
       >
         <CenteredContent>
           { this.state.isLoading ? (

src/scenes/Editor/Editor.js

@@ -10,7 +10,7 @@ import {
 import styles from './Editor.scss';
 import 'assets/styles/codemirror.css';
 
-import Layout from 'components/Layout';
+import Layout, { Title } from 'components/Layout';
 import Flex from 'components/Flex';
 import MarkdownEditor from 'components/MarkdownEditor';
 
@@ -26,6 +26,15 @@ class Editor extends Component {
   }
 
   render() {
+    let title = (
+      <Title
+        truncate={ 60 }
+        placeholder={ "Untitle document" }
+      >
+        { this.props.title }
+      </Title>
+    );
+
     return (
       <Layout
         actions={(
@@ -34,15 +43,13 @@ class Editor extends Component {
             <MoreAction />
           </Flex>
         )}
-        title={ this.props.title }
+        title={ title }
       >
-
-          <MarkdownEditor
-            onChange={ this.props.updateText }
-            text={ this.props.text }
-            replaceText={this.props.replaceText}
-          />
-
+        <MarkdownEditor
+          onChange={ this.props.updateText }
+          text={ this.props.text }
+          replaceText={this.props.replaceText}
+        />
       </Layout>
     );
   }