feat(ZNTA-1734) added activity feed components to editor and activity…

… tab components to storybook

server/zanata-frontend/src/frontend/app/editor/components/ActTabActSelect/ActTabActSelect.story.js

@@ -2,13 +2,71 @@ import React from 'react'
 import { storiesOf } from '@kadira/storybook'
 import { action, decorateAction } from '@kadira/storybook-addon-actions'
 import ActTabActSelect from '.'
+import { Button, ButtonToolbar } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
 
 /*
  * See .storybook/README.md for info on the component storybook.
  */
 storiesOf('ActTabActSelect', module)
     .add('default', () => (
+      <div>
+        <ButtonToolbar>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--secondary
+            is-active">
+            <Icon name="clock" className="n1" /> All
+          </Button>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--secondary">
+            <Icon name="comment" className="n1" /> Comments
+          </Button>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--secondary">
+            <Icon name="refresh" className="n1" /> Updates
+          </Button>
+        </ButtonToolbar>
+      </div>
+    ))
+
+  .add('Comments only', () => (
+    <div>
+      <ButtonToolbar>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary">
+          <Icon name="clock" className="n1" /> All
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary
+          is-active">
+          <Icon name="comment" className="n1" /> Comments
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary">
+          <Icon name="refresh" className="n1" /> Updates
+        </Button>
+      </ButtonToolbar>
+    </div>
+  ))
+
+.add('Updates only', () => (
+    <div>
+      <ButtonToolbar>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary">
+          <Icon name="clock" className="n1" /> All
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary">
+          <Icon name="comment" className="n1" /> Comments
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--secondary
+          is-active">
+          <Icon name="refresh" className="n1" /> Updates
+        </Button>
+      </ButtonToolbar>
+    </div>
+))
 
-    })
-)
 

server/zanata-frontend/src/frontend/app/editor/components/ActTabActSelect/index.js

@@ -29,7 +29,8 @@ class ActTabActSelect extends React.Component {
     return (
       <div>
         <ButtonToolbar>
-          <Button className="Button Button--small u-rounded Button--secondary">
+          <Button className="Button is-active
+            Button--small u-rounded Button--secondary">
             <Icon name="clock" className="n1" /> All
           </Button>
           <Button className="Button Button--small u-rounded Button--secondary">

server/zanata-frontend/src/frontend/app/editor/components/ActTabCommentBox/ActTabCommentBox.story.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@kadira/storybook'
+import { action, decorateAction } from '@kadira/storybook-addon-actions'
+import ActTabCommentBox from '.'
+
+/*
+ * See .storybook/README.md for info on the component storybook.
+ */
+storiesOf('ActTabCommentBox', module)
+    .add('default', () => (
+      <ActTabCommentBox />
+  ))

server/zanata-frontend/src/frontend/app/editor/components/ActTabCommentBox/index.js

@@ -30,7 +30,7 @@ class ActTabCommentBox extends React.Component {
       <div className="trans-comment-box">
         <FormGroup controlId="formControlsTextarea">
           <ControlLabel>
-            <Icon name="comment" className="s1" /> Post a comment
+            <Icon name="comment" className="s0" /> Post a comment
           </ControlLabel><br />
           <FormControl componentClass="textarea"
             placeholder="..." />

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/ActTabFeed.story.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { storiesOf } from '@kadira/storybook'
+import { action, decorateAction } from '@kadira/storybook-addon-actions'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+import ActTabFeed from '.'
+import RevisionTranslated from '../ActTabFeed/RevisionTranslated.js'
+import RevisionApproved from '../ActTabFeed/RevisionApproved.js'
+import RevisionRejected from '../ActTabFeed/RevisionRejected.js'
+import RevisionComment from '../ActTabFeed/RevisionComment.js'
+
+/*
+ * Copyright 2016, Red Hat, Inc. and individual contributors as indicated by the
+ * @author tags. See the copyright.txt file in the distribution for a full
+ * listing of individual contributors.
+ *
+ * This is free software; you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This software is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this software; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA, or see the FSF
+ * site: http://www.fsf.org.
+ */
+
+/*
+ * See .storybook/README.md for info on the component storybook.
+ */
+
+storiesOf('ActTabFeed', module)
+    .add('comment', () => (
+        <div className="revision-box">
+          <RevisionComment />
+        </div>
+    ))
+    .add('translated revision', () => (
+        <div className="revision-box">
+          <RevisionTranslated />
+        </div>
+    ))
+    .add('fuzzy revision', () => (
+        <div className="revision-box">
+          <RevisionFuzzy />
+        </div>
+    ))
+    .add('approved revision', () => (
+        <div className="revision-box">
+          <RevisionApproved />
+        </div>
+    ))
+    .add('rejected revision', () => (
+        <div className="revision-box">
+          <RevisionRejected />
+        </div>
+    ))

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/RevisionApproved.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+
+class RevisionApproved extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <p><Icon name="refresh" className="s0" />
+          <img className="u-round activity-avatar" src="" /><a>Username</a>
+          <span className="u-textHighlight"> <strong>approved</strong>
+          </span> a translation.
+        </p>
+        <Well className="well-approved">নাম</Well>
+        <p className="small u-textMuted">
+          <Icon name="clock" className="n1" /> May 18 2017 at 15:00</p>
+      </div>
+    )
+  }
+}
+
+export default RevisionApproved

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/RevisionComment.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+
+class RevisionComment extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <p><Icon name="comment" className="s0" />
+          <img className="u-round activity-avatar" src="" /><a>Username</a>
+        &nbsp;commented on a <strong>Spanish</strong> translation.</p>
+        <Well>I have no idea what this translation means</Well>
+        <p className="small u-textMuted">
+          <Icon name="clock" className="n1" /> May 20 2017 at 06:00</p>
+      </div>
+    )
+  }
+}
+
+export default RevisionComment

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/RevisionFuzzy.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+
+class RevisionFuzzy extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <p><Icon name="refresh" className="s0" />
+          <img className="u-round activity-avatar" src="" /><a>Username</a>
+          created a
+            <span className="u-textUnsure"> <strong>fuzzy</strong>
+            </span> revision.
+        </p>
+        <Well className="well-fuzzy">নাম</Well>
+        <p className="small u-textMuted">
+          <Icon name="clock" className="n1" /> May 19 2017 at 10:00</p>
+      </div>
+    )
+  }
+}
+
+export default RevisionFuzzy

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/RevisionRejected.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+
+class RevisionRejected extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <p><Icon name="refresh" className="s0" />
+          <img className="u-round activity-avatar" src="" /><a>Username</a>
+          <span className="u-textWarning"><strong> rejected</strong>
+          </span>
+        a translation.</p>
+        <Well className="well-rejected">নাম</Well>
+        <p className="small u-textMuted">
+          <Icon name="clock" className="n1" /> May 21 2017 at 08:00</p>
+      </div>
+    )
+  }
+}
+
+export default RevisionRejected

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/RevisionTranslated.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Well } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
+
+class RevisionTranslated extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <p>
+          <Icon name="refresh" className="s0" />
+          <img className="u-round activity-avatar" src="" /><a>Username</a>
+          created a
+          <span className="u-textSuccess"><strong> translated </strong></span>
+        revision.</p>
+        <Well className="well-translated">নাম</Well>
+        <p className="small u-textMuted">
+          <Icon name="clock" className="n1" /> May 21 2017 at 10:00</p>
+      </div>
+    )
+  }
+}
+
+export default RevisionTranslated

server/zanata-frontend/src/frontend/app/editor/components/ActTabFeed/index.js

@@ -22,15 +22,21 @@
 import React from 'react'
 import { Well } from 'react-bootstrap'
 import Icon from '../../../components/Icon'
+import RevisionTranslated from '../ActTabFeed/RevisionTranslated.js'
+import RevisionRejected from './RevisionRejected.js'
+import RevisionFuzzy from './RevisionFuzzy.js'
+import RevisionApproved from './RevisionApproved.js'
+import RevisionComment from './RevisionComment.js'
 
 class ActTabFeed extends React.Component {
-
   render () {
     return (
       <div className="revision-box">
-        <p><Icon name="refresh" className="s1" /> <a>Username</a> created a
-          <span className="u-textSuccess"> translated</span> revision.</p>
-        <Well>নাম</Well>
+        <RevisionTranslated />
+        <RevisionRejected />
+        <RevisionComment />
+        <RevisionFuzzy />
+        <RevisionApproved />
       </div>
     )
   }

server/zanata-frontend/src/frontend/app/editor/components/ActTabLangSelect/ActTabLangSelect.story.js

@@ -2,13 +2,70 @@ import React from 'react'
 import { storiesOf } from '@kadira/storybook'
 import { action, decorateAction } from '@kadira/storybook-addon-actions'
 import ActTabLangSelect from '.'
+import { Button, ButtonToolbar } from 'react-bootstrap'
+import Icon from '../../../components/Icon'
 
 /*
  * See .storybook/README.md for info on the component storybook.
  */
 storiesOf('ActTabLangSelect', module)
     .add('default', () => (
+      <div className="act-tab-langselect">
+        <ButtonToolbar>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--primary
+            is-active">
+            <Icon name="language" className="n1" /> Current
+          </Button>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--primary">
+            <Icon name="language" className="n1" /> All
+          </Button>
+          <Button onClick={action('onClick')}
+            className="Button Button--small u-rounded Button--primary">
+            <Icon name="language" className="n1" /> Source
+          </Button>
+        </ButtonToolbar>
+      </div>
+    ))
 
-    })
-)
+.add('All', () => (
+    <div className="act-tab-langselect">
+      <ButtonToolbar>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary">
+          <Icon name="language" className="n1" /> Current
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary
+          is-active">
+          <Icon name="language" className="n1" /> All
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary">
+          <Icon name="language" className="n1" /> Source
+        </Button>
+      </ButtonToolbar>
+    </div>
+))
+
+.add('Source only', () => (
+    <div className="act-tab-langselect">
+      <ButtonToolbar>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary">
+          <Icon name="language" className="n1" /> Current
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary">
+          <Icon name="language" className="n1" /> All
+        </Button>
+        <Button onClick={action('onClick')}
+          className="Button Button--small u-rounded Button--primary
+          is-active">
+          <Icon name="language" className="n1" /> Source
+        </Button>
+      </ButtonToolbar>
+    </div>
+))
 

server/zanata-frontend/src/frontend/app/editor/components/ActTabLangSelect/index.js

@@ -29,7 +29,8 @@ class ActTabLangSelect extends React.Component {
     return (
       <div className="act-tab-langselect">
         <ButtonToolbar>
-          <Button className="Button Button--small u-rounded Button--primary">
+          <Button className="Button is-active Button--small u-rounded
+            Button--primary">
             <Icon name="language" className="n1" /> Current
           </Button>
           <Button className="Button Button--small u-rounded Button--primary">