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,
+};