jb - Minor cleanup doc cleanup; minor visual tweaks

appfolio · Jul 2, 2018 · 66e68c4 · 66e68c4
1 parent bd26e7d
commit 66e68c4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 45 deletions.
diff --git a/src/components/EditableNote.js b/src/components/EditableNote.js
@@ -35,7 +35,7 @@ class EditableNote extends React.Component {
     const { date, errors, text } = note;
 
     return (
-      <Card className={className}>
+      <Card outline color="info" className={className}>
         {date && <NoteHeader note={note} />}
         <CardBlock>
           <FormLabelGroup feedback={errors} stacked>

diff --git a/src/components/NoteHeader.js b/src/components/NoteHeader.js
@@ -38,10 +38,7 @@ class NoteHeader extends React.Component {
 
     return (
       <CardHeader className={headerClassNames}>
-        <div
-          className="d-inline-flex align-items-center"
-          ref="title"
-        >
+        <div className="d-inline-flex align-items-center text-muted">
           {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">

diff --git a/stories/EditableNote.js b/stories/EditableNote.js
@@ -19,33 +19,30 @@ const noteToEdit = {
 storiesOf('EditableNote', module)
   .addWithInfo('With note prop', decription, () => {
     const withNote = boolean('with note', true);
-    const saving = boolean('saving', false);
-
     const note = withNote ? noteToEdit : { text: '' };
-    note.saving = saving;
 
     return (
       <EditableNote
         note={note}
         onCancel={n => alert(`Cancel: ${JSON.stringify(n)}`)}
         onChange={() => console.log('Change')}
         onSave={n => alert(`Save: ${JSON.stringify(n)}`)}
+        saving={boolean('saving', false)}
       />
     );
   })
   .addWithInfo('With children', decription, () => {
     const withNote = boolean('with note', true);
     const saving = boolean('saving', false);
-
     const note = withNote ? noteToEdit : { text: '' };
-    note.saving = saving;
 
     return (
       <EditableNote
         note={note}
         onCancel={n => alert(`Cancel: ${JSON.stringify(n)}`)}
         onChange={() => console.log('Change')}
         onSave={n => alert(`Save: ${JSON.stringify(n)}`)}
+        saving={saving}
       >
         <span>Add an attachment:  </span><button disabled={saving}>Choose file...</button>
         <hr />

diff --git a/stories/Note.js b/stories/Note.js
@@ -47,6 +47,8 @@ storiesOf('Note', module)
         onEdit={action('onEdit')}
         onSave={action('onSave')}
         onUndelete={action('onUndelete')}
+        rows={number('rows', Note.defaultProps.rows)}
+        saving={boolean('saving')}
       >
         <img src="http://lorempixel.com/200/100/sports/" alt="Sample" />
       </Note>

diff --git a/stories/Notes.js b/stories/Notes.js
@@ -5,8 +5,7 @@ import { EditableNote, Note, Notes } from '../src';
 
 const description = 'The Notes component works in conjunction with other components.\n\nThe "Note" '
   + 'child component represents each note, and works in conjunction with "EditableNote" and '
-  + 'DeletedNote components.\n\nFor the "addCntrol" property, it is recommended to use an '
-  + 'instance of the "EditableNote" component, as demonstrated here.';
+  + 'DeletedNote components.';
 
 const moreNotes = [
   {
@@ -25,7 +24,6 @@ const moreNotes = [
 
 storiesOf('Notes', module)
   .addWithInfo('With notes prop', description, () => {
-    const adding = boolean('adding', false);
     const notes = [
       {
         id: 0,
@@ -42,13 +40,6 @@ storiesOf('Notes', module)
 
     return (
       <Notes
-        addControl={<EditableNote
-          note={{}}
-          onCancel={action('onCancel')}
-          onChange={action('onChange')}
-          onSave={action('onSave')}
-        />}
-        adding={adding}
         notes={notes}
         onCancel={action('onCancel')}
         onChange={action('onChange')}
@@ -60,7 +51,6 @@ storiesOf('Notes', module)
     );
   })
   .addWithInfo('With children', description, () => {
-    const adding = boolean('adding', false);
     const notes = [
       {
         date: new Date(),
@@ -75,31 +65,18 @@ storiesOf('Notes', module)
     ];
 
     return (
-      <Notes
-        addControl={<EditableNote
-          note={{}}
-          onCancel={action('onCancel')}
-          onChange={action('onChange')}
-          onSave={action('onSave')}
-        />}
-        adding={adding}
-        onDelete={action('onDelete')}
-        onEdit={action('onEdit')}
-        onUndelete={action('onUndelete')}
-      >
+      <Notes>
         {notes.map(note => (
-          <div>
-            <Note
-              note={note}
-              onCancel={action('onCancel')}
-              onChange={action('onChange')}
-              onDelete={action('onDelete')}
-              onEdit={action('onEdit')}
-              onSave={action('onSave')}
-              onUndelete={action('onUndelete')}
-              saving={note.saving}
-            />
-          </div>
+          <Note
+            note={note}
+            onCancel={action('onCancel')}
+            onChange={action('onChange')}
+            onDelete={action('onDelete')}
+            onEdit={action('onEdit')}
+            onSave={action('onSave')}
+            onUndelete={action('onUndelete')}
+            saving={note.saving}
+          />
         ))}
       </Notes>
     );