Update notes components

src/components/EditableNote.js

@@ -15,31 +15,35 @@ class EditableNote extends React.Component {
     note: PropTypes.shape({
       date: PropTypes.object,
       errors: PropTypes.string,
-      saving: PropTypes.bool,
       text: PropTypes.string
     }),
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onSave: PropTypes.func.isRequired
+    onSave: PropTypes.func.isRequired,
+    rows: PropTypes.number,
+    saving: PropTypes.bool
   };
 
   static defaultProps = {
-    className: 'bg-white mb-3'
+    className: 'bg-white mb-3',
+    rows: 4,
+    saving: false
   };
 
   render() {
-    const { children, className, note, onCancel, onChange, onSave } = this.props;
-    const { date, errors, saving, text } = note;
+    const { children, className, note, onCancel, onChange, onSave, rows, saving } = this.props;
+    const { date, errors, text } = note;
 
     return (
       <Card className={className}>
         {date && <NoteHeader note={note} />}
         <CardBlock>
           <FormLabelGroup feedback={errors} stacked>
             <Input
+              autoFocus
               disabled={saving}
               ref="text"
-              rows="4"
+              rows={rows}
               state={errors && 'danger'}
               type="textarea"
               value={text}

src/components/Note.js

@@ -24,15 +24,19 @@ class Note extends React.Component {
     onDelete: PropTypes.func,
     onEdit: PropTypes.func,
     onSave: PropTypes.func,
-    onUndelete: PropTypes.func
+    onUndelete: PropTypes.func,
+    rows: PropTypes.number,
+    saving: PropTypes.boolean
   };
 
   static defaultProps = {
-    className: 'bg-white mb-3'
+    className: 'bg-white mb-3',
+    rows: EditableNote.defaultProps.rows,
+    saving: EditableNote.defaultProps.saving
   };
 
   render() {
-    const { children, className, note, onCancel, onChange, onDelete, onEdit, onSave, onUndelete }
+    const { children, className, note, onCancel, onChange, onDelete, onEdit, onSave, onUndelete, rows, saving }
       = this.props;
     const { deleted, editing, text } = note;
 
@@ -51,6 +55,8 @@ class Note extends React.Component {
           onCancel={onCancel}
           onChange={onChange}
           onSave={onSave}
+          rows={rows}
+          saving={saving}
         />);
     }
     return (

src/components/NoteHeader.js

@@ -1,7 +1,7 @@
 import fecha from 'fecha';
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import classnames from 'classnames';
 import Badge from './Badge';
 import Button from './Button';
 import CardHeader from './CardHeader';
@@ -26,22 +26,37 @@ class NoteHeader extends React.Component {
     const { note, onDelete, onEdit } = this.props;
     const { date, edited, from } = note;
 
+    const headerClassNames = classnames(
+      'd-flex',
+      'flex-wrap',
+      'align-items-center',
+      'justify-content-between',
+      'py-2',
+      'pr-2',
+      'bg-info'
+    );
+
     return (
-      <CardHeader className="d-flex justify-content-start p-2 bg-info">
-        {edited ? <span className="js-note-header__edited"><Badge color="primary text-uppercase mr-2">Edited</Badge></span> : null}
-        <span className="text-muted">
-          <span className="hidden-xs-down">
-            {edited ? 'Last edited' : 'Posted'}
-            {from ? <span className="js-note-header__from">{` by ${from}`}</span> : ' '} on <span className="js-note-header__date">{dateFormat(date, 'ddd, MMMM D, YYYY "at" h:mm A')}</span>
-          </span>
-          <span className="hidden-sm-up">
-            {from ? <span>{from} </span> : null}<span className="js-note-header__shortDate">{dateFormat(date, 'M/D/YY h:mm A')}</span>
+      <CardHeader className={headerClassNames}>
+        <div
+          className="d-inline-flex align-items-center"
+          ref="title"
+        >
+          {edited && <Badge color="primary" className="text-uppercase mr-2 js-note-header__edited">Edited</Badge>}
+          <span className="m-0 my-1 mr-auto">
+            <span className="hidden-xs-down">
+              {edited ? 'Last edited' : 'Posted'}
+              {from ? <span className="js-note-header__from">{` by ${from}`}</span> : ' '} on <span className="js-note-header__date">{dateFormat(date, 'ddd, MMMM D, YYYY "at" h:mm A')}</span>
+            </span>
+            <span className="hidden-sm-up">
+              {from ? <span>{from} </span> : null}<span className="js-note-header__shortDate">{dateFormat(date, 'M/D/YY h:mm A')}</span>
+            </span>
           </span>
-        </span>
-        <span className="ml-auto">
+        </div>
+        <div className="d-inline-flex">
           {onEdit ? <Button color="link" onClick={() => onEdit(note)} className="js-note-header__edit mr-3 p-0">edit</Button> : null}
           {onDelete ? <Button color="link" onClick={() => onDelete(note)} className="js-note-header__delete p-0">delete</Button> : null}
-        </span>
+        </div>
       </CardHeader>
     );
   }

test/components/EditableNote.spec.js

@@ -150,8 +150,7 @@ describe('<EditableNote />', () => {
 
     context('in saving mode', () => {
       beforeEach(() => {
-        props.note.saving = true;
-        component = mount(<EditableNote {...props} />);
+        component = mount(<EditableNote saving {...props} />);
       });
 
       it('should render text input disabled', () => {